/*
 * AVAVA Studio — Admin Dashboard HTML Template
 * Main stylesheet
 *
 * TABLE OF CONTENTS
 *  01. Design tokens
 *  01b. Light theme
 *  02. Base and reset
 *  03. Utilities and shared atoms
 *  04. App layout
 *  05. Sidebar
 *  06. Sidebar: collapsed rail
 *  07. Top bar
 *  08. Page head
 *  09. Overview grid
 *  10. Current project card
 *  11. Campaign budget card
 *  12. Files and approvals card
 *  13. Recent invoices card
 *  14. Project lead card
 *  15. Calendar card
 *  16. Next review card
 *  17. Studio report: head and KPIs
 *  18. Revenue report card
 *  19. Revenue by service card
 *  20. Top projects card
 *  21. Team activity card
 *  22. Daily notes card
 *  22b. Row actions menu and toast
 *  22c. Overview 2: shared pieces
 *  22d. Overview 2: KPI row
 *  22e. Overview 2: revenue vs expenses
 *  22f. Overview 2: monthly goal
 *  22g. Overview 2: client sources and sales funnel
 *  22h. Overview 2: top clients
 *  22i. Overview 2: team workload
 *  22j. Overview 2: recent payments
 *  22k. Overview 2: revenue by region
 *  22l. Overview 3: shared pieces
 *  22m. Overview 3: KPI cards
 *  22n. Overview 3: clients worldwide map
 *  22o. Overview 3: new vs returning
 *  22p. Overview 3: clients by industry
 *  22q. Overview 3: call planner
 *  22r. Overview 3: upcoming client calls
 *  22s. Overview 3: client satisfaction and retention watch
 *  22t. Overview 3: client directory
 *  22u. Overview 4: shared pieces
 *  22v. Overview 4: KPI cards
 *  22w. Overview 4: project timeline
 *  22x. Overview 4: pipeline
 *  22y. Overview 4: team capacity and time tracking
 *  22z. Overview 4: approvals, deadlines and profitability
 *  22za. Categories: tones and shared pieces
 *  22zb. Categories: toolbar
 *  22zc. Categories: KPI strip
 *  22zd. Categories: tree
 *  22ze. Categories: editor
 *  22zf. Categories: all categories
 *  22zg. Categories: performance treemap and needs attention
 *  22zh. Add product: layout, section heads and fields
 *  22zi. Add product: media
 *  22zj. Add product: pricing, variants, inventory, SEO and save bar
 *  22zk. Add product: readiness, status, organisation
 *  22zl. Add product: storefront preview
 *  22zm. Product list: shared pieces and toolbar
 *  22zn. Product list: KPI strip
 *  22zo. Product list: product table
 *  22zp. Product list: quick view drawer
 *  22zq. Product grid: head, groups and overlay cards
 *  22zr. Projects: layout, board and project cards
 *  22zs. Projects: summary, deadlines, team, work by type
 *  22zt. Transactions: KPI tiles and volume chart
 *  22zu. Transactions: filters, day-grouped table, drawer
 *  22zv. Transaction detail: layout, header strip, order
 *  22zw. Transaction detail: refund, money flow, activity
 *  22zx. Transaction detail: customer, card, risk, addresses
 *  22zy. Seller list: KPI row and top sellers
 *  22zz. Seller list: table, cards, applications, bulk bar, drawer
 *  22zz2. Seller detail: layout, profile header, KPI cards
 *  22zz3. Seller detail: sales heatmap, products, payouts, reviews, activity
 *  22zz4. Seller detail: sidebar
 *  22zz5. Reviews: layout, KPI cards, rating strip, sentiment by topic
 *  22zz6. Reviews: feed, review cards, sidebar
 *  22zz7. Email: toolbar, grid, folders, message list
 *  22zz8. Email: reader, reply, client context, compose
 *  22zz9. File manager: toolbar, storage, collections, locations
 *  22zz10. File manager: file list, details, uploads, share dialog
 *  22zz11. Point of sale: shift strip, catalog, variant picker
 *  22zz12. Point of sale: cart, loyalty, payment, shift activity
 *  22zz13. Chat: grid, conversation list, stream, composer, side panel
 *  22zz14. Post: summary, timeline, week strip, next up
 *  22zz15. Post: calendar, approvals, editor drawer
 *  22zz16. Calendar: layout, rail, grid
 *  22zz17. Calendar: today panel, event editor
 *  22zz18. Data List: tabs, filters, bulk bar, table
 *  22zz19. Data List: record panel
 *  22zz20. Form: header, section cards, fields, side column, action bar
 *  22zz21. Users List: stats, seats, table cells, invite dialog
 *  22zz22. User Account: header, person card, sections, danger zone
 *  22zz23. User Security: score, sections, sessions, history, summary
 *  22zz24. User Billing: seat plaque, plan, compare, cards, invoices, spend
 *  22zz25. User Notifications: plaque, matrix, digest, quiet hours, preview
 *  22zz26. User Connections: plaque, sign-in, app cards, catalog, tokens
 *  22zz27. User Profile: cover-issue hero, staff pass, bento board
 *  22zz28. User Teams: compact hero, summary, team cards and list, calendar
 *  22zz29. User Projects: portfolio summary, filters, grid, timeline, table
 *  22zz30. User Connections (profile): network summary, inner circle, people, map
 *  22zz31. Account settings: own account, public preview, strength, theme
 *  22zz32. Account settings › Security: password, two-factor, checkup
 *  22zz33. Account settings › Billing & Plans: plan, seats, payment, invoices
 *  22zz34. Account settings › Notifications: focus, channels, matrix, mutes
 *  22zz35. Account settings › Connections: apps, catalog, access, tokens
 *  22zz36. FAQ: help hero, topics, answers, guides, status
 *  22zz37. Pricing: hero, plans, savings, add-ons, comparison, questions
 *  22zz38. Blog list: cover story, toolbar, magazine, list, side column
 *  22zz39. Blog detail: cover, article, rail, contents, comments, read next
 *  22zz40. Write post: editor bar, photo drops, block editor, publishing column
 *  22zz41. Error page: states, hero, helpers, photo card, places, footer
 *  22zz42. Under maintenance: countdown, steps, updates, works, contact
 *  22zz43. Coming soon: countdown, waitlist, features, roadmap, vote, beta
 *  22zz44. Not authorized: reason hero, request access, role matrix
 *  22zz45. Update profile: progress, six steps, live preview
 *  22zz46. Change password: why plaque, three steps, options, success
 *  22zz47. Invoice list: cash flow, filters, table / cards, bulk, side column
 *  22zz48. Invoice preview: toolbar, spine sheet, slip, payment, timeline
 *  22zz49. Invoice edit: toolbar, form cards, live sheet with flash, dialogs
 *  22zz50. Invoice add: start from, editor parts, review & send, sent
 *  22zz51. Login: full-screen cover, sign-in form, magic link, welcome
 *  22zz52. Register: stepper, account / studio / team, verify, ready
 *  22zz53. Verify email: inbox, code, resend, verified, expired, already
 *  22zz54. Reset password: generator, rules, devices, 2-step, done, link errors
 *  22zz55. Forgot password: recovery path, SSO, limit, link sent, text code, admin
 *  22zz56. Two steps: attempt card, methods, ring, push, key, backup, locked, recovery
 *  22zz57. Wizard checkout: stepper, cart, delivery, payment, review, placed, summary
 *  22zz58. Wizard property listing: types, map pin, rooms, photos, calendar, preview
 *  22zz59. Wizard create deal: clients, packages, team, timeline, margin, proposal
 *  22zz60. Modal examples: cards, previews, overlay shell, palette, drawer, toast
 *  22zz61. Cards basic: page tokens and the generated card classes
 *  22zz62. Cards advanced: the generated card classes
 *  22zz63. Cards statistics: the generated tile classes
 *  22zz64. Cards analytics: the generated card classes and the drawer
 *  22zz65. Cards actions: the generated card classes
 *  22zz66. UI accordion: the generated classes, focus ring and shimmer
 *  22zz67. UI alerts: the generated classes and the entrance
 *  22zz68. UI badges: the generated classes and the live pulse
 *  22zz69. UI buttons: the generated classes, spinner and focus ring
 *  22zz70. UI carousel: the generated classes, shimmer and slide placeholders
 *  22zz71. UI collapse: the generated classes and the shimmer
 *  22zz72. UI dropdowns: the generated classes and the panel entrance
 *  22zz73. UI footer: the generated classes, spinner and bar entrance
 *  22zz74. UI list groups: the generated classes
 *  22zz75. UI modals: the generated classes and the dialog entrances
 *  22zz76. UI navbar: the generated classes and the menu entrance
 *  22zz77. UI offcanvas: the generated classes and the panel entrances
 *  22zz78. UI pagination & breadcrumbs: the generated classes, menu, spinner, skeleton
 *  22zz79. UI progress: the generated classes and the bar, ring and loader motion
 *  22zz80. UI spinners: the generated classes and the seven spinner motions
 *  22zz81. UI tabs & pills: the generated classes, menu entrance, skeleton pulse
 *  22zz82. UI toasts: the generated classes and the toast entrances
 *  22zz83. UI tooltips & popovers: the generated classes, entrance and coach ring
 *  22zz84. UI typography: the generated classes
 *  22zz85. Extended UI avatar: the generated classes
 *  22zz86. Extended UI BlockUI: the generated classes
 *  22zz87. Extended UI drag & drop: the generated classes
 *  22zz88. Extended UI media player: the generated classes
 *  22zz89. Extended UI perfect scrollbar: the generated classes
 *  22zz90. Extended UI star ratings: the generated classes
 *  22zz91. Extended UI SweetAlert2: the generated classes
 *  22zz92. Extended UI text divider: the generated classes
 *  22zz93. Extended UI timeline basic: the generated classes
 *  22zz94. Extended UI timeline fullscreen: the generated classes
 *  22zz95. Extended UI tour: the generated classes
 *  22zz96. Extended UI treeview: the generated classes
 *  22zz97. Extended UI miscellaneous: the generated classes
 *  22zz98. Icons line icons: the generated classes
 *  22zz99. Icons filled icons: the generated classes
 *  22zz100. Icons Font Awesome: the generated classes
 *  22zz101. Form inputs: the generated classes
 *  22zz102. Form selects: the generated classes
 *  22zz103. Form checkboxes & radios: the generated classes
 *  22zz104. Form custom options: the generated classes
 *  22zz105. Form editors: the generated classes
 *  22zz106. Form file upload: the generated classes
 *  22zz107. Form date pickers: the generated classes
 *  22zz108. Form sliders: the generated classes
 *  22zz109. Form switches: the generated classes
 *  22zz110. Form extras: the generated classes
 *  22zz111. Form layouts vertical: the generated classes
 *  22zz112. Form layouts horizontal: the generated classes
 *  22zz113. Form layouts sticky actions: the generated classes
 *  22zz114. Form wizard numbered: the generated classes
 *  22zz115. Form wizard icons: the generated classes
 *  22zz116. Form wizard vertical: the generated classes
 *  22zz117. Form validation: the generated classes
 *  22zz118. Tables: the generated classes
 *  22zz119. Datatables basic: the generated classes
 *  22zz120. Datatables advanced: the generated classes
 *  22zz121. Datatables row grouping: the generated classes
 *  22zz122. Datatables editable: the generated classes
 *  22zz123. Datatables extensions: the generated classes
 *  22zz124. Charts line and area: the generated classes
 *  22zz125. Charts bar: the generated classes
 *  22zz126. Charts pie and donut: the generated classes
 *  22zz127. Charts radar: the generated classes
 *  22zz128. Charts mixed: the generated classes
 *  22zz129. Charts sparklines: the generated classes
 *  22zz130. Leaflet maps: the generated classes
 *  23. Responsive: drawer sidebar (below 1024px)
 *  24. Responsive: phones
 *  24b. Print
 *  25. Reduced motion
 */

/* ==========================================================================
   01. Design tokens
   ========================================================================== */
/*
 * Theme-aware tokens. Dark is the default; [data-theme="light"] on <html>
 * overrides them (section 01b). Colours written as literals in the rules
 * below never change with the theme: they sit on the cyan budget card, the
 * light Files / Daily notes cards, photos, or are status colours.
 */
:root {
  /* Surfaces */
  --bg-page: #11131a;
  --card-from: #1b1f2a;
  --card-to: #151821;
  --surface-card: linear-gradient(180deg, var(--card-from) 0%, var(--card-to) 100%);
  --sb-from: rgba(32, 37, 50, .98);
  --sb-mid: rgba(22, 25, 34, .98);
  --sb-to: rgba(18, 20, 28, .99);
  --raised-1: #1b1e28;
  --raised-hover: #252936;
  --raised-2: #232734;
  --raised-3: #262a36;
  --line-2: #2a2e3a;
  --line-3: #2c303d;
  --divider: #232734;
  --crumb-bg: #161922;
  --crumb-hover: #1e2230;
  --search-bg: rgba(8, 9, 13, .6);
  --user-pill: #c9ccd6;
  --user-pill-hover: #d6d9e2;
  --nav-active-from: #1f2937;
  --nav-active-to: #1b1f2b;
  --glass-from: rgba(24, 27, 36, .88);
  --glass-to: rgba(14, 16, 22, .94);
  --gauge-track: #4a4e5b;
  --gauge-arc: #f7f8fa;
  --gauge-inner: #6e7382;
  --band-from: #3b3f4b;
  --band-mid: #262a35;
  --today: #2c303c;
  --seg-bg: #12141b;
  --ring-avatar: #171a23;
  --ring-team: #181b24;
  --ring-online: #15171f;
  --lead-gap: #191c26;
  --add-hover: #323746;

  /* Primary pill: active crumb, bell, chips, tabs, buttons */
  --pill-bg: #f2f3f6;
  --pill-fg: #11131a;
  --pill-hover: #ffffff;
  --contrast: #eef0f5;
  /* Unread dot on the bell: deep cyan reads on the white dark-theme bell. */
  --bell-dot: #2b8a99;
  /* Status text: green and amber read darker on the light theme. */
  --grt: oklch(0.8 0.15 155);
  --amt: oklch(0.8 0.13 70);
  --tip-bg: #202533;
  --funnel-a: #3a3f4d;

  /* Text */
  --text: #eef0f5;
  --text-strong: #ffffff;
  --text-2: #c9ccd6;
  --text-nav: #b4b9c6;
  --text-3: #a7abb8;
  --muted: #8a8f9e;
  --muted-2: #6b7080;
  --muted-3: #4b505e;
  --search-fg: #7d8394;
  --accent-fg: #9adbe6;

  /* White-alpha hairlines and tints; black-alpha shadows */
  --tint-02: rgba(255, 255, 255, .02);
  --tint-03: rgba(255, 255, 255, .03);
  --tint-035: rgba(255, 255, 255, .035);
  --tint-04: rgba(255, 255, 255, .04);
  --tint-05: rgba(255, 255, 255, .05);
  --tint-06: rgba(255, 255, 255, .06);
  --tint-07: rgba(255, 255, 255, .07);
  --tint-08: rgba(255, 255, 255, .08);
  --tint-09: rgba(255, 255, 255, .09);
  --tint-14: rgba(255, 255, 255, .14);
  --tint-18: rgba(255, 255, 255, .18);
  --shade-25: rgba(0, 0, 0, .25);
  --shade-30: rgba(0, 0, 0, .3);
  --shade-35: rgba(0, 0, 0, .35);
  --shade-45: rgba(0, 0, 0, .45);
  --shade-50: rgba(0, 0, 0, .5);
  --line: var(--tint-07);

  /* Fixed accent and ink */
  --cyan: #9adbe6;
  --cyan-light: #c4f0f6;
  --cyan-deep: #8fd3df;
  --cyan-ink: #3d5a60;
  --cyan-tint: rgba(154, 219, 230, .12);
  --ink: #11131a;
  --ink-2: #5d6270;
  --surface-light: linear-gradient(180deg, #d6d9e2, #c6cad5);

  --success: oklch(0.8 0.15 155);
  --warning: oklch(0.8 0.13 70);
  --warning-tint: rgba(240, 180, 90, .12);
  --danger: oklch(0.78 0.13 35);
  --danger-tint: rgba(240, 120, 90, .12);

  /* World map (Overview 3): countries run from --map-lo to --map-hi */
  --map-bg: #12141b;
  --map-bd: rgba(255, 255, 255, .06);
  --map-land: #222632;
  --map-lo: #2a3140;
  --map-hi: #9adbe6;
  --map-stroke: #12141b;
  --map-glass: rgba(17, 19, 26, .74);
  --map-gbd: rgba(255, 255, 255, .08);
  --map-zb: rgba(27, 31, 42, .92);
  --map-zbh: #262a36;
  --map-zbd: rgba(255, 255, 255, .1);
  --map-grat: rgba(255, 255, 255, .035);
  --map-sph: rgba(255, 255, 255, .06);
  --map-track: rgba(255, 255, 255, .08);
  --map-tile: rgba(255, 255, 255, .04);

  --radius-card: 26px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* ==========================================================================
   01b. Light theme
   ========================================================================== */
[data-theme="light"] {
  --bg-page: #e8ecf1;
  --card-from: #ffffff;
  --card-to: #fbfcfd;
  --sb-from: #fbfcfe;
  --sb-mid: #f6f8fb;
  --sb-to: #f1f4f8;
  --raised-1: #ffffff;
  --raised-hover: #eef1f5;
  --raised-2: #e9edf2;
  --raised-3: #e3e7ee;
  --line-2: #dfe3ea;
  --line-3: #d8dde5;
  --divider: #e9edf2;
  --crumb-bg: #ffffff;
  --crumb-hover: #eef1f5;
  --search-bg: rgba(20, 30, 50, .04);
  --user-pill: #ffffff;
  --user-pill-hover: #eef1f5;
  --nav-active-from: #eaf6f8;
  --nav-active-to: #f3f7f9;
  --glass-from: rgba(255, 255, 255, .86);
  --glass-to: rgba(244, 246, 250, .94);
  --gauge-track: #d5dbe3;
  --gauge-arc: #1b2433;
  --gauge-inner: #9aa3b0;
  --band-from: #dcebf0;
  --band-mid: #e8f1f4;
  --today: #d6eef2;
  --seg-bg: #f1f4f8;
  --ring-avatar: #ffffff;
  --ring-team: #ffffff;
  --ring-online: #ffffff;
  --lead-gap: #ffffff;
  --add-hover: #d0d6df;

  --pill-bg: #1b2433;
  --pill-fg: #ffffff;
  --pill-hover: #2a3547;
  --contrast: #1b2433;
  --bell-dot: #9adbe6;
  --grt: oklch(0.55 0.14 155);
  --amt: oklch(0.58 0.13 70);
  --tip-bg: #ffffff;
  --funnel-a: #c9d0da;

  --text: #11131a;
  --text-strong: #11131a;
  --text-2: #3a4150;
  --text-nav: #4b5263;
  --text-3: #5b6272;
  --muted: #6b7280;
  --muted-2: #7b8291;
  --muted-3: #b0b6c0;
  --search-fg: #7b8291;
  --accent-fg: #2b8a99;

  --tint-02: rgba(20, 30, 50, .028);
  --tint-03: rgba(20, 30, 50, .042);
  --tint-035: rgba(20, 30, 50, .049);
  --tint-04: rgba(20, 30, 50, .056);
  --tint-05: rgba(20, 30, 50, .07);
  --tint-06: rgba(20, 30, 50, .084);
  --tint-07: rgba(20, 30, 50, .098);
  --tint-08: rgba(20, 30, 50, .112);
  --tint-09: rgba(20, 30, 50, .12);
  --tint-14: rgba(20, 30, 50, .12);
  --tint-18: rgba(20, 30, 50, .12);
  --shade-25: rgba(30, 45, 70, .071);
  --shade-30: rgba(30, 45, 70, .086);
  --shade-35: rgba(30, 45, 70, .1);
  --shade-45: rgba(30, 45, 70, .129);
  --shade-50: rgba(30, 45, 70, .143);

  --map-bg: #f1f4f8;
  --map-bd: rgba(20, 30, 50, .08);
  --map-land: #dde2e9;
  --map-lo: #cfe6eb;
  --map-hi: #2b8a99;
  --map-stroke: #f1f4f8;
  --map-glass: rgba(255, 255, 255, .82);
  --map-gbd: rgba(20, 30, 50, .08);
  --map-zb: #ffffff;
  --map-zbh: #eef1f5;
  --map-zbd: rgba(20, 30, 50, .12);
  --map-grat: rgba(20, 30, 50, .05);
  --map-sph: rgba(20, 30, 50, .08);
  --map-track: rgba(20, 30, 50, .08);
  --map-tile: rgba(20, 30, 50, .04);
}

/* ==========================================================================
   02. Base and reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: "Urbanist", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background .3s;
}

h1, h2, h3, h4, p, dl, dd, figure {
  margin: 0;
}

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

img,
svg {
  display: block;
}

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

a:hover {
  color: #c4eef5;
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

th {
  font-weight: inherit;
  text-align: left;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

/* Cards the title chips jump to: stop below the top edge and glow once. */
.jump-target {
  scroll-margin-top: 20px;
}

.jump-target:target,
.is-flash {
  animation: jump-glow 1.6s var(--ease-out);
}

@keyframes jump-glow {
  0%,
  35% {
    box-shadow: 0 0 0 3px rgba(154, 219, 230, .75), 0 0 32px rgba(154, 219, 230, .35);
  }
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ==========================================================================
   03. Utilities and shared atoms
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 600;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
  color: var(--pill-fg);
}

/* Positioned so screen-reader-only text inside stays in the scroll box. */
.scroll-x {
  position: relative;
  overflow-x: auto;
}

.dot {
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.dot--cyan {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.dot--amber {
  background: var(--warning);
  box-shadow: 0 0 8px var(--warning);
}

.dot--green {
  width: 6px;
  height: 6px;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 var(--tint-06), 0 20px 40px var(--shade-25);
}

.card__title {
  font-size: 20px;
  font-weight: 500;
}

.card__sub {
  font-size: 13.5px;
  color: var(--muted);
}

.card__row {
  display: flex;
  align-items: center;
}

.text-link {
  margin-left: auto;
  font-size: 14px;
}

.more-link {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
}

.more-link:hover {
  color: var(--ink);
}

.more-link span {
  font-size: 18px;
}

.more-link--dark,
.more-link--dark:hover {
  color: var(--text);
}

.icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--raised-1);
  color: var(--text);
}

.icon-btn:hover {
  background: var(--raised-hover);
}

.icon-btn--light {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.icon-btn--light:hover {
  background: var(--pill-hover);
}

.icon-btn__dot {
  position: absolute;
  top: 13px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bell-dot);
  border: 2px solid var(--pill-bg);
}

.pill-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 13.5px;
  white-space: nowrap;
}

.pill-btn:hover {
  background: var(--tint-05);
  color: var(--text-strong);
  text-decoration: none;
}

.pill-btn--light,
.pill-btn--light:hover {
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.pill-btn--light:hover {
  background: var(--pill-hover);
}

.count-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tint-05);
  color: var(--text-3);
  font-size: 13px;
}

/* Initial avatars share one palette across cards. */
.av--ar { background: #e9ebf0; }
.av--ol { background: var(--cyan); }
.av--jr { background: #a7abb8; }
.av--ap { background: #cdd1dc; }
.av--lp { background: #8a8f9e; }
.av--so { background: var(--cyan-light); }

/* ==========================================================================
   04. App layout
   ========================================================================== */
.app {
  display: flex;
  min-height: 100vh;
  background: var(--bg-page);
}

.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px 24px 24px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ==========================================================================
   05. Sidebar
   ========================================================================== */
.sidebar-wrap {
  position: sticky;
  top: 0;
  display: flex;
  flex-shrink: 0;
  height: 100vh;
  padding: 14px 0 14px 14px;
}

.sidebar {
  position: relative;
  flex-shrink: 0;
  width: 320px;
  padding: 1px;
  border-radius: 32px;
  background: linear-gradient(160deg, rgba(154, 219, 230, .55), var(--tint-06) 28%, var(--tint-03) 70%, rgba(154, 219, 230, .25));
  box-shadow: 0 30px 70px var(--shade-50);
  transition: width .2s;
}

.sidebar__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: 18px 14px 14px;
  border-radius: 31px;
  background: linear-gradient(180deg, var(--sb-from) 0%, var(--sb-mid) 40%, var(--sb-to) 100%);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.sidebar__inner::-webkit-scrollbar {
  display: none;
}

.sidebar__glow {
  position: absolute;
  left: -60px;
  top: -80px;
  width: 260px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(154, 219, 230, .22), transparent);
  pointer-events: none;
}

/* Pinned top: brand and search stay put, the menu scrolls under them */
.sidebar__top {
  position: sticky;
  top: -18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex-shrink: 0;
  margin: -18px -14px 0;
  padding: 18px 14px 14px;
  background: var(--sb-from);
}

/* A soft edge where the menu slides under the search */
.sidebar__top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 18px;
  background: linear-gradient(var(--sb-from), transparent);
  pointer-events: none;
}

.sidebar__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 2px 4px;
}

.logo {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #050608;
  box-shadow: 0 0 0 1px var(--tint-08), 0 0 24px rgba(154, 219, 230, .25);
}

.logo__sq {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #fff;
}

.logo__sq--a { left: 15px; top: 20px; }
.logo__sq--b { left: 24px; top: 12px; }

.logo__sq--c {
  left: 24px;
  top: 27px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}

.brand:hover {
  color: var(--text);
  text-decoration: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.15;
}

.brand__name {
  font-size: 20px;
  letter-spacing: .14em;
}

.brand__sub {
  font-size: 10.5px;
  letter-spacing: .28em;
  color: var(--muted);
}

.sidebar__toggle,
.sidebar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border: 1px solid var(--tint-08);
  border-radius: 12px;
  background: var(--tint-03);
  color: var(--text-3);
}

.sidebar__toggle:hover,
.sidebar__close:hover {
  background: var(--tint-07);
  color: var(--text-strong);
}

.sidebar__close,
.sidebar__expand {
  display: none;
}

.sidebar__expand {
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}

.stack {
  display: flex;
}

.stack__av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid #92d5e1;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
}

.stack__av + .stack__av {
  margin-left: -9px;
}

img.stack__av {
  object-fit: cover;
}

/* Search */
.side-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  height: 44px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--tint-06);
  border-radius: 999px;
  background: var(--search-bg);
  box-shadow: inset 0 2px 6px var(--shade-35);
  color: var(--search-fg);
  font-size: 14px;
}

.side-search svg {
  flex-shrink: 0;
}

.side-search:focus-within {
  border-color: rgba(154, 219, 230, .45);
}

.side-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.side-search__input::placeholder {
  color: var(--search-fg);
  opacity: 1;
}

.side-search__kbd {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--tint-06);
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
}

/* Search results: the pages of the menu that match, under the field */
.side-search {
  position: relative;
}

.side-find {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  max-height: min(420px, 62vh);
  padding: 6px;
  border: 1px solid var(--tint-08);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
  box-shadow: inset 0 1px 0 var(--tint-06), 0 24px 50px var(--shade-50);
}

.side-find[hidden] {
  display: none;
}

.side-find__list {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.side-find__opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
}

.side-find__opt[aria-selected="true"] {
  background: var(--tint-06);
  box-shadow: inset 2px 0 0 var(--cyan);
}

.side-find__name {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.side-find__name mark {
  border-radius: 3px;
  background: rgba(154, 219, 230, .22);
  color: inherit;
}

.side-find__path {
  color: var(--text-3);
  font-size: 12px;
}

.side-find__here {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}

.side-find__empty {
  margin: 0;
  padding: 12px;
  color: var(--text-2);
  font-size: 13px;
}

.side-find__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0;
  padding: 8px 8px 4px;
  border-top: 1px solid var(--tint-06);
  color: var(--text-3);
  font-size: 11.5px;
}

.side-find__hint kbd {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--tint-06);
  color: var(--text-2);
  font-family: inherit;
  font-size: 11px;
}

/* Navigation */
.nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.nav__section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px 6px;
  border: 0;
  background: transparent;
  color: var(--muted-2);
}

.nav__head:hover {
  color: var(--text-2);
}

.nav__title {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__count {
    padding: 1px 6px;
  border-radius: 999px;
  background: var(--tint-05);
  font-size: 10.5px;
}

.nav__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.nav__headchev {
  flex-shrink: 0;
  transition: transform .2s;
}

.nav__head[aria-expanded="false"] .nav__headchev {
  transform: rotate(-90deg);
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 14px 0 7px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  color: var(--text-nav);
  font-size: 14.5px;
  text-align: left;
  white-space: nowrap;
}

.nav__link:hover {
  background: var(--tint-04);
  border-color: var(--tint-06);
  color: var(--text-strong);
  text-decoration: none;
}

.nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid var(--tint-06);
  border-radius: 12px;
  background: var(--tint-035);
}

.nav__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 24px;
  height: 22px;
  margin-left: auto;
  padding: 0 7px;
  border: 1px solid rgba(154, 219, 230, .25);
  border-radius: 999px;
  background: var(--cyan-tint);
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 600;
}

.nav__chev {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
  opacity: .6;
  transition: transform .2s;
}

.nav__badge + .nav__chev {
  margin-left: 0;
}

.nav__link[aria-expanded="true"] .nav__chev {
  transform: rotate(180deg);
}

/* Active item */
.nav__item.is-active > .nav__link {
  height: 48px;
  border-color: transparent;
  background: linear-gradient(90deg, var(--nav-active-from), var(--nav-active-to)) padding-box, linear-gradient(90deg, rgba(154, 219, 230, .7), rgba(154, 219, 230, .05) 70%) border-box;
  box-shadow: 0 8px 28px rgba(154, 219, 230, .12);
  color: var(--text-strong);
  font-weight: 600;
}

.nav__item.is-active > .nav__link::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--cyan);
  box-shadow: 0 0 14px 2px rgba(154, 219, 230, .7);
}

.nav__item.is-active .nav__icon {
  border: 0;
  background: linear-gradient(135deg, var(--cyan-light), var(--cyan-deep));
  box-shadow: 0 0 18px rgba(154, 219, 230, .45);
  color: #0d0f15;
}

.nav__item.is-active .nav__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

.nav__item.is-active .nav__badge {
  border: 0;
  background: var(--cyan);
  color: #0d0f15;
  font-weight: 700;
}

.nav__item.is-active .nav__chev {
  opacity: 1;
  color: var(--accent-fg);
}

.nav__item.is-active .nav__chev svg {
  stroke-width: 2.2;
}

/* Submenu */
.nav__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* 6px from the design plus the 2px list gap the submenu sits outside of. */
  margin: 8px 4px 8px;
  padding: 6px;
  border: 1px solid var(--tint-08);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(154, 219, 230, .10), var(--tint-03) 50%, var(--tint-02));
  box-shadow: inset 0 1px 0 var(--tint-06);
}

.nav__sublink {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  color: var(--text-3);
  font-size: 14.5px;
}

.nav__sublink svg {
  flex-shrink: 0;
  opacity: .9;
}

.nav__sublink:hover,
.nav__sublink[aria-current="page"] {
  background: var(--tint-05);
  color: var(--text-strong);
  text-decoration: none;
}

.nav__sublink[aria-current="page"]::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px 2px rgba(154, 219, 230, .8);
}

/* Third level: a toggle row and its small nested list */
.nav__subtoggle {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}

.nav__subtoggle:hover {
  background: var(--tint-05);
  color: var(--text-strong);
}

.nav__kidchev {
  margin-left: auto;
  opacity: .7;
  transition: transform .2s;
}

.nav__subtoggle[aria-expanded="true"] .nav__kidchev {
  transform: rotate(180deg);
}

/* Open and holding the current page: painted in the brand cyan, like the
   icon of the active top item, so the path to the page reads at a glance */
.nav__subtoggle[aria-expanded="true"] {
  background: var(--tint-05);
  color: var(--text-strong);
}

.nav__subtoggle.is-current,
.nav__subtoggle.is-current:hover {
  background: linear-gradient(135deg, var(--cyan-light), var(--cyan-deep));
  box-shadow: 0 6px 18px rgba(154, 219, 230, .3);
  color: #0d0f15;
  font-weight: 600;
}

.nav__subtoggle.is-current svg { opacity: 1; }
.nav__subtoggle.is-current .nav__kidchev { opacity: 1; }

.nav__kids {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px;
  padding: 4px;
  border: 1px solid var(--tint-08);
  border-radius: 18px;
  background: var(--tint-03);
  box-shadow: inset 0 1px 0 var(--tint-06);
}

.nav__kidlink {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  color: var(--text-3);
  font-size: 14px;
}

.nav__kidlink svg {
  flex-shrink: 0;
  opacity: .9;
}

.nav__kidlink:hover,
.nav__kidlink[aria-current="page"] {
  background: var(--tint-05);
  color: var(--text-strong);
  text-decoration: none;
}

.nav__kidlink[aria-current="page"]::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px 2px rgba(154, 219, 230, .8);
}

/* Footer: next review and user */
.sidebar__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  margin-top: auto;
}

/* Pinned bottom: the review card and the user stay put too */
.sidebar__foot {
  position: sticky;
  bottom: -14px;
  z-index: 2;
  margin: auto -14px -14px;
  padding: 14px;
  background: var(--sb-to);
}

/* A soft edge where the menu slides under the review card */
.sidebar__foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
  background: linear-gradient(transparent, var(--sb-to));
  pointer-events: none;
}

.side-review {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 14px 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--cyan), #7cc4d2);
  color: #0d0f15;
  overflow: hidden;
}

.side-review__ring {
  position: absolute;
  right: -30px;
  top: -30px;
  width: 110px;
  height: 110px;
  border: 18px solid var(--tint-18);
  border-radius: 50%;
}

.side-review__over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  opacity: .75;
}

.side-review__title {
  font-size: 17px;
  font-weight: 600;
}

.side-review__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stack--sm .stack__av {
  width: 24px;
  height: 24px;
  font-size: 9.5px;
}

.stack--sm .stack__av + .stack__av {
  margin-left: -7px;
}


.side-review__join {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: 999px;
  background: #0d0f15;
  color: #fff;
  font-size: 12.5px;
}

.side-review__join:hover {
  background: #1b1e28;
  color: #fff;
  text-decoration: none;
}

.side-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--tint-06);
  border-radius: 22px;
  background: var(--tint-035);
}

.side-user__av {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e9ebf0, #b9bdc9);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.side-user__photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.side-user__online {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  border: 2px solid var(--ring-online);
  border-radius: 50%;
  background: oklch(0.78 0.15 155);
  box-shadow: 0 0 8px oklch(0.78 0.15 155);
}

.side-user__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.side-user__name {
  font-size: 14.5px;
  font-weight: 500;
}

.side-user__role {
  font-size: 12.5px;
  color: var(--muted);
}

.side-user__out {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border: 1px solid var(--tint-08);
  border-radius: 12px;
  color: var(--text-2);
}

.side-user__out:hover {
  background: var(--tint-06);
  color: var(--text-strong);
}

.drawer-backdrop {
  display: none;
}

/* ==========================================================================
   06. Sidebar: collapsed rail (desktop only)
   ========================================================================== */
@media (min-width: 1024px) {
  .sidebar.is-collapsed {
    width: 78px;
  }

  .is-collapsed .sidebar__inner {
    padding: 18px 0 14px;
    align-items: center;
  }

  .is-collapsed .brand,
  .is-collapsed .sidebar__toggle,
  .is-collapsed .side-search,
  .is-collapsed .sidebar__foot,
  .is-collapsed .nav__head,
  .is-collapsed .nav__label,
  .is-collapsed .nav__chev,
  .is-collapsed .nav__sub {
    display: none;
  }

  .is-collapsed .sidebar__head {
    padding: 0;
  }

  .is-collapsed .sidebar__top {
    margin: -18px 0 0;
    padding: 18px 0 14px;
  }

  .is-collapsed .sidebar__expand {
    display: block;
  }

  .is-collapsed .nav {
    gap: 0;
    align-items: center;
  }

  .is-collapsed .nav__section {
    align-items: center;
  }

  .is-collapsed .nav__section + .nav__section::before {
    content: "";
    width: 26px;
    height: 1px;
    margin: 12px 0;
    background: var(--line-3);
  }

  .is-collapsed .nav__list {
    gap: 6px;
    align-items: center;
  }

  .is-collapsed .nav__link,
  .is-collapsed .nav__item.is-active > .nav__link {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    color: var(--text-3);
    font-weight: 400;
  }

  .is-collapsed .nav__link:hover {
    border-color: transparent;
    background: var(--tint-05);
    color: var(--text-strong);
  }

  .is-collapsed .nav__icon,
  .is-collapsed .nav__item.is-active .nav__icon {
    width: auto;
    height: auto;
    border: 0;
    background: none;
    box-shadow: none;
    color: inherit;
  }

  .is-collapsed .nav__icon svg {
    width: 19px;
    height: 19px;
  }

  .is-collapsed .nav__item.is-active > .nav__link {
    border: 0;
    background: linear-gradient(135deg, var(--cyan-light), var(--cyan-deep));
    box-shadow: 0 0 18px rgba(154, 219, 230, .45);
    color: #0d0f15;
  }

  .is-collapsed .nav__item.is-active > .nav__link::before {
    display: none;
  }

  /* A badge shrinks to a glowing dot. */
  .is-collapsed .nav__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 0;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
    font-size: 0;
    overflow: hidden;
  }

  .is-collapsed .nav__item.is-active .nav__badge {
    display: none;
  }
}

/* ==========================================================================
   07. Top bar
   ========================================================================== */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}

.topbar__menu {
  display: none;
}

.crumbs {
  padding: 6px 8px 6px 6px;
  border: 1px solid var(--raised-3);
  border-radius: 999px;
  background: var(--crumb-bg);
}

.crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.crumbs__list li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.crumbs__sep {
  color: var(--muted-3);
}

.crumbs__link {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--text-3);
  font-size: 14.5px;
}

.crumbs__link:hover {
  background: var(--crumb-hover);
  color: var(--text-strong);
  text-decoration: none;
}

.crumbs__current {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 14.5px;
  font-weight: 500;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.user-pill {
  border: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 24px 0 4px;
  border-radius: 999px;
  background: var(--user-pill);
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.user-pill:hover {
  background: var(--user-pill-hover);
  color: var(--ink);
  text-decoration: none;
}

.user-pill__photo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e9ebf0;
  object-fit: cover;
}

/* Theme toggle: the moon switches to light, the sun back to dark. */
.theme-btn {
  border: 1px solid var(--tint-08);
  transition: transform .3s ease;
}

.theme-btn:hover {
  transform: rotate(-20deg);
}

.theme-btn__sun,
[data-theme="light"] .theme-btn__moon {
  display: none;
}

[data-theme="light"] .theme-btn__sun {
  display: block;
}

/* Notifications: the bell opens a panel with the latest updates. */
.pop {
  position: relative;
  z-index: 40;
}

/* Top bar menus open over the title tools below them. */
.topbar .pop {
  z-index: 50;
}

.pop__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(380px, calc(100vw - 24px));
  padding: 18px 16px 12px;
  border: 1px solid var(--tint-08);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
  box-shadow: inset 0 1px 0 var(--tint-06), 0 30px 60px var(--shade-50);
  animation: notify-in .2s var(--ease-out);
}

/* Bridges the gap under the bell so the pointer can travel to the panel. */
.pop__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}

@keyframes notify-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.notify__head {
  display: flex;
  align-items: center;
  padding: 0 4px 10px;
}

.notify__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 500;
}

.notify__count {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(154, 219, 230, .14);
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 400;
}

.notify__more {
  margin-left: auto;
  font-size: 13.5px;
}

.notify__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notify__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--text);
}

.notify__item:hover {
  border-color: var(--tint-06);
  background: var(--tint-04);
  color: var(--text);
  text-decoration: none;
}

.notify__photo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 2px solid var(--card-from);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(154, 219, 230, .35);
  object-fit: cover;
}

.notify__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.notify__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notify__new {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.notify__name {
  font-size: 14.5px;
  font-weight: 500;
}

.notify__time {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted-2);
  white-space: nowrap;
}

/* Long messages stop after two lines. */
.notify__text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-3);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Profile menu: a card with a second card peeking out underneath. */
.pmenu__panel {
  width: min(256px, calc(100vw - 24px));
  padding: 20px;
  overflow: visible;
}

.pmenu__panel::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -12px;
  z-index: -1;
  height: 40px;
  border: 1px solid var(--tint-07);
  border-radius: 0 0 22px 22px;
  background: var(--card-to);
  box-shadow: 0 10px 24px var(--shade-25);
}

.pmenu__who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
  line-height: 1.3;
}

.pmenu__name {
  font-size: 16px;
  font-weight: 600;
}

.pmenu__role {
  font-size: 13px;
  color: var(--muted);
}

.pmenu__sep {
  height: 1px;
  margin: 14px 4px;
  border: 0;
  background: var(--tint-07);
}

.pmenu__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pmenu__item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  margin: 0 -8px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--text-2);
  font-size: 15px;
}

.pmenu__item svg {
  flex-shrink: 0;
  opacity: .85;
}

.pmenu__item:hover,
.pmenu__item:focus-visible {
  background: var(--tint-05);
  color: var(--text-strong);
  text-decoration: none;
}

/* ==========================================================================
   08. Page head
   ========================================================================== */
.page-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 12px;
  margin-bottom: 4px;
  padding-left: 10px;
}

.page-head__title {
  font-size: 46px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.page-head__range {
  font-size: 16px;
  color: var(--text-3);
}

.page-head__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text-2);
  font-size: 14px;
}

a.chip {
  transition: background .2s, border-color .2s;
}

a.chip:hover {
  border-color: var(--tint-09);
  background: var(--tint-07);
  color: var(--text-strong);
  text-decoration: none;
}

a.chip--light:hover {
  background: var(--pill-hover);
  color: var(--pill-fg);
}

.chip--light {
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 500;
}

/* ==========================================================================
   09. Overview grid
   ========================================================================== */
.ov {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
}

.ov__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 2.6 1 620px;
  min-width: 0;
}

.ov__top {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ov__stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 300px;
  min-width: 0;
}

.ov__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 300px;
  min-width: 0;
}

@media (hover: hover) {
  .card--lift {
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .card--lift:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 var(--tint-08), 0 28px 50px var(--shade-35);
  }
}

/* ==========================================================================
   10. Current project card
   ========================================================================== */
.project {
  position: relative;
  flex: 1.5 1 340px;
  min-height: 636px;
  border-radius: 24px;
  background: #cdd1dc;
  color: var(--ink-2);
  overflow: hidden;
}

.project__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.project__text {
  position: absolute;
  left: 30px;
  top: 24px;
  right: 90px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink);
}

.project__over {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #eef0f5;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
}

.project__name {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.05;
}

.project__tags {
  font-size: 21px;
}

.project__open {
  position: absolute;
  right: 18px;
  top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 10px 24px var(--shade-30);
  color: #fff;
}

.project__open:hover {
  background: #262a36;
  color: #fff;
}

.project__gauges {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 22px 18px 18px;
  border: 1px solid var(--tint-09);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--glass-from), var(--glass-to));
  box-shadow: inset 0 1px 0 var(--tint-08), 0 20px 40px var(--shade-35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text);
}

.gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.gauge__dial {
  position: relative;
  display: block;
  width: min(126px, 100%);
  aspect-ratio: 1;
}

/* Inline on purpose: the line box adds 4px under the ring, as in the design. */
.gauge__svg {
  display: inline;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gauge__track,
.gauge__arc,
.gauge__inner {
  fill: none;
}

.gauge__track {
  stroke: var(--gauge-track);
  stroke-width: 9;
}

.gauge__arc {
  stroke: var(--gauge-arc);
  stroke-width: 9;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35));
  animation: arc-in 1.4s var(--ease-out) .12s both;
}

.gauge__inner {
  stroke: var(--gauge-inner);
  stroke-width: 5;
  stroke-linecap: round;
  animation: arc-in 1.6s var(--ease-out) .27s both;
}

/* Arcs grow from zero to the value set in the markup. */
@keyframes arc-in {
  from {
    stroke-dasharray: 0 400;
  }
}

.gauge__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.gauge__label {
  margin-top: 6px;
  font-size: 19px;
}

.gauge__sub {
  margin-top: -4px;
  font-size: 15px;
  color: var(--muted);
  text-align: center;
}

/* ==========================================================================
   11. Campaign budget card
   ========================================================================== */
.budget {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 22px 22px 16px;
  border-radius: var(--radius-card);
  background: radial-gradient(80% 70% at 100% 0%, rgba(255, 255, 255, .45), transparent 60%), linear-gradient(135deg, #a9e3ec, var(--cyan-deep));
  box-shadow: 0 20px 50px rgba(154, 219, 230, .18);
  color: var(--ink);
  overflow: hidden;
}

.budget__ring {
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 200px;
  height: 200px;
  border: 28px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  pointer-events: none;
}

.budget__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.budget__logo {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #050608;
}

.budget__sq {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #fff;
}

.budget__sq--a { left: 17px; top: 24px; }
.budget__sq--b { left: 28px; top: 15px; }

.budget__total {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: #050608;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}

.budget__open {
  display: flex;
  margin-left: auto;
  color: var(--ink);
}

.budget__open:hover {
  color: #000;
}

.budget__head,
.budget__meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 6px;
}

.budget__title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
}

.budget__sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 19px;
  color: var(--cyan-ink);
}

.budget__chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .1);
  color: var(--ink);
  font-size: 12.5px;
}

.budget__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 54px;
  padding: 0 4px;
  border-left: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
}

/* Spent share of the bar: $30.7k of $48k on 76% of the track. */
.budget__spent {
  display: block;
  flex-shrink: 0;
  width: 48.6%;
  height: 40px;
  border-radius: 999px 6px 6px 999px;
  background: linear-gradient(90deg, var(--ink) 40%, #3c5e66);
  animation: bar-in 1.2s var(--ease-out) .12s both;
}

@keyframes bar-in {
  from {
    width: 0;
  }
}

.budget__mark {
  display: block;
  flex-shrink: 0;
  width: 2px;
  height: 54px;
  background: var(--ink);
}

.budget__free {
  display: block;
  flex: 1;
  height: 40px;
  background: repeating-linear-gradient(135deg, var(--ink) 0 1.5px, transparent 1.5px 6px);
}

.budget__legend {
  display: flex;
  justify-content: space-between;
  padding: 4px 40px 0 10px;
}

.budget__legend div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.budget__legend dt {
  font-size: 15px;
}

.budget__legend dd {
  font-size: 26px;
  font-weight: 500;
}

/* ==========================================================================
   12. Files and approvals card
   ========================================================================== */
.files {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 20px 24px 14px;
  border-radius: var(--radius-card);
  background: var(--surface-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  color: var(--ink);
}

.files__head {
  display: flex;
  align-items: center;
}

.files__title {
  font-size: 22px;
  font-weight: 500;
}

.files__count {
  margin-left: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cyan);
  font-size: 13px;
  white-space: nowrap;
}

.files__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.files__row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 -8px;
  padding: 4px 8px;
  border-radius: 20px;
  transition: background .2s;
}

.files__row:hover {
  background: rgba(255, 255, 255, .35);
}

.files__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: #262934;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.files__body {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 10px;
  flex: 1;
  min-width: 0;
  border-bottom: 1px solid #b3b8c5;
}

.files__row:last-child .files__body {
  border-bottom: 0;
}

.files__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.files__name {
  font-size: 18px;
}

.files__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 2px;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}

.files__ok {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cyan);
  font-size: 12px;
}

.files__more {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #b9bdc9;
  color: var(--ink);
  font-size: 16px;
  letter-spacing: 1px;
}

.files__more:hover {
  background: #a6abb9;
}

/* ==========================================================================
   13. Recent invoices card
   ========================================================================== */
.inv {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 24px 10px;
}

.inv__head {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
}

.inv .card__title {
  font-size: 21px;
}

.inv__out {
  margin-left: 14px;
  font-size: 13.5px;
  color: var(--text-3);
}

.inv__out strong {
  color: var(--accent-fg);
  font-weight: 600;
}

/* Rows use the prototype grid; the table keeps its semantics. */
.inv__table,
.inv__table tbody {
  display: block;
  min-width: 640px;
}

.inv__table tr {
  display: grid;
  grid-template-columns: minmax(170px, 1.6fr) minmax(90px, 1.2fr) minmax(90px, 1.1fr) minmax(110px, 1.4fr) minmax(90px, 1fr) 40px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}

.inv__table tr + tr {
  border-top: 1px solid var(--raised-3);
}

.inv__table th,
.inv__table td {
  padding: 0;
  font-size: 16px;
}

.inv__table .inv__muted {
  font-size: 14px;
  color: var(--text-3);
}

.inv__client {
  display: flex;
  align-items: center;
  gap: 14px;
}

.inv__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--user-pill);
  color: var(--ink);
}

.pay-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 14px 4px 10px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
}

.pay-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.pay-pill--paid {
  background: var(--cyan-tint);
  color: var(--accent-fg);
}

.pay-pill--paid .pay-pill__dot {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.pay-pill--pending {
  background: var(--warning-tint);
  color: oklch(0.82 0.12 70);
}

.pay-pill--pending .pay-pill__dot {
  background: var(--warning);
  box-shadow: 0 0 8px var(--warning);
}

.dots-btn {
  width: 100%;
  padding: 1px 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  letter-spacing: 1px;
}

/* ==========================================================================
   14. Project lead card
   ========================================================================== */
.lead {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 18px 18px;
}

.lead__title {
  margin-left: 4px;
}

.lead__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lead__ring {
  display: block;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--cyan-light), rgba(154, 219, 230, .25) 45%, var(--tint-08) 70%, var(--cyan));
  box-shadow: 0 0 22px rgba(154, 219, 230, .18);
}

.lead__gap {
  display: block;
  padding: 4px;
  border-radius: 50%;
  background: var(--lead-gap);
}

.lead__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.lead__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.lead__name {
  font-size: 21px;
}

.lead__role {
  font-size: 17px;
  color: var(--muted);
}

.lead__edit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.lead__edit:hover {
  background: var(--pill-hover);
  color: var(--pill-fg);
}

/* ==========================================================================
   15. Calendar card
   ========================================================================== */
.cal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 12px 16px;
}

.cal__head {
  display: flex;
  align-items: center;
  padding: 0 12px 10px;
}

.cal__title {
  font-size: 23px;
  word-spacing: 4px;
}

.cal__nav {
  padding: 1px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 20px;
}

.cal__nav:hover {
  background: var(--tint-05);
}

.cal__prev {
  margin-left: auto;
}

.cal__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 2px 6px;
  font-size: 16px;
  text-align: center;
}

.cal__we {
  color: var(--accent-fg);
}

.cal__grid {
  display: flex;
  flex-direction: column;
}

.cal__week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* Selection band: from the selected day to Saturday of that week. */
.cal__band {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--band-from), var(--band-mid) 70%, var(--line-2));
  box-shadow: 0 6px 14px var(--shade-45);
}

.cal__week[data-band-start] .cal__band { display: block; }
.cal__week[data-band-start="0"] .cal__band { left: 0; }
.cal__week[data-band-start="1"] .cal__band { left: 14.286%; }
.cal__week[data-band-start="2"] .cal__band { left: 28.571%; }
.cal__week[data-band-start="3"] .cal__band { left: 42.857%; }
.cal__week[data-band-start="4"] .cal__band { left: 57.143%; }
.cal__week[data-band-start="5"] .cal__band { left: 71.429%; }
.cal__week[data-band-start="6"] .cal__band { left: 85.714%; }
.cal__week[data-band-len="1"] .cal__band { width: 14.286%; }
.cal__week[data-band-len="2"] .cal__band { width: 28.571%; }
.cal__week[data-band-len="3"] .cal__band { width: 42.857%; }
.cal__week[data-band-len="4"] .cal__band { width: 57.143%; }
.cal__week[data-band-len="5"] .cal__band { width: 71.429%; }
.cal__week[data-band-len="6"] .cal__band { width: 85.714%; }

.cal__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--contrast);
}

.cal__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(44px, 100%);
  height: 44px;
  border-radius: 999px;
  font-size: 16px;
}

.cal__day--weekend {
  color: var(--accent-fg);
}

.cal__day--out {
  color: var(--muted-3);
}

.cal__day:focus-visible {
  outline: 0;
}

.cal__day:focus-visible .cal__num {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.cal__day.is-today .cal__num {
  width: calc(100% - 4px);
  background: var(--today);
  font-weight: 600;
}

.cal__day.is-selected .cal__num {
  width: calc(100% - 8px);
  height: 36px;
  background: var(--cyan);
  color: var(--ink);
  font-weight: 600;
}

.cal__ev {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
}

.cal__ev--cyan { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.cal__ev--light { background: var(--contrast); box-shadow: 0 0 6px var(--contrast); }
.cal__ev--amber { background: var(--warning); box-shadow: 0 0 6px var(--warning); }

.agenda {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 4px 0;
  padding: 14px 16px;
  border: 1px solid var(--tint-06);
  border-radius: 20px;
  background: var(--tint-035);
}

.agenda__over {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}

.agenda__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agenda__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agenda__bar {
  align-self: stretch;
  width: 4px;
  border-radius: 4px;
}

.agenda__bar--cyan { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.agenda__bar--light { background: var(--contrast); box-shadow: 0 0 10px var(--contrast); }
.agenda__bar--grey { background: #8a8f9e; box-shadow: 0 0 10px #8a8f9e; }
.agenda__bar--amber { background: var(--warning); box-shadow: 0 0 10px var(--warning); }

.agenda__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.agenda__t {
  font-size: 15px;
}

.agenda__s {
  font-size: 12.5px;
  color: var(--muted);
}

.agenda__empty {
  font-size: 14px;
  color: var(--muted-2);
}

.btn-wide {
  display: flex;
  border: 0;
  align-items: center;
  height: 58px;
  margin: 12px 2px 0;
  padding: 0 22px 0 32px;
  border-radius: 999px;
  background: var(--contrast);
  color: var(--pill-fg);
  font-size: 18px;
}

.btn-wide span {
  margin-left: auto;
  font-size: 22px;
}

.btn-wide:hover {
  background: var(--pill-hover);
  color: var(--pill-fg);
  text-decoration: none;
}

/* ==========================================================================
   16. Next review card
   ========================================================================== */
.review {
  display: flex;
  flex: 1;
  padding: 1px;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, rgba(154, 219, 230, .6), var(--tint-06) 40%, rgba(154, 219, 230, .2));
  box-shadow: 0 20px 40px var(--shade-25);
}

.review__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 18px 18px 18px 22px;
  border-radius: 25px;
  background: radial-gradient(70% 60% at 100% 0%, rgba(154, 219, 230, .14), transparent 70%), linear-gradient(180deg, var(--card-from), var(--card-to));
}

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

.review__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--text-2);
}

.review__chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(154, 219, 230, .14);
  color: var(--accent-fg);
  font-size: 12.5px;
}

.review__open {
  display: flex;
  margin-left: auto;
  color: var(--text);
}

.review__open:hover {
  color: var(--text-strong);
}

.review__title {
  margin-top: -6px;
  font-size: 30px;
  font-weight: 500;
}

.review__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.review__when {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--text-2);
}

.review__people {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.review__people li + li {
  margin-left: -12px;
}

.review__people li:last-child {
  margin-left: -6px;
}

.review__av {
  width: 44px;
  height: 44px;
  border: 2px solid var(--ring-avatar);
  border-radius: 50%;
  object-fit: cover;
}

.review__add {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--raised-3);
  color: var(--text);
  font-size: 20px;
}

.review__add:hover {
  background: var(--add-hover);
}

.btn-cyan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan-light), var(--cyan-deep));
  box-shadow: 0 10px 26px rgba(154, 219, 230, .25);
  color: #0d0f15;
  font-size: 16px;
  font-weight: 600;
}

.btn-cyan:hover {
  filter: brightness(1.05);
  color: #0d0f15;
  text-decoration: none;
}

/* ==========================================================================
   17. Studio report: head and KPIs
   ========================================================================== */
.report {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.report__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 22px 10px 0;
}

.report__title {
  font-size: 30px;
  font-weight: 500;
}

.report__range {
  font-size: 15px;
  color: var(--text-3);
}

.report__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.report__refresh {
  height: 38px;
  padding: 0 16px;
  background: var(--tint-03);
  font-size: 14px;
}

.report__refresh:hover {
  background: var(--tint-07);
}

.report__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
}

.report__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 320px;
  min-width: 0;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: inset 0 1px 0 var(--tint-06), 0 20px 40px var(--shade-25);
}

@media (hover: hover) {
  .kpi {
    transition: transform .25s ease;
  }

  .kpi:hover {
    transform: translateY(-3px);
  }
}

.kpi__top {
  display: flex;
  align-items: center;
}

.kpi__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

.kpi--cyan .kpi__icon { background: var(--cyan-tint); color: var(--cyan); }
.kpi--light .kpi__icon { background: var(--tint-06); color: var(--text); }
.kpi--coral .kpi__icon { background: var(--danger-tint); color: var(--danger); }
.kpi--amber .kpi__icon { background: var(--warning-tint); color: var(--warning); }

.kpi__delta {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  margin-left: auto;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}

.kpi__delta--up { background: var(--cyan-tint); color: var(--accent-fg); }
.kpi__delta--down { background: var(--danger-tint); color: var(--danger); }

.kpi__body {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.kpi__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kpi__value {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.kpi__label {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}

.kpi__spark {
  flex-shrink: 0;
  width: 96px;
  height: 40px;
  margin-left: auto;
  overflow: visible;
}

.kpi__spark polyline {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kpi--cyan .kpi__spark polyline { stroke: var(--cyan); }
.kpi--light .kpi__spark polyline { stroke: var(--text); }
.kpi--coral .kpi__spark polyline { stroke: var(--danger); }
.kpi--amber .kpi__spark polyline { stroke: var(--warning); }

/* ==========================================================================
   18. Revenue report card
   ========================================================================== */
.rev {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 2 1 560px;
  min-width: 0;
  padding: 22px 24px;
}

.rev__head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}

.rev__titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rev__totals {
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.rev__totals div {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}

.rev__now {
  padding-right: 24px;
  border-right: 1px solid var(--raised-3);
}

.rev__totals dd {
  font-size: 22px;
  font-weight: 500;
}

.rev__totals dt {
  font-size: 12px;
  letter-spacing: .1em;
}

.rev__now dt { color: var(--accent-fg); }
.rev__prev dd { color: var(--text-3); }
.rev__prev dt { color: var(--muted-2); }

.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--tint-05);
  border-radius: 999px;
  background: var(--seg-bg);
}

.seg__btn {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 13.5px;
}

.seg__btn:hover {
  color: var(--text-strong);
}

.seg__btn[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.chart {
  position: relative;
  height: 240px;
}

.chart__y {
  position: absolute;
  inset: 0 0 24px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chart__y li {
  position: relative;
  border-top: 1px dashed var(--raised-2);
}

.chart__y span {
  position: absolute;
  left: -44px;
  top: -8px;
  font-size: 11.5px;
  color: var(--muted-2);
}

.chart__svg {
  position: absolute;
  left: 44px;
  top: 0;
  width: calc(100% - 44px);
  height: calc(100% - 24px);
  overflow: visible;
}

.chart__prev {
  fill: none;
  stroke: var(--muted-2);
  stroke-width: 2;
  stroke-dasharray: 5 6;
}

.chart__line {
  fill: none;
  stroke: var(--accent-fg);
  stroke-width: 2.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(154, 219, 230, .5));
}

.chart__x {
  position: absolute;
  left: 44px;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted-2);
}

/* ==========================================================================
   19. Revenue by service card
   ========================================================================== */
.mix {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 320px;
  min-width: 0;
  padding: 22px 24px;
}

.mix__donut {
  position: relative;
  align-self: center;
  width: 190px;
  height: 190px;
}

.mix__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.mix__track,
.mix__seg {
  fill: none;
  stroke-width: 18;
}

.mix__track {
  stroke: var(--raised-2);
}

.mix__seg {
  cursor: pointer;
  transition: stroke-width .2s;
}

.mix__seg.is-on {
  stroke-width: 24;
}

.mix__seg--cyan { stroke: var(--cyan); }
.mix__seg--light { stroke: var(--contrast); }
.mix__seg--grey { stroke: var(--ink-2); }

.mix__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.mix__big {
  font-size: 30px;
  font-weight: 500;
}

.mix__small {
  font-size: 13px;
  color: var(--muted);
}

.mix__legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mix__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14.5px;
  text-align: left;
  cursor: default;
}

.mix__sw {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.mix__sw--cyan { background: var(--cyan); }
.mix__sw--light { background: var(--contrast); }
.mix__sw--grey { background: var(--ink-2); }

.mix__name {
  color: var(--text-3);
}

.mix__row.is-on .mix__name {
  color: var(--text-strong);
}

.mix__pct {
  margin-left: auto;
  color: var(--text-2);
}

/* ==========================================================================
   20. Top projects card
   ========================================================================== */
.tp {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 2 1 560px;
  min-width: 0;
  padding: 22px 24px 14px;
}

.tp__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 10px;
}

.tp__export {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.tp .scroll-x {
  margin: 0 -10px;
}

.tp__table,
.tp__table thead,
.tp__table tbody {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 740px;
}

.tp__table tr {
  display: grid;
  grid-template-columns: 110px minmax(160px, 1.6fr) minmax(140px, 1.4fr) 110px 120px;
  gap: 14px;
  align-items: center;
}

.tp__table thead tr {
  padding: 0 10px 8px;
}

.tp__table th,
.tp__table td {
  padding: 0;
}

.tp__table thead th {
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--muted-2);
}

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

.tp__table tbody tr {
  padding: 12px 10px;
  border-top: 1px solid var(--divider);
  border-radius: 16px;
}

.tp__table tbody tr[hidden] {
  display: none;
}

.tp__table tbody tr:hover {
  background: var(--tint-03);
}

.team {
  display: flex;
}

.team li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ring-team);
  border-radius: 50%;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}

.av__photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.team li + li {
  margin-left: -10px;
}

.tp__name {
  display: block;
  font-size: 15.5px;
  line-height: 1.25;
}

.tp__client {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--muted-2);
}

.tp__prog {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pbar {
  flex: 1;
  min-width: 0;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--raised-3);
  color: var(--cyan);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}

.pbar::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--raised-3);
}

.pbar::-webkit-progress-value {
  border-radius: 999px;
  background: var(--cyan);
}

.pbar::-moz-progress-bar {
  border-radius: 999px;
  background: var(--cyan);
}

.pbar--amber::-webkit-progress-value {
  background: var(--warning);
}

.pbar--amber::-moz-progress-bar {
  background: var(--warning);
}

.tp__pct {
  width: 36px;
  font-size: 13px;
  color: var(--text-2);
  text-align: right;
}

.st {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}

.st__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.st--on-track { background: var(--cyan-tint); color: var(--accent-fg); }
.st--in-review { background: rgba(255, 255, 255, .07); color: var(--contrast); }
.st--at-risk { background: var(--warning-tint); color: var(--warning); }
.st--kickoff { background: rgba(255, 255, 255, .05); color: #a7abb8; }
.st--delivered { background: rgba(90, 200, 140, .12); color: oklch(0.8 0.14 155); }

.tp__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.sq-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--tint-07);
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
}

.sq-btn:hover {
  background: var(--tint-06);
  color: var(--text-strong);
}

.sq-btn--danger:hover {
  background: var(--danger-tint);
  color: var(--danger);
}

.pg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
}

.pg__info {
  font-size: 13px;
  color: var(--muted-2);
}

.pg__btns {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.pg__step,
.pg__num {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 12px;
  background: transparent;
}

.pg__step {
  border: 1px solid var(--tint-07);
  font-size: 13.3333px;
  color: var(--text-2);
}

.pg__step:hover {
  background: var(--tint-05);
  color: var(--text-strong);
}

.pg__num {
  border: 0;
  color: var(--text-3);
  font-size: 14px;
}

.pg__num[aria-current="page"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

/* ==========================================================================
   21. Team activity card
   ========================================================================== */
.act {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
}

.act__list {
  position: relative;
  display: flex;
  flex-direction: column;
}

.act__list::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--line-2);
}

.act__item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 8px 0;
}

.act__av {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 3px solid var(--ring-avatar);
  border-radius: 50%;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
}

.act__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.act__top {
  display: flex;
  gap: 8px;
}

.act__who {
  font-size: 14.5px;
}

.act__time {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted-2);
  white-space: nowrap;
}

.act__what {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-3);
}

.act__obj {
  color: var(--accent-fg);
}

/* ==========================================================================
   22. Daily notes card
   ========================================================================== */
.notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 22px 24px;
  border-radius: var(--radius-card);
  background: var(--surface-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  color: var(--ink);
}

.notes__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notes__idx {
  margin-left: 4px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.notes__prev,
.notes__next {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 16px;
}

.notes__prev {
  margin-left: auto;
  background: #b9bdc9;
  color: var(--ink);
}

.notes__prev:hover {
  background: #a6abb9;
}

.notes__next {
  background: var(--ink);
  color: #fff;
}

.notes__next:hover {
  background: #262a36;
}

/* Slideshow: notes sit side by side on a track that slides one card at a time. */
.notes__viewport {
  display: flex;
  flex: 1;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.notes__viewport.is-dragging {
  cursor: grabbing;
}

.notes__track {
  display: flex;
  gap: 24px;
  width: 100%;
  transition: transform .5s var(--ease-out);
}

.notes__track.is-still {
  transition: none;
}

.note {
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
  gap: 12px;
  min-width: 0;
  -webkit-user-select: none;
  user-select: none;
}

.note__title {
  font-size: 18px;
  font-weight: 600;
}

.note__meta {
  font-size: 12.5px;
  color: var(--ink-2);
}

.note__body {
  font-size: 14.5px;
  line-height: 1.5;
  color: #2c303d;
}

.notes__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.notes__open,
.notes__dismiss {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
}

.notes__open {
  background: var(--ink);
  color: #fff;
}

.notes__open:hover {
  background: #262a36;
  color: #fff;
  text-decoration: none;
}

.notes__dismiss {
  border: 1px solid rgba(17, 19, 26, .2);
  background: transparent;
  color: var(--ink);
}

.notes__dismiss:hover {
  background: rgba(17, 19, 26, .06);
}

/* ==========================================================================
   22b. Row actions menu and toast
   One floating menu serves every "···" button; main.js fills it from a
   <template>. The toast confirms what an action did and can undo it.
   ========================================================================== */
.menu {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--tint-08);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
  box-shadow: inset 0 1px 0 var(--tint-06), 0 24px 50px var(--shade-50);
  animation: menu-in .16s var(--ease-out);
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.98);
  }
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
}

.menu__item svg {
  flex-shrink: 0;
  opacity: .85;
}

.menu__item:hover,
.menu__item:focus-visible {
  background: var(--tint-05);
  color: var(--text-strong);
  outline: 0;
}

.menu__item--danger {
  color: var(--danger);
}

.menu__item--danger:hover,
.menu__item--danger:focus-visible {
  background: var(--danger-tint);
  color: var(--danger);
}

.menu__sep {
  width: calc(100% - 12px);
  height: 1px;
  margin: 4px 6px;
  border: 0;
  background: var(--tint-07);
}

.dots-btn[aria-expanded="true"] {
  color: var(--accent-fg);
}

.files__more[aria-expanded="true"] {
  background: #a6abb9;
}

/* A deleted row fades out before it leaves the DOM. */
.is-leaving {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .25s ease, transform .25s ease;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 24px);
  min-height: 48px;
  padding: 0 8px 0 20px;
  border-radius: 999px;
  background: var(--pill-bg);
  box-shadow: 0 18px 40px var(--shade-50);
  color: var(--pill-fg);
  font-size: 14.5px;
  transform: translateX(-50%);
  animation: toast-in .25s var(--ease-out);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}

.toast__text {
  padding: 12px 12px 12px 0;
}

.toast__undo {
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.toast__undo:hover {
  background: var(--cyan-light);
}

/* ==========================================================================
   22c. Overview 2: shared pieces
   ========================================================================== */
.page-head__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.o2-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text-2);
  font-size: 15px;
}

.o2-pill:hover {
  background: var(--tint-08);
}

.o2-pill--light {
  padding: 0 20px 0 16px;
  border-color: transparent;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 500;
}

.o2-pill--light:hover {
  background: var(--pill-hover);
}

/* Each block wrapper only exists for the script; its card joins the row. */
.o2-block {
  display: contents;
}

.o2-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
}

.o2-row > .o2-block > .card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 22px 24px;
}

.o2-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.o2-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.o2-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.o2-head > .o2-tabs,
.o2-head > .o2-link {
  margin-left: auto;
}

.o2-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  white-space: nowrap;
}

.o2-link span {
  font-size: 16px;
}

.o2-foot .o2-link span {
  font-size: 15px;
}

.o2-over {
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--muted);
}

.o2-chip {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--cyan-tint);
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Segmented tabs */
.o2-tabs {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: var(--seg-bg);
}

.o2-tabs__btn {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 13.5px;
  white-space: nowrap;
  transition: background .2s;
}

.o2-tabs__btn:hover {
  color: var(--text-strong);
}

.o2-tabs__btn[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.o2-tabs--soft {
  background: var(--tint-04);
}

.o2-tabs--soft .o2-tabs__btn {
  height: 28px;
  padding: 0 11px;
  font-size: 12.5px;
}

.o2-tabs--xs .o2-tabs__btn {
  padding: 0 10px;
  font-size: 12px;
}

/* Tabs on the cyan hero */
.o2-tabs--ink {
  border: 0;
  background: rgba(17, 19, 26, .08);
}

.o2-tabs--ink .o2-tabs__btn {
  height: 28px;
  padding: 0 12px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

.o2-tabs--ink .o2-tabs__btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--cyan);
}

.o2-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  white-space: nowrap;
}

.o2-btn:hover {
  background: var(--tint-05);
  color: var(--text-strong);
  text-decoration: none;
}

.o2-btn--light {
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 600;
}

.o2-btn--light:hover {
  background: var(--pill-hover);
  color: var(--pill-fg);
}

.o2-btn--done,
.o2-btn--done:hover {
  border: 0;
  background: rgba(120, 220, 160, .12);
  color: var(--grt);
  font-weight: 600;
}

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

.o2-iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--tint-07);
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
}

.o2-iconbtn:hover {
  background: var(--tint-05);
  color: var(--text-strong);
}

/* Filter chips with a count */
.o2-filter {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  white-space: nowrap;
}

.o2-filter:hover {
  color: var(--text-strong);
}

.o2-filter[aria-pressed="true"] {
  border-color: transparent;
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.o2-filter__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.o2-filter__dot.is-all { background: var(--text-3); }
.o2-filter__dot.is-good { background: var(--grt); }
.o2-filter__dot.is-watch,
.o2-filter__dot.is-late { background: var(--amt); }
.o2-filter__dot.is-risk { background: var(--danger); }

.o2-filter__n {
  font-size: 11.5px;
  opacity: .7;
}

/* Summary tiles */
.o2-sum {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.o2-sum__tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
}

.o2-sum__tile dt {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  white-space: nowrap;
}

.o2-sum__tile dd {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.o2-sum__tile .is-good { color: var(--grt); }
.o2-sum__tile .is-watch { color: var(--amt); }
.o2-sum__tile .is-risk { color: var(--danger); }
.o2-sum__tile .is-acc { color: var(--accent-fg); }

/* Insight tiles under the revenue chart */
.o2-insight {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 12px;
  min-width: 200px;
  padding: 12px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--seg-bg);
}

.o2-insight__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--cyan-tint);
  color: var(--accent-fg);
}

.o2-insight__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.o2-insight__label {
  font-size: 12.5px;
  color: var(--muted);
}

.o2-insight__value {
  font-size: 15px;
  font-weight: 600;
}

/* Footer line pinned to the bottom of a card */
.o2-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
  color: var(--text-3);
  font-size: 13px;
}

.o2-foot .o2-link {
  margin-left: auto;
  font-size: 13.5px;
}

.o2-foot__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amt);
}

.o2-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform .25s;
}

.o2-chev.is-open {
  transform: rotate(180deg);
}

/* Title tools: drop-down panels for Filter, Export and Add new */
.tpop__panel {
  width: min(300px, calc(100vw - 24px));
  padding: 10px;
}

.tpop__title {
  padding: 6px 8px 8px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.tpop__checks,
.tpop__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tpop__check {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
}

.tpop__check:hover {
  background: var(--tint-05);
  color: var(--text-strong);
}

.tpop__box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--tint-18);
  border-radius: 6px;
  color: transparent;
  transition: background .15s, border-color .15s;
}

.tpop__check input:checked + .tpop__box {
  border-color: transparent;
  background: var(--cyan);
  color: var(--ink);
}

.tpop__check input:focus-visible + .tpop__box {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.tpop__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 8px 2px;
  border-top: 1px solid var(--tint-07);
  font-size: 12.5px;
  color: var(--muted);
}

.tpop__foot .o2-btn {
  margin-left: auto;
}

.tpop__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  text-align: left;
}

.tpop__item svg {
  flex-shrink: 0;
  color: var(--accent-fg);
}

.tpop__item:hover,
.tpop__item:focus-visible {
  background: var(--tint-05);
  color: var(--text-strong);
}

.tpop__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tpop__name {
  font-size: 14.5px;
  font-weight: 500;
}

.tpop__sub {
  font-size: 12.5px;
  color: var(--muted);
}

.o2-pill__count {
  display: flex;
  align-items: center;
  height: 22px;
  margin-right: -8px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

/* Add new: small forms in native dialogs */
.dlg {
  width: min(440px, calc(100vw - 24px));
  padding: 0;
  border: 1px solid var(--tint-08);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
  box-shadow: 0 40px 80px var(--shade-50);
  color: var(--text);
}

.dlg::backdrop {
  background: rgba(5, 6, 9, .6);
}

.dlg__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.dlg__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dlg__title {
  font-size: 22px;
  font-weight: 500;
}

.dlg__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dlg__field label {
  font-size: 13px;
  color: var(--text-3);
}

.dlg__input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--tint-08);
  border-radius: 12px;
  background: var(--seg-bg);
  color: var(--text);
  font-size: 15px;
}

.dlg__input:focus {
  border-color: rgba(154, 219, 230, .6);
  outline: 0;
}

.dlg__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.dlg__input option {
  background: var(--card-from);
  color: var(--text);
}

.dlg__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.dlg__actions .o2-btn {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
}

/* ==========================================================================
   22d. Overview 2: KPI row
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1.35 1 440px;
  min-width: 0;
  padding: 26px 28px 0;
  border-radius: 28px;
  background: radial-gradient(120% 90% at 100% 0%, #c4f0f6 0%, var(--cyan) 45%, #7fcad8 100%);
  box-shadow: 0 30px 60px rgba(154, 219, 230, .18), inset 0 1px 0 rgba(255, 255, 255, .6);
  color: var(--ink);
  overflow: hidden;
}

.hero__ring {
  position: absolute;
  border: 1px solid rgba(17, 19, 26, .08);
  border-radius: 50%;
}

.hero__ring--a { right: -60px; top: -80px; width: 260px; height: 260px; }
.hero__ring--b { right: -20px; top: -40px; width: 180px; height: 180px; }

.hero__head {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__head .o2-tabs {
  margin-left: auto;
}

.hero__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--ink);
  color: var(--cyan);
}

.hero__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero__when,
.hero__sub {
  font-size: 13px;
  color: #2b4a50;
}

.hero__value {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 26px;
}

.hero__big {
  font-size: clamp(44px, 4.6vw, 64px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: .9;
  white-space: nowrap;
}

.hero__delta {
  display: flex;
  align-items: center;
  height: 30px;
  margin-bottom: 4px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cyan);
  font-size: 13.5px;
  font-weight: 600;
}

.hero__delta.is-down {
  color: oklch(0.82 0.12 35);
}

.hero__sub {
  position: relative;
  margin-top: 10px;
  font-size: 15px;
}

.hero__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 16px;
  background: rgba(255, 255, 255, .35);
}

.hero__stat dt {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2b4a50;
}

.hero__stat dd {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero__chart {
  position: relative;
  flex: none;
  height: 150px;
  margin: 30px -28px 0;
}

.hero__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero__grid {
  stroke: var(--ink);
  stroke-dasharray: 3 5;
  stroke-opacity: .08;
}

.hero__line {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-width: 2.5;
}

.hero__guide,
.hero__dot,
.hero__tip {
  position: absolute;
  pointer-events: none;
  transition: left .15s ease, top .15s ease;
}

.hero__guide {
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(17, 19, 26, .35);
}

.hero__dot {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 6px rgba(17, 19, 26, .12);
}

.hero__tip {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--ink);
  color: #eef0f5;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.hero__cols,
.rx__cols {
  position: absolute;
  inset: 0;
  display: flex;
  cursor: crosshair;
}

.hero__cols span,
.rx__cols span {
  flex: 1;
}

.hero__ticks {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 12px;
  font-size: 11px;
  color: #2b4a50;
}

/* Four metric cards, always 2 × 2 on wide screens */
.mk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(270px, calc(50% - 8px)), 1fr));
  flex: 2 1 560px;
  gap: 16px;
  min-width: 0;
}

/* --mk and --mk-tint carry each card's colour; the script sets them. */
.mk {
  --mk: #9adbe6;
  --mk-tint: rgba(154, 219, 230, .14);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: inset 0 1px 0 var(--tint-06), 0 20px 40px var(--shade-25);
  overflow: hidden;
}

@media (hover: hover) {
  .mk {
    transition: transform .25s ease;
  }

  .mk:hover {
    transform: translateY(-3px);
  }
}

.mk__glow {
  position: absolute;
  right: -50px;
  top: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mk-tint) 0%, transparent 70%);
}

.mk__head,
.mk__body,
.mk__goal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

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

.mk__goal {
  gap: 10px;
}

.mk__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: var(--mk-tint);
  color: var(--mk);
}

.mk__titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mk__label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk__when {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.mk__chip {
  display: flex;
  align-items: center;
  height: 26px;
  margin-left: auto;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.mk__chip.is-good { background: rgba(120, 220, 160, .12); color: var(--grt); }
.mk__chip.is-bad { background: rgba(240, 120, 90, .12); color: var(--danger); }

.mk__value {
  font-size: 32px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}

.mk__spark {
  position: relative;
  display: block;
  flex-shrink: 1;
  width: min(130px, 42%);
  height: 46px;
  margin-left: auto;
  color: var(--mk);
}

.mk__spark svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mk__area {
  fill: currentColor;
  fill-opacity: .14;
}

.mk__line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.mk__dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--mk);
  box-shadow: 0 0 0 4px var(--mk-tint);
  transition: left .15s ease, top .15s ease;
}

.mk__track {
  display: block;
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--raised-2);
  overflow: hidden;
}

.mk__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mk);
  transition: width .3s ease;
}

.mk__goaltext {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* ==========================================================================
   22e. Overview 2: revenue vs expenses
   ========================================================================== */
.rx {
  flex: 2 1 560px;
}

.rx__bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.rx__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rx__total {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 120px;
  padding: 12px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--seg-bg);
}

.rx__total dt {
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--muted);
}

.rx__total.is-lead dt {
  color: var(--accent-fg);
}

.rx__total dd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.rx__delta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grt);
}

.rx__series {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.rx__pill {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  height: 34px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  transition: all .2s;
}

.rx__pill[aria-pressed="true"] {
  background: var(--seg-bg);
  color: var(--text);
}

.rx__sw {
  width: 14px;
  height: 10px;
  border-radius: 3px;
  opacity: .35;
}

.rx__pill[aria-pressed="true"] .rx__sw {
  opacity: 1;
}

.rx__sw--r { background: var(--cyan); }
.rx__sw--p { background: rgba(154, 219, 230, .35); }

.rx__sw--e,
.rx__sw--l {
  height: 0;
  border-top: 2px dashed var(--text-3);
}

.rx__sw--l {
  border-top-style: dotted;
}

.rx__chart {
  position: relative;
  height: 300px;
}

.rx__ticks {
  position: absolute;
  inset: 0 0 28px 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rx__ticks li {
  position: relative;
  border-top: 1px dashed var(--raised-2);
}

.rx__ticks span {
  position: absolute;
  left: -50px;
  top: -8px;
  font-size: 11.5px;
  color: var(--muted);
}

.rx__plot {
  position: absolute;
  inset: 0 0 28px 50px;
}

.rx__col {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(154, 219, 230, 0) 0%, rgba(154, 219, 230, .09) 100%);
  transition: left .18s ease;
}

.rx__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rx__area,
.rx__band,
.rx__ly,
.rx__exp,
.rx__rev {
  transition: opacity .25s;
}

.rx__ly {
  fill: none;
  stroke: var(--text-3);
  stroke-dasharray: 2 5;
  stroke-linecap: round;
  stroke-width: 1.6;
  opacity: .8;
}

.rx__exp {
  fill: none;
  stroke: var(--text-3);
  stroke-dasharray: 6 6;
  stroke-width: 2;
}

.rx__rev {
  fill: none;
  stroke: var(--cyan);
  stroke-linecap: round;
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(154, 219, 230, .55));
}

.rx__chart .is-off {
  opacity: 0;
}

.rx__guide,
.rx__edot,
.rx__rdot,
.rx__tip {
  position: absolute;
  pointer-events: none;
  transition: left .18s ease, top .18s ease, opacity .25s;
}

.rx__guide {
  bottom: 0;
  border-left: 1px dashed var(--text-3);
  opacity: .45;
}

.rx__edot {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid var(--text-3);
  border-radius: 50%;
  background: var(--card-from);
}

.rx__rdot {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 6px rgba(154, 219, 230, .2), 0 0 18px var(--cyan);
}

.rx__tip {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 210px;
  padding: 14px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tip-bg);
  box-shadow: 0 18px 44px var(--shade-25);
  font-size: 13.5px;
}

.rx__tiphead {
  display: flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--muted);
}

.rx__tipchip {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
}

.rx__tipchip.is-good { background: rgba(120, 220, 160, .14); color: var(--grt); }
.rx__tipchip.is-bad { background: rgba(240, 120, 90, .14); color: var(--danger); }

.rx__tiprow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rx__tipdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.rx__tipdot--r { background: var(--cyan); }
.rx__tipdot--e { background: var(--text-3); }
.rx__tipdot--p { background: var(--grt); }

.rx__tiplabel {
  color: var(--text-3);
}

.rx__tipval {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rx__tipbar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  background: var(--raised-2);
  overflow: hidden;
}

.rx__tipbar span {
  border-radius: 999px;
  background: var(--cyan);
  transition: width .2s;
}

.rx__cols {
  z-index: 3;
}

.rx__labels {
  position: absolute;
  left: 50px;
  right: 0;
  bottom: 0;
  display: flex;
}

.rx__labels li {
  flex: 1;
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  transition: color .15s;
}

.rx__labels li.is-on {
  color: var(--text);
  font-weight: 600;
}

.rx__insights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================================
   22f. Overview 2: monthly goal
   ========================================================================== */
.goal {
  flex: 1 1 320px;
}

.goal__top {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.goal__pct {
  font-size: 64px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: .9;
}

.goal__pct span {
  font-size: 32px;
  color: var(--muted);
}

.goal__amount {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 4px;
}

.goal__earned {
  font-size: 18px;
  font-weight: 500;
}

.goal__of {
  font-size: 13px;
  color: var(--muted);
}

.goal__status {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin: 0 0 4px auto;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: all .25s;
}

.goal__status.is-good { background: rgba(120, 220, 160, .12); color: var(--grt); }
.goal__status.is-ok { background: rgba(230, 190, 110, .14); color: var(--amt); }
.goal__status.is-risk { background: rgba(240, 120, 90, .14); color: var(--danger); }

.goal__statusdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.goal__meter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 30px;
}

.goal__track {
  position: relative;
  height: 22px;
}

.goal__rail {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--raised-2);
  overflow: hidden;
}

.goal__fc,
.goal__earn,
.goal__sep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.goal__fc {
  background: repeating-linear-gradient(135deg, rgba(154, 219, 230, .32) 0 6px, transparent 6px 12px);
  transition: width .45s var(--ease-out);
}

.goal__earn {
  border-radius: 999px;
  background: linear-gradient(90deg, #5fb4c4, var(--cyan));
  box-shadow: 0 0 16px rgba(154, 219, 230, .5);
}

.goal__sep {
  width: 2px;
  background: var(--card-from);
  opacity: .7;
}

.goal__today {
  position: absolute;
  top: -34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transform: translateX(-50%);
}

.goal__today::after {
  content: "";
  width: 2px;
  height: 12px;
  background: var(--pill-bg);
}

.goal__flag {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.goal__line {
  position: absolute;
  top: -6px;
  bottom: -6px;
  border-left: 2px solid var(--text);
}

.goal__fcdot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2.5px solid var(--cyan);
  border-radius: 50%;
  background: var(--card-from);
  transition: left .45s var(--ease-out);
}

.goal__marks {
  position: relative;
  height: 16px;
  font-size: 11.5px;
  color: var(--muted);
}

.goal__mark {
  position: absolute;
  white-space: nowrap;
}

.goal__mark.is-goal {
  color: var(--text);
  font-weight: 600;
}

.goal__what {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.goal__what .o2-over {
  font-size: 12px;
}

.goal__pace {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
}

.goal__pacebtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-3);
  transition: background .2s;
}

.goal__pacebtn[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.goal__pacename {
  font-size: 12.5px;
  font-weight: 600;
}

.goal__pacesub {
  font-size: 11.5px;
  opacity: .75;
}

.goal__fcbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
}

.goal__fcitem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.goal__fcitem--end {
  align-items: flex-end;
  margin-left: auto;
  text-align: right;
}

.goal__fclabel {
  font-size: 12px;
  color: var(--muted);
}

.goal__fcvalue {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.goal__hit {
  font-size: 15px;
  font-weight: 600;
}

.goal__hit.is-good { color: var(--grt); }
.goal__hit.is-risk { color: var(--danger); }

.goal__weeks {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 6px;
}

.goal__week {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.goal__wbar {
  display: flex;
  align-items: flex-end;
  height: 56px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--raised-2);
  overflow: hidden;
}

.goal__week.is-now .goal__wbar {
  border: 1.5px solid var(--text);
}

.goal__wfill {
  display: block;
  width: 100%;
  border-radius: 8px;
  background: var(--cyan);
}

.goal__wfill.is-mixed { background: linear-gradient(180deg, rgba(154, 219, 230, .35) 0%, var(--cyan) 60%); }
.goal__wfill.is-future { background: repeating-linear-gradient(135deg, rgba(154, 219, 230, .4) 0 5px, rgba(154, 219, 230, .12) 5px 10px); }

.goal__wv {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.goal__wl {
  font-size: 10.5px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

/* ==========================================================================
   22g. Overview 2: client sources and sales funnel
   ========================================================================== */
.srcs {
  flex: 1 1 380px;
}

.srcs__gauge {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 260px;
}

.srcs__gauge svg {
  width: 100%;
  overflow: visible;
}

.srcs__arc {
  fill: none;
  stroke-width: 22;
}

.srcs__arc--cy { stroke: var(--cyan); }
.srcs__arc--ink { stroke: var(--text); }
.srcs__arc--am { stroke: oklch(0.8 0.13 70); }
.srcs__arc--vi { stroke: oklch(0.75 0.12 290); }

.srcs__center {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.srcs__total {
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
}

.srcs__vs {
  font-size: 13px;
  color: var(--muted);
}

.srcs__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  flex: 1;
  gap: 8px;
}

.srcs__tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
}

.srcs__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srcs__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.srcs__dot--cy { background: var(--cyan); }
.srcs__dot--ink { background: var(--text); }
.srcs__dot--am { background: oklch(0.8 0.13 70); }
.srcs__dot--vi { background: oklch(0.75 0.12 290); }

.srcs__nums {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.srcs__count {
  font-size: 22px;
  font-weight: 500;
}

.srcs__share {
  font-size: 13px;
  color: var(--muted);
}

.srcs__trend {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.srcs__trend.is-up { color: var(--grt); }
.srcs__trend.is-down { color: var(--danger); }

.fnl {
  flex: 1.4 1 460px;
}

.fnl__chart {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 270px;
}

.fnl__conn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 4px;
  width: 64px;
  padding-bottom: 34px;
  color: var(--muted);
}

.fnl__conv {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  transition: all .3s;
}

.fnl__conv.is-good { background: rgba(120, 220, 160, .14); color: var(--grt); }
.fnl__conv.is-bad { background: rgba(240, 120, 90, .14); color: var(--danger); }

.fnl__bench {
  font-size: 10.5px;
  white-space: nowrap;
}

.fnl__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  transition: opacity .2s;
}

.fnl__col.is-dim {
  opacity: .5;
}

.fnl__stack {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: height .5s var(--ease-out);
}

.fnl__lost {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 1px;
  min-height: 40px;
  padding-top: 6px;
  border: 1px dashed rgba(240, 120, 90, .4);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: repeating-linear-gradient(135deg, rgba(240, 120, 90, .2) 0 6px, transparent 6px 12px);
  color: var(--danger);
  overflow: hidden;
}

.fnl__lostn {
  font-size: 12px;
  font-weight: 700;
}

.fnl__why {
  padding: 0 4px;
  font-size: 10.5px;
  line-height: 1.2;
  text-align: center;
  opacity: .85;
}

.fnl__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  min-height: 50px;
  padding-top: 10px;
  color: var(--text);
  transition: height .5s var(--ease-out), box-shadow .2s;
}

.fnl__bar--0 { background: var(--funnel-a); }
.fnl__bar--1 { background: var(--line-3); }
.fnl__bar--2 { background: rgba(154, 219, 230, .38); }

.fnl__bar--3 {
  background: var(--cyan);
  box-shadow: 0 12px 28px rgba(154, 219, 230, .25);
  color: var(--ink);
}

.fnl__col.is-on .fnl__bar {
  box-shadow: 0 0 0 2px var(--card-from), 0 0 0 4px var(--text-3);
}

.fnl__col.is-on .fnl__bar--3 {
  box-shadow: 0 0 0 2px var(--card-from), 0 0 0 4px var(--cyan);
}

.fnl__v {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fnl__share {
  font-size: 11px;
  opacity: .75;
}

.fnl__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 26px;
  color: var(--text-3);
  font-size: 13.5px;
}

.fnl__name.is-on {
  color: var(--text);
  font-weight: 600;
}

.fnl__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--raised-2);
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
}

.fnl__detail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-04);
}

.fnl__dhead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
}

.fnl__dk,
.fnl__stats dt {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  white-space: nowrap;
}

.fnl__dt {
  font-size: 18px;
  font-weight: 600;
}

.fnl__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1;
  gap: 12px;
  min-width: 280px;
}

.fnl__stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fnl__stats dd {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.fnl__stats .is-acc { color: var(--accent-fg); }
.fnl__stats .is-good { color: var(--grt); }
.fnl__stats .is-bad { color: var(--danger); }

/* ==========================================================================
   22h. Overview 2: top clients
   ========================================================================== */
.tcl {
  flex: 2 1 600px;
}

.tcl__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.tcl__scroll {
  position: relative;
  min-width: 0;
  margin: 0 -8px;
  padding: 0 8px;
  overflow-x: auto;
}

.tcl__table {
  display: flex;
  flex-direction: column;
  min-width: 760px;
}

.tcl__head,
.tcl__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 64px 1fr minmax(0, 1.5fr) 96px 28px;
  align-items: center;
  gap: 14px;
}

.tcl__head {
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--tint-07);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--muted);
}

.tcl__sort {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-align: left;
}

.tcl__sort.is-on,
.tcl__sort:hover {
  color: var(--text);
}

.tcl__right {
  text-align: right;
}

.tcl__item {
  border-bottom: 1px solid var(--tint-05);
  border-radius: 14px;
  transition: background .2s;
}

.tcl__item.is-open {
  background: var(--tint-04);
}

.tcl__row {
  width: 100%;
  padding: 11px 8px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
}

.tcl__row:hover {
  background: var(--tint-04);
}

.tcl__client {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tcl__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.tcl__names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tcl__name {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcl__meta {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.tcl__health {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
}

.tcl__health svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.tcl__ringtrack,
.tcl__ring {
  fill: none;
  stroke-width: 4;
}

.tcl__ringtrack { stroke: var(--raised-2); }

.tcl__ring {
  stroke-linecap: round;
  transition: stroke-dasharray .4s ease;
}

.tcl__ring.is-good,
.tcl__partfill.is-good { stroke: var(--grt); background: var(--grt); }
.tcl__ring.is-watch,
.tcl__partfill.is-watch { stroke: oklch(0.8 0.13 70); background: oklch(0.8 0.13 70); }
.tcl__ring.is-risk,
.tcl__partfill.is-risk { stroke: var(--danger); background: var(--danger); }

.tcl__h {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
}

.tcl__rev {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tcl__money {
  font-size: 15px;
  font-weight: 600;
}

.tcl__growth {
  font-size: 12.5px;
  font-weight: 600;
}

.tcl__growth.is-up { color: var(--grt); }
.tcl__growth.is-down { color: var(--danger); }

.tcl__next {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  max-width: 100%;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--tint-07);
  border-radius: 10px;
  background: var(--tint-04);
  color: var(--text-3);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all .2s;
}

.tcl__next svg {
  flex-shrink: 0;
}

.tcl__next.is-risk { border-color: rgba(240, 120, 90, .3); background: rgba(240, 120, 90, .12); color: var(--danger); }
.tcl__next.is-done { border-color: rgba(120, 220, 160, .3); background: rgba(120, 220, 160, .1); color: var(--grt); }

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

.tcl__face {
  width: 30px;
  height: 30px;
  border: 2px solid var(--card-from);
  border-radius: 50%;
  object-fit: cover;
}

.tcl__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  padding: 6px 16px 16px 58px;
}

.tcl__parts,
.tcl__trend,
.tcl__actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tcl__actions {
  gap: 6px;
}

.tcl__trend {
  gap: 8px;
}

.tcl__part {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.tcl__partl {
  color: var(--text-3);
}

.tcl__parttrack {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--raised-2);
}

.tcl__partfill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.tcl__partv {
  font-weight: 600;
  text-align: right;
}

.tcl__spark {
  width: 100%;
  height: 44px;
  overflow: visible;
  color: var(--cyan);
}

.tcl__spark.is-down {
  color: var(--danger);
}

.tcl__sparkarea {
  fill: currentColor;
  opacity: .14;
}

.tcl__sparkline {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.tcl__note,
.tcl__empty {
  font-size: 12px;
  color: var(--muted);
}

.tcl__empty {
  padding: 18px 8px;
  font-size: 13.5px;
}

/* ==========================================================================
   22i. Overview 2: team workload
   ========================================================================== */
.wl {
  flex: 1 1 320px;
}

.o2-row > .o2-block > .wl {
  gap: 16px;
}

.wl .o2-tools {
  gap: 6px;
}

.wl .o2-btn--light {
  height: 32px;
}

.wl__queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-04);
}

.wl__qhead {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wl__qhead .o2-over {
  font-size: 11px;
}

.wl__hint {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--muted);
}

.wl__qlist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wl__qtask {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--tint-07);
  border-radius: 10px;
  background: var(--card-from);
  color: var(--text);
  font-size: 12.5px;
  white-space: nowrap;
  transition: all .15s;
}

.wl__qtask[aria-pressed="true"] {
  border-color: transparent;
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.wl__qdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.wl__qtask[aria-pressed="true"] .wl__qdot {
  background: var(--pill-fg);
}

.wl__qh {
  font-weight: 700;
  opacity: .8;
}

.wl__done {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  color: var(--grt);
  font-size: 13px;
}

.wl__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  flex: 1;
  gap: 8px;
}

.wl__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-04);
  color: inherit;
  text-align: left;
  transition: all .2s ease;
}

.wl__card--wide {
  grid-column: span 2;
}

.wl__card.is-fits {
  border-color: var(--cyan);
  background: rgba(154, 219, 230, .06);
  cursor: pointer;
  transform: translateY(-2px);
}

.wl__card.is-tight {
  border-color: oklch(0.8 0.13 70);
  cursor: pointer;
}

.wl__card.is-none {
  border-color: rgba(240, 120, 90, .5);
  border-style: dashed;
  opacity: .55;
}

.wl__top,
.wl__foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wl__foot {
  gap: 8px;
  min-height: 22px;
  font-size: 12px;
}

.wl__av {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

.wl__face {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.wl__status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--card-from);
  border-radius: 50%;
}

.wl__status.is-free,
.wl__ldot.is-free { background: var(--grt); }
.wl__status.is-busy,
.wl__ldot.is-busy { background: var(--cyan); }
.wl__status.is-full,
.wl__ldot.is-full { background: var(--danger); }

.wl__who {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.wl__name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
}

.wl__role {
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--muted);
}

.wl__ring {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
}

.wl__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.wl__track,
.wl__ghost,
.wl__load {
  fill: none;
  stroke-width: 4;
}

.wl__track { stroke: var(--raised-2); }

.wl__ghost {
  stroke: var(--cyan);
  stroke-linecap: round;
  opacity: .45;
  transition: stroke-dasharray .3s ease;
}

.wl__ghost.is-over { stroke: var(--danger); }

.wl__load {
  stroke-linecap: round;
  transition: stroke-dasharray .45s ease;
}

.wl__load.is-risk { stroke: var(--danger); }
.wl__load.is-busy { stroke: var(--cyan); }
.wl__load.is-free { stroke: var(--text-3); }

.wl__p {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.wl__days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.wl__day {
  display: flex;
  align-items: flex-end;
  height: 22px;
  border-radius: 5px;
  background: var(--raised-2);
  overflow: hidden;
}

.wl__dayfill {
  display: block;
  width: 100%;
  border-radius: 4px;
  transition: height .35s ease;
}

.wl__dayfill.is-risk { background: var(--danger); }
.wl__dayfill.is-busy { background: var(--cyan); }
.wl__dayfill.is-free { background: rgba(154, 219, 230, .45); }

.wl__sub {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl__chip {
  display: flex;
  align-items: center;
  height: 22px;
  margin-left: auto;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

.wl__chip.is-full { background: rgba(240, 120, 90, .14); color: var(--danger); }
.wl__chip.is-free { background: rgba(120, 220, 160, .12); color: var(--grt); }
.wl__chip.is-busy { background: var(--cyan-tint); color: var(--accent-fg); }

.wl__tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.wl__task {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--cyan-tint);
  color: var(--accent-fg);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.wl__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

.wl__legend > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.wl__ldot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.wl__legend .wl__left {
  margin-left: auto;
  color: var(--text-3);
  font-weight: 600;
}

/* ==========================================================================
   22j. Overview 2: recent payments
   ========================================================================== */
.pmt {
  flex: 1.3 1 460px;
}

.o2-row > .o2-block > .pmt,
.o2-row > .o2-block > .rgn {
  gap: 16px;
}

.pmt__net {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.pmt__net span {
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--muted);
}

.pmt__net b {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--grt);
}

.pmt__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pmt__filters .o2-filter {
  height: 30px;
  font-size: 12.5px;
}

.pmt__filters .o2-filter__n {
  font-size: inherit;
  opacity: .65;
}

.pmt__days {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pmt__day {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pmt__dayhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 6px;
}

.pmt__daylabel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--text-3);
  white-space: nowrap;
}

.pmt__daybar {
  display: flex;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--raised-2);
  overflow: hidden;
}

.pmt__daybar span {
  border-radius: 999px;
  background: linear-gradient(90deg, #5fb4c4, var(--cyan));
  transition: width .4s ease;
}

.pmt__daynet {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.pmt__daynet b {
  color: var(--text);
  font-weight: 600;
}

.pmt__items {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pmt__items::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--tint-07);
}

.pmt__item {
  position: relative;
  border-radius: 16px;
  transition: background .2s;
}

.pmt__item.is-open {
  background: var(--tint-04);
}

.pmt__row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  text-align: left;
}

.pmt__row:hover {
  background: var(--tint-04);
}

.pmt__rail {
  position: relative;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
}

.pmt__dot {
  width: 12px;
  height: 12px;
  border: 2.5px solid var(--text-3);
  border-radius: 50%;
  background: var(--card-from);
}

.pmt__dot.is-in { border-color: var(--grt); }
.pmt__dot.is-late,
.pmt__dot.is-sent { border-color: var(--amt); }
.pmt__dot.is-new { box-shadow: 0 0 0 4px rgba(120, 220, 160, .18), 0 0 10px oklch(0.8 0.15 155); }

.pmt__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.pmt__logo.is-out {
  background: var(--tint-06);
  color: var(--text-3);
}

.pmt__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.pmt__client {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmt__new {
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.pmt__meta {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmt__status {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pmt__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.pmt__status.is-in { background: rgba(120, 220, 160, .12); color: var(--grt); }
.pmt__status.is-late { background: rgba(230, 190, 110, .14); color: var(--amt); }
.pmt__status.is-sent { background: rgba(230, 190, 110, .1); color: var(--amt); }
.pmt__status.is-out { background: var(--tint-06); color: var(--text-3); }

.pmt__amt {
  width: 90px;
  font-size: 15.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.pmt__amt.is-late { color: var(--amt); }
.pmt__amt.is-out { color: var(--text-3); }

.pmt__panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 4px 12px 12px 62px;
}

.pmt__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.pmt__facts div,
.rgn__facts div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 80px;
}

.pmt__facts dt {
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--muted);
}

.pmt__facts dd {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.pmt__btns {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.pmt__empty {
  padding: 12px 4px;
  font-size: 13.5px;
  color: var(--muted);
}

/* ==========================================================================
   22k. Overview 2: revenue by region
   ========================================================================== */
.rgn {
  flex: 1 1 380px;
}

.rgn__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
}

.rgn__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.rgn__kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--tint-07);
  border-radius: 14px;
  background: var(--tint-04);
}

.rgn__kpi dt {
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted);
  white-space: nowrap;
}

.rgn__kpi dd {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rgn__kd {
  font-size: 11px;
  color: var(--muted);
}

.rgn__kd.is-good { color: var(--grt); }
.rgn__kd.is-bad { color: var(--danger); }
.rgn__kd.is-warn { color: var(--amt); }

.rgn__share {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rgn__segs,
.rgn__seglabels {
  display: flex;
  gap: 3px;
}

.rgn__segs {
  height: 18px;
}

.rgn__seg {
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}

.rgn__seg.is-dim { opacity: .3; }
.rgn__seg.is-on { transform: scaleY(1.3); }

.rgn__seg--0 { background: var(--cyan); }
.rgn__seg--1 { background: var(--text); }
.rgn__seg--2 { background: oklch(0.8 0.13 70); }
.rgn__seg--3 { background: oklch(0.75 0.12 290); }
.rgn__seg--4 { background: oklch(0.8 0.15 155); }

.rgn__seglabel {
  min-width: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}

.rgn__seglabel.is-on {
  color: var(--text);
}

.rgn__table {
  display: flex;
  flex-direction: column;
}

.rgn__head,
.rgn__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) .6fr .9fr minmax(0, 1.4fr) 18px;
  align-items: center;
  gap: 10px;
}

.rgn__head {
  padding: 0 6px 10px;
  border-bottom: 1px solid var(--tint-07);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--muted);
}

.rgn__num {
  text-align: right;
}

.rgn__item {
  border-bottom: 1px solid var(--tint-05);
  border-radius: 12px;
  transition: all .2s;
}

.rgn__item.is-active { background: var(--tint-04); }
.rgn__item.is-dim { opacity: .55; }

.rgn__row {
  width: 100%;
  padding: 10px 6px;
  border: 0;
  background: transparent;
  font-size: 14px;
  text-align: left;
}

.rgn__name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rgn__sw {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.rgn__cl { color: var(--text-3); }
.rgn__v { font-weight: 600; }

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

.rgn__track {
  position: relative;
  display: block;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--raised-2);
}

.rgn__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}

.rgn__fill.is-good { background: oklch(0.8 0.15 155); }
.rgn__fill.is-mid { background: var(--cyan); }
.rgn__fill.is-bad { background: var(--danger); }

.rgn__target {
  position: absolute;
  top: -3px;
  bottom: -3px;
  border-left: 2px solid var(--text);
}

.rgn__g {
  flex-shrink: 0;
  display: block;
  width: 40px;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

.rgn__g.is-good { color: var(--grt); }
.rgn__g.is-mid { color: var(--text-3); }
.rgn__g.is-bad { color: var(--danger); }

.rgn__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 2px 10px 14px 22px;
}

.rgn__qs,
.rgn__facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rgn__qs .o2-over,
.rgn__facts .o2-over {
  font-size: 10.5px;
}

.rgn__qbars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 54px;
}

.rgn__q {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  gap: 3px;
  height: 100%;
}

.rgn__qv {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
}

/* Bars grow inside their own box so the labels never squeeze them. */
.rgn__qwrap {
  display: flex;
  align-items: flex-end;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.rgn__qbar {
  display: block;
  width: 100%;
  border-radius: 5px;
}

.rgn__qbar:not([class*="rgn__seg--"]) {
  background: var(--raised-2);
}

.rgn__ql {
  font-size: 10px;
  color: var(--muted);
}

.rgn__facts {
  gap: 7px;
  font-size: 12.5px;
}

.rgn__factlist {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rgn__facts div {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.rgn__facts dt {
  color: var(--muted);
  white-space: nowrap;
}

.rgn__facts dd {
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
}

.rgn__facts .is-good { color: var(--grt); }
.rgn__facts .is-bad { color: var(--danger); }

.rgn__insight {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(154, 219, 230, .1);
  color: var(--accent-fg);
  font-size: 13px;
  line-height: 1.35;
}

.rgn__insight svg {
  flex-shrink: 0;
}

.rgn__insight.is-bad {
  background: rgba(240, 120, 90, .1);
  color: var(--danger);
}

/* Overview 2 on narrow screens */
@media (max-width: 767px) {
  .page-head__tools {
    position: relative;
    margin-left: 0;
  }

  /* On phones the tool menus open under the whole row of buttons. */
  .page-head__tools .pop {
    position: static;
  }

  .page-head__tools .pop__panel {
    left: 0;
    right: auto;
    top: calc(100% + 10px);
    z-index: 45;
  }

  .o2-row > .o2-block > .card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero {
    padding: 22px 18px 0;
  }

  .hero__chart {
    margin: 26px -18px 0;
  }

  .hero__stats {
    gap: 6px;
  }

  .hero__stat {
    padding: 8px 10px;
  }

  .hero__stat dd {
    font-size: 15px;
  }

  .rx__chart {
    height: 240px;
  }

  .rx__labels li:nth-child(even) {
    visibility: hidden;
  }

  .rx__tip {
    width: 170px;
    padding: 10px 12px;
    font-size: 12.5px;
  }

  .goal__pct {
    font-size: 52px;
  }

  .goal__status {
    margin-left: 0;
  }

  .goal__top {
    flex-wrap: wrap;
  }

  .fnl__conn {
    width: 40px;
  }

  /* Narrow columns: keep the counts, the panel below has the details. */
  .fnl__share,
  .fnl__why {
    display: none;
  }

  .fnl__conv {
    padding: 0 6px;
    font-size: 11.5px;
  }

  .fnl__bench {
    display: none;
  }

  .fnl__name {
    font-size: 12px;
  }

  .fnl__n {
    display: none;
  }

  .fnl__stats {
    min-width: 0;
    grid-template-columns: 1fr;
  }

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

  .wl__grid {
    grid-template-columns: 1fr;
  }

  .wl__card--wide {
    grid-column: auto;
  }

  .pmt__status {
    display: none;
  }

  .pmt__panel {
    padding-left: 12px;
  }

  .pmt__btns {
    margin-left: 0;
  }

  .rgn__head,
  .rgn__row {
    grid-template-columns: minmax(0, 1.4fr) .5fr .9fr 18px;
  }

  .rgn__head > span:nth-child(4),
  .rgn__yoy {
    display: none;
  }

  .rgn__panel {
    grid-template-columns: 1fr;
    padding-left: 10px;
  }
}

/* ==========================================================================
   22l. Overview 3: shared pieces
   ========================================================================== */
.o3-row--full > .o2-block > *,
.o3-row--full > .o2-block > .card {
  flex: 1 1 100%;
}

.o3-row--growth .gr { flex: 1.4 1 520px; }
.o3-row--growth .ind { flex: 1 1 380px; }
.o3-row--plan .pl { flex: 1.6 1 620px; }
.o3-row--plan .up { flex: 1 1 380px; }
.o3-row--health .nps { flex: 1 1 460px; }
.o3-row--health .ret { flex: 1 1 460px; }

.o2-row > .o2-block > .ind,
.o2-row > .o2-block > .ret,
.o2-row > .o2-block > .dir {
  gap: 16px;
}

.o3-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  min-height: 44px;
}

.o3-head .o2-tools {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.o3-head > .o3-pill,
.o3-head > .o3-count,
.o3-head > .o2-tabs,
.o3-head > .nps__legend {
  margin-left: auto;
}

/* Segmented control on a solid track (the overview 3 flavour) */
.o3-tabs {
  border: 0;
  background: var(--raised-3);
}

.o3-tabs .o2-tabs__btn {
  height: auto;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-2);
}

.o3-tabs .o2-tabs__btn[aria-pressed="true"] {
  color: var(--pill-fg);
}

.pl .o3-tabs .o2-tabs__btn {
  padding: 7px 13px;
}

.map .o3-tabs .o2-tabs__btn {
  padding: 8px 14px;
  color: var(--muted);
}

.map .o3-tabs .o2-tabs__btn[aria-pressed="true"] {
  color: var(--pill-fg);
}

.o3-tabs.is-muted {
  opacity: .4;
}

.o3-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.o3-toggle[aria-pressed="true"] {
  border-color: rgba(154, 219, 230, .5);
  background: rgba(154, 219, 230, .08);
  color: var(--text);
}

.gr .o2-tools {
  gap: 12px;
}

.gr .o3-toggle {
  color: var(--text-2);
}

.gr .o3-toggle[aria-pressed="true"] {
  border-color: transparent;
  background: var(--cyan-tint);
  color: var(--accent-fg);
}

.o3-toggle__dash {
  width: 14px;
  border-top: 2px dashed currentColor;
}

.o3-pill {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.o3-pill.is-warn { background: var(--warning-tint); color: var(--amt); }
.o3-pill.is-good { background: var(--cyan-tint); color: var(--accent-fg); }

.o3-count {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--raised-3);
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
}

.o3-live {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--cyan-tint);
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.o3-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* Summary strip pinned to the bottom of a card */
.o3-sum {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
  padding: 14px 14px 14px 18px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-04);
}

.o3-sum__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.o3-sum__title {
  font-size: 16px;
  font-weight: 600;
}

.o3-sum__sub {
  font-size: 12.5px;
  color: var(--muted);
}

.o3-cta {
  height: 40px;
  margin-left: auto;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.o3-cta:hover {
  background: var(--pill-hover);
}

.o3-cta.is-off,
.o3-cta.is-off:hover {
  background: var(--raised-3);
  color: var(--muted);
  cursor: default;
}

.o3-cta.is-done,
.o3-cta.is-done:hover {
  border: 0;
  background: var(--cyan-tint);
  color: var(--accent-fg);
}

.o3-cta--ghost {
  border: 1px solid var(--tint-07);
  background: transparent;
  color: var(--text);
}

.o3-cta--ghost:hover {
  background: var(--tint-05);
}

/* ==========================================================================
   22m. Overview 3: KPI cards
   ========================================================================== */
.gk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.gk {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  padding: 22px 24px;
  transition: border-color .2s;
}

.gk:hover {
  border-color: rgba(154, 219, 230, .35);
}

.gk--am {
  padding-bottom: 0;
}

.gk--co {
  gap: 10px;
}

.gk__glow {
  position: absolute;
  top: -90px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(154, 219, 230, .16), transparent);
  pointer-events: none;
}

.gk__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gk__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--cyan-tint);
  color: var(--accent-fg);
}

.gk__icon--ink { background: var(--tint-04); color: var(--text); }
.gk__icon--am { background: var(--warning-tint); color: oklch(0.75 0.13 70); }
.gk__icon--co { background: var(--danger-tint); color: oklch(0.7 0.14 35); }

.gk__label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--muted);
}

.gk__chip {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--cyan-tint);
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.gk__chip--am { background: var(--warning-tint); color: oklch(0.72 0.13 70); }
.gk__chip--co { background: var(--danger-tint); color: oklch(0.7 0.14 35); }

.gk__big {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.gk__value {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}

.gk__when {
  font-size: 13px;
  color: var(--muted);
}

.gk__legend {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
}

.gk__legend > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gk__sw {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.gk__sw--new,
.gk__sw--cy { background: var(--cyan); }
.gk__sw--ret,
.gk__sw--dim { background: var(--gauge-track); }
.gk__sw--teal { background: #6fb8c6; }
.gk__sw--ink { background: var(--text); }
.gk__sw--grey { background: var(--muted); }

.gk__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 92px;
  margin-top: auto;
}

.gk__bar {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  height: 100%;
}

.gk__new,
.gk__ret {
  opacity: .45;
  transition: opacity .2s;
}

.gk__new {
  border-radius: 6px 6px 2px 2px;
  background: var(--cyan);
}

.gk__ret {
  border-radius: 2px 2px 6px 6px;
  background: var(--gauge-track);
}

.gk__bar.is-on .gk__new,
.gk__bar.is-on .gk__ret {
  opacity: 1;
}

.gk__bar.is-on .gk__new {
  box-shadow: 0 0 14px rgba(154, 219, 230, .6);
}

.gk__months {
  display: flex;
  gap: 6px;
  margin-top: -6px;
}

.gk__months span {
  flex: 1;
  font-size: 11px;
  text-align: center;
  color: var(--muted);
}

.gk__months .is-on {
  color: var(--text);
  font-weight: 600;
}

/* Countries donut */
.gk__donutrow {
  display: flex;
  align-items: center;
  gap: 18px;
}

.gk__donut {
  position: relative;
  flex-shrink: 0;
  width: 128px;
  height: 128px;
}

.gk__donut svg {
  display: block;
  width: 128px;
  height: 128px;
  transform: rotate(-90deg);
}

.gk__track,
.gk__seg {
  fill: none;
  stroke-width: 14;
}

.gk__track { stroke: var(--raised-3); }

.gk__seg {
  cursor: pointer;
  transition: stroke-width .2s, opacity .2s;
}

.gk__seg--cy { stroke: var(--cyan); }
.gk__seg--teal { stroke: #6fb8c6; }
.gk__seg--ink { stroke: var(--text); }
.gk__seg--grey { stroke: var(--muted); }
.gk__seg--dim { stroke: var(--gauge-track); }
.gk__seg.is-on { stroke-width: 20; }
.gk__seg.is-dim { opacity: .3; }

.gk__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.gk__cval {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}

.gk__clbl {
  max-width: 80px;
  font-size: 11px;
  text-align: center;
  color: var(--muted);
}

.gk__regions {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.gk__reg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12.5px;
  color: var(--muted);
}

.gk__reg.is-on { color: var(--text); }

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

.gk__regn {
  margin-left: auto;
  font-weight: 600;
}

.gk__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--tint-07);
}

.gk--co .gk__foot {
  flex-wrap: nowrap;
  gap: 10px;
}

.gk__foottext {
  font-size: 12px;
  color: var(--muted);
}

.gk--co .gk__foottext {
  font-size: 12.5px;
}

.gk__tag {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(154, 219, 230, .35);
  border-radius: 999px;
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 600;
}

/* Avg / client area */
.gk__prog {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gk__progrow {
  display: flex;
  font-size: 12px;
  color: var(--muted);
}

.gk__progrow b {
  margin-left: auto;
  color: var(--text);
  font-weight: 600;
}

.gk__progtrack {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: var(--raised-3);
}

.gk__progfill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, oklch(0.7 0.12 70), oklch(0.85 0.12 80));
  transition: width .4s;
}

.gk__area {
  position: relative;
  height: 104px;
  margin: auto -24px 0;
}

.gk__area svg {
  display: block;
  width: 100%;
  height: 104px;
}

.gk__band { fill: oklch(0.8 0.13 70); opacity: .07; }
.gk__target { stroke: var(--muted); stroke-dasharray: 4 4; opacity: .6; }
.gk__line { fill: none; stroke: oklch(0.8 0.13 70); stroke-width: 2.2; stroke-linejoin: round; }

.gk__tlabel {
  position: absolute;
  left: 12px;
  font-size: 11px;
  color: var(--muted);
  transform: translateY(-130%);
}

.gk__guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tint-07);
}

.gk__dot {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
  box-shadow: 0 0 0 4px var(--card-from), 0 0 16px oklch(0.8 0.13 70);
}

.gk__tip {
  position: absolute;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.gk__cols,
.gr__cols {
  position: absolute;
  inset: 0;
  display: flex;
}

.gk__cols > span,
.gr__cols > span {
  flex: 1;
}

/* Retention gauge */
.gk__gauge {
  position: relative;
  display: flex;
  justify-content: center;
}

.gk__gauge svg {
  display: block;
}

.gk__gtrack,
.gk__garc {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}

.gk__gtrack { stroke: var(--raised-3); }
.gk__garc { transition: stroke-dasharray 1s var(--ease-out); }
.gk__gtick { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }

.gk__glabel {
  fill: var(--muted);
  font-size: 11px;
  text-anchor: middle;
}

.gk__gcenter {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.gk__gsub {
  font-size: 12px;
  color: var(--muted);
}

.gk__risk {
  display: flex;
}

.gk__rav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--card-from);
  border-radius: 50%;
  background: var(--raised-3);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}

.gk__rav + .gk__rav {
  margin-left: -8px;
}

.gk__btn {
  height: 30px;
  margin-left: auto;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 12.5px;
  font-weight: 600;
}

.gk__btn:hover { background: var(--pill-hover); }

.gk__btn.is-done,
.gk__btn.is-done:hover {
  background: var(--cyan-tint);
  color: var(--accent-fg);
}

/* ==========================================================================
   22n. Overview 3: clients worldwide map
   ========================================================================== */
.map__flowbtn[aria-pressed="false"] .map__flowkey {
  opacity: .5;
}

.map__flowkey {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--map-hi);
}

.map__box {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--map-bd);
  border-radius: 20px;
  background: var(--map-bg);
}

.map__svg {
  display: block;
  width: 100%;
  height: auto;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.map__svg.is-dragging {
  cursor: grabbing;
}

.map__glowstop { stop-color: var(--map-hi); }
.map__sphere { fill: none; stroke: var(--map-sph); }
.map__grat { fill: none; stroke: var(--map-grat); }

.map__country {
  fill: var(--map-land);
  stroke: var(--map-stroke);
  stroke-width: .6;
  transition: fill .4s, opacity .4s;
}

.map__country.is-client {
  cursor: pointer;
}

.map__country:hover {
  stroke: var(--map-hi);
  stroke-width: 1.2;
}

.map__country.is-dim { opacity: .4; }

.map__flow {
  fill: none;
  stroke: var(--map-hi);
  stroke-dasharray: 3 7;
  opacity: .45;
  animation: map-flow 1.6s linear infinite;
  transition: opacity .3s;
  pointer-events: none;
}

.map__flow.is-dim { opacity: .06; }
.map__flow.is-on { opacity: .9; }
.map__flow.is-off { opacity: 0; }

@keyframes map-flow {
  to { stroke-dashoffset: -20; }
}

.map__pin {
  cursor: pointer;
}

.map__pinin {
  transition: opacity .3s;
}

.map__pin.is-dim .map__pinin { opacity: .25; }
.map__pulse { fill: none; stroke: var(--map-hi); stroke-width: 1.2; }
.map__dot { fill: var(--pill-bg); stroke: var(--map-hi); stroke-width: 2; }

.map__label {
  fill: var(--text);
  font-size: 11px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.map__svg.show-labels .map__pin:not(.is-dim) .map__label {
  opacity: 1;
}

/* Halo copy under each label keeps it readable over the land. */
.map__halo {
  stroke: var(--map-bg);
  stroke-width: 3;
  stroke-linejoin: round;
}

.map__hq rect { fill: var(--map-hi); }
.map__hq .map__hqcore { fill: var(--map-bg); }

.map__zoom {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.map__zb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--map-zbd);
  border-radius: 12px;
  background: var(--map-zb);
  color: var(--text);
  font-size: 20px;
  transition: background .15s;
}

.map__zb:hover { background: var(--map-zbh); }

.map__zb:disabled {
  opacity: .35;
  cursor: default;
}

.map__zb--reset { margin-top: 6px; }

/* The design draws the reset glyph at 26px. */
.map__zb--reset svg {
  width: 26px;
  height: 26px;
}

.map__zl {
  padding: 4px 0;
  font-size: 11px;
  color: var(--muted);
}

.map__tip {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  box-shadow: 0 14px 34px var(--shade-35);
  font-size: 13px;
  transform: translate(-50%, calc(-100% - 14px));
  pointer-events: none;
}

.map__tip[hidden] {
  display: none;
}

.map__tip b {
  font-size: 16px;
  font-weight: 600;
}

.map__tr {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted-3);
}

.map__tr span:last-child {
  color: var(--pill-fg);
  font-weight: 600;
}

.map__tnone {
  color: var(--muted-3);
}

.map__glass {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 270px;
  padding: 16px;
  border: 1px solid var(--map-gbd);
  border-radius: 18px;
  background: var(--map-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.map__glass[hidden] {
  display: none;
}

/* Narrow map: the zoom controls sit in one compact row. */
.map.is-narrow .map__zoom {
  top: 8px;
  right: 8px;
  flex-direction: row;
  gap: 4px;
}

.map.is-narrow .map__zb {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 17px;
}

.map.is-narrow .map__zb--reset {
  margin: 0 0 0 4px;
}

.map.is-narrow .map__zb--reset svg {
  width: 18px;
  height: 18px;
}

.map.is-narrow .map__zl {
  order: 1;
  min-width: 34px;
  text-align: center;
}

.map.is-narrow .map__zb[data-map-zoom="out"] { order: 2; }
.map.is-narrow .map__zb[data-map-zoom="in"] { order: 0; }
.map.is-narrow .map__zb--reset { order: 3; }

.map.is-narrow .map__attr {
  right: 8px;
  bottom: 6px;
  font-size: 10px;
}

.map.is-narrow .map__glass {
  position: static;
  width: auto;
  background: var(--map-tile);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.map__cap {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}

.map__gbig {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.map__gbig b {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}

.map__gbig span {
  padding-bottom: 4px;
  font-size: 13px;
  color: var(--muted);
}

.map__glist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map__gitem {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
}

.map__grow {
  display: flex;
  width: 100%;
  font-size: 13px;
}

.map__grow b {
  margin-left: auto;
  font-weight: 600;
}

.map__gbar {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 9px;
  background: var(--map-track);
}

.map__gbar span {
  display: block;
  height: 100%;
  border-radius: 9px;
  background: var(--map-hi);
  transition: width .4s;
}

.map__gitem:hover .map__grow span {
  color: var(--accent-fg);
}

.map__back {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--map-hi);
  font-size: 13px;
}

.map__gname {
  font-size: 22px;
  font-weight: 500;
}

.map__gtiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.map__gtile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--map-tile);
}

.map__gtile span {
  font-size: 11px;
  color: var(--muted);
}

.map__gtile b {
  font-size: 17px;
  font-weight: 600;
}

.map__cities {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map__cities li {
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.map__cities li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--map-hi);
}

.map__cities span:last-child {
  margin-left: auto;
  color: var(--muted);
}

.map__none {
  font-size: 13px;
  color: var(--muted);
}

.map__attr {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 11px;
  color: var(--muted);
  pointer-events: none;
}

.map__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.map__ramp {
  flex: 0 0 220px;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--map-lo), var(--map-hi));
}

.map__hqkey {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.map__hqsw {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--map-hi);
  transform: rotate(45deg);
}

/* ==========================================================================
   22o. Overview 3: new vs returning
   ========================================================================== */
.gr__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.gr__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
}

.gr__stat dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}

.gr__stat dd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: 28px;
  font-weight: 500;
}

.gr__d {
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 600;
}

.gr__sw {
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

.gr__sw--new { background: var(--cyan); }
.gr__sw--ret { background: var(--text); }
.gr__sw--share { background: oklch(0.8 0.13 70); }

.gr__chart {
  position: relative;
  height: 230px;
  margin-top: 6px;
}

.gr__grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.gr__grid li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.gr__grid li::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tint-07);
}

.gr__grid span {
  width: 18px;
}

.gr__svg {
  position: absolute;
  top: 0;
  left: 26px;
  display: block;
  width: calc(100% - 26px);
  height: 220px;
}

.gr__ly,
.gr__ret,
.gr__new {
  fill: none;
}

.gr__ly {
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  opacity: 0;
  transition: opacity .3s;
}

.gr__ly--new { stroke: var(--cyan); }
.gr__ly--ret { stroke: var(--text); }
.gr__ly--new.is-on { opacity: .7; }
.gr__ly--ret.is-on { opacity: .45; }
.gr__ret { stroke: var(--text); stroke-width: 2.2; opacity: .85; }
.gr__new { stroke: var(--cyan); stroke-width: 2.6; }

.gr__plot {
  position: absolute;
  top: 0;
  right: 0;
  left: 26px;
  height: 220px;
}

.gr__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed rgba(240, 180, 90, .45);
  pointer-events: none;
}

.gr__mark::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: oklch(0.8 0.13 70);
  transform: translateX(-50%) rotate(45deg);
}

.gr__marktext {
  position: absolute;
  top: 10px;
  left: 8px;
  color: var(--amt);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.gr__guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tint-07);
}

.gr__dotn,
.gr__dotr {
  position: absolute;
  border-radius: 50%;
}

.gr__dotn {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--cyan);
  box-shadow: 0 0 0 4px var(--card-from), 0 0 14px var(--cyan);
}

.gr__dotr {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--text);
  box-shadow: 0 0 0 4px var(--card-from);
}

.gr__tip {
  position: absolute;
  top: 34px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  box-shadow: 0 10px 24px var(--shade-25);
  font-size: 12.5px;
  white-space: nowrap;
  pointer-events: none;
}

.gr__tip strong {
  font-weight: 600;
}

.gr__tipmuted {
  opacity: .65;
}

.gr__months {
  display: flex;
  justify-content: space-between;
  margin-top: -8px;
  padding-left: 26px;
  font-size: 12px;
  color: var(--muted);
}

.gr__months span {
  display: flex;
  justify-content: center;
  width: 0;
}

.gr__months .is-on {
  color: var(--text);
  font-weight: 600;
}

/* ==========================================================================
   22p. Overview 3: clients by industry
   ========================================================================== */
.ind__crumb {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ind__root {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
}

.ind__root:disabled {
  cursor: default;
}

.ind__root.is-link {
  color: var(--accent-fg);
}

.ind__sep {
  color: var(--muted);
}

.ind__tiles {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, 1fr);
  gap: 8px;
  min-height: 320px;
}

.ind__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  padding: 14px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
  color: var(--text);
  font: inherit;
  text-align: left;
  transition: background .2s, border-color .2s;
}

button.ind__tile {
  cursor: zoom-in;
}

.ind__tile.is-top {
  border-color: rgba(154, 219, 230, .35);
  background: rgba(154, 219, 230, .14);
}

.ind__tile.is-on {
  border-color: transparent;
  background: var(--cyan);
  color: var(--ink);
}

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

.ind__name {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ind__yoy {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  opacity: .8;
  white-space: nowrap;
}

.ind__mid {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ind__val {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
}

.ind__spark {
  margin-left: auto;
  opacity: .8;
}

.ind__spark polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ind__bot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.ind__track {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--raised-3);
}

.ind__fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--cyan);
  transition: width .4s;
}

.ind__tile.is-on .ind__track { background: rgba(17, 19, 26, .15); }
.ind__tile.is-on .ind__fill { background: var(--ink); }

.ind__pct {
  width: 34px;
  font-size: 12px;
  text-align: right;
  opacity: .75;
}

.ind__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
  font-size: 13.5px;
}

.ind__foot2 {
  margin-left: auto;
  color: var(--muted);
}

/* ==========================================================================
   22q. Overview 3: call planner
   ========================================================================== */
.pl__chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.pl__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 48px;
  padding: 0 14px 0 6px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  transition: background .15s;
}

.pl__chip:hover {
  background: var(--tint-08);
}

.pl__chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--cyan);
  color: var(--ink);
}

.pl__av {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.pl__av--cy { background: var(--cyan); }
.pl__av--cyl { background: #c4f0f6; }
.pl__av--paper { background: #e9ebf0; }
.pl__av--fog { background: #cdd1dc; }
.pl__av--amb { background: oklch(0.85 0.1 70); }
.pl__av--steel { background: #a7abb8; }
.pl__av--cyd { background: #8fd3df; }
.pl__av--mist { background: #d5dbe3; }

.pl__chip[aria-pressed="true"] .pl__av {
  background: var(--ink);
  color: var(--cyan);
}

.pl__chiptext {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;
  line-height: 1.15;
}

.pl__chipname {
  font-size: 13.5px;
  font-weight: 500;
}

.pl__chipmeta {
  font-size: 11.5px;
  opacity: .7;
}

.pl__check {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 13px;
}

.pl__time {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  row-gap: 8px;
}

.pl__ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}

.pl__ticks span {
  display: flex;
  justify-content: center;
  width: 0;
}

.pl__cap {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}

.pl__heat {
  display: flex;
  gap: 1px;
  height: 14px;
  overflow: hidden;
  border-radius: 6px;
}

.pl__cell {
  flex: 1;
}

.pl__cell.is-good { background: var(--cyan); opacity: .9; }
.pl__cell.is-edge { background: oklch(0.8 0.13 70); opacity: .55; }
.pl__cell.is-night { background: var(--raised-3); }

.pl__who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
}

.pl__code {
  flex-shrink: 0;
  width: 30px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--muted);
}

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

.pl__lane {
  position: relative;
  height: 30px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--raised-3);
}

.pl__sh,
.pl__wk {
  position: absolute;
  top: 0;
  bottom: 0;
}

.pl__sh { background: oklch(0.8 0.13 70); opacity: .28; }
.pl__wk { background: var(--cyan); opacity: .9; }
.pl__wk--studio { background: var(--text-2); }

.pl__at {
  position: absolute;
  top: 50%;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .85);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(4px, -50%);
  pointer-events: none;
}

.pl__overlayrow {
  position: relative;
  height: 0;
}

.pl__overlay {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
}

.pl__now,
.pl__pick,
.pl__ghost {
  position: absolute;
  top: -6px;
  bottom: -6px;
  pointer-events: none;
}

.pl__now {
  width: 2px;
  margin-left: -1px;
  background: var(--pill-bg);
  opacity: .55;
}

.pl__pick {
  border: 2px solid var(--cyan);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(154, 219, 230, .45);
}

.pl__ghost {
  border: 1px dashed var(--cyan);
  border-radius: 10px;
  background: rgba(154, 219, 230, .14);
}

.pl__ghost.is-edge { border-color: oklch(0.8 0.13 70); background: rgba(240, 180, 90, .14); }
.pl__ghost.is-night { border-color: oklch(0.72 0.14 35); background: rgba(240, 120, 90, .12); }

.pl__cols {
  position: absolute;
  inset: 0;
  display: flex;
}

.pl__col {
  flex: 1;
  cursor: pointer;
}

.pl__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-left: 150px;
  font-size: 12px;
  color: var(--muted);
}

.pl__legend > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pl__lsw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.pl__lsw--wk { background: var(--cyan); }
.pl__lsw--sh { background: oklch(0.8 0.13 70); opacity: .6; }
.pl__lsw--night { border: 1px solid var(--tint-07); background: var(--raised-3); }

.pl__legend .pl__hint {
  margin-left: auto;
}

.pl__best {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
}

.pl__bestlist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pl__slot {
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.pl__slot:hover {
  background: var(--tint-05);
}

.pl__slot[aria-pressed="true"] {
  border-color: transparent;
  background: var(--cyan);
  color: var(--ink);
}

.pl__nobest {
  color: var(--amt);
  font-size: 13px;
}

.pl__q {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pl__q.is-good { background: var(--cyan-tint); color: var(--accent-fg); }
.pl__q.is-edge { background: var(--warning-tint); color: var(--amt); }
.pl__q.is-night { background: var(--danger-tint); color: oklch(0.72 0.14 35); }
.pl__q.is-none { background: var(--raised-3); color: var(--muted); }

/* ==========================================================================
   22r. Overview 3: upcoming client calls
   ========================================================================== */
.up__groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.up__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.up__day {
  padding-left: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--muted);
}

.up__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.up__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
}

.up__item.is-new {
  border-color: rgba(154, 219, 230, .45);
  background: rgba(154, 219, 230, .06);
}

.up__when {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 1px;
  width: 52px;
}

.up__time {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.up__dur {
  font-size: 11px;
  color: var(--muted);
}

.up__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.up__title {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.up__tz {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.up__zone {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--raised-3);
  font-size: 11px;
  white-space: nowrap;
}

.up__zone b {
  font-weight: 600;
  color: var(--muted);
}

.up__btn {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.up__btn:hover {
  background: var(--tint-05);
  text-decoration: none;
}

.up__btn.is-join {
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.up__btn.is-join:hover { background: var(--pill-hover); }

.up__btn.is-new,
.up__btn.is-done,
.up__btn.is-done:hover {
  border: 0;
  background: var(--cyan-tint);
  color: var(--accent-fg);
}

/* ==========================================================================
   22s. Overview 3: client satisfaction and retention watch
   ========================================================================== */
.nps__legend {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.nps__legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nps__sw {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.nps__sw--p { background: var(--cyan); }
.nps__sw--n { background: var(--gauge-track); }
.nps__sw--d { background: oklch(0.72 0.14 35); }

.nps__top {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.nps__hero {
  display: flex;
  align-self: flex-start;
  align-items: flex-end;
  flex: 1;
  gap: 14px;
  min-width: 0;
}

.nps__score {
  font-size: 68px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: .85;
}

.nps__who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 4px;
}

.nps__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.nps__band {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.nps__band.is-good { background: var(--cyan-tint); color: var(--accent-fg); }
.nps__band.is-edge { background: var(--warning-tint); color: var(--amt); }
.nps__band.is-bad { background: var(--danger-tint); color: oklch(0.72 0.14 35); }

.nps__meta {
  font-size: 13px;
  color: var(--muted);
}

.nps__trend {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
  width: 220px;
  padding: 12px 14px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
}

.nps__trendhead {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.nps__d {
  margin-left: auto;
  color: var(--accent-fg);
  font-weight: 600;
}

.nps__d.is-down,
.nps__delta.is-down {
  color: oklch(0.72 0.14 35);
}

.nps__spark {
  display: block;
  overflow: visible;
}

.nps__spark polyline {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nps__spark circle {
  fill: var(--cyan);
  stroke: var(--card-from);
  stroke-width: 2;
}

.nps__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nps__theme {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.nps__theme.is-up { background: var(--cyan-tint); color: var(--accent-fg); }
.nps__theme.is-down { background: var(--danger-tint); color: oklch(0.72 0.14 35); }
.nps__theme.is-flat { background: var(--raised-3); color: var(--text-2); }

.nps__table,
.nps__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nps__cols,
.nps__row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 44px 46px;
  gap: 14px;
}

.nps__cols {
  padding: 0 10px;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
}

.nps__cols span:nth-child(n+3) {
  text-align: right;
}

.nps__mixh {
  position: relative;
}

.nps__bench {
  position: absolute;
  left: 60%;
  color: var(--amt);
  letter-spacing: .04em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.nps__row {
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  text-align: left;
  transition: background .15s;
}

.nps__row.is-on { background: var(--tint-04); }

.nps__row.is-pin {
  border-color: rgba(154, 219, 230, .35);
  background: rgba(154, 219, 230, .06);
}

.nps__rname {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
}

.nps__row.is-on .nps__rname,
.nps__row.is-pin .nps__rname {
  color: var(--text);
}

.nps__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.nps__dot.is-low { background: oklch(0.72 0.14 35); }

.nps__mix {
  position: relative;
  display: flex;
  gap: 2px;
  height: 14px;
}

.nps__p,
.nps__n,
.nps__dd {
  display: block;
  transition: width .3s;
}

.nps__p {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-left: 6px;
  border-radius: 7px 2px 2px 7px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
}

.nps__n {
  border-radius: 2px;
  background: var(--gauge-track);
}

.nps__dd {
  border-radius: 2px 7px 7px 2px;
  background: oklch(0.72 0.14 35);
}

.nps__benchline {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: 60%;
  border-left: 2px dashed oklch(0.8 0.13 70);
}

.nps__val {
  font-weight: 600;
  text-align: right;
}

.nps__delta {
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

/* Retention watch */
.ret__meter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
}

.ret__mhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ret__cap {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--muted);
}

.ret__left {
  margin-left: auto;
  color: var(--amt);
  font-size: 22px;
  font-weight: 600;
}

.ret__left.is-zero { color: var(--accent-fg); }

.ret__of,
.ret__prog {
  font-size: 12.5px;
  color: var(--muted);
}

.ret__prog {
  font-size: 12px;
}

.ret__bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.ret__risk,
.ret__safe {
  display: block;
  height: 100%;
  transition: width .5s var(--ease-out);
}

.ret__risk { background: linear-gradient(90deg, oklch(0.72 0.14 35), oklch(0.8 0.13 70)); }
.ret__safe { background: rgba(154, 219, 230, .5); }

.ret__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ret__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
  transition: background .2s, border-color .2s;
}

.ret__item.is-open,
.ret__item.is-done {
  border-color: rgba(154, 219, 230, .35);
}

.ret__item.is-done {
  background: rgba(154, 219, 230, .05);
}

.ret__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ret__av {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--raised-3);
  font-size: 13px;
  font-weight: 600;
}

.ret__health {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--card-from);
  border-radius: 50%;
}

.ret__health.is-ok { background: var(--cyan); }
.ret__health.is-warn { background: oklch(0.8 0.13 70); }
.ret__health.is-bad { background: oklch(0.72 0.14 35); }

.ret__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

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

.ret__name {
  font-size: 15px;
  font-weight: 500;
}

.ret__meta {
  overflow: hidden;
  font-size: 12px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ret__days {
  flex: 1;
  max-width: 180px;
  height: 4px;
  border-radius: 99px;
  background: var(--raised-3);
}

.ret__dfill {
  display: block;
  height: 100%;
  border-radius: 99px;
}

.ret__dfill.is-warn { background: oklch(0.8 0.13 70); }
.ret__dfill.is-bad { background: oklch(0.72 0.14 35); }

.ret__dtext {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ret__dtext.is-warn { color: var(--amt); }
.ret__dtext.is-bad { color: oklch(0.72 0.14 35); }

.ret__last {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.ret__rev {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.ret__btn {
  min-width: 110px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.ret__btn:hover { background: var(--pill-hover); }

.ret__btn.is-close,
.ret__btn.is-close:hover {
  border: 1px solid var(--tint-07);
  background: transparent;
  color: var(--text-2);
}

.ret__btn.is-done,
.ret__btn.is-done:hover {
  background: var(--cyan-tint);
  color: var(--accent-fg);
}

.ret__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 52px;
}

.ret__act {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: var(--card-from);
  color: var(--text);
  font-size: 12.5px;
  white-space: nowrap;
}

.ret__act:hover {
  border-color: rgba(154, 219, 230, .5);
}

/* ==========================================================================
   22t. Overview 3: client directory
   ========================================================================== */
.dir__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.dir__search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 240px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: var(--search-bg);
  color: var(--muted);
}

.dir__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
  font-size: 14px;
}

.dir__search input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.dir__search:focus-within {
  border-color: rgba(154, 219, 230, .6);
}

.dir__region select {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: var(--card-from);
  color: var(--text);
  font-size: 13.5px;
  cursor: pointer;
}

.dir__dens .o2-tabs__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding: 0;
}

.dir__dens {
  border: 0;
  background: var(--raised-3);
}

.dir__tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 4px;
  border-bottom: 1px solid var(--tint-07);
}

.dir__status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dir__tab {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  height: 40px;
  margin-bottom: -1px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

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

.dir__tab[aria-pressed="true"] {
  border-bottom-color: var(--cyan);
  color: var(--text);
}

.dir__n {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--raised-3);
  color: var(--muted);
  font-size: 11.5px;
}

.dir__tab[aria-pressed="true"] .dir__n {
  background: rgba(154, 219, 230, .15);
  color: var(--accent-fg);
}

.dir__mapchip {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  height: 30px;
  margin: 0 0 6px auto;
  padding: 0 10px 0 12px;
  border: 1px solid rgba(154, 219, 230, .5);
  border-radius: 999px;
  background: var(--cyan-tint);
  color: var(--accent-fg);
  font-size: 12.5px;
  white-space: nowrap;
}

.dir__bulk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  border-radius: 14px;
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.dir__bsel {
  font-size: 14px;
  font-weight: 600;
}

.dir__brev {
  font-size: 13px;
  opacity: .7;
}

.dir__bbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.dir__bbtn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(127, 127, 127, .35);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  white-space: nowrap;
}

.dir__bbtn.is-clear {
  border: 0;
  opacity: .7;
}

.dir__table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.dir__table tr {
  display: grid;
  grid-template-columns: 28px minmax(180px, 1.6fr) minmax(140px, 1.2fr) minmax(130px, 1fr) 120px 130px 110px;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
}

.dir__table thead tr {
  padding-bottom: 10px;
}

.dir__table th,
.dir__table td {
  min-width: 0;
  padding: 0;
  font-weight: inherit;
  text-align: left;
}

.dir__sort {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .12em;
}

.dir__table th:last-child .dir__sort {
  margin-left: auto;
}

.dir__sort.is-on,
.dir__sort:hover {
  color: var(--text);
}

.dir__arrow {
  font-size: 10px;
  opacity: .25;
}

.dir__sort.is-on .dir__arrow {
  opacity: 1;
}

.dir__row {
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid var(--raised-3);
  font-size: 14px;
  cursor: pointer;
}

.dir__table .dir__row {
  padding-top: 12px;
  padding-bottom: 12px;
}

.dir.is-dense .dir__table .dir__row {
  padding-top: 7px;
  padding-bottom: 7px;
}

.dir__row:hover {
  background: var(--tint-04);
}

.dir__row.is-sel {
  background: rgba(154, 219, 230, .06);
}

.dir__row.is-new .dir__nm::after {
  content: "New";
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cyan-tint);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 600;
}

.dir__cb {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--gauge-track);
  border-radius: 5px;
  background: transparent no-repeat center / 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.dir__cb:checked {
  border-color: transparent;
  background-color: var(--cyan);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311131a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}

.dir__cb:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.dir__client {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dir__av {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--raised-3);
  font-size: 13px;
  font-weight: 600;
}

.dir.is-dense .dir__av {
  width: 28px;
  height: 28px;
}

.dir__cname {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dir__nm {
  font-weight: 500;
}

.dir__ind {
  font-size: 12px;
  color: var(--muted);
}

.dir.is-dense .dir__ind {
  display: none;
}

.dir__cc {
  color: var(--muted);
  font-size: 12.5px;
}

.dir__mgr {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dir__face {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.dir__st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.dir__sdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.dir__st.is-active { background: var(--cyan-tint); color: var(--accent-fg); }
.dir__st.is-onboarding { background: var(--raised-3); color: var(--text); }
.dir__st.is-at-risk { background: var(--warning-tint); color: var(--amt); }

.dir__last {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
}

.dir__lbar {
  flex-shrink: 0;
  width: 44px;
  height: 4px;
  border-radius: 99px;
  background: var(--raised-3);
}

.dir__lfill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--text-2);
}

.dir__last.is-late { color: var(--amt); }
.dir__last.is-late .dir__lfill { background: oklch(0.8 0.13 70); }

.dir__rev {
  font-weight: 600;
  text-align: right;
}

.dir__table td.dir__rev {
  font-weight: 600;
  text-align: right;
}

.dir__empty td {
  grid-column: 1 / -1;
  padding: 24px 0;
  color: var(--muted);
  text-align: center;
}

.dir__foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dir__info {
  font-size: 13.5px;
  color: var(--muted);
}

.dir__pages {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.dir__pg {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
}

.dir__pg:hover {
  background: var(--tint-05);
}

.dir__pg[aria-current="page"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

/* ==========================================================================
   22u. Overview 4: shared pieces
   ========================================================================== */
.o4-row--cap .hm { flex: 1.5 1 560px; }
.o4-row--cap .tt { flex: 1 1 340px; }
.o4-row--due .ap,
.o4-row--due .dl { flex: 1 1 460px; }

.o2-row > .o2-block > .gt,
.o2-row > .o2-block > .kb,
.o2-row > .o2-block > .hm,
.o2-row > .o2-block > .pf {
  gap: 16px;
}

.o2-row > .o2-block > .ap,
.o2-row > .o2-block > .dl {
  gap: 14px;
}

/* Status and stage tones: --tone fills, --tone-fg is the readable text colour */
.o4 .is-cy,
.o4 .is-on-track { --tone: var(--cyan); --tone-fg: var(--accent-fg); }
.o4 .is-ink,
.o4 .is-in-review { --tone: var(--text); --tone-fg: var(--text); }
.o4 .is-am,
.o4 .is-at-risk { --tone: oklch(0.8 0.13 70); --tone-fg: var(--amt); }
.o4 .is-steel,
.o4 .is-kickoff { --tone: #a7abb8; --tone-fg: #a7abb8; }
.o4 .is-muted,
.o4 .is-scheduled { --tone: #8a8f9e; --tone-fg: #8a8f9e; }
.o4 .is-gr,
.o4 .is-delivered { --tone: oklch(0.8 0.14 155); --tone-fg: oklch(0.8 0.14 155); }
.o4 .is-teal { --tone: #6fb8c6; --tone-fg: #6fb8c6; }
.o4 .is-slate { --tone: #4a4e5b; --tone-fg: var(--text-2); }

.o4-tabs--13 .o2-tabs__btn {
  padding: 7px 13px;
}

.o4-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone);
}

.o4-dot--lg {
  width: 9px;
  height: 9px;
}

.o4-faces {
  display: flex;
  flex-shrink: 0;
}

.o4-face {
  flex-shrink: 0;
  border: 2px solid var(--card-from);
  border-radius: 50%;
  object-fit: cover;
}

.o4-faces .o4-face + .o4-face {
  margin-left: -7px;
}

.o4-status {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tint-06);
  color: var(--tone-fg);
  font-size: 12.5px;
  font-weight: 600;
}

.o4-status.is-at-risk {
  background: var(--warning-tint);
}

.o4-ghost {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
}

.o4-ghost:hover {
  background: var(--tint-05);
}

.o4-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
  font-size: 14px;
}

.o4-foot__end {
  margin-left: auto;
  color: var(--accent-fg);
  font-weight: 600;
  white-space: nowrap;
}

.o4-foot__end.is-over {
  color: oklch(0.72 0.14 35);
}

/* ==========================================================================
   22v. Overview 4: KPI cards
   ========================================================================== */
.k4-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.k4 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  padding: 22px 24px 0;
}

.k4--cy { --tone: var(--cyan); --k4-tint: var(--cyan-tint); }
.k4--gr { --tone: oklch(0.8 0.14 155); --k4-tint: rgba(90, 200, 140, .12); }
.k4--am { --tone: oklch(0.8 0.13 70); --k4-tint: var(--warning-tint); }
.k4--ink { --tone: var(--text); --k4-tint: var(--tint-06); }

.k4__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.k4__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--k4-tint);
  color: var(--tone);
}

.k4__label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--muted);
}

.k4__chip {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--cyan-tint);
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.k4__chip.is-bad {
  background: var(--danger-tint);
  color: oklch(0.72 0.14 35);
}

.k4__big {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.k4__value {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}

.k4__when,
.k4__sub {
  font-size: 13px;
  color: var(--muted);
}

.k4__chart {
  position: relative;
  height: 72px;
  margin: 6px -24px 0;
}

.k4__chart svg {
  display: block;
  width: 100%;
  height: 72px;
}

.k4__area { fill: var(--tone); opacity: .13; }
.k4__line { fill: none; stroke: var(--tone); stroke-width: 2; stroke-linejoin: round; }

.k4__dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 4px var(--card-to);
}

.k4__cols {
  position: absolute;
  inset: 0;
  display: flex;
}

.k4__cols > span {
  flex: 1;
}

/* ==========================================================================
   22w. Overview 4: project timeline
   ========================================================================== */
.gt__grid {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-width: 860px;
}

.gt__ruler {
  position: relative;
  display: flex;
  height: 30px;
  border-bottom: 1px solid var(--tint-07);
}

.gt__wk {
  display: flex;
  align-items: center;
  flex: 1;
  padding-left: 8px;
  font-size: 11.5px;
  color: var(--muted);
}

.gt__wk.is-now {
  color: var(--accent-fg);
  font-weight: 700;
}

.gt__who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 52px;
  padding-right: 14px;
  border-bottom: 1px solid var(--tint-07);
}

.gt__who.is-on,
.gt__track.is-on {
  background-color: var(--tint-03);
}

.gt__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gt__name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gt__team {
  font-size: 12px;
  color: var(--muted);
}

.gt__track {
  position: relative;
  height: 52px;
  border-bottom: 1px solid var(--tint-07);
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), var(--tint-07) calc(12.5% - 1px), var(--tint-07) 12.5%);
}

.gt__today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--cyan);
  opacity: .6;
}

.gt__bar {
  position: absolute;
  top: 12px;
  height: 28px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--tint-07);
  border-radius: 9px;
  background: var(--raised-3);
  color: var(--text);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: box-shadow .2s;
}

.gt__bar.is-on {
  border-color: var(--tone);
  box-shadow: 0 0 0 1px var(--tone);
}

.gt__bar.is-drag {
  box-shadow: 0 8px 24px rgba(154, 219, 230, .35);
  cursor: grabbing;
}

.gt__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--tone);
  opacity: .85;
}

.gt__pct {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.gt__pct.is-dark {
  color: var(--ink);
}

/* "In review" fills with ink, which turns dark on the light theme. */
[data-theme="light"] .gt__bar.is-in-review .gt__pct.is-dark {
  color: #ffffff;
}

.gt__ms {
  position: absolute;
  top: 21px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border: 2px solid var(--card-from);
  border-radius: 2px;
  background: var(--text);
  transform: rotate(45deg);
  pointer-events: none;
}

.gt__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
  font-size: 14px;
}

.gt__fname {
  font-weight: 600;
}

.gt__fdates {
  color: var(--text-2);
}

.gt__fnext {
  color: var(--muted);
}

/* ==========================================================================
   22x. Overview 4: pipeline
   ========================================================================== */
.kb__total {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}

.kb__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 12px;
}

.kb__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 280px;
  padding: 10px;
  border: 1px dashed var(--tint-07);
  border-radius: 18px;
  background: var(--tint-02);
  transition: background .15s, border-color .15s;
}

.kb__col.is-over {
  border-color: rgba(154, 219, 230, .5);
  background: rgba(154, 219, 230, .06);
}

.kb__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}

.kb__n {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--raised-3);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

.kb__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--tint-07);
  border-radius: 14px;
  background: var(--card-from);
  box-shadow: 0 6px 16px var(--shade-25);
  cursor: grab;
}

.kb__card:hover {
  border-color: rgba(154, 219, 230, .4);
}

.kb__card.is-late {
  border-color: rgba(240, 180, 90, .35);
}

.kb__card.is-drag {
  opacity: .4;
}

.kb__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  font-weight: 500;
}

.kb__client {
  font-size: 14px;
  font-weight: 500;
}

.kb__what {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.kb__bar {
  display: block;
  height: 4px;
  border-radius: 99px;
  background: var(--raised-3);
}

.kb__fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--tone);
}

.kb__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kb__due {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 11.5px;
  color: var(--muted);
}

.kb__card.is-late .kb__due {
  color: var(--amt);
}

.kb__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 12.5px;
  color: var(--muted-2);
}

/* ==========================================================================
   22y. Overview 4: team capacity and time tracking
   ========================================================================== */
.hm__legend {
  display: flex;
  gap: 12px;
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.hm__legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hm__sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* Rows share any height the neighbouring card adds; footer stays at the bottom. */
.hm > .scroll-x {
  display: flex;
  flex: 1;
}

.hm__table {
  display: grid;
  flex: 1;
  grid-template-rows: auto repeat(6, minmax(38px, 1fr)) auto;
  min-width: 600px;
  grid-template-columns: 150px repeat(8, minmax(0, 1fr));
  align-items: center;
  gap: 5px;
}

.hm__table thead,
.hm__table tbody,
.hm__table tfoot,
.hm__table tr {
  display: contents;
}

.hm__table th,
.hm__table td {
  padding: 0;
  font-weight: 400;
}

.hm__wk {
  font-size: 11.5px;
  text-align: center;
  color: var(--muted);
}

.hm__wk.is-now { color: var(--accent-fg); font-weight: 600; }
.hm__wk.is-hot { color: var(--text); font-weight: 600; }

.hm__who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: left;
}

.hm__who .o4-face {
  border: 0;
}

.hm__nm {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hm__name {
  overflow: hidden;
  font-size: 13.5px;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hm__who.is-hot .hm__name {
  color: var(--text);
}

.hm__role {
  font-size: 11px;
  color: var(--muted);
}

.hm__cell {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  min-height: 38px;
  border-radius: 9px;
  outline: 1px solid transparent;
  outline-offset: 1px;
  font-size: 12px;
  font-weight: 600;
  transition: outline-color .15s;
}

.hm__table .hm__cell {
  font-weight: 600;
}

.hm__cell.is-line { outline-color: var(--tint-14); }

.hm__cell.is-on {
  outline: 2px solid var(--text);
}

.is-low.hm__cell,
.hm__sw.is-low { background: var(--raised-3); color: var(--muted); }
.is-mid.hm__cell,
.hm__sw.is-mid { background: rgba(154, 219, 230, .3); color: var(--text); }
.is-high.hm__cell,
.hm__sw.is-high { background: rgba(154, 219, 230, .7); color: var(--ink); }
.is-over.hm__cell,
.hm__sw.is-over { background: oklch(0.72 0.14 35); color: var(--ink); }

.hm__table .hm__avgl {
  padding-top: 4px;
  font-size: 11px;
  letter-spacing: .12em;
  text-align: left;
  color: var(--muted);
}

.hm__table .hm__avg {
  padding-top: 4px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.hm__table .hm__avg.is-over { color: oklch(0.72 0.14 35); }
.hm__table .hm__avg.is-good { color: var(--accent-fg); }

/* Time tracking */
.tt__donut {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt__donut svg {
  display: block;
  transform: rotate(-90deg);
}

.tt__track,
.tt__seg {
  fill: none;
  stroke-width: 20;
}

.tt__track { stroke: var(--raised-3); }

.tt__seg {
  stroke: var(--tone);
  cursor: pointer;
  transition: stroke-width .3s, opacity .3s;
}

.tt__seg.is-on { stroke-width: 26; }
.tt__seg.is-dim { opacity: .3; }

.tt__center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.tt__big {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}

.tt__lbl {
  font-size: 12px;
  color: var(--muted);
}

.tt__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tt__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 14px;
}

.tt__row.is-on {
  background: var(--tint-04);
}

.tt__sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--tone);
}

.tt__kind {
  font-size: 11.5px;
  color: var(--muted);
}

.tt__h {
  margin-left: auto;
  font-weight: 600;
}

.tt__pct {
  width: 40px;
  font-size: 12.5px;
  text-align: right;
  color: var(--muted);
}

.tt__target {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-size: 13px;
  color: var(--muted);
}

.tt__target b {
  color: var(--text);
  font-weight: 600;
}

.tt__bar {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: var(--raised-3);
}

.tt__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 99px;
  background: var(--cyan);
  transition: width .4s;
}

.tt__mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 75%;
  border-left: 2px solid var(--text);
}

/* ==========================================================================
   22z. Overview 4: approvals, deadlines and profitability
   ========================================================================== */
.ap__list {
  display: flex;
  flex-direction: column;
}

.ap__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
}

.ap__row + .ap__row {
  border-top: 1px solid var(--raised-3);
}

.ap__file {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--raised-3);
  color: var(--text-2);
}

.ap__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ap__name {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap__meta {
  font-size: 12.5px;
  color: var(--muted);
}

.ap__rounds {
  display: flex;
  flex-shrink: 0;
  gap: 3px;
}

.ap__r {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 7px;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 600;
}

.ap__r.is-past { background: var(--gauge-track); color: var(--text); }
.ap__r.is-now { background: rgba(154, 219, 230, .15); color: var(--accent-fg); }
.ap__r.is-last { background: rgba(240, 120, 90, .18); color: oklch(0.72 0.14 35); }

.ap__wait {
  flex-shrink: 0;
  width: 68px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.ap__wait.is-late {
  color: var(--amt);
}

.ap__btn {
  flex-shrink: 0;
  min-width: 84px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ap__btn:hover {
  background: var(--tint-05);
}

.ap__btn.is-solid,
.ap__btn.is-solid:hover {
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.ap__btn.is-done,
.ap__btn.is-done:hover {
  border: 0;
  background: var(--cyan-tint);
  color: var(--accent-fg);
}

/* Deadlines */
.dl__days {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.dl__day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-02);
}

.dl__day.is-today {
  border-color: rgba(154, 219, 230, .35);
  background: rgba(154, 219, 230, .06);
}

.dl__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding-bottom: 6px;
}

.dl__dow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--muted);
}

.dl__n {
  font-size: 20px;
  font-weight: 600;
}

.dl__day.is-today .dl__dow,
.dl__day.is-today .dl__n {
  color: var(--accent-fg);
}

.dl__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--tint-07);
  border-radius: 10px;
  background: var(--card-from);
  color: var(--text);
  text-align: left;
}

.dl__item:hover {
  border-color: rgba(154, 219, 230, .4);
}

.dl__item.is-done {
  border-color: transparent;
  background: rgba(90, 200, 140, .08);
}

.dl__tag {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--tone-fg);
  font-size: 11px;
  font-weight: 600;
}

.dl__tdot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tone);
}

.dl__task {
  font-size: 12.5px;
  line-height: 1.3;
}

.dl__item.is-done .dl__task {
  opacity: .6;
  text-decoration: line-through;
}

/* Profitability */
.pf__only[aria-pressed="true"] {
  border-color: transparent;
  background: rgba(240, 120, 90, .14);
  color: oklch(0.72 0.14 35);
}

.pf .o3-toggle {
  border-color: var(--tint-08);
  color: var(--text-2);
}

.pf__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.pf__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
}

.pf__stat dt {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
}

.pf__v {
  font-size: 24px;
  font-weight: 600;
}

.pf__v.is-over { color: oklch(0.72 0.14 35); }
.pf__v.is-acc { color: var(--accent-fg); }

.pf__table {
  width: 100%;
  min-width: 820px;
}

.pf__table tr {
  display: grid;
  grid-template-columns: minmax(200px, 1.3fr) 90px minmax(260px, 2fr) 90px 110px;
  align-items: center;
  gap: 16px;
  padding: 12px;
}

.pf__table thead tr {
  padding: 0 12px 10px;
}

.pf__table th,
.pf__table td {
  min-width: 0;
  padding: 0;
  text-align: left;
}

.pf__table th {
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
}

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

.pf__row {
  border-top: 1px solid var(--raised-3);
  font-size: 14px;
}

.pf__row:hover {
  background: var(--tint-03);
}

.pf__name,
.pf__meta {
  display: block;
}

.pf__name {
  font-weight: 500;
}

.pf__meta {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

.pf__budget {
  color: var(--text-2);
}

.pf__bar {
  position: relative;
  display: block;
  height: 14px;
  border-radius: 7px;
  background: var(--raised-3);
}

.pf__fore,
.pf__spent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 7px;
  background: var(--cyan);
}

.pf__fore { opacity: .35; }
.pf__bar.is-over .pf__fore,
.pf__bar.is-over .pf__spent { background: oklch(0.72 0.14 35); }

.pf__mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  border-left: 2px solid var(--text);
}

.pf__table .pf__fc {
  font-weight: 600;
}

.pf__fc.is-over {
  color: oklch(0.72 0.14 35);
}

.pf__m {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cyan-tint);
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 600;
}

.pf__m.is-warn { background: var(--warning-tint); color: var(--amt); }
.pf__m.is-bad { background: rgba(240, 120, 90, .14); color: oklch(0.72 0.14 35); }

.pf__empty td {
  grid-column: 1 / -1;
  padding: 20px 0;
  color: var(--muted);
  text-align: center;
}

.pf__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
}

.pf__legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pf__sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.pf__sw.is-spent { background: var(--cyan); }
.pf__sw.is-fore { background: rgba(154, 219, 230, .35); }
.pf__sw.is-over { background: oklch(0.72 0.14 35); }

.pf__sw.is-budget {
  width: 2px;
  height: 12px;
  border-radius: 0;
  background: var(--text);
}

/* ==========================================================================
   22za. Categories: tones and shared pieces
   ========================================================================== */
/* --c fills a group or status; --c-fg is its readable text colour */
.ct-t--cy,
.ap-t--cy,
.pr-t--cy { --c: var(--cyan); --c-fg: var(--accent-fg); }
.ct-t--am,
.ap-t--am,
.pr-t--am { --c: oklch(0.8 0.13 70); --c-fg: var(--amt); }
.ct-t--gr,
.ap-t--gr,
.pr-t--gr { --c: oklch(0.8 0.14 155); --c-fg: var(--grt); }
.ct-t--teal,
.ap-t--teal,
.pr-t--teal { --c: #6fb8c6; --c-fg: #6fb8c6; }
.ct-t--co,
.ap-t--co,
.pr-t--co { --c: oklch(0.72 0.14 35); --c-fg: oklch(0.72 0.14 35); }
.ct-t--grey,
.ap-t--grey,
.pr-t--grey { --c: #a7abb8; --c-fg: #a7abb8; }
.ct-t--ink,
.ap-t--ink,
.pr-t--ink { --c: var(--text); --c-fg: var(--text); }
.ct-t--muted,
.ap-t--muted,
.pr-t--muted { --c: #8a8f9e; --c-fg: #8a8f9e; }
.ct-t--slate,
.ap-t--slate,
.pr-t--slate { --c: var(--gauge-track); --c-fg: var(--muted); }
.ct-t--none,
.ap-t--none,
.pr-t--none { --c: var(--raised-3); --c-fg: var(--muted); }

.ct-row2 .ct-tree { flex: 1.6 1 660px; }
.ct-row2 .ct-ed { flex: 1 1 400px; }
.ct-row3 .ct-pf { flex: 1.7 1 620px; }
.ct-row3 .ct-na { flex: 1 1 380px; }

.o2-row > .o2-block > .ct-tb {
  gap: 14px;
  padding: 18px 20px;
}

.o2-row > .o2-block > .ct-tree,
.o2-row > .o2-block > .ct-pf,
.o2-row > .o2-block > .ct-na {
  gap: 14px;
}

.o2-row > .o2-block > .ct-all {
  position: relative;
  gap: 16px;
  transition: padding .25s;
}

.o2-row > .o2-block > .ct-all.has-dock {
  padding-bottom: 92px;
}

.o2-row > .o2-block > .ct-ed {
  position: relative;
  gap: 14px;
  padding: 22px 22px 96px;
}

.o2-row > .o2-block > .ct-k2 {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ct-sw {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--c);
}

.ct-sw--round {
  border-radius: 50%;
}

.ct-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
}

.ct-muted { color: var(--muted); }
.ct-dim { color: var(--muted-2); }
.ct-soft { color: var(--text-2); }
.ct-sm { font-size: 12px; }
.ct-r { text-align: right; }

.ct-none {
  padding: 24px 0;
  color: var(--muted);
  text-align: center;
}

.ct-delta {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.ct-delta.is-up { color: var(--accent-fg); }
.ct-delta.is-down { color: oklch(0.72 0.14 35); }

.ct-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c);
  font-size: 13px;
  font-weight: 700;
}

.ct-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.ct-ghost {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 13.5px;
  white-space: nowrap;
}

.ct-ghost:hover { background: var(--tint-05); }

.ct-ghost--sm {
  gap: 6px;
  height: 36px;
  font-size: 13px;
}

.ct-new {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ct-new:hover { background: var(--pill-hover); }

.ct-new--sm {
  height: 32px;
  margin-left: auto;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
}

.ct-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--tint-14);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ct-btn:hover { background: var(--tint-08); }

.ct-btn--cy,
.ct-btn--cy:hover {
  border: 0;
  background: var(--cyan);
  color: var(--ink);
}

.ct-btn--danger,
.ct-btn--danger:hover {
  padding: 0 16px;
  border: 0;
  background: oklch(0.72 0.14 35);
  color: var(--ink);
  font-weight: 700;
}

.ct-btn--sm {
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 400;
}

.ct-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ct-link--muted {
  height: 36px;
  padding: 0 12px;
  color: var(--muted);
  text-decoration: none;
}

.ct-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.ct-icon:hover { background: var(--tint-06); }

.ct-icon--danger,
.ct-icon--danger:hover {
  border: 1px solid rgba(240, 120, 90, .35);
  background: rgba(240, 120, 90, .08);
  color: oklch(0.72 0.14 35);
}

/* Native checkbox drawn as the design's rounded square */
.ct-cb {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--gauge-track);
  border-radius: 6px;
  background: transparent no-repeat center / 12px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}

.ct-cb:checked,
.ct-cb:indeterminate {
  border-color: transparent;
  background-color: var(--cyan);
}

.ct-cb:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311131a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}

.ct-cb:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311131a' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

.ct-cb:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.o3-pill.is-bad { background: var(--danger-tint); color: oklch(0.72 0.14 35); font-weight: 700; }
.o3-pill.is-ok { background: rgba(90, 200, 140, .12); color: oklch(0.8 0.14 155); font-weight: 700; }

.ct-tabs--xs { padding: 3px; }

.ct-tabs--xs .o2-tabs__btn {
  padding: 5px 11px;
  font-size: 12px;
}

/* ==========================================================================
   22zb. Categories: toolbar
   ========================================================================== */
.ct-tb__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ct-search {
  display: flex;
  align-items: center;
  flex: 1 1 200px;
  gap: 10px;
  min-width: 0;
  max-width: 320px;
  height: 46px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--muted);
  transition: border-color .2s, box-shadow .2s;
}

.ct-search:focus-within {
  border-color: rgba(154, 219, 230, .55);
  box-shadow: 0 0 0 4px rgba(154, 219, 230, .12);
}

.ct-search__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
}

.ct-search__in::-webkit-search-cancel-button {
  display: none;
}

.ct-search__in::placeholder {
  color: var(--muted);
  opacity: 1;
}

.ct-search__n {
  color: var(--accent-fg);
  font-size: 12px;
  white-space: nowrap;
}

.ct-search__x {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint-08);
  color: var(--text-2);
  font-size: 11px;
}

.ct-search__kbd {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--tint-14);
  border-radius: 8px;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
}

.ct-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ct-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 13.5px;
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.ct-chip:hover { color: var(--text); }

.ct-chip[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--c) 55%, transparent);
  background: var(--tint-08);
  color: var(--text);
}

.ct-chip strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ct-ring {
  flex-shrink: 0;
  transform: rotate(-90deg);
}

.ct-ring circle {
  fill: none;
  stroke: var(--tint-09);
  stroke-width: 3;
}

.ct-ring .ct-ring__v {
  stroke: var(--c);
  stroke-linecap: round;
  transition: stroke-dasharray .4s;
}

.ct-tb__end {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.ct-share {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-share__bar {
  display: flex;
  gap: 3px;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
}

.ct-share__bar > span {
  background: var(--c);
  transition: flex .4s, opacity .2s;
}

.ct-share__bar > .is-dim { opacity: .3; }

.ct-share__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
}

.ct-share__legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.ct-share__legend .is-on { color: var(--text); }

/* Bulk row: slides open by animating its grid row from 0fr to 1fr */
.ct-bulk {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -14px;
  transition: grid-template-rows .3s cubic-bezier(.2, .9, .3, 1), margin-top .3s;
}

.ct-bulk.is-open {
  grid-template-rows: 1fr;
  margin-top: 0;
}

.ct-bulk__clip {
  min-height: 0;
  overflow: hidden;
}

.ct-bulk.is-menu .ct-bulk__clip {
  overflow: visible;
}

.ct-bulk__in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 10px 10px 14px;
  border: 1px solid rgba(154, 219, 230, .3);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(154, 219, 230, .14), rgba(154, 219, 230, .04));
}

.ct-bulk__all {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1.5px solid var(--cyan);
  border-radius: 7px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.ct-bulk__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ct-bulk__n {
  color: var(--accent-fg);
  font-size: 14.5px;
  font-weight: 700;
}

.ct-bulk__impact {
  font-size: 12px;
  color: var(--text-2);
}

.ct-bulk__acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.ct-bulk__q {
  margin-right: 2px;
  color: oklch(0.72 0.14 35);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ct-move {
  position: relative;
}

.ct-move__menu {
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--tint-09);
  border-radius: 14px;
  background: var(--card-from);
  box-shadow: 0 20px 50px var(--shade-45);
}

.ct-move__cap {
  padding: 6px 10px;
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: .12em;
}

.ct-move__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  text-align: left;
}

.ct-move__item:hover { background: var(--tint-05); }

/* ==========================================================================
   22zc. Categories: KPI strip
   ========================================================================== */
.ct-k2__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ct-gchip {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.ct-gchip:hover { color: var(--text); }

.ct-gchip[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--c) 50%, transparent);
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--text);
}

.ct-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  overflow: hidden;
}

.ct-kpi__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 24px;
  box-shadow: -1px 0 0 var(--tint-07), 0 -1px 0 var(--tint-07);
}

.ct-kpi__top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c), transparent);
  transition: background .3s;
}

.ct-kpi__col.is-group .ct-kpi__top {
  background: var(--c);
}

.ct-kpi__label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .14em;
}

.ct-kpi__val {
  overflow: hidden;
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-kpi__sub {
  min-height: 36px;
  color: var(--text-2);
  font-size: 13px;
  text-wrap: pretty;
}

.ct-kpi__bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 84px;
  margin-top: 4px;
}

.ct-kpi__avg {
  position: absolute;
  right: 0;
  left: 0;
  border-top: 1px dashed var(--tint-18);
}

.ct-kpi__bar {
  position: relative;
  flex: 1;
  min-height: 4px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, var(--c), color-mix(in oklab, var(--c) 45%, transparent));
  cursor: pointer;
  transition: height .4s, opacity .2s;
}

.ct-kpi__bar.is-flat { background: var(--c); }
.ct-kpi__bar.is-dim { opacity: .22; }

.ct-kpi__names {
  display: flex;
  gap: 6px;
}

.ct-kpi__names span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted-2);
  font-size: 10.5px;
  text-align: center;
  white-space: nowrap;
}

.ct-kpi__names .is-on {
  color: var(--text);
  font-weight: 700;
}

/* ==========================================================================
   22zd. Categories: tree
   ========================================================================== */
.ct-tree__head,
.ct-row {
  display: grid;
  grid-template-columns: 22px minmax(150px, 1fr) minmax(90px, 160px) 52px 84px;
  align-items: center;
  gap: 12px;
}

.ct-tree__head {
  align-items: start;
  padding: 0 12px;
  color: var(--muted-2);
  font-size: 11.5px;
  letter-spacing: .12em;
}

.ct-tree .o2-tools,
.ct-all .o2-tools,
.ct-pf .o2-tools {
  gap: 8px;
}

.ct-tree__rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ct-node {
  position: relative;
}

.ct-node__drop {
  position: absolute;
  top: -2px;
  right: 12px;
  left: 12px;
  z-index: 2;
  height: 3px;
  border-radius: 3px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.ct-row {
  position: relative;
  height: 60px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s, box-shadow .2s, border-color .15s, opacity .2s;
}

.ct-row.is-child { height: 50px; }
.ct-row.is-parent.is-compact { height: 46px; }
.ct-row.is-child.is-compact { height: 38px; }
.ct-row.is-hidden { opacity: .55; }
.ct-row.is-hot { background: var(--tint-035); }
.ct-row.is-parent.is-hot { box-shadow: 0 8px 24px var(--shade-25); }

.ct-row.is-edit {
  border-color: rgba(154, 219, 230, .28);
  background: rgba(154, 219, 230, .07);
}

.ct-row.is-into {
  border-style: dashed;
  border-color: var(--c);
  background: color-mix(in oklab, var(--c) 12%, transparent);
}

.ct-row.is-drag { opacity: .35; }

.ct-row__rail {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--c);
}

.ct-row__main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 100%;
}

.ct-elbow {
  flex-shrink: 0;
  height: 100%;
  overflow: visible;
}

.ct-elbow path {
  fill: none;
  stroke: #343947;
  stroke-width: 1.5;
  stroke-linecap: round;
}

[data-theme="light"] .ct-elbow path { stroke: #d5dbe3; }
.ct-row.is-hot .ct-elbow path { stroke: #5b6272; }
.ct-row.is-edit .ct-elbow path { stroke: var(--cyan); }

.ct-row__chev {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--tint-05);
  color: var(--text-2);
}

.ct-row__chev svg { transition: transform .25s cubic-bezier(.2, .9, .3, 1.2); }
.ct-row__chev.is-open svg { transform: rotate(90deg); }
.ct-row__chev.is-empty { opacity: .3; }

.ct-row.is-compact .ct-tile { width: 30px; height: 30px; }
.ct-tile--sm { width: 28px; height: 28px; }
.ct-row.is-compact .ct-tile--sm { width: 24px; height: 24px; }
.ct-row.is-child .ct-tile { background: color-mix(in oklab, var(--c) 10%, transparent); }

.ct-row.is-into .ct-tile {
  background: color-mix(in oklab, var(--c) 35%, transparent);
  box-shadow: 0 0 0 2px var(--c);
}

.ct-tile__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 2px solid var(--card-from);
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.ct-row__name {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.ct-row__nm {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-row.is-parent .ct-row__nm {
  font-size: 15px;
  font-weight: 600;
}

.ct-row__nm mark {
  border-radius: 3px;
  background: rgba(154, 219, 230, .28);
  color: inherit;
}

.ct-row__meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-row.is-parent .ct-row__meta.is-warn { color: oklch(0.72 0.14 35); }
.ct-row.is-child .ct-row__meta.is-warn { color: var(--amt); }

.ct-ren {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(154, 219, 230, .6);
  border-radius: 9px;
  outline: none;
  background: rgba(0, 0, 0, .25);
  box-shadow: 0 0 0 3px rgba(154, 219, 230, .15);
  color: var(--text);
  font-size: 14.5px;
}

.ct-into {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Hover actions sit over the name on a card-coloured backdrop. */
.ct-row__acts {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--card-from);
  box-shadow: -12px 0 12px var(--card-from);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: opacity .15s, visibility .15s;
}

.ct-row.is-hot .ct-row__acts,
.ct-row:focus-within .ct-row__acts {
  opacity: 1;
  visibility: visible;
}

.ct-row__main:has(.ct-ren) .ct-row__acts {
  display: none;
}

.ct-row__add {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(154, 219, 230, .3);
  border-radius: 9px;
  background: rgba(154, 219, 230, .08);
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ct-row__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--tint-09);
  border-radius: 9px;
  background: var(--card-from);
  color: var(--text-2);
}

.ct-row__grip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 28px;
  color: var(--muted-2);
  cursor: grab;
}

.ct-rev {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ct-rev__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.ct-rev__top b {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ct-rev .ct-delta {
  font-size: 11.5px;
}

.ct-rev__bar {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.ct-rev__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--c), color-mix(in oklab, var(--c) 55%, transparent));
  transition: width .4s;
}

.ct-row__n {
  color: var(--text-2);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ct-row__st {
  display: flex;
  justify-content: flex-end;
}

.ct-live {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px 0 4px;
  border: 1px solid var(--tint-09);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}

.ct-live__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tint-06);
}

.ct-live__dot span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gauge-track);
}

.ct-live.is-on {
  border-color: rgba(154, 219, 230, .3);
  background: rgba(154, 219, 230, .1);
  color: var(--accent-fg);
}

.ct-live.is-on .ct-live__dot { background: rgba(154, 219, 230, .2); }

.ct-live.is-on .ct-live__dot span {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.ct-addrow {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 12px 0 46px;
}

.ct-addrow svg {
  flex-shrink: 0;
}

.ct-addrow path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.ct-addrow__in {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(154, 219, 230, .5);
  border-radius: 10px;
  outline: none;
  background: rgba(154, 219, 230, .05);
  color: var(--text);
  font-size: 14px;
}

.ct-addrow .ct-btn { height: 36px; font-weight: 700; }

.ct-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 2px 12px 4px 58px;
  border: 1px dashed var(--tint-14);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12.5px;
}

.ct-empty.is-into { border-color: var(--c); }

.ct-tree__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 58px;
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-04);
  font-size: 14px;
  transition: background .25s, border-color .25s;
}

.ct-tree__foot.is-sel {
  border-color: rgba(154, 219, 230, .3);
  background: linear-gradient(90deg, rgba(154, 219, 230, .12), rgba(154, 219, 230, .03));
}

.ct-tree__foot strong { font-weight: 600; }

.ct-tree__hint {
  margin-left: auto;
  padding-right: 6px;
  color: var(--muted-2);
  font-size: 13px;
}

.ct-tree__sel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.ct-tree__sel .ct-btn { height: 36px; }

.ct-tree__seln {
  padding-right: 6px;
  color: var(--accent-fg);
  font-weight: 600;
}

/* ==========================================================================
   22ze. Categories: editor
   ========================================================================== */
.ct-ed__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ct-ed__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(240, 180, 90, .16);
  color: oklch(0.8 0.13 70);
  font-size: 17px;
  font-weight: 700;
}

.ct-ed__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ct-ed__path {
  color: var(--muted);
  font-size: 12px;
}

.ct-ed__name {
  overflow: hidden;
  font-size: 22px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-vischip {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 14%, transparent);
  color: var(--c-fg);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ct-health {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--tint-07);
  border-radius: 22px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(154, 219, 230, .12), transparent 60%), var(--tint-03);
}

.ct-health.is-full {
  background: radial-gradient(120% 140% at 0% 0%, rgba(90, 200, 140, .16), transparent 60%), var(--tint-03);
}

.ct-ring2 {
  position: relative;
  flex-shrink: 0;
  width: 112px;
  height: 112px;
}

.ct-ring2 svg {
  display: block;
  transform: rotate(-90deg);
}

.ct-arc {
  fill: none;
  stroke: var(--today);
  stroke-linecap: round;
  stroke-width: 9;
  cursor: pointer;
  transition: stroke .3s, stroke-width .2s;
}

.ct-arc.is-ok { stroke: var(--cyan); }
.ct-arc.is-full { stroke: oklch(0.8 0.14 155); }

.ct-arc.is-hl {
  stroke: oklch(0.8 0.13 70);
  stroke-width: 12;
}

.ct-ring2__c {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ct-ring2__c b {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}

.ct-ring2__c span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.ct-health__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ct-health__t {
  font-size: 17px;
  font-weight: 600;
}

.ct-health__s {
  color: var(--text-2);
  font-size: 13px;
  text-wrap: pretty;
}

.ct-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ct-check {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(240, 180, 90, .35);
  border-radius: 999px;
  background: rgba(240, 180, 90, .08);
  color: oklch(0.8 0.13 70);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ct-check.is-hl { background: rgba(240, 180, 90, .16); }

.ct-check__i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
  color: var(--ink);
  font-size: 9px;
  font-weight: 900;
}

.ct-check.is-ok {
  border-color: rgba(90, 200, 140, .3);
  background: rgba(90, 200, 140, .08);
  color: oklch(0.8 0.14 155);
}

.ct-check.is-ok .ct-check__i { background: oklch(0.8 0.14 155); }

.ct-sec {
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-02);
  transition: border-color .2s, background .2s;
}

.ct-sec.is-open {
  border-color: rgba(154, 219, 230, .25);
  background: var(--tint-03);
  box-shadow: 0 10px 30px var(--shade-25);
}

.ct-sec.is-hl { border-color: rgba(240, 180, 90, .5); }

.ct-sec__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.ct-sec__head > svg {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .2s;
}

.ct-sec.is-open .ct-sec__head > svg { transform: rotate(180deg); }

.ct-sec__ok {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1.5px solid oklch(0.8 0.13 70);
  border-radius: 50%;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  transition: background .3s, border-color .3s;
}

.ct-sec__ok.is-ok {
  border-color: transparent;
  background: oklch(0.8 0.14 155);
}

.ct-sec__l {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.ct-sec__sum {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-sec__sum.is-warn { color: var(--amt); }

.ct-sec__pts {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 11.5px;
  white-space: nowrap;
}

.ct-sec__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 16px;
}

.ct-in {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--tint-09);
  border-radius: 12px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
}

.ct-in:focus {
  border-color: rgba(154, 219, 230, .6);
  box-shadow: 0 0 0 4px rgba(154, 219, 230, .1);
}

.ct-in::placeholder {
  color: var(--muted);
  opacity: 1;
}

.ct-ta {
  height: auto;
  padding: 12px 14px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  resize: vertical;
}

.ct-ta.is-over { border-color: rgba(240, 120, 90, .5); }

.ct-pchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ct-pchip {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--tint-09);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
}

.ct-pchip .ct-sw {
  width: 7px;
  height: 7px;
}

.ct-pchip[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--c) 50%, transparent);
  background: color-mix(in oklab, var(--c) 14%, transparent);
  color: var(--text);
}

.ct-url {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--tint-07);
  border-radius: 12px;
  background: var(--tint-03);
  font-size: 13.5px;
}

.ct-url__base {
  color: var(--muted-2);
  white-space: nowrap;
}

.ct-url__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 13.5px;
  font-weight: 600;
}

.ct-url__lock {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: var(--tint-06);
  color: var(--text-2);
  font-size: 12px;
}

.ct-cover__bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-cover__acts {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.ct-cover {
  display: flex;
  justify-content: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .2);
}

.ct-frame {
  position: relative;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: var(--tint-03);
  transition: width .3s, border-color .2s;
}

.ct-frame.has-img { border-style: solid; }
.ct-frame.is-over { border-color: var(--cyan); }

.ct-frame__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct-frame__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.ct-frame__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
  pointer-events: none;
}

.ct-meter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ct-meter__bar {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.ct-meter__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: oklch(0.8 0.13 70);
  transition: width .2s;
}

.ct-meter__n {
  color: var(--amt);
  font-size: 12px;
  white-space: nowrap;
}

.ct-meter.is-ok .ct-meter__bar span { background: oklch(0.8 0.14 155); }
.ct-meter.is-ok .ct-meter__n { color: oklch(0.8 0.14 155); }

.ct-sug {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(154, 219, 230, .3);
  border-radius: 999px;
  background: rgba(154, 219, 230, .08);
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ct-ticks {
  position: relative;
  display: flex;
  gap: 2px;
  height: 8px;
}

.ct-tick {
  flex: 1;
  border-radius: 2px;
  background: var(--raised-3);
  transition: background .15s;
}

.ct-tick.is-g { background: rgba(90, 200, 140, .18); }
.ct-tick.is-on.is-a { background: oklch(0.8 0.13 70); }
.ct-tick.is-on.is-g { background: oklch(0.8 0.14 155); }
.ct-tick.is-on.is-r { background: oklch(0.72 0.14 35); }

.ct-ticks__cur {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: left .15s;
}

.ct-seo__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ct-seo__row .ct-sug { margin-left: auto; }

.ct-seo__n { font-size: 12px; }
.ct-seo__n.is-ok { color: oklch(0.8 0.14 155); }
.ct-seo__n.is-warn { color: var(--amt); }
.ct-seo__n.is-bad { color: oklch(0.72 0.14 35); }

/* Google-style preview on a white card in both themes */
.ct-serp {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 3px;
  width: 100%;
  max-width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 30px var(--shade-25);
  color: #202124;
  transition: width .3s;
}

.ct-serp.is-mobile { width: 320px; }

.ct-serp__url {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  color: #4d5156;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-serp__fav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 11px;
  font-weight: 700;
}

.ct-serp__t {
  color: #1a0dab;
  font-size: 18px;
  line-height: 1.3;
}

.ct-serp.is-mobile .ct-serp__t { font-size: 16px; }

.ct-serp__d {
  color: #4d5156;
  font-size: 13px;
  line-height: 1.45;
}

.ct-vis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ct-visopt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--tint-08);
  border-radius: 14px;
  background: var(--tint-02);
  color: var(--text);
  text-align: left;
}

.ct-visopt[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--c) 45%, transparent);
  background: color-mix(in oklab, var(--c) 10%, transparent);
}

.ct-visopt[aria-pressed="true"] .ct-sw { box-shadow: 0 0 8px var(--c); }

.ct-visopt__t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.ct-visopt__s {
  color: var(--muted);
  font-size: 12px;
}

.ct-when {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 180, 90, .25);
  border-radius: 12px;
  background: rgba(240, 180, 90, .08);
  color: var(--text-2);
  font-size: 13px;
}

.ct-when__in {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--tint-14);
  border-radius: 10px;
  background: var(--card-from);
  color: var(--text);
  font-size: 13px;
  color-scheme: dark;
}

[data-theme="light"] .ct-when__in { color-scheme: light; }

.ct-save {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--tint-08);
  border-radius: 18px;
  background: var(--card-from);
  box-shadow: 0 12px 30px var(--shade-35);
  transition: background .25s, border-color .25s;
}

.ct-save.is-dirty {
  border-color: rgba(240, 180, 90, .35);
  background: linear-gradient(90deg, rgba(240, 180, 90, .14), var(--card-from));
}

.ct-save.is-saved { background: linear-gradient(90deg, rgba(90, 200, 140, .14), var(--card-from)); }

.ct-save__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gauge-track);
  box-shadow: 0 0 10px var(--gauge-track);
}

.ct-save.is-dirty .ct-save__dot { background: oklch(0.8 0.13 70); box-shadow: 0 0 10px oklch(0.8 0.13 70); }
.ct-save.is-saved .ct-save__dot { background: oklch(0.8 0.14 155); box-shadow: 0 0 10px oklch(0.8 0.14 155); }

.ct-save__st {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}

.ct-save.is-dirty .ct-save__st { color: oklch(0.8 0.13 70); }
.ct-save.is-saved .ct-save__st { color: oklch(0.8 0.14 155); }

.ct-save__h {
  color: var(--muted-2);
  font-size: 12px;
}

.ct-save__discard {
  height: 40px;
  margin-left: auto;
  padding: 0 16px;
  border-color: var(--tint-14);
  background: transparent;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 400;
}

.ct-save__discard:disabled { opacity: .4; cursor: default; }

.ct-save__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--raised-3);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
}

.ct-save.is-dirty .ct-save__btn {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.ct-save__btn:disabled { cursor: default; }

.ct-save__btn kbd {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(17, 19, 26, .12);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
}

/* ==========================================================================
   22zf. Categories: all categories
   ========================================================================== */
.ct-views .o2-tabs__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
}

.ct-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.ct-card {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-03);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.ct-card.is-hot {
  border-color: color-mix(in oklab, var(--c) 45%, transparent);
  box-shadow: 0 14px 30px var(--shade-30);
}

.ct-card.is-sel {
  border-color: rgba(154, 219, 230, .45);
  background: rgba(154, 219, 230, .07);
}

.ct-card.is-hidden { opacity: .55; }

.ct-card__cover {
  position: relative;
  height: 104px;
  overflow: hidden;
  border-radius: 12px;
  background: color-mix(in oklab, var(--c) 18%, var(--card-to));
}

.ct-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct-card__ini {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c);
  font-size: 28px;
  font-weight: 700;
}

/* An empty cover that is due: its photo size on two lines */
.ct-card__size {
  flex-direction: column;
  font-size: 20px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.ct-cb--card {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-color: rgba(255, 255, 255, .4);
  border-radius: 7px;
  background-color: rgba(12, 14, 19, .5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

.ct-card__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 2px 4px 0 0;
}

.ct-card__par {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.ct-card__par .ct-sw {
  width: 7px;
  height: 7px;
}

.ct-card__hidden {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--tint-06);
  color: var(--muted);
  font-size: 11px;
}

.ct-card__name {
  font-size: 16px;
  font-weight: 600;
}

.ct-card__rev {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ct-card__rev b {
  font-size: 15px;
  font-weight: 600;
}

.ct-card__rev .ct-delta {
  font-size: 12px;
  font-weight: 700;
}

.ct-card__n {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.ct-card__spark {
  display: block;
  width: 100%;
  height: 22px;
}

.ct-card__spark path { fill: var(--c); opacity: .14; }
.ct-card__spark polyline { fill: none; stroke: var(--c); stroke-width: 2; }

.ct-card__share {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

.ct-card__bar {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.ct-card__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--c);
}

/* Action bar slides up on hover when nothing is selected. */
.ct-card__acts {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(17, 19, 26, .94);
  opacity: 0;
  visibility: hidden;
  transform: translateY(130%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.2), opacity .2s, visibility .2s;
}

.ct-card.is-hot:not(.has-sel) .ct-card__acts,
.ct-card:focus-within .ct-card__acts {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.ct-card__act {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 6px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  color: #eef0f5;
  font-size: 12.5px;
  font-weight: 600;
}

.ct-card__act.is-bad { background: rgba(240, 120, 90, .12); color: oklch(0.72 0.14 35); }
.ct-card__act.is-good { background: rgba(154, 219, 230, .12); color: #9adbe6; }

.ct-table {
  width: 100%;
  min-width: 780px;
}

.ct-table tr {
  display: grid;
  grid-template-columns: 24px 40px minmax(0, 1.4fr) 90px 110px minmax(100px, 1fr) 70px 120px;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
}

.ct-table thead tr { padding-bottom: 10px; }

.ct-table th,
.ct-table td {
  min-width: 0;
  padding: 0;
  text-align: left;
}

.ct-table th {
  color: var(--muted-2);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .12em;
}

.ct-table .ct-r { text-align: right; }

.ct-sorth {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  letter-spacing: inherit;
}

.ct-sorth span { font-size: 10px; }
.ct-sorth.is-on,
.ct-sorth:hover { color: var(--text); }
.ct-table th.ct-r .ct-sorth { margin-left: auto; }

.ct-trow {
  height: 54px;
  border-radius: 12px;
  cursor: pointer;
}

.ct-trow:hover { background: var(--tint-03); }
.ct-trow.is-sel { background: rgba(154, 219, 230, .07); }
.ct-trow.is-hidden { opacity: .55; }

.ct-tile--list {
  border-radius: 10px;
  background: color-mix(in oklab, var(--c) 18%, var(--card-to));
  font-size: 16px;
}

.ct-trow td:nth-child(3) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-trow__name {
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}

.ct-trow__par {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-table .ct-soft { font-size: 14px; }

.ct-table .ct-b {
  font-size: 14px;
  font-weight: 600;
}

.ct-trow .ct-delta {
  font-size: 12.5px;
  font-weight: 700;
}

.ct-trow__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.ct-trow__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--c);
}

.ct-trow__acts {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.ct-icon--sq {
  width: 34px;
  height: 34px;
  border: 1px solid var(--tint-08);
  border-radius: 10px;
  color: var(--text-2);
}

.ct-icon--sq.is-bad { color: oklch(0.72 0.14 35); }
.ct-icon--sq.is-good { color: var(--accent-fg); }

/* Selection dock: light pill at the bottom of the card */
.ct-dock {
  position: absolute;
  bottom: 20px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: #eef0f5;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  color: #11131a;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 160%);
  white-space: nowrap;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), opacity .2s, visibility .3s;
}

.ct-dock.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.ct-dock__n {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #11131a;
  color: #eef0f5;
  font-size: 13px;
  font-weight: 700;
}

.ct-dock__t {
  padding-right: 8px;
  font-size: 14px;
  font-weight: 600;
}

.ct-dock__btn {
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 19, 26, .08);
  color: #11131a;
  font-size: 13px;
  font-weight: 600;
}

.ct-dock__btn.is-main { background: #11131a; color: #9adbe6; }

.ct-dock__btn.is-clear {
  padding: 0 12px;
  background: transparent;
  color: #5b6272;
}

/* ==========================================================================
   22zg. Categories: performance treemap and needs attention
   ========================================================================== */
.ct-pf__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-pf__home {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
}

.ct-pf__home.is-link { color: var(--accent-fg); }
.ct-pf__home:disabled { cursor: default; }

.ct-pf__z {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-pf__z .ct-sw,
.ct-info__head .ct-sw {
  width: 10px;
  height: 10px;
}

.ct-mode {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ct-mode__sw {
  width: 18px;
  height: 8px;
  border-radius: 3px;
}

.ct-mode__sw.is-group { background: linear-gradient(90deg, #9adbe6, oklch(0.8 0.13 70), oklch(0.8 0.14 155)); }
.ct-mode__sw.is-growth { background: linear-gradient(90deg, oklch(0.68 0.15 30), #3a3f4c, #9adbe6); }

.ct-tm {
  display: flex;
  gap: 5px;
  min-width: 640px;
  height: 420px;
}

.ct-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 156px;
  transition: flex .55s cubic-bezier(.2, .9, .3, 1);
}

.ct-col__head {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 7px;
  min-width: 0;
  height: 30px;
  overflow: hidden;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.ct-col__head:hover { background: var(--tint-06); }
.ct-col__head.is-on { background: var(--tint-05); }
.ct-col__head.is-dim { color: var(--muted-2); }

.ct-col__n {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ct-col__sh {
  color: var(--muted);
  font-weight: 500;
}

.ct-col__head > svg {
  flex-shrink: 0;
  margin-left: auto;
  opacity: .6;
}

.ct-cell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 64px;
  overflow: hidden;
  padding: 12px 14px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: color-mix(in oklab, var(--c) 62%, #151821);
  color: #11131a;
  transition: flex .55s cubic-bezier(.2, .9, .3, 1), opacity .2s, background .3s, transform .2s, box-shadow .2s;
}

.ct-cell.is-hot {
  z-index: 2;
  border-color: #eef0f5;
  background: color-mix(in oklab, var(--c) 92%, #151821);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  transform: scale(1.015);
}

.ct-cell.is-dim { opacity: .35; }
.ct-cell.is-light { color: #eef0f5; }

.ct-cell__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}

.ct-cell__n {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-cell.is-big .ct-cell__n { font-size: 17px; }

.ct-cell__d {
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .16);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ct-cell.is-light .ct-cell__d { background: rgba(255, 255, 255, .1); }

.ct-cell__v {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
}

.ct-cell__v b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}

.ct-cell__v b.is-l { font-size: 20px; }
.ct-cell__v b.is-xl { font-size: 30px; }

.ct-cell__v span {
  font-size: 12px;
  opacity: .7;
}

.ct-cell__more {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.ct-cell__more svg {
  display: block;
  width: 100%;
  height: 40px;
}

.ct-cell__more path { fill: currentColor; opacity: .12; }
.ct-cell__more polyline { fill: none; stroke: currentColor; stroke-width: 2; opacity: .8; }

.ct-cell__more span {
  font-size: 12px;
  opacity: .75;
}

.ct-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.ct-legend__ramp {
  flex: 1;
  max-width: 320px;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, oklch(0.68 0.15 30), #3a3f4c 45%, #3a3f4c 55%, #9adbe6);
}

.ct-legend__l { margin-left: 12px; }

.ct-info {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 14px;
  min-height: 84px;
  padding: 14px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-04);
}

.ct-info__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ct-info__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-info__head strong {
  font-size: 16px;
  font-weight: 600;
}

.ct-info__head .ct-muted { font-size: 12.5px; }

.ct-info__d {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--tint-06);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.ct-info__d.is-up { background: var(--cyan-tint); color: var(--accent-fg); }
.ct-info__d.is-down { background: var(--danger-tint); color: oklch(0.72 0.14 35); }

.ct-info__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.ct-info__stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ct-info__stats dt,
.ct-info__cap {
  color: var(--muted-2);
  font-size: 10.5px;
  letter-spacing: .12em;
}

.ct-info__stats dd {
  font-size: 17px;
  font-weight: 600;
}

.ct-info__cmp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.ct-cmp {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.ct-cmp__n {
  width: 80px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-cmp.is-me .ct-cmp__n {
  color: var(--text);
  font-weight: 700;
}

.ct-cmp__bar {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.ct-cmp__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--c);
  transition: width .4s;
}

.ct-cmp b {
  width: 52px;
  font-weight: 600;
  text-align: right;
}

/* Needs attention */
.ct-natabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.ct-natab {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--tint-07);
  border-radius: 14px;
  background: var(--tint-02);
  color: var(--text);
  text-align: left;
  transition: background .2s, border-color .2s;
}

.ct-natab[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--c) 50%, transparent);
  background: color-mix(in oklab, var(--c) 16%, transparent);
}

.ct-natab__top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ct-natab__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c);
}

.ct-natab__top b {
  margin-left: auto;
  font-size: 20px;
  font-weight: 700;
}

.ct-natab__top b.is-zero { color: oklch(0.8 0.14 155); }

.ct-natab__l {
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
}

.ct-na__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.ct-na__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ct-narow {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--tint-06);
  border-radius: 14px;
  background: var(--tint-02);
  transition: background .25s, border-color .25s, opacity .25s;
}

.ct-narow.is-ok {
  border-color: rgba(90, 200, 140, .2);
  background: rgba(90, 200, 140, .05);
  opacity: .55;
}

.ct-tile--na {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.ct-narow__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ct-narow__n {
  font-size: 14.5px;
  font-weight: 500;
}

.ct-narow__m {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-narow.is-ok .ct-narow__m { color: oklch(0.8 0.14 155); }

.ct-narow__btn {
  flex-shrink: 0;
  min-width: 96px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ct-narow__btn.is-undo {
  border: 1px solid var(--tint-14);
  background: transparent;
  color: var(--text-2);
}

.ct-clear {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 0;
  color: var(--muted);
  font-size: 14px;
}

.ct-clear span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(90, 200, 140, .14);
  color: oklch(0.8 0.14 155);
  font-size: 20px;
}

/* ==========================================================================
   22zh. Add product: layout, section heads and fields
   ========================================================================== */
.ap-layout {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}

.ap-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ap-col--main { flex: 1 1 560px; }

.ap-col--side {
  position: sticky;
  top: 16px;
  flex: 1 1 320px;
}

.ap-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 22px 24px;
}

.ap-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ap-head--wrap {
  flex-wrap: wrap;
  gap: 12px;
  min-height: 40px;
}

#ap-basics .ap-head {
  gap: 10px;
  min-height: 0;
}

.ap-head .ap-chks,
.ap-head .ap-chip,
.ap-head .ap-ghost,
.ap-head .ap-sug {
  margin-left: auto;
}

.ap-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--tint-06);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  transition: background .3s, color .3s;
}

.ap-badge.is-ok {
  background: oklch(0.8 0.14 155);
  color: var(--ink);
}

.ap-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ap-head--inline .ap-titles {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.ap-title {
  font-size: 19px;
  font-weight: 500;
}

.ap-sub {
  color: var(--muted);
  font-size: 13px;
}

.ap-chks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ap-chk {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--tint-05);
  color: #8a8f9e;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .25s, color .25s;
}

.ap-chk.is-ok {
  background: rgba(90, 200, 140, .12);
  color: oklch(0.8 0.14 155);
}

.ap-chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ap-chip.is-ok { background: rgba(90, 200, 140, .14); color: oklch(0.8 0.14 155); }
.ap-chip.is-warn { background: rgba(240, 180, 90, .14); color: oklch(0.8 0.13 70); }
.ap-chip.is-bad { background: rgba(240, 120, 90, .14); color: oklch(0.72 0.14 35); }
.ap-chip.is-cy { background: var(--cyan-tint); color: var(--accent-fg); }

.ap-cap {
  display: flex;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .12em;
}

.ap-cap--gap { margin-top: 4px; }

.ap-cap__r { margin-left: auto; }
.ap-cap__r.is-warn { color: oklch(0.8 0.13 70); }
.ap-cap__r.is-ok { color: oklch(0.8 0.14 155); }
.ap-cap__r.is-bad { color: oklch(0.72 0.14 35); }

.ap-dim { color: var(--muted-2); }
.ap-soft { color: var(--text-2); }
.ap-sm { font-size: 12px; }
.ap-sm13 { font-size: 13px; }

.ap-ok {
  color: oklch(0.8 0.14 155);
}

.ap-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ap-in {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--tint-09);
  border-radius: 14px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font-size: 14.5px;
}

.ap-in:focus {
  border-color: rgba(154, 219, 230, .6);
  box-shadow: 0 0 0 4px rgba(154, 219, 230, .1);
}

.ap-in::placeholder,
.ap-bare::placeholder,
.ap-ed__ta::placeholder {
  color: var(--muted);
  opacity: 1;
}

.ap-in--xl {
  height: 56px;
  padding-right: 70px;
  font-size: 19px;
  font-weight: 500;
}

.ap-in--sm {
  height: 40px;
  font-weight: 600;
}

.ap-in.is-warn { border-color: rgba(240, 180, 90, .45); }
.ap-in.is-bad { border-color: rgba(240, 120, 90, .5); }

.ap-ta {
  height: auto;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.ap-ta--sm {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13.5px;
}

.ap-mono {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13.5px;
}

.ap-bare {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
}

.ap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--tint-14);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ap-btn:hover { background: var(--tint-08); }

.ap-btn--xs {
  width: 30px;
  height: 30px;
  padding: 0;
  border-color: var(--tint-09);
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
}

.ap-btn--sm {
  height: 30px;
  padding: 0 12px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}

.ap-ghost {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--tint-14);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
}

.ap-ghost:hover { background: var(--tint-05); }

.ap-ghost:disabled {
  opacity: .4;
  cursor: default;
}

.ap-link {
  height: 28px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ap-link--muted {
  height: 34px;
  color: var(--muted);
  font-weight: 400;
}

.ap-dash {
  height: 28px;
  padding: 0 10px;
  border: 1px dashed rgba(154, 219, 230, .35);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
}

.ap-dash:hover { color: var(--text); }

/* Arrow and ✕ glyphs use the browser's default button size, as in the design. */
.ap-sq,
.ap-x,
.ap-shop__arr {
  font-size: 13.333px;
}

.ap-sq {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--tint-09);
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
}

.ap-meter {
  display: block;
  flex-shrink: 0;
  width: 90px;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.ap-meter > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--muted-2);
  transition: width .2s;
}

.ap-meter--80 { width: 80px; }
.ap-meter.is-ok > span { background: oklch(0.8 0.14 155); }
.ap-meter.is-warn > span { background: oklch(0.8 0.13 70); }
.ap-meter--80:not(.is-warn) > span { background: var(--gauge-track); }

.ap-switch {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-start;
  width: 42px;
  height: 24px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--gauge-track);
}

.ap-switch span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
}

.ap-switch[aria-checked="true"] {
  justify-content: flex-end;
  background: var(--cyan);
}

.ap-switch[aria-checked="true"] span { background: var(--ink); }

.ap-switch--sm {
  width: 38px;
  height: 22px;
  margin-left: auto;
  padding: 2px;
}

/* Basics */
.ap-name {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-name__box { position: relative; }

.ap-name__n {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 600;
  transform: translateY(-50%);
}

.ap-name__n.is-warn { color: oklch(0.8 0.13 70); }
.ap-name__n.is-bad { color: oklch(0.72 0.14 35); }

.ap-name__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-hints li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.ap-hints span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ap-hints .is-ok { color: oklch(0.8 0.14 155); }
.ap-hints .is-warn { color: oklch(0.8 0.13 70); }

.ap-slug {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  margin-left: auto;
  padding: 0 4px 0 10px;
  border-radius: 9px;
  background: var(--tint-04);
  font-size: 12px;
}

.ap-slug__p { color: var(--muted-2); }

.ap-slug__in {
  width: 150px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 600;
}

.ap-slug__lock {
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: var(--tint-06);
  color: var(--text-2);
  font-size: 11px;
}

.ap-warn {
  padding: 8px 12px;
  border: 1px solid rgba(240, 180, 90, .3);
  border-radius: 12px;
  background: rgba(240, 180, 90, .08);
  color: var(--amt);
  font-size: 12.5px;
}

.ap-ed {
  border: 1px solid var(--tint-09);
  border-radius: 16px;
  background: var(--tint-03);
  transition: border-color .2s, box-shadow .2s;
}

.ap-ed:focus-within {
  border-color: rgba(154, 219, 230, .55);
  box-shadow: 0 0 0 4px rgba(154, 219, 230, .1);
}

.ap-ed__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--tint-07);
}

.ap-ed__fmt {
  display: flex;
  gap: 2px;
}

.ap-ed__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
}

.ap-ed__btn:hover {
  background: var(--tint-06);
  color: var(--text);
}

.ap-ed__sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--tint-09);
}

.ap-ed__tools {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  margin-left: auto;
}

.ap-tones {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--raised-3);
}

.ap-tone {
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 11.5px;
  white-space: nowrap;
}

.ap-tone[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.ap-suggest {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 6px 18px rgba(154, 219, 230, .25);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ap-suggest.is-typing {
  background: rgba(154, 219, 230, .18);
  box-shadow: none;
  color: var(--accent-fg);
}

.ap-suggest.is-typing svg { animation: ap-spin 1s linear infinite; }

@keyframes ap-spin {
  to { transform: rotate(360deg); }
}

.ap-tonepv {
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 300px;
  max-width: calc(100vw - 48px);
  padding: 12px 14px;
  border: 1px solid var(--tint-09);
  border-radius: 14px;
  background: var(--card-from);
  box-shadow: 0 20px 50px var(--shade-50);
  pointer-events: none;
}

.ap-tonepv__l {
  color: var(--accent-fg);
  font-size: 11px;
  letter-spacing: .12em;
}

.ap-tonepv__t {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}

.ap-ed__ta {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.6;
  resize: vertical;
}

.ap-ed__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--tint-07);
}

.ap-rw {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ap-rw__btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(154, 219, 230, .25);
  border-radius: 999px;
  background: rgba(154, 219, 230, .06);
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
}

.ap-ed__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12px;
  white-space: nowrap;
}

.ap-ed__n { color: var(--muted-2); }
.ap-ed__n.is-ok { color: oklch(0.8 0.14 155); }
.ap-ed__n.is-warn { color: oklch(0.8 0.13 70); }

.ap-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.ap-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 6px 0 8px;
  border: 1px solid var(--tint-09);
  border-radius: 14px;
  background: var(--tint-03);
}

.ap-brand.is-focus { border-color: rgba(154, 219, 230, .55); }

.ap-brand .ap-dim { padding: 0 6px; font-size: 11px; }

.ap-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.ap-logo.ap-t--none {
  background: var(--tint-06);
  color: var(--muted-2);
}

.ap-logo--sm {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 11px;
}

.ap-pop {
  position: absolute;
  top: 76px;
  right: 0;
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--tint-09);
  border-radius: 14px;
  background: var(--card-from);
  box-shadow: 0 20px 50px var(--shade-50);
}

.ap-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 13.5px;
  cursor: pointer;
}

#ap-tag-list .ap-opt {
  gap: 8px;
  height: 36px;
  font-size: 13px;
}

.ap-opt:hover,
.ap-opt.is-on { background: var(--tint-06); }
.ap-opt strong { color: var(--accent-fg); }

.ap-opt__n {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.ap-opt--new {
  height: 38px;
  color: var(--accent-fg);
  font-size: 13px;
}

.ap-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 46px;
  padding: 6px 10px;
  border: 1px solid var(--tint-09);
  border-radius: 14px;
  background: var(--tint-03);
}

.ap-tags:focus-within { border-color: rgba(154, 219, 230, .55); }

.ap-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 1px solid rgba(154, 219, 230, .25);
  border-radius: 999px;
  background: rgba(154, 219, 230, .1);
  font-size: 12.5px;
}

.ap-tag.is-new {
  background: rgba(154, 219, 230, .2);
  animation: ap-pop .25s ease;
}

@keyframes ap-pop {
  0% { opacity: 0; transform: scale(.6); }
  100% { opacity: 1; transform: scale(1); }
}

.ap-tag__x {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint-09);
  color: var(--text-2);
  font-size: 10px;
}

.ap-tags__in {
  min-width: 90px;
  height: 30px;
  font-size: 13.5px;
}

.ap-sugtags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ap-sugtags__l {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   22zi. Add product: media
   ========================================================================== */
.ap-media {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.ap-media__main {
  display: flex;
  flex: 1 1 380px;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 22px 24px;
}

.ap-mstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ap-mstat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--tint-07);
  border-radius: 14px;
  background: var(--tint-03);
}

.ap-mstat__v {
  font-size: 18px;
  font-weight: 700;
}

.ap-mstat__l {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
}

.ap-mstat .ap-meter { width: auto; }
.ap-mstat.is-ok .ap-mstat__v { color: oklch(0.8 0.14 155); }
.ap-mstat.is-ok .ap-meter > span { background: oklch(0.8 0.14 155); }
.ap-mstat.is-warn .ap-mstat__v { color: oklch(0.8 0.13 70); }
.ap-mstat.is-warn .ap-meter > span { background: oklch(0.8 0.13 70); }
.ap-mstat.is-none .ap-mstat__v { color: var(--gauge-track); }

.ap-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ap-slot {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 2px solid var(--tint-14);
  border-radius: 12px;
  background: var(--tint-03);
  color: inherit;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.ap-slot.is-cover {
  grid-column: span 2;
  grid-row: span 2;
  border-radius: 18px;
}

.ap-slot.is-filled { border-color: var(--tint-08); }
.ap-slot:hover { border-color: rgba(154, 219, 230, .45); }

.ap-slot.is-on,
.ap-slot.is-drop {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(154, 219, 230, .15);
}

.ap-slot:focus-within {
  border-color: var(--cyan);
}

/* Empty slot: a striped placeholder with the photo size it expects. */
.ap-slot__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: var(--tint-02);
  background-image: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.ap-size {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--card-from);
  box-shadow: 0 0 0 1px var(--tint-09);
  color: var(--text-2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.ap-slot:not(.is-cover) .ap-size {
  padding: 1px 5px;
  font-size: 9px;
}

.ap-slot.is-cover .ap-size {
  margin-top: 4px;
  padding: 3px 9px;
  font-size: 12px;
}

.ap-size--light {
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  color: #11131a;
  font-size: 11px;
}

.ap-slot.is-cover .ap-slot__ph { font-size: 14px; }

.ap-slot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ap-slot__n,
.ap-slot__res {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(12, 14, 19, .78);
  color: #eef0f5;
  font-size: 10.5px;
  font-weight: 800;
}

.ap-slot__n {
  position: absolute;
  top: 8px;
  left: 8px;
}

.ap-slot__q {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}

.ap-slot__q.is-ok { background: oklch(0.8 0.14 155); }
.ap-slot__q.is-warn { background: oklch(0.8 0.13 70); }
.ap-slot__q.is-bad { background: oklch(0.72 0.14 35); }

.ap-slot__tags {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
}

.ap-slot__res {
  padding: 2px 7px;
  font-weight: 700;
}

.ap-slot__res.is-warn { color: oklch(0.8 0.13 70); }

.ap-slot__alt {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(240, 180, 90, .92);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 800;
}

.ap-slot__focal {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .4);
}

.ap-missing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
}

.ap-missing .ap-dash { font-size: 12px; }

.ap-insp {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  background: rgba(0, 0, 0, .18);
  box-shadow: -1px 0 0 var(--tint-07), 0 -1px 0 var(--tint-07);
}

[data-theme="light"] .ap-insp { background: var(--tint-03); }

.ap-insp__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-insp__nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.ap-insp__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ap-qring {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}

.ap-qring svg {
  display: block;
  transform: rotate(-90deg);
}

.ap-qring circle {
  fill: none;
  stroke: var(--raised-3);
  stroke-width: 5;
}

.ap-qring .ap-qring__v {
  stroke: var(--gauge-track);
  stroke-linecap: round;
  transition: stroke-dasharray .4s;
}

.ap-qring.is-ok .ap-qring__v { stroke: oklch(0.8 0.14 155); }
.ap-qring.is-warn .ap-qring__v { stroke: oklch(0.8 0.13 70); }
.ap-qring.is-bad .ap-qring__v { stroke: oklch(0.72 0.14 35); }

.ap-qring b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 800;
}

.ap-insp__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ap-insp__name {
  font-size: 15px;
  font-weight: 600;
}

.ap-insp__st {
  color: var(--muted);
  font-size: 12px;
}

.ap-insp__st.is-ok { color: oklch(0.8 0.14 155); }
.ap-insp__st.is-warn { color: oklch(0.8 0.13 70); }
.ap-insp__st.is-bad { color: oklch(0.72 0.14 35); }

.ap-insp__acts .ct-sug,
.ap-insp__acts .ap-link {
  height: 30px;
  padding: 0 12px;
}

.ap-insp__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ap-insp__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ap-insp__meta div {
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--tint-04);
}

.ap-insp__meta dt {
  color: var(--muted-2);
  font-size: 10px;
  letter-spacing: .12em;
}

.ap-insp__meta dd {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-insp__meta .is-warn { color: oklch(0.8 0.13 70); }
.ap-insp__meta .is-none { color: var(--muted); }

.ap-insp__checks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ap-insp__checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 12.5px;
}

.ap-insp__checks li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gauge-track);
  color: var(--ink);
  font-size: 9px;
  font-weight: 900;
}

.ap-insp__checks .is-ok > span { background: oklch(0.8 0.14 155); }
.ap-insp__checks .is-warn { color: var(--text); }
.ap-insp__checks .is-warn > span { background: oklch(0.8 0.13 70); }
.ap-insp__checks .is-none { color: var(--muted); }

.ap-insp__checks small {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 11.5px;
}

.ap-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ap-role {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--tint-09);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
}

.ap-role[aria-pressed="true"] {
  border-color: rgba(154, 219, 230, .45);
  background: rgba(154, 219, 230, .12);
  color: var(--text);
}

.ap-role__sw {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ap-focal {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

.ap-focal__grid {
  display: grid;
  grid-template-columns: repeat(3, 18px);
  gap: 3px;
  padding: 6px;
  border-radius: 12px;
  background: var(--tint-04);
}

.ap-focal__dot {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--tint-09);
}

.ap-focal__dot[aria-pressed="true"] { background: var(--cyan); }

.ap-focal__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-2);
  font-size: 12.5px;
}

/* ==========================================================================
   22zj. Add product: pricing, variants, inventory, SEO and save bar
   ========================================================================== */
.ap-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.ap-money {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--tint-09);
  border-radius: 14px;
  background: var(--tint-03);
}

.ap-money:focus-within { border-color: rgba(154, 219, 230, .6); }
.ap-money.is-bad { border-color: rgba(240, 120, 90, .5); }

.ap-money__in {
  font-size: 15px;
  font-weight: 600;
}

.ap-money--sm {
  gap: 4px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 13px;
}

.ap-money--sm .ap-bare { font-size: 13.5px; }

.ap-fall {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ap-fall__bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 170px;
  padding: 0 4px;
  border-bottom: 1px solid var(--tint-08);
}

.ap-fall__col {
  position: relative;
  flex: 1;
  height: 100%;
}

.ap-fall__bar {
  position: absolute;
  right: 0;
  left: 0;
  border-radius: 8px;
  transition: bottom .4s cubic-bezier(.2, .9, .3, 1), height .4s cubic-bezier(.2, .9, .3, 1), opacity .2s;
}

.ap-fall__col.is-dim .ap-fall__bar { opacity: .3; }

.ap-fall__v {
  position: absolute;
  right: 0;
  left: 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  transition: bottom .4s;
}

.ap-fall__col.is-on .ap-fall__v { color: var(--text); }

.ap-fall__names {
  display: flex;
  gap: 10px;
  padding: 0 4px;
}

.ap-fall__names span {
  flex: 1;
  color: var(--muted);
  font-size: 11.5px;
  text-align: center;
}

.ap-fall__names .is-on { color: var(--text); }

.ap-whatif {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-03);
}

.ap-whatif__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-optbtn {
  height: 28px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid rgba(90, 200, 140, .4);
  border-radius: 999px;
  background: rgba(90, 200, 140, .1);
  color: oklch(0.8 0.14 155);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ap-curve {
  position: relative;
  height: 120px;
}

.ap-curve svg {
  display: block;
  width: 100%;
  height: 120px;
}

.ap-curve path { fill: rgba(90, 200, 140, .12); }
.ap-curve polyline { fill: none; stroke: oklch(0.8 0.14 155); stroke-width: 2; }

.ap-curve__opt {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1.5px dashed rgba(90, 200, 140, .6);
}

.ap-curve__cur {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(154, 219, 230, .25);
  transition: left .3s, top .3s;
}

.ap-curve__hdot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #ffffff;
  pointer-events: none;
}

.ap-curve__tip {
  position: absolute;
  top: -4px;
  padding: 5px 9px;
  border-radius: 9px;
  background: #eef0f5;
  color: #11131a;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.ap-curve__cols {
  position: absolute;
  inset: 0;
  display: flex;
}

.ap-curve__cols span {
  flex: 1;
  cursor: pointer;
}

.ap-curve__axis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted-2);
  font-size: 11px;
}

.ap-pstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.ap-pstats div {
  padding: 10px 12px;
  border: 1px solid var(--tint-07);
  border-radius: 14px;
  background: var(--tint-04);
}

.ap-pstats dt {
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .12em;
}

.ap-pstats dd {
  font-size: 18px;
  font-weight: 700;
}

.ap-pstats .is-ok { color: oklch(0.8 0.14 155); }
.ap-pstats .is-bad { color: oklch(0.72 0.14 35); }
.ap-pstats .is-warn { color: oklch(0.8 0.13 70); }
.ap-pstats .is-cy { color: var(--accent-fg); }
.ap-pstats .is-none { color: var(--muted); }

.ap-tax {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.ap-tax__n {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}

/* Variants */
.ap-opt-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-03);
}

.ap-vals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ap-val {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--tint-09);
  border-radius: 999px;
  background: var(--tint-06);
  font-size: 13px;
}

.ap-val__sw {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
}

.ap-vals__in {
  min-width: 120px;
  height: 30px;
  font-size: 13.5px;
}

.ap-x {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
}

.ap-x:hover {
  background: rgba(240, 120, 90, .12);
  color: oklch(0.72 0.14 35);
}

.ap-vtable {
  width: 100%;
  min-width: 430px;
}

.ap-vtable tr {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 104px 96px 76px;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
}

.ap-vtable thead tr { padding-bottom: 8px; }

.ap-vtable th,
.ap-vtable td {
  min-width: 0;
  padding: 0;
  text-align: left;
}

.ap-vtable th {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .12em;
}

.ap-vtable tbody tr {
  height: 52px;
  border-top: 1px solid var(--raised-3);
}

.ap-vname {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14px;
}

.ap-vname span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-vsw {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
}

.ap-vtable .ap-mono {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-in--stock {
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 13.5px;
}

.ap-in--stock.is-warn { border-color: rgba(240, 180, 90, .4); color: oklch(0.8 0.13 70); }
.ap-in--stock.is-bad { border-color: rgba(240, 120, 90, .45); color: oklch(0.72 0.14 35); }

.ap-vfoot {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 10px 10px 0;
  color: var(--muted);
  font-size: 13px;
}

.ap-vfoot strong { color: var(--text); }

/* Inventory */
.ap-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.ap-qty {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-03);
}

.ap-qty__t {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14.5px;
  font-weight: 500;
}

.ap-qty__s {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 400;
}

.ap-qty__s.is-bad { color: oklch(0.72 0.14 35); }
.ap-qty__s.is-warn { color: oklch(0.8 0.13 70); }

.ap-num {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.ap-num__b {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--tint-14);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 18px;
}

.ap-num__in {
  width: 72px;
  height: 38px;
  border: 1px solid var(--tint-14);
  border-radius: 12px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.ap-num__in--sm {
  width: 56px;
  font-size: 14px;
  font-weight: 400;
}

.ap-low {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.ap-low .ap-dim { color: var(--muted); }

.ap-dims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.ap-dims .ap-dim { font-size: 13px; }

.ap-ships {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ap-ship {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--tint-08);
  border-radius: 14px;
  background: var(--tint-02);
  color: var(--text);
  text-align: left;
}

.ap-ship[aria-pressed="true"] {
  border-color: rgba(154, 219, 230, .45);
  background: rgba(154, 219, 230, .08);
}

.ap-ship__t {
  font-size: 14px;
  font-weight: 600;
}

.ap-ship__s {
  color: var(--muted);
  font-size: 12px;
}

/* SEO */
#ap-seo .ct-seo__n { font-size: 12.5px; }

.ap-serp {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

/* Save bar: sticks to the bottom of the viewport while the form scrolls */
.ap-save {
  position: sticky;
  bottom: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--tint-08);
  border-radius: 20px;
  background: var(--card-from);
  box-shadow: 0 16px 40px var(--shade-45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background .25s, border-color .25s;
}

.ap-save.is-dirty {
  border-color: rgba(240, 180, 90, .35);
  background: linear-gradient(90deg, rgba(240, 180, 90, .14), var(--card-from));
}

.ap-save.is-saved { background: linear-gradient(90deg, rgba(90, 200, 140, .16), var(--card-from)); }

.ap-save__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gauge-track);
  box-shadow: 0 0 10px var(--gauge-track);
}

.ap-save.is-dirty .ap-save__dot { background: oklch(0.8 0.13 70); box-shadow: 0 0 10px oklch(0.8 0.13 70); }
.ap-save.is-saved .ap-save__dot { background: oklch(0.8 0.14 155); box-shadow: 0 0 10px oklch(0.8 0.14 155); }

.ap-save__st {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.ap-save.is-dirty .ap-save__st { color: oklch(0.8 0.13 70); }
.ap-save.is-saved .ap-save__st { color: oklch(0.8 0.14 155); }

.ap-save__sub {
  color: var(--muted);
  font-size: 12.5px;
}

.ap-save__discard {
  height: 42px;
  margin-left: auto;
  padding: 0 16px;
  font-size: 13.5px;
}

.ap-pub {
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--raised-3);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 700;
}

.ap-pub.is-ready {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.ap-pub.is-ready:hover { background: var(--pill-hover); }

.ap-pub--sm {
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
}

/* ==========================================================================
   22zk. Add product: readiness, status, organisation
   ========================================================================== */
.ap-rd {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  background: radial-gradient(120% 60% at 100% 0%, rgba(154, 219, 230, .08), transparent 60%), var(--surface-card);
  transition: border-color .4s;
}

.ap-rd.is-full {
  border-color: rgba(90, 200, 140, .35);
  background: radial-gradient(120% 60% at 100% 0%, rgba(90, 200, 140, .16), transparent 60%), var(--surface-card);
}

.ap-rd__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ap-rd .ap-cap { font-size: 12px; }

.ap-head .ap-sug {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

.ap-rd__score {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ap-rd__score > p {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
}

.ap-rd__score b {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}

.ap-rd.is-full .ap-rd__score b { color: oklch(0.8 0.14 155); }
.ap-rd__score .ap-dim { color: var(--muted); }

.ap-rd__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
}

.ap-rd__eta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
}

.ap-rd__bar {
  position: relative;
  display: flex;
  gap: 3px;
  height: 10px;
}

.ap-rd__seg {
  overflow: hidden;
  border-radius: 4px;
  background: var(--raised-3);
  transition: transform .2s;
}

.ap-rd__seg.is-on { transform: scaleY(1.4); }

.ap-rd__seg > span {
  display: block;
  height: 100%;
  transition: width .5s cubic-bezier(.2, .9, .3, 1);
}

.ap-rd__seg .is-ok { background: oklch(0.8 0.14 155); }
.ap-rd__seg .is-part { background: oklch(0.8 0.13 70); }

.ap-rd__tip {
  position: absolute;
  top: 18px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 9px;
  background: #eef0f5;
  color: #11131a;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.ap-rd__impact {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--text-2);
  font-size: 12.5px;
}

.ap-rd__impact svg { color: oklch(0.8 0.14 155); }

.ap-rd__all {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(90, 200, 140, .35);
  border-radius: 16px;
  background: rgba(90, 200, 140, .1);
}

.ap-rd__allt {
  color: oklch(0.8 0.14 155);
  font-size: 15px;
  font-weight: 600;
}

.ap-rd__done {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(90, 200, 140, .2);
  border-radius: 12px;
  background: rgba(90, 200, 140, .06);
  color: var(--text);
  font-size: 13px;
  text-align: left;
}

.ap-rd__ticks {
  display: flex;
  flex-shrink: 0;
  padding-left: 4px;
}

.ap-rd__ticks span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: -4px;
  border: 2px solid var(--card-from);
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}

.ap-rd__dn {
  flex-shrink: 0;
  font-weight: 600;
  white-space: nowrap;
}

.ap-rd__dl {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-rd__done > svg {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--muted);
  transition: transform .2s;
}

.ap-rd__done[aria-expanded="true"] > svg { transform: rotate(180deg); }

.ap-steps {
  display: flex;
  flex-direction: column;
}

.ap-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
}

.ap-step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ap-step__node {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 2px solid var(--gauge-track);
  border-radius: 50%;
  color: var(--muted);
  transition: background .3s, border-color .3s;
}

.ap-step.is-ok .ap-step__node {
  border-color: transparent;
  background: oklch(0.8 0.14 155);
  color: var(--ink);
}

.ap-step.is-next .ap-step__node {
  border-color: transparent;
  background: var(--cyan);
  box-shadow: 0 0 0 6px rgba(154, 219, 230, .15);
  color: var(--ink);
}

.ap-step__line {
  flex: 1;
  width: 2px;
  min-height: 10px;
  background: var(--today);
}

.ap-step.is-ok .ap-step__line { background: rgba(90, 200, 140, .5); }
.ap-step.is-last .ap-step__line { visibility: hidden; }

.ap-step__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 3px 0 14px;
}

.ap-step__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-step__l {
  font-size: 14px;
  font-weight: 500;
}

.ap-step.is-next .ap-step__l { font-weight: 700; }
.ap-step.is-ok .ap-step__l { color: var(--muted); }

.ap-skipped {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--tint-06);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
}

.ap-step__p {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 600;
}

.ap-step.is-ok .ap-step__p { color: oklch(0.8 0.14 155); }
.ap-step.is-next .ap-step__p { color: var(--accent-fg); }

.ap-step__m {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.ap-step__m .is-ok { color: oklch(0.8 0.14 155); }
.ap-step__m .is-warn { color: oklch(0.8 0.13 70); }

.ap-tip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(154, 219, 230, .28);
  border-radius: 14px;
  background: rgba(154, 219, 230, .07);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
  animation: ap-in .3s ease;
}

@keyframes ap-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.ap-tip__acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-tip__acts .ap-dim {
  margin-left: auto;
  font-size: 11.5px;
  white-space: nowrap;
}

.ap-tip__go {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 6px 18px rgba(154, 219, 230, .25);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ap-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px 24px;
}

.ap-status { width: 100%; }

.ap-status .o2-tabs__btn { flex: 1; }

.ap-when {
  height: 42px;
  color-scheme: dark;
}

[data-theme="light"] .ap-when { color-scheme: light; }

.ap-chans {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap-chan {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  font-size: 14px;
}

.ap-chan__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--tint-06);
  color: var(--text-2);
}

.ap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ap-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--tint-09);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
}

.ap-pill .ct-sw {
  width: 7px;
  height: 7px;
}

.ap-pill[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--c) 50%, transparent);
  background: color-mix(in oklab, var(--c) 14%, transparent);
  color: var(--text);
}

.ap-pill--col { padding: 0 12px; }

.ap-pill--col[aria-pressed="true"] {
  border-color: rgba(154, 219, 230, .4);
  background: rgba(154, 219, 230, .1);
}

/* ==========================================================================
   22zl. Add product: storefront preview
   ========================================================================== */
.ap-pvcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
}

.ap-pv__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-pv__tools {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.ap-devs {
  gap: 2px;
  padding: 3px;
}

.ap-devs .o2-tabs__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  padding: 0;
}

.ap-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--raised-3);
  color: var(--text-2);
}

.ap-pv__stage {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}

/* The device frame stays dark in both themes, like real hardware. */
.ap-dev {
  max-width: 100%;
  background: #0a0b0f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 50px rgba(0, 0, 0, .5);
  transition: width .35s cubic-bezier(.2, .9, .3, 1), border-radius .35s, padding .35s;
}

.ap-dev.is-d { width: 100%; padding: 0 0 6px; border-radius: 14px; }
.ap-dev.is-t { width: 300px; padding: 10px; border-radius: 24px; }
.ap-dev.is-m { width: 240px; padding: 8px 8px 12px; border-radius: 34px; }

.ap-dev__chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
}

.ap-dev__chrome > span:nth-child(-n+3) {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5f57;
}

.ap-dev__chrome > span:nth-child(2) { background: #febc2e; }
.ap-dev__chrome > span:nth-child(3) { background: #28c840; }

.ap-dev__url {
  display: flex;
  align-items: center;
  flex: 1;
  height: 14px;
  margin-left: 10px;
  overflow: hidden;
  padding-left: 8px;
  border-radius: 5px;
  background: #1f2230;
  color: #6b7080;
  font-size: 9px;
  white-space: nowrap;
}

.ap-dev__notch {
  display: flex;
  justify-content: center;
  padding: 4px 0 6px;
}

.ap-dev__notch span {
  width: 60px;
  height: 5px;
  border-radius: 99px;
  background: #2a2d38;
}

/* The storefront has its own light / dark look, separate from the admin. */
.ap-shop {
  --s-bg: #f7f8fa;
  --s-fg: #11131a;
  --s-mut: #5b6272;
  --s-line: #e3e7ec;
  --s-card: #eef0f5;
  --s-bd: #d5dbe3;
  --s-inv: #eef0f5;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--s-bg);
  color: var(--s-fg);
  transition: background .3s, color .3s;
}

.ap-shop.is-dark {
  --s-bg: #15171d;
  --s-fg: #eef0f5;
  --s-mut: #8a8f9e;
  --s-line: #262a36;
  --s-card: #1f222b;
  --s-bd: #3a3f4c;
  --s-inv: #11131a;
}

.is-d .ap-shop { border-radius: 0 0 10px 10px; }
.is-t .ap-shop { border-radius: 16px; }
.is-m .ap-shop { border-radius: 26px; }

.ap-shop__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--s-line);
}

.ap-shop__logo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ap-shop__icons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.ap-shop__bag {
  position: relative;
  display: flex;
}

.ap-shop__count {
  position: absolute;
  top: -6px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #9adbe6;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 800;
}

.ap-shop__count.is-bump { animation: ap-bump .4s ease; }

@keyframes ap-bump {
  0% { transform: scale(.4); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.ap-shop__body {
  display: flex;
  flex-direction: column;
}

.ap-shop__gal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 0;
}

.is-m .ap-shop__gal { padding: 0; }

.ap-shop__img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  transition: background .35s;
}

.is-t .ap-shop__img { aspect-ratio: 4 / 3; border-radius: 12px; }
.is-m .ap-shop__img { aspect-ratio: 1 / 1; border-radius: 0; }

.ap-shop__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Storefront placeholders: stripes tinted by the chosen colour swatch. */
.ap-shop__img.is-ph,
.ap-shop__thumb.is-ph {
  background-color: color-mix(in oklab, var(--ph) 18%, var(--s-card));
  background-image: repeating-linear-gradient(45deg, color-mix(in oklab, var(--ph) 32%, transparent) 0 10px, transparent 10px 20px);
  transition: background-color .35s;
}

.ap-shop__thumb.is-ph {
  background-image: repeating-linear-gradient(45deg, color-mix(in oklab, var(--ph) 32%, transparent) 0 5px, transparent 5px 10px);
}

.ap-shop__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ap-shop__phshot {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .7);
  color: #eef0f5;
  font-size: 11px;
  font-weight: 600;
}

.ap-shop__thumb {
  position: relative;
}

.ap-shop__tsize {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .85);
  color: #11131a;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 8px;
  line-height: 1.4;
}

.ap-shop__disc {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #11131a;
  color: #9adbe6;
  font-size: 11px;
  font-weight: 800;
}

.ap-shop__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: #11131a;
}

.ap-shop__fav.is-on { color: #e0565b; }
.ap-shop__fav.is-on svg { fill: currentColor; }

.ap-shop__arr {
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  color: #11131a;
  transform: translateY(-50%);
}

.ap-shop__arr.is-prev { left: 6px; }
.ap-shop__arr.is-next { right: 6px; }

.ap-shop__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.is-m .ap-shop__thumbs { padding: 0 12px; }

.ap-shop__thumb {
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 7px;
  opacity: .6;
  transition: opacity .2s;
}

.ap-shop__thumb.is-on {
  outline: 2px solid var(--s-fg);
  outline-offset: 1px;
  opacity: 1;
}

.ap-shop__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ap-shop__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px 14px;
}

.is-t .ap-shop__info { padding: 0 14px 14px; }
.is-m .ap-shop__info { padding: 12px 14px 70px; }

.ap-shop__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--s-mut);
  font-size: 10.5px;
  white-space: nowrap;
}

.ap-shop__brand > span:first-child {
  font-weight: 700;
  letter-spacing: .1em;
}

.ap-shop__new {
  margin-left: auto;
  color: #d29b2a;
  font-size: 11px;
}

.ap-shop__name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.is-m .ap-shop__name { font-size: 16px; }

.ap-shop__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-shop__price b {
  font-size: 18px;
  font-weight: 700;
}

.ap-shop__price s {
  color: var(--s-mut);
  font-size: 13px;
}

.ap-shop__save {
  padding: 2px 7px;
  border-radius: 999px;
  background: #9adbe6;
  color: #11131a;
  font-size: 11px;
  font-weight: 700;
}

.ap-shop__mut {
  color: var(--s-mut);
  font-size: 11.5px;
}

.ap-shop__mut strong { color: var(--s-fg); }

.ap-shop__sws {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ap-shop__sw {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(127, 127, 127, .35);
  transition: box-shadow .2s;
}

.ap-shop__sw.is-on { box-shadow: 0 0 0 2px var(--s-bg), 0 0 0 4px var(--s-fg); }

.ap-shop__sizeh { display: flex; }

.ap-shop__guide {
  margin-left: auto;
  text-decoration: underline;
}

.ap-shop__sizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 5px;
}

.ap-shop__size {
  position: relative;
  height: 34px;
  border: 1.5px solid var(--s-bd);
  border-radius: 9px;
  background: transparent;
  color: var(--s-fg);
  font-size: 12px;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}

.ap-shop__size.is-on {
  border-color: transparent;
  background: var(--s-fg);
  color: var(--s-inv);
}

.ap-shop__size.is-out {
  color: #9aa3b0;
  text-decoration: line-through;
}

.ap-shop__lowdot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--s-bg);
  border-radius: 50%;
  background: #e0815b;
}

.ap-shop__buy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The design keeps 8px more air under the colour and size pickers. */
.ap-shop__sws ~ .ap-shop__buy,
.ap-shop__sws ~ .ap-shop__notify {
  margin-top: 8px;
}

.ap-shop__stock {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #2e8a5b;
  font-size: 11.5px;
  font-weight: 600;
}

.ap-shop__stock.is-low { color: #e0815b; }

.ap-shop__sbar {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--s-line);
}

.ap-shop__sbar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: currentColor;
  transition: width .3s;
}

.ap-shop__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--s-fg);
  color: var(--s-inv);
  font-size: 13.5px;
  font-weight: 700;
  transition: background .25s;
}

.ap-shop__cta.is-added {
  background: #2e8a5b;
  color: #ffffff;
}

.ap-shop__cta--sm {
  height: 38px;
  margin-left: auto;
  padding: 0 16px;
  font-size: 12.5px;
  white-space: nowrap;
}

.ap-shop__eta {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--s-mut);
  font-size: 11px;
  line-height: 1.4;
}

.ap-shop__eta svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.ap-shop__eta strong { color: var(--s-fg); }

.ap-shop__notify {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: var(--s-card);
}

.ap-shop__nt {
  font-size: 12px;
  font-weight: 600;
}

.ap-shop__nrow {
  display: flex;
  gap: 6px;
}

.ap-shop__mail {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--s-line);
  border-radius: 9px;
  outline: none;
  background: var(--s-bg);
  color: var(--s-fg);
  font-size: 12.5px;
}

.ap-shop__nbtn {
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: #11131a;
  color: #9adbe6;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ap-shop__acc {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--s-line);
}

.ap-shop__accrow { border-bottom: 1px solid var(--s-line); }

.ap-shop__acch {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--s-fg);
  font-size: 12.5px;
  font-weight: 600;
}

.ap-shop__acch span {
  margin-left: auto;
  transition: transform .2s;
}

.ap-shop__acch.is-open span { transform: rotate(45deg); }

.ap-shop__acct {
  padding: 0 0 10px;
  color: var(--s-mut);
  font-size: 11.5px;
  line-height: 1.5;
}

.ap-shop__stick {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--s-line);
  background: var(--s-bg);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, .08);
  transform: translateY(110%);
  transition: transform .3s;
}

.ap-shop__stick.is-on { transform: none; }

.ap-shop__stick p {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  white-space: nowrap;
}

.ap-shop__stick span {
  color: var(--s-mut);
  font-size: 11px;
}

.ap-shop__stick b {
  font-size: 14px;
  font-weight: 700;
}

/* ==========================================================================
   22zm. Product list: shared pieces and toolbar
   ========================================================================== */
.pr-row-tb {
  position: relative;
  z-index: 5;
}

/* Hairlines of the design: white 10% and 12% on dark, ink on light. */
.pr-tb,
.pr-kp,
.pr-tbl,
.pr-qv {
  --pr-bd: rgba(255, 255, 255, .1);
  --pr-bd2: rgba(255, 255, 255, .12);
}

[data-theme="light"] .pr-tb,
[data-theme="light"] .pr-kp,
[data-theme="light"] .pr-tbl,
[data-theme="light"] .pr-qv {
  --pr-bd: var(--tint-09);
  --pr-bd2: var(--tint-09);
}

.o2-row > .o2-block > .pr-tb {
  gap: 14px;
  padding: 14px 20px 18px;
}

.pr-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
}

.pr-cap {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--muted);
}

.pr-mono {
  margin: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
}

.pr-hl {
  border-radius: 3px;
  background: rgba(154, 219, 230, .3);
  color: inherit;
}

/* A product photo fills its tile, card or quick-view frame */
.pr-pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.pr-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: color-mix(in oklab, var(--c) 18%, transparent);
  color: var(--c-fg);
  font-size: 14px;
  font-weight: 700;
}

.pr-tile--sm {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 13px;
}

.pr-tile__dot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--card-from);
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
}

.pr-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--gauge-track);
  border-radius: 5px;
  color: var(--ink);
  font-size: 9px;
  font-weight: 900;
}

[aria-pressed="true"] > .pr-tick {
  border-color: transparent;
  background: var(--cyan);
}

/* Small segmented control */
.pr-seg {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--raised-3);
}

.pr-seg__btn {
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
}

.pr-seg__btn[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.pr-seg--md { padding: 4px; }

.pr-seg--md .pr-seg__btn {
  padding: 6px 12px;
  font-size: 12.5px;
}

.pr-seg--sm .pr-seg__btn { padding: 4px 10px; }

.pr-seg--fill { border-radius: 12px; }

.pr-seg--fill .pr-seg__btn {
  flex: 1;
  height: 30px;
  padding: 0;
  border-radius: 9px;
}

.pr-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--pr-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.pr-btn:hover { background: var(--tint-08); }
.pr-btn--lg { height: 44px; }

.pr-btn--warn,
.pr-btn--warn:hover {
  border-color: rgba(240, 120, 90, .35);
  background: rgba(240, 120, 90, .08);
  color: oklch(0.72 0.14 35);
}

.pr-btn--danger,
.pr-btn--danger:hover {
  padding: 0 16px;
  border: 0;
  background: oklch(0.72 0.14 35);
  color: var(--ink);
  font-weight: 700;
}

.pr-x {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint-06);
  color: var(--text-2);
}

.pr-x--lg {
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
}

.pr-x:hover { background: var(--tint-08); }

.pr-select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--pr-bd);
  border-radius: 10px;
  outline: none;
  background: var(--card-from);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
}

.pr-select--pill {
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
}

.pr-clear {
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 600;
}

.pr-clear--sm {
  height: 28px;
  padding: 0 8px;
  font-size: 12.5px;
}

/* Floating panels: search results, filters, columns */
.pr-dd,
.pr-fpop,
.pr-colpop {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pr-bd);
  background: var(--card-from);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
}

[data-theme="light"] .pr-dd,
[data-theme="light"] .pr-fpop,
[data-theme="light"] .pr-colpop {
  box-shadow: 0 30px 70px rgba(30, 45, 70, .18);
}

/* View tabs */
.pr-views {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.pr-view {
  position: relative;
  display: flex;
  align-items: center;
}

.pr-view::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: transparent;
}

.pr-view.is-on::after { background: var(--cyan); }

.pr-view__btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.pr-view__btn:hover,
.pr-view.is-on .pr-view__btn { color: var(--text); }
.pr-view.is-on .pr-view__btn { font-weight: 600; }
.pr-view__star { color: var(--accent-fg); }

.pr-view__n {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--tint-06);
  color: var(--muted);
  font-size: 11.5px;
}

.pr-view.is-on .pr-view__n {
  background: rgba(154, 219, 230, .15);
  color: var(--accent-fg);
}

.pr-view__x {
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint-08);
  color: var(--muted);
  font-size: 9px;
}

.pr-views__save {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.pr-vname {
  width: 150px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(154, 219, 230, .5);
  border-radius: 9px;
  outline: none;
  background: rgba(154, 219, 230, .06);
  color: var(--text);
  font-size: 13px;
}

.pr-savev {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(154, 219, 230, .12);
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Search, status, filters, add */
.pr-tb__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pr-find {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
  max-width: 380px;
}

.pr-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--muted);
  transition: border-color .2s, box-shadow .2s;
}

.pr-search.is-focus {
  border-color: rgba(154, 219, 230, .55);
  box-shadow: 0 0 0 4px rgba(154, 219, 230, .12);
}

.pr-search__in {
  flex: 1;
  min-width: 0;
  padding: 1px 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
}

.pr-search__x {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint-08);
  color: var(--text-2);
  font-size: 11px;
}

.pr-kbd {
  padding: 3px 8px;
  border: 1px solid var(--pr-bd2);
  border-radius: 7px;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  white-space: nowrap;
}

.pr-dd {
  top: 54px;
  right: -60px;
  left: 0;
  gap: 2px;
  padding: 8px;
  border-radius: 18px;
}

.pr-dd__cap {
  margin: 0;
  padding: 4px 10px 6px;
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: .12em;
}

.pr-dd__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.pr-dd__item.is-hi { background: var(--tint-06); }

.pr-dd__txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pr-dd__name {
  overflow: hidden;
  font-size: 13.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pr-dd__price {
  font-size: 12.5px;
  font-weight: 600;
}

.pr-dd__st {
  width: 56px;
  color: var(--c-fg);
  font-size: 11.5px;
  font-weight: 700;
  text-align: right;
}

.pr-dd__recent {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px 6px;
}

.pr-dd__rc {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--pr-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
}

.pr-dd__rc:hover { background: var(--tint-05); }

.pr-dd__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 10px 2px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 11.5px;
}

.pr-dd__all {
  margin-left: auto;
  color: var(--accent-fg);
}

.pr-sts {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .25);
}

[data-theme="light"] .pr-sts { background: var(--raised-2); }

.pr-sts__btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 6px 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
  transition: background .2s;
}

.pr-sts__btn[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.pr-sts__n {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tint-08);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 700;
}

.pr-sts__btn[aria-pressed="true"] .pr-sts__n {
  background: var(--pill-fg);
  color: var(--contrast);
}

.pr-fwrap { position: relative; }

.pr-fbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--pr-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pr-fbtn.is-on {
  border-color: rgba(154, 219, 230, .45);
  background: rgba(154, 219, 230, .1);
}

.pr-fbtn__n {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}

.pr-fpop {
  top: 56px;
  right: 0;
  gap: 16px;
  width: 560px;
  padding: 18px;
  border-radius: 20px;
}

.pr-fsec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pr-fsec--price { gap: 10px; }
.pr-cap--gap { margin-top: 4px; }

.pr-cap__v {
  margin-left: auto;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0;
}

.pr-reset {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 11.5px;
}

.pr-fgrp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pr-fgrp__l {
  width: 84px;
  color: var(--c-fg);
  font-size: 12px;
  font-weight: 600;
}

.pr-fchip {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--pr-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
}

.pr-fchip span { color: var(--muted-2); }
.pr-fchip.is-empty { opacity: .4; }

.pr-fchip[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--c) 50%, transparent);
  background: color-mix(in oklab, var(--c) 14%, transparent);
  color: var(--text);
}

.pr-fcols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pr-fin {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--pr-bd);
  border-radius: 9px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font-size: 12.5px;
}

.pr-fin:focus { border-color: rgba(154, 219, 230, .55); }

.pr-brands {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pr-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  text-align: left;
}

.pr-brand:hover { background: var(--tint-04); }
.pr-brand[aria-pressed="true"] { color: var(--text); }

.pr-brand > span:last-child {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 11.5px;
}

.pr-hist {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 46px;
}

.pr-hist span {
  flex: 1;
  min-height: 3px;
  border-radius: 3px 3px 1px 1px;
  background: var(--today);
}

.pr-hist span.is-in { background: var(--cyan); }

.pr-ranges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.pr-range { accent-color: var(--cyan); }

.pr-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
}

.pr-switch__track {
  display: flex;
  width: 34px;
  height: 20px;
  padding: 2px;
  border-radius: 999px;
  background: var(--gauge-track);
}

.pr-switch__track span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
}

.pr-switch[aria-checked="true"] .pr-switch__track {
  justify-content: flex-end;
  background: var(--cyan);
}

.pr-switch[aria-checked="true"] .pr-switch__track span { background: var(--ink); }

.pr-ffoot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.pr-show {
  height: 40px;
  margin-left: auto;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
}

.pr-add {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin-left: auto;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: var(--pill-bg);
  box-shadow: 0 8px 24px rgba(242, 243, 246, .12);
  color: var(--pill-fg);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.pr-add:hover { background: var(--pill-hover); }

/* Result row */
.pr-res {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 32px;
}

.pr-res__n {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 160px;
  font-size: 14px;
}

.pr-mix {
  display: flex;
  gap: 2px;
  width: 160px;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
}

.pr-mix span {
  background: var(--c);
  transition: opacity .2s;
}

.pr-mix span.is-dim { opacity: .3; }

.pr-res__mix {
  min-width: 110px;
  color: var(--muted);
  font-size: 12px;
}

.pr-token {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px 0 12px;
  border: 1px solid rgba(154, 219, 230, .25);
  border-radius: 999px;
  background: rgba(154, 219, 230, .1);
  font-size: 12.5px;
  white-space: nowrap;
}

.pr-token button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pr-bd);
  color: var(--text-2);
  font-size: 10px;
}

.pr-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12.5px;
}

/* ==========================================================================
   22zn. Product list: KPI strip
   ========================================================================== */
.o2-row > .o2-block > .pr-kp {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.pr-kp__bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pr-kp__l {
  color: var(--muted);
  font-size: 12px;
}

.pr-kp__hint {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 12px;
}

.pr-kp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.pr-kt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 16px 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-card);
  box-shadow: inset 0 1px 0 var(--tint-06), 0 20px 40px var(--shade-25);
  color: var(--text);
  text-align: left;
  transition: border-color .2s, transform .2s;
}

.pr-kt.is-on {
  border-color: color-mix(in oklab, var(--c) 55%, transparent);
  transform: translateY(-3px);
}

.pr-kt__head,
.pr-kt__sub {
  display: flex;
  align-items: center;
}

.pr-kt__head { gap: 8px; }

.pr-kt__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in oklab, var(--c) 18%, transparent);
  color: var(--c-fg);
}

.pr-kt__label {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .12em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pr-kt__alert {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: oklch(0.72 0.14 35);
  box-shadow: 0 0 0 4px rgba(240, 120, 90, .2);
}

.pr-kt__val {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.pr-kt__num {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.pr-kt__d {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--tint-06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.pr-kt__d.is-up {
  background: rgba(154, 219, 230, .12);
  color: var(--accent-fg);
}

.pr-kt__d.is-down {
  background: rgba(240, 120, 90, .14);
  color: oklch(0.72 0.14 35);
}

.pr-kt__sub {
  gap: 6px;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.pr-kt__tg {
  margin-left: auto;
  color: var(--amt);
}

.pr-kt__tg.is-met { color: var(--grt); }

.pr-kt__chart {
  position: relative;
  display: block;
  height: 60px;
  margin: 4px -16px 0;
}

.pr-kt__chart svg { display: block; }

.pr-kt__area {
  fill: var(--c);
  opacity: .14;
}

.pr-kt__prev,
.pr-kt__line,
.pr-kt__tgt { fill: none; }

.pr-kt__prev {
  stroke: var(--muted-2);
  stroke-width: 1.2;
  stroke-dasharray: 2 3;
  opacity: 0;
}

.pr-kt__prev.is-on { opacity: .9; }

.pr-kt__tgt {
  stroke: rgba(255, 255, 255, .35);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

[data-theme="light"] .pr-kt__tgt { stroke: rgba(20, 30, 50, .3); }

.pr-kt__line {
  stroke: var(--c);
  stroke-width: 2;
}

.pr-kt__dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px var(--card-to);
}

.pr-kt__tip {
  position: absolute;
  top: -26px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.pr-kt__cols {
  position: absolute;
  inset: 0;
  display: flex;
}

.pr-kt__cols span { flex: 1; }

.pr-kd {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 20px;
  animation: prDrop .25s ease;
}

.pr-kd__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 170px;
}

.pr-kd__head .pr-cap { font-size: 11px; }

.pr-kd__now {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.pr-kd__list {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pr-kd__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pr-kd__row {
  display: flex;
  margin: 0;
  font-size: 12.5px;
}

.pr-kd__row span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pr-kd__row strong {
  margin-left: auto;
  color: var(--c-fg);
  font-weight: 700;
}

.pr-kd__bar {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.pr-kd__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--c);
}

@keyframes prDrop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   22zo. Product list: product table
   ========================================================================== */
/* Solid, not a gradient, so the sticky product column blends in. */
.o2-row > .o2-block > .pr-tbl {
  gap: 12px;
  padding: 18px 20px;
  background: var(--card-from);
}

.pr-tbl__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 40px;
}

.pr-tbl__titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pr-tbl__title {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
}

.pr-tbl__sub {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.pr-tbl__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.pr-colwrap { position: relative; }

.pr-colpop {
  top: 46px;
  right: 0;
  width: 200px;
  padding: 6px;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

.pr-colpop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
}

.pr-colpop__item:hover { background: var(--tint-05); }

.pr-colpop .pr-tick {
  width: 16px;
  height: 16px;
  font-size: 10px;
}

/* Bulk bar and save bar slide open on a grid row. */
.pr-bulk,
.pr-save {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.2, .9, .3, 1);
}

.pr-bulk.is-open,
.pr-save.is-open { grid-template-rows: 1fr; }

.pr-bulk__clip {
  min-height: 0;
  overflow: hidden;
}

.pr-bulk.is-open .pr-bulk__clip { overflow: visible; }

.pr-bulk__in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(154, 219, 230, .3);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(154, 219, 230, .14), rgba(154, 219, 230, .04));
}

.pr-bulk__text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.pr-bulk__n {
  padding: 0 4px;
  color: var(--accent-fg);
  font-size: 14px;
  font-weight: 700;
}

.pr-bulk__sub {
  color: var(--text-2);
  font-size: 12px;
}

.pr-bulk__acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.pr-bulk__q {
  color: oklch(0.72 0.14 35);
  font-size: 13.5px;
  font-weight: 600;
}

.pr-pct {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--pr-bd);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12.5px;
}

.pr-pct__in {
  width: 38px;
  padding: 1px 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.pr-pct__go {
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

/* The grid scrolls sideways inside the card; Product stays pinned. */
/* Positioned, so visually hidden labels in far columns stay inside it. */
.pr-scroll {
  position: relative;
  overflow-x: auto;
}

.pr-grid {
  display: flex;
  flex-direction: column;
}

.pr-r {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--raised-3);
}

.pr-r__main {
  display: grid;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 4px 12px;
  transition: background .15s;
}

.is-dense .pr-r__main { min-height: 48px; }
.pr-r > .pr-r__main:hover { background: var(--tint-03); }
.pr-r.is-sel > .pr-r__main { background: rgba(154, 219, 230, .06); }
.pr-r.is-arch > .pr-r__main { opacity: .55; }

.pr-r__main--head {
  min-height: 0;
  padding: 0 12px 10px;
}

.is-dense .pr-r__main--head,
.is-dense .pr-r__main--tot { min-height: 0; }

.pr-th {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: .1em;
  white-space: nowrap;
}

.pr-th:hover,
.pr-th.is-on { color: var(--text); }
.pr-th--r { justify-content: flex-end; }
.pr-th--c { justify-content: center; }

.pr-th--name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card-from);
}

.pr-th__arr { font-size: 9px; }

.pr-exp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}

.pr-exp:hover { background: var(--tint-06); }
.pr-exp svg { transition: transform .2s; }
.pr-exp.is-open svg { transform: rotate(90deg); }

.pr-prod {
  position: sticky;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: var(--card-from);
  box-shadow: 10px 0 12px -12px rgba(0, 0, 0, .7);
  color: var(--text);
  text-align: left;
}

[data-theme="light"] .pr-prod { box-shadow: 10px 0 12px -12px rgba(30, 45, 70, .35); }
.pr-r.is-sel .pr-prod { background: color-mix(in oklab, #9adbe6 6%, var(--card-from)); }
.is-dense .pr-prod .pr-tile { width: 34px; height: 34px; }

.pr-prod__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pr-prod__name,
.pr-prod__sku {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pr-prod__name {
  font-size: 14.5px;
  font-weight: 500;
}

.pr-prod:hover .pr-prod__name { color: var(--accent-fg); }
.pr-prod__sku { font-size: 12px; }
.pr-r .pr-hl { background: rgba(154, 219, 230, .28); }

.pr-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
}

.pr-price {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 13.5px;
  cursor: text;
}

.pr-price:hover { border-color: var(--tint-14); }

.pr-price.is-dirty {
  border-color: rgba(240, 180, 90, .5);
  background: rgba(240, 180, 90, .06);
}

.pr-price.is-focus { border-color: rgba(154, 219, 230, .6); }

.pr-price.is-bad {
  border-color: rgba(240, 120, 90, .6);
  background: rgba(240, 120, 90, .08);
}

.pr-price__cur { color: var(--muted-2); }

.pr-price__in {
  width: 52px;
  padding: 1px 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  text-align: right;
}

.pr-price__dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
}

.pr-price__was {
  position: absolute;
  top: 35px;
  right: 0;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.pr-price.is-bad .pr-price__dot { background: oklch(0.72 0.14 35); }
.pr-price.is-bad .pr-price__was { color: oklch(0.72 0.14 35); }

.pr-mg {
  display: flex;
  justify-content: flex-end;
}

.pr-chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 14%, transparent);
  color: var(--c-fg);
  font-size: 12px;
  font-weight: 700;
}

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

.pr-stock__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
}

.pr-stock__in,
.pr-size__in {
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--tint-08);
  border-radius: 8px;
  outline: none;
  background: transparent;
  color: var(--c-fg);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.pr-stock__in { width: 44px; }

.pr-stock__in:focus,
.pr-size__in:focus { border-color: rgba(154, 219, 230, .6); }

.pr-stock__ro {
  flex-shrink: 0;
  width: 44px;
  color: var(--c-fg);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.pr-stock__bar {
  flex: 1;
  min-width: 20px;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.pr-stock__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--c);
}

.pr-vars {
  color: var(--text-2);
  font-size: 13px;
  text-align: center;
}

.pr-sales {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.pr-sales svg { flex-shrink: 0; }

.pr-sales polyline,
.pr-qv__chart polyline {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
}

.pr-st {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.pr-st .pr-dot {
  width: 6px;
  height: 6px;
  background: currentColor;
}

.pr-st--active {
  background: rgba(90, 200, 140, .14);
  color: var(--grt);
}

.pr-st--draft {
  background: rgba(240, 180, 90, .14);
  color: var(--amt);
}

.pr-st--archived {
  background: var(--tint-06);
  color: var(--muted);
}

.pr-acts {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.pr-ibtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--tint-08);
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  text-decoration: none;
}

.pr-ibtn:hover {
  background: var(--tint-05);
  color: var(--text);
}

/* Sizes under an expanded row */
.pr-r__vars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 12px 14px 90px;
  background: var(--tint-02);
  animation: prDrop .2s ease;
}

.pr-fill {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.pr-fill__btn {
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(154, 219, 230, .3);
  border-radius: 999px;
  background: rgba(154, 219, 230, .06);
  color: var(--accent-fg);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pr-fill__sum { margin-left: auto; }

.pr-size {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--tint-03);
}

.pr-size.is-out { border-color: rgba(240, 120, 90, .35); }

.pr-size__l {
  min-width: 28px;
  font-size: 13px;
  font-weight: 600;
}

.pr-size__in {
  width: 40px;
  height: 28px;
  font-size: 12.5px;
}

.pr-size__t {
  color: var(--c-fg);
  font-size: 11px;
  white-space: nowrap;
}

.pr-r__main--tot {
  height: 46px;
  min-height: 0;
  padding: 0 12px;
  border-top: 1px solid var(--tint-08);
  background: var(--tint-03);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 700;
}

.pr-tot__l {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  align-self: stretch;
  background: color-mix(in oklab, #ffffff 3%, var(--card-from));
  color: var(--text);
}

[data-theme="light"] .pr-tot__l { background: color-mix(in oklab, var(--text) 3%, var(--card-from)); }

.pr-tot__m {
  color: var(--grt);
  text-align: right;
}

.pr-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 0;
  color: var(--muted);
  font-size: 14px;
}

.pr-none p { margin: 0; }

.pr-save__in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 180, 90, .35);
  border-radius: 14px;
  background: rgba(240, 180, 90, .1);
}

.pr-save__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
}

.pr-save__n {
  color: var(--amt);
  font-size: 13.5px;
  font-weight: 600;
}

.pr-save__err {
  color: oklch(0.72 0.14 35);
  font-size: 12.5px;
  font-weight: 600;
}

.pr-save__hint {
  color: var(--muted);
  font-size: 12px;
}

.pr-save__discard,
.pr-save__go {
  height: 34px;
  border-radius: 999px;
  font-size: 13px;
}

.pr-save__discard {
  margin-left: auto;
  padding: 0 14px;
  border: 1px solid var(--pr-bd2);
  background: transparent;
  color: var(--text-2);
}

.pr-save__go {
  padding: 0 16px;
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 700;
}

.pr-save__go.is-warn { background: var(--text-2); }

.pr-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.pr-pager .pr-seg { margin-left: 8px; }

.pr-pages {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.pr-pg {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--pr-bd);
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.pr-pg:hover { background: var(--tint-05); }

.pr-pg.is-on {
  border-color: rgba(154, 219, 230, .45);
  background: rgba(154, 219, 230, .12);
  color: var(--text);
}

.pr-pg--arr { font-weight: 400; }

.pr-pg:disabled {
  opacity: .35;
  cursor: default;
}

/* ==========================================================================
   22zp. Product list: quick view drawer
   ========================================================================== */
.pr-qvhost { display: contents; }

.pr-qv__bg {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(6, 7, 10, .5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.pr-qv {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 71;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(420px, calc(100vw - 32px));
  padding: 20px 22px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface-card);
  box-shadow: inset 0 1px 0 var(--tint-06), 0 20px 40px var(--shade-25);
  animation: prQv .3s cubic-bezier(.2, .9, .3, 1);
}

@keyframes prQv {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: none; }
}

.pr-qv__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pr-qv__nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.pr-qv .pr-pg {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.pr-qv__x {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--tint-04);
  color: var(--text-2);
}

.pr-qv__x:hover { background: var(--tint-08); }

.pr-qv__img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--c) 18%, transparent), var(--tint-03));
}

.pr-qv__ini {
  color: var(--c-fg);
  font-size: 64px;
  font-weight: 700;
  opacity: .5;
}

.pr-qv__st {
  position: absolute;
  top: 12px;
  left: 12px;
}

.pr-qv__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pr-qv__path {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.pr-qv__name {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
}

.pr-qv__title .pr-mono { font-size: 12px; }

.pr-qv__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.pr-qv__stat {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--tint-04);
}

.pr-qv__stat .pr-cap { font-size: 10.5px; }

.pr-qv__stat p:last-child {
  margin: 0;
  color: var(--c-fg);
  font-size: 19px;
  font-weight: 700;
}

.pr-qv__sec {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pr-qv__d {
  margin-left: auto;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0;
}

.pr-qv__d.is-up { color: var(--grt); }

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

.pr-qv__chart path {
  fill: var(--c);
  opacity: .16;
}

.pr-qv__vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pr-qv__var {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--tint-08);
  border-radius: 9px;
  font-size: 12.5px;
}

.pr-qv__var.is-out { border-color: rgba(240, 120, 90, .35); }
.pr-qv__var strong { color: var(--c-fg); }

.pr-issue {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

.pr-issue.is-ok { color: var(--text-2); }

.pr-issue__i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
  color: var(--ink);
  font-size: 9px;
  font-weight: 900;
}

.pr-issue.is-ok .pr-issue__i { background: oklch(0.8 0.14 155); }

.pr-qv__foot {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.pr-qv__edit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 44px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.pr-qv__edit:hover { background: var(--pill-hover); }

/* ==========================================================================
   22zq. Product grid: head, groups and overlay cards
   ========================================================================== */
.o2-row > .o2-block > .gd {
  --pr-bd: rgba(255, 255, 255, .1);
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

[data-theme="light"] .o2-row > .o2-block > .gd { --pr-bd: var(--tint-09); }
.o2-row > .o2-block > .gd.has-dock { padding-bottom: 90px; }

.gd-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.gd-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.gd-tools__l {
  color: var(--muted-2);
  font-size: 12px;
}

.gd-views .pr-seg__btn { text-decoration: none; }
.gd-views a.pr-seg__btn:hover { color: var(--text); }

.gd-views .pr-seg__btn.is-on {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.gd-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gd-ghead {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.gd-ghead__chev {
  color: var(--muted);
  transition: transform .2s;
}

.gd-ghead[aria-expanded="true"] .gd-ghead__chev { transform: rotate(90deg); }

.gd-ghead__sq {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c);
}

.gd-ghead__l {
  font-size: 15px;
  font-weight: 600;
}

.gd-ghead__n {
  color: var(--muted);
  font-size: 12.5px;
}

.gd-ghead__line {
  flex: 1;
  height: 1px;
  margin-left: 8px;
  background: var(--line);
}

.gd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  perspective: 1000px;
}

.gd-cards--s { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gd-cards--l { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* One card: a tinted cover, the letter stands in for the photo */
.gd-card {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--c) 30%, var(--card-to)), color-mix(in oklab, var(--c) 8%, var(--card-from)));
  transition: transform .15s ease-out, box-shadow .25s, border-color .25s;
}

.gd-card[data-ph="1"] { background: linear-gradient(220deg, color-mix(in oklab, var(--c) 30%, var(--card-to)), color-mix(in oklab, var(--c) 8%, var(--card-from))); }
.gd-card[data-ph="2"] { background: linear-gradient(100deg, color-mix(in oklab, var(--c) 30%, var(--card-to)), color-mix(in oklab, var(--c) 8%, var(--card-from))); }

.gd-card:hover,
.gd-card:focus-within {
  border-color: color-mix(in oklab, var(--c) 45%, transparent);
  box-shadow: 0 18px 40px var(--shade-35);
}

.gd-card.is-sel { border-color: var(--cyan); }
.gd-card.is-arch { opacity: .6; }

.gd-cover {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.gd-glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .26), transparent 45%);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.gd-card:hover .gd-glare { opacity: 1; }

.gd-ini {
  position: absolute;
  top: 38%;
  left: 30%;
  color: var(--c);
  font-size: 56px;
  font-weight: 700;
  opacity: .45;
  transform: translate(-50%, -50%);
  transition: left .25s;
  pointer-events: none;
}

.gd-card[data-ph="1"] .gd-ini { left: 50%; }
.gd-card[data-ph="2"] .gd-ini { left: 70%; }
.gd-cards--s .gd-ini { font-size: 40px; }
.gd-cards--l .gd-ini { font-size: 70px; }

.gd-badges {
  position: absolute;
  top: 10px;
  right: 44px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  pointer-events: none;
}

.gd-badge {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(240, 180, 90, .92);
  color: #11131a;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.gd-badge--arch { background: rgba(255, 255, 255, .85); }
.gd-badge--out { background: oklch(0.72 0.14 35); }

.gd-badge--nophoto {
  background: rgba(17, 19, 26, .75);
  color: #eef0f5;
}

.ct-cb.gd-cb {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background-size: 14px;
  opacity: 0;
  transition: opacity .2s, background-color .15s, border-color .15s;
}

.gd-fav {
  position: absolute;
  top: 44px;
  right: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(12, 14, 19, .5);
  color: #eef0f5;
  font-size: 13px;
  opacity: 0;
  transition: opacity .2s;
}

.gd-fav.is-on {
  background: #f2c14e;
  color: #11131a;
}

.gd-card:hover .gd-cb,
.gd-card:focus-within .gd-cb,
.gd-cards.has-sel .gd-cb,
.gd-cb:checked,
.gd-card:hover .gd-fav,
.gd-card:focus-within .gd-fav,
.gd-fav.is-on { opacity: 1; }

/* Info over a dark fade; it stays dark in both themes, like a photo caption */
.gd-info {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 14px 14px;
  background: linear-gradient(180deg, rgba(12, 14, 19, 0), rgba(12, 14, 19, .95) 42%);
  color: #fff;
}

.gd-seg {
  display: flex;
  gap: 4px;
  margin: 0 0 2px;
  opacity: 0;
  transition: opacity .2s;
}

.gd-card:hover .gd-seg { opacity: 1; }

.gd-seg span {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: rgba(238, 240, 245, .35);
}

.gd-seg span:first-child,
.gd-card[data-ph="1"] .gd-seg span:nth-child(2),
.gd-card[data-ph="2"] .gd-seg span:last-child { background: #eef0f5; }

.gd-card[data-ph="1"] .gd-seg span:first-child,
.gd-card[data-ph="2"] .gd-seg span:first-child { background: rgba(238, 240, 245, .35); }

.gd-brandrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.gd-brand {
  overflow: hidden;
  color: #c9ccd6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gd-more {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  color: #eef0f5;
  font-size: 13.3333px;
}

.gd-more:hover,
.gd-more[aria-expanded="true"] { background: rgba(255, 255, 255, .2); }

.gd-name {
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gd-cards--s .gd-name { font-size: 14px; }
.gd-cards--l .gd-name { font-size: 17px; }
.gd-name .pr-hl { background: rgba(154, 219, 230, .35); }

.gd-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.gd-stock {
  margin-left: auto;
  color: var(--c);
  font-size: 12px;
  white-space: nowrap;
}

/* Hover drawer: sizes, margin, sales trend */
.gd-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s;
}

.gd-card:hover .gd-drawer,
.gd-card:focus-within .gd-drawer { grid-template-rows: 1fr; }

.gd-drawer__in {
  min-height: 0;
  overflow: hidden;
}

.gd-sizes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
}

.gd-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  overflow: hidden;
}

.gd-chip {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 3px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px;
  background: transparent;
  color: #c9ccd6;
  font-size: 10.5px;
  font-weight: 700;
}

.gd-chip.is-low { color: oklch(0.8 0.13 70); }

.gd-chip.is-out {
  border-color: rgba(240, 120, 90, .35);
  color: #6b7080;
  text-decoration: line-through;
}

.gd-chip[aria-pressed="true"] {
  border-color: transparent;
  background: #eef0f5;
  color: #11131a;
}

.gd-zt {
  color: #8a8f9e;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.gd-zt[class*="pr-t--"] { color: var(--c); }

.gd-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

.gd-mg {
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 20%, transparent);
  color: var(--c);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.gd-meta svg { margin-left: auto; }

.gd-meta path {
  fill: var(--c);
  opacity: .2;
}

.gd-meta polyline {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
}

.gd-tr {
  color: #8a8f9e;
  font-size: 11.5px;
  font-weight: 700;
}

.gd-tr.is-up { color: var(--cyan); }
.gd-tr.is-down { color: oklch(0.72 0.14 35); }

.gd-menu {
  position: absolute;
  right: 10px;
  bottom: 110px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--pr-bd);
  border-radius: 14px;
  background: var(--card-from);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  animation: prDrop .2s ease;
}

.gd-menu__item {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
}

.gd-menu__item:hover { background: var(--tint-05); }
.gd-menu__item.is-danger { color: oklch(0.72 0.14 35); }

.gd-none { padding: 60px 0; }

.gd-loadmore {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 10px 0;
}

.gd-loadmore__btn {
  height: 42px;
  padding: 0 20px;
}

/* Bulk dock: a light pill fixed at the bottom while cards are selected */
.gd-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: #eef0f5;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  color: #11131a;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 160%);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), opacity .2s, visibility .3s;
}

.gd-dock.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

[data-theme="light"] .gd-dock { box-shadow: 0 20px 50px rgba(30, 45, 70, .25); }

.gd-dock__n {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #11131a;
  color: #eef0f5;
  font-size: 13px;
  font-weight: 700;
}

.gd-dock__l {
  padding-right: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

.gd-dbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: rgba(17, 19, 26, .08);
  color: #11131a;
  font-size: 12.5px;
  font-weight: 600;
}

.gd-dbtn:hover { background: rgba(17, 19, 26, .14); }
.gd-dsel { cursor: pointer; }
.gd-dpct { padding: 0 4px 0 10px; }

.gd-dpct__in {
  width: 34px;
  padding: 1px 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #11131a;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.gd-dpct__go {
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #11131a;
  color: #9adbe6;
  font-size: 12px;
  font-weight: 700;
}

.gd-dbtn--warn,
.gd-dbtn--warn:hover {
  background: rgba(240, 120, 90, .18);
  color: #b2442d;
}

.gd-dbtn--danger,
.gd-dbtn--danger:hover {
  background: #c0453a;
  color: #fff;
}

.gd-dock__q {
  color: #b2442d;
  font-size: 13px;
  font-weight: 700;
}

.gd-dock__x {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5b6272;
}

.gd-dock__x:hover { background: rgba(17, 19, 26, .08); }

/* ==========================================================================
   22zr. Projects: layout, board and project cards
   ========================================================================== */
.pj-layout {
  --pj-bd: rgba(255, 255, 255, .12);
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}

[data-theme="light"] .pj-layout { --pj-bd: var(--tint-09); }

.pj-main {
  display: flex;
  flex: 1 1 620px;
  flex-direction: column;
  min-width: 0;
}

.pj-aside {
  display: flex;
  flex: 0 1 380px;
  flex-direction: column;
  gap: 14px;
  min-width: 300px;
}

.pj-new {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.pj-new:hover { background: var(--pill-hover); }

.pj-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pj-bar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pj-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pj-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 18px;
  border: 1px solid var(--pj-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 15px;
  white-space: nowrap;
}

.pj-tab:hover { background: var(--tint-04); }

.pj-tab[aria-pressed="true"] {
  border-color: transparent;
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.pj-tab__n {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--tint-08);
  color: var(--text-2);
  font-size: 13px;
}

.pj-tab[aria-pressed="true"] .pj-tab__n {
  background: #d9dde5;
  color: #11131a;
}

.pj-search {
  display: flex;
  flex: 0 1 220px;
  align-items: center;
  gap: 10px;
  height: 46px;
  margin-left: auto;
  padding: 0 16px;
  border: 1px solid var(--pj-bd);
  border-radius: 999px;
  color: var(--muted);
}

.pj-search:focus-within { border-color: rgba(154, 219, 230, .55); }

.pj-search__in {
  flex: 1;
  min-width: 0;
  padding: 1px 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
}

.pj-views {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--pj-bd);
  border-radius: 14px;
}

.pj-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
}

.pj-view[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.pj-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pj-cards--list { grid-template-columns: minmax(0, 1fr); }

/* Three a row: a tighter card, the name may take two lines */
.pj-cards--grid .pj-cover { height: 220px; }

.pj-cards--grid .pj-open {
  top: 20px;
  right: 20px;
  width: 46px;
  height: 46px;
}

.pj-cards--grid .pj-title {
  align-items: flex-start;
  padding: 2px 6px 0;
}

.pj-cards--grid .pj-name {
  display: -webkit-box;
  font-size: 19px;
  line-height: 1.25;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pj-cards--grid .pj-tag {
  height: 24px;
  padding: 0 10px;
  font-size: 12.5px;
}

.pj-cards--grid .pj-client,
.pj-cards--grid .pj-foot { padding: 0 6px; }
.pj-cards--grid .pj-client { font-size: 14px; }

.pj-cards--grid .pj-prog {
  gap: 10px;
  padding: 4px 6px;
}

.pj-cards--grid .pj-bar { height: 18px; }
.pj-cards--grid .pj-pct { font-size: 16px; }
.pj-cards--grid .pj-foot { gap: 8px; }

.pj-cards--grid .pj-face {
  width: 32px;
  height: 32px;
  border-width: 2px;
}

.pj-cards--grid .pj-face + .pj-face { margin-left: -8px; }

.pj-cards--grid .pj-due {
  margin-left: 4px;
  font-size: 13px;
  white-space: nowrap;
}

/* In review moves onto the cover, so the footer keeps one line */
.pj-cards--grid .pj-review {
  position: absolute;
  top: 22px;
  left: 22px;
  height: 28px;
  padding: 0 12px;
  font-size: 12.5px;
  white-space: nowrap;
}

.pj-cards--grid .pj-review + .pj-more { margin-left: auto; }

.pj-cards--grid .pj-more { padding: 0 4px; }

@media (max-width: 1400px) {
  .pj-cards--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A light card on both themes; the hovered one turns cyan */
.pj-card {
  --pj-card: #d9dde5;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 18px;
  min-width: 0;
  padding: 12px 12px 14px;
  border-radius: 24px;
  background: var(--pj-card);
  color: #11131a;
  transition: background .25s, transform .2s, box-shadow .2s;
}

.pj-card.is-hot {
  --pj-card: #a8e6ef;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
  transform: translateY(-2px);
}

[data-theme="light"] .pj-card.is-hot { box-shadow: 0 20px 40px rgba(30, 45, 70, .18); }
.pj-cards--list .pj-card { grid-template-columns: 260px minmax(0, 1fr); }

.pj-cover {
  position: relative;
  height: 170px;
  min-height: 150px;
  overflow: hidden;
  border-radius: 16px;
  background: #b9bec8;
}

.pj-cards--list .pj-cover { height: 100%; }

.pj-cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.pj-cover__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-image: repeating-linear-gradient(-45deg, rgba(17, 19, 26, .07) 0 7px, transparent 7px 14px);
  color: #3a3f4c;
  font-size: 18px;
  font-weight: 600;
}

.pj-cover__ph span:last-child {
  color: #5b6272;
  font-size: 24px;
  font-weight: 500;
}

.pj-open {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #11131a;
  color: #fff;
  transition: transform .2s;
}

.pj-open:hover { transform: rotate(45deg); }

.pj-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.pj-cards--list .pj-info { padding-right: 70px; }

.pj-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 2px 10px 0;
}

.pj-name {
  margin: 0;
  overflow: hidden;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pj-tag {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 28px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .08);
  font-size: 13.5px;
}

.pj-client {
  margin: 0;
  padding: 0 10px;
  color: #5b6272;
  font-size: 15px;
}

.pj-client span {
  margin-left: 8px;
  color: #3a3f4c;
}

.pj-prog {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 4px 10px;
}

.pj-bar {
  display: flex;
  flex: 1;
  height: 22px;
  overflow: hidden;
  border-radius: 5px;
}

.pj-bar__fill {
  border-radius: 5px;
  background: linear-gradient(90deg, #11131a, #3a4252);
}

.pj-bar.is-low .pj-bar__fill { background: #f7f8fa; }

.pj-bar__rest {
  flex: 1;
  margin-left: 3px;
  background: repeating-linear-gradient(-55deg, #11131a 0 1.5px, transparent 1.5px 6px);
  opacity: .7;
}

.pj-pct {
  font-size: 18px;
  font-weight: 500;
}

.pj-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}

.pj-team { display: flex; }

.pj-face {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 2.5px solid var(--pj-card);
  border-radius: 50%;
  object-fit: cover;
  transition: border-color .25s;
}

.pj-face + .pj-face { margin-left: -10px; }

.pj-due {
  margin-left: 18px;
  color: #5b6272;
  font-size: 15px;
}

.pj-review {
  display: flex;
  align-items: center;
  height: 38px;
  margin-left: auto;
  padding: 0 18px;
  border-radius: 999px;
  background: #a8e6ef;
  font-size: 14px;
}

.pj-card.is-hot .pj-review { background: #d9dde5; }

.pj-more {
  margin-left: auto;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #11131a;
  font-size: 18px;
  font-weight: 700;
}

.pj-review + .pj-more { margin-left: 0; }
.pj-more:hover { background: rgba(17, 19, 26, .08); }

.pj-menu {
  position: absolute;
  right: 14px;
  bottom: 56px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--pj-bd);
  border-radius: 14px;
  background: var(--card-from);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  animation: prDrop .2s ease;
}

.pj-menu__item {
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
}

.pj-menu__item:hover { background: var(--tint-05); }
.pj-menu__item.is-danger { color: oklch(0.72 0.14 35); }

.pj-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 0;
  color: var(--muted);
  font-size: 15px;
}

.pj-none p { margin: 0; }

.pj-pager {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  color: var(--text-3);
  font-size: 15px;
}

.pj-pages {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.pj-arr,
.pj-pg {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
}

.pj-arr { font-size: 18px; }
.pj-arr:disabled { opacity: .35; cursor: default; }

.pj-pg {
  border-radius: 50%;
  font-size: 14px;
}

.pj-pg:hover { background: var(--tint-06); }

.pj-pg.is-on {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

/* ==========================================================================
   22zs. Projects: summary, deadlines, team, work by type
   ========================================================================== */
.pj-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--pj-bd);
  border-radius: 24px;
}

.pj-side__head {
  display: flex;
  align-items: center;
}

.pj-tm .pj-side__head,
.pj-dl .pj-side__head { padding-bottom: 6px; }

.pj-side__title {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
}

.pj-side__go {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 16px;
}

.pj-all {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
}

.pj-all:hover { color: var(--text); }

.pj-sum__body {
  display: flex;
  align-items: center;
  gap: 22px;
}

.pj-ring {
  position: relative;
  flex-shrink: 0;
  width: 136px;
  height: 136px;
}

.pj-ring svg {
  display: block;
  transform: rotate(-90deg);
}


.pj-ring .pj-ring__track { stroke: url("#pj-hatch"); }
.pj-ring__line { fill: var(--muted); }

.pj-ring__txt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.pj-ring__n {
  font-size: 32px;
  line-height: 1.1;
}

.pj-ring__l {
  color: var(--text-2);
  font-size: 15px;
}

.pj-legend {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pj-legend li + li .pj-legend__row { border-top: 1px solid var(--tint-08); }

.pj-legend__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 15.5px;
  text-align: left;
}

.pj-legend__row:hover,
.pj-legend__row[aria-pressed="true"] { color: var(--accent-fg); }

.pj-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9adbe6;
}

.pj-st--review .pj-legend__dot { background: #d9dde5; }
.pj-st--done .pj-legend__dot { background: #5b6272; }
[data-theme="light"] .pj-st--review .pj-legend__dot { background: #b9bec8; }

.pj-legend__n {
  margin-left: auto;
  color: var(--text);
  font-size: 17px;
}

/* Deadlines sit on a light panel in both themes */
.pj-side.pj-dl {
  gap: 4px;
  padding: 18px;
  border: 0;
  background: #cfd4dc;
  color: #11131a;
}

.pj-dl .pj-all { color: #3a3f4c; }
.pj-dl .pj-all:hover { color: #11131a; }

/* Rows keep the section's own gap, as in the design */
.pj-dl__list,
.pj-tm__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pj-tm__list { gap: 6px; }

.pj-dl__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

.pj-dl__row + .pj-dl__row { border-top: 1px solid rgba(17, 19, 26, .12); }

.pj-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #eef0f5;
  font-size: 13px;
  line-height: 1.1;
}

.pj-date__d {
  font-size: 20px;
  font-weight: 600;
}

.pj-dl__txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pj-dl__name {
  overflow: hidden;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pj-dl__client {
  color: #5b6272;
  font-size: 13.5px;
}

.pj-dl__client span { margin-left: 6px; }

.pj-go {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef0f5;
  color: #11131a;
  font-size: 18px;
  transition: transform .2s;
}

.pj-go:hover { transform: translateX(3px); }

.pj-dl__none {
  padding: 10px 0;
  color: #5b6272;
  font-size: 14px;
}

.pj-side.pj-tm { gap: 6px; }

.pj-tm__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}

.pj-tm__row + .pj-tm__row { border-top: 1px solid var(--tint-08); }

.pj-tm__face {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.pj-tm__txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pj-tm__name { font-size: 16px; }

.pj-tm__role {
  color: var(--muted);
  font-size: 13.5px;
}

.pj-tm__h {
  color: var(--text-2);
  font-size: 15px;
  white-space: nowrap;
}

.pj-tm__dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #9adbe6;
}

/* Work by type */
.pj-tt--cy { --c: #9adbe6; }
.pj-tt--light { --c: #d9dde5; }
.pj-tt--teal { --c: #6fb8c6; }
.pj-tt--am { --c: oklch(0.8 0.13 70); }
.pj-tt--slate { --c: #5b6272; }
[data-theme="light"] .pj-tt--light { --c: #b9bec8; }

.pj-side__note {
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
}

.pj-ty__bar {
  display: flex;
  gap: 3px;
  height: 10px;
  margin: 2px 0 0;
}

.pj-ty__bar span {
  border-radius: 99px;
  background: var(--c);
  transition: opacity .2s;
}

.pj-ty__bar span.is-dim { opacity: .25; }

.pj-ty__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pj-ty__list li + li .pj-ty__row { border-top: 1px solid var(--tint-08); }

.pj-ty__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 15.5px;
  text-align: left;
}

.pj-ty__row:hover .pj-ty__name,
.pj-ty__row[aria-pressed="true"] .pj-ty__name { color: var(--accent-fg); }

.pj-ty__sq {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--c);
}

.pj-ty__meta {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.pj-ty__n {
  margin-left: auto;
  font-size: 17px;
}

.pj-tab--type .pj-tab__n { font-size: 11px; }

/* ==========================================================================
   22zt. Transactions: KPI tiles and volume chart
   ========================================================================== */
.tx-kpis,
.tx-vol,
.tx-tbl,
.tx-dr {
  --tx-bd: rgba(255, 255, 255, .1);
  --pr-bd: var(--tx-bd);
}

[data-theme="light"] .tx-kpis,
[data-theme="light"] .tx-vol,
[data-theme="light"] .tx-tbl,
[data-theme="light"] .tx-dr { --tx-bd: var(--tint-09); }

.o2-row > .o2-block > .tx-kpis {
  display: grid;
  flex: 1 1 100%;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  min-width: 0;
}

.tx-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface-card);
}

.tx-kpi p { margin: 0; }

.tx-kpi__l {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .12em;
}

.tx-kpi__v {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.tx-kpi__d {
  color: var(--c-fg);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.tx-kpi polyline {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
}

/* The two cards keep the design's 24px radius and no drop shadow */
.o2-row > .o2-block > .tx-vol,
.o2-row > .o2-block > .tx-tbl {
  gap: 12px;
  padding: 18px 20px;
  border-radius: 24px;
  box-shadow: none;
}

.tx-vol__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.tx-vol__title {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
}

.tx-vol__sub {
  color: var(--muted);
  font-size: 13px;
}

.tx-legend {
  display: flex;
  gap: 14px;
  margin: 0 0 0 auto;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  list-style: none;
}

.tx-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tx-legend li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--cyan);
}

.tx-legend .tx-lg--ref::before { background: oklch(0.72 0.14 35); }
.tx-legend .tx-lg--fee::before { background: var(--gauge-track); }

.tx-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 160px;
  border-bottom: 1px solid var(--tint-08);
}

.tx-bars.is-dense { gap: 1px; }

.tx-bar {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
  height: 100%;
  transition: opacity .2s;
}

.tx-bar.is-dim { opacity: .35; }

.tx-bar__f {
  border-radius: 2px 2px 0 0;
  background: var(--gauge-track);
}

.tx-bar__p {
  border-radius: 3px 3px 0 0;
  background: var(--cyan);
}

.tx-bar__r { background: oklch(0.72 0.14 35); }

.tx-tip {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--pill-bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  color: var(--pill-fg);
  font-size: 12px;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ==========================================================================
   22zu. Transactions: filters, day-grouped table, drawer
   ========================================================================== */
.tx-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.tx-search {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 10px;
  max-width: 320px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--tx-bd);
  border-radius: 999px;
  color: var(--muted);
}

.tx-search:focus-within { border-color: rgba(154, 219, 230, .55); }

.tx-search__in {
  flex: 1;
  min-width: 0;
  padding: 1px 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.tx-sts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tx-st {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
}

.tx-st[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--c) 55%, transparent);
  background: var(--tint-08);
  color: var(--text);
}

.tx-select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--tx-bd);
  border-radius: 12px;
  outline: none;
  background: var(--card-from);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.tx-export { margin-left: auto; }

.tx-bulk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(154, 219, 230, .3);
  border-radius: 14px;
  background: rgba(154, 219, 230, .1);
  animation: prDrop .2s ease;
}

.tx-bulk__t {
  color: var(--accent-fg);
  font-size: 13.5px;
  font-weight: 700;
}

.tx-bulk__first { margin-left: auto; }

.tx-tbl .tx-btn--warn {
  border-color: rgba(240, 120, 90, .35);
  color: oklch(0.72 0.14 35);
}

.tx-tbl .pr-btn:disabled {
  opacity: .4;
  cursor: default;
}

/* Positioned, so visually hidden labels in far columns stay inside it. */
.tx-scroll {
  position: relative;
  overflow-x: auto;
}

.tx-grid {
  display: flex;
  flex-direction: column;
  min-width: 1120px;
}

.tx-row {
  display: grid;
  grid-template-columns: 20px 120px 110px minmax(160px, 1.4fr) 150px 90px 100px 80px 100px 100px;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 10px;
  border-bottom: 1px solid var(--tint-04);
  cursor: pointer;
  transition: background .15s;
}

.tx-row:hover { background: var(--tint-03); }
.tx-row.is-sel { background: rgba(154, 219, 230, .06); }
.tx-row.is-open { background: var(--tint-05); }

.tx-row--head,
.tx-row--head:hover {
  height: auto;
  padding: 0 10px 8px;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: .1em;
  cursor: default;
}

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

/* The select-all box must not make the header taller than its labels. */
.tx-row--head .tx-cb { margin: -3px 0; }

.tx-st.pr-t--grey { --c: var(--text-2); }

.ct-cb.tx-cb {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background-size: 11px;
}

.tx-day__head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  margin: 6px 0 0;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--tint-03);
  color: var(--muted);
  font-size: 12.5px;
}

.tx-day__head strong { color: var(--text); }

.tx-day__net {
  margin-left: 12px;
  color: var(--text-2);
}

.tx-id {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  text-align: left;
}

.tx-flag {
  display: flex;
  color: oklch(0.8 0.13 70);
}

.tx-time,
.tx-fee {
  color: var(--muted);
  font-size: 13px;
}

.tx-fee { font-size: 12.5px; }

.tx-cust {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tx-av {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e7c9b6;
  color: #11131a;
  font-size: 11px;
  font-weight: 700;
}

.tx-av--1 { background: #c9b9a8; }
.tx-av--2 { background: #d8e2ea; }
.tx-av--3 { background: #e3d3c3; }
.tx-av--4 { background: #cfe3d6; }
.tx-av--5 { background: #e8d8e8; }

.tx-cust__t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tx-cust__n,
.tx-cust__e {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tx-cust__n { font-size: 13.5px; }

.tx-cust__e {
  color: var(--muted);
  font-size: 11.5px;
}

.tx-method {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.tx-badge {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  background: #eef0f5;
  color: #11131a;
  font-size: 10px;
  font-weight: 800;
}

[data-theme="light"] .tx-badge { background: #e3e7ee; }

.tx-ch {
  color: var(--text-2);
  font-size: 12.5px;
}

.tx-amt,
.tx-fee,
.tx-net { text-align: right; }

.tx-amt,
.tx-net {
  font-size: 13.5px;
  font-weight: 600;
}

.tx-amt.is-ref { color: oklch(0.72 0.14 35); }
.tx-amt.is-failed { color: var(--muted); }

.tx-pill {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 14%, transparent);
  color: var(--c-fg);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.tx-pill .pr-dot {
  width: 6px;
  height: 6px;
  background: currentColor;
}

.tx-pill.pr-t--grey {
  background: var(--tint-07);
  color: var(--text-2);
}

.tx-pill.pr-t--gr { background: rgba(90, 200, 140, .14); }
.tx-pill.pr-t--am { background: rgba(240, 180, 90, .14); }
.tx-pill.pr-t--co { background: rgba(240, 120, 90, .14); }
.tx-pill.pr-t--co.is-strong { background: rgba(240, 120, 90, .2); }

.tx-none {
  margin: 0;
  padding: 40px 0;
  color: var(--muted);
  text-align: center;
}

.tx-pager { padding-top: 0; }
.tx-pager .pr-pg--arr { font-size: 13.3333px; }

/* Detail drawer */
.tx-dr {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 71;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(420px, calc(100vw - 32px));
  padding: 20px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card-from);
  animation: prQv .3s cubic-bezier(.2, .9, .3, 1);
}

.tx-dr p { margin: 0; }

.tx-dr__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tx-dr__top .pr-qv__x { margin-left: auto; }

.tx-dr__id {
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
}

.tx-dr__flag {
  display: flex;
  align-items: center;
  gap: 4px;
  color: oklch(0.8 0.13 70);
  font-size: 12px;
  font-weight: 600;
}

.tx-dr__sum {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tx-dr__amt {
  font-size: 32px;
  font-weight: 600;
}

.tx-dr__sub {
  color: var(--muted);
  font-size: 13px;
}

.tx-tl {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tx-tl__step {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: start;
  gap: 10px;
  min-height: 40px;
  color: var(--muted);
  font-size: 13.5px;
}

.tx-tl__step::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 0;
  left: 10px;
  width: 2px;
  background: var(--today);
}

.tx-tl__step.is-ok::before { background: rgba(90, 200, 140, .4); }
.tx-tl__step:last-child::before { display: none; }

.tx-tl__dot {
  justify-self: center;
  width: 14px;
  height: 14px;
  border: 2px solid var(--card-from);
  border-radius: 50%;
  background: var(--gauge-track);
  box-shadow: 0 0 0 2px var(--gauge-track);
}

.tx-tl__step.is-ok,
.tx-tl__step.is-bad { color: var(--text); }

.tx-tl__step.is-ok .tx-tl__dot {
  background: oklch(0.8 0.14 155);
  box-shadow: 0 0 0 2px oklch(0.8 0.14 155);
}

.tx-tl__step.is-bad .tx-tl__dot {
  background: oklch(0.72 0.14 35);
  box-shadow: 0 0 0 2px oklch(0.72 0.14 35);
}

.tx-tl__t {
  color: var(--muted);
  font-size: 12px;
}

.tx-dr__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: var(--tint-03);
}

.tx-dr__items .pr-cap { font-size: 11px; }

.tx-dr__item {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
}

.tx-dr__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tx-dr__tile {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--tint-04);
}

.tx-dr__tile .pr-cap { font-size: 10.5px; }

.tx-dr__tile p:last-child {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.tx-dr__tile.is-gr p:last-child { color: var(--grt); }
.tx-dr__tile.is-am p:last-child { color: var(--amt); }
.tx-dr__tile.is-soft p:last-child { color: var(--text-2); }

.tx-refund {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(240, 120, 90, .3);
  border-radius: 14px;
}

.tx-refund__l { font-size: 13px; }

.tx-refund__box {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--tx-bd);
  border-radius: 10px;
  color: var(--muted);
}

.tx-refund__box:focus-within { border-color: rgba(154, 219, 230, .55); }

.tx-refund__in {
  width: 70px;
  padding: 1px 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.tx-refund__go {
  height: 36px;
  margin-left: auto;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-size: 13px;
  font-weight: 700;
}

.tx-refund__go:disabled {
  opacity: .4;
  cursor: default;
}

.tx-dr__foot {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.tx-dr__btn {
  flex: 1;
  justify-content: center;
  height: 42px;
}

.tx-dr__open {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.tx-dr__open:hover { background: var(--pill-hover); }

/* ==========================================================================
   22zv. Transaction detail: layout, header strip, order
   ========================================================================== */
.td-page {
  --td-co: oklch(0.72 0.14 35);
  --td-bd: rgba(255, 255, 255, .1);
  --td-bd2: rgba(255, 255, 255, .12);
  --td-deep: #0c0e13;
  row-gap: 18px;
}

[data-theme="light"] .td-page {
  --td-co: oklch(0.56 0.16 35);
  --td-bd: var(--tint-09);
  --td-bd2: var(--tint-09);
  --td-deep: var(--seg-bg);
}

.td-page > .o2-block > .td-hd,
.td-cols { flex: 1 1 100%; }

.td-cols {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  min-width: 0;
}

.td-left,
.td-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.td-left { flex: 1.6 1 560px; }
.td-right { flex: 1 1 320px; }

.td-page p,
.td-page h2,
.td-page ol,
.td-page ul {
  margin: 0;
}

.td-page ol,
.td-page ul {
  padding: 0;
  list-style: none;
}

.td-muted { color: var(--muted); }
.td-soft { color: var(--text-2); }
.td-sm { font-size: 12.5px; }

.td-cap {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
}

.td-cap--gap { padding-top: 6px; }

.td-link {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
}

.td-h {
  font-size: 18px;
  font-weight: 600;
}

.td-h--light { font-weight: 500; }

.td-card {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.td-tag {
  display: flex;
  align-items: center;
  align-self: flex-start;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: rgba(90, 200, 140, .14);
  color: var(--grt);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* Header strip: light in both themes */
.td-hd {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 22px 24px;
  overflow: hidden;
  border-radius: 30px;
  background: linear-gradient(120deg, #e4e8ee 0%, #d4d9e1 60%, #a8e6ef 140%);
  box-shadow: 0 30px 60px var(--shade-35);
  color: #11131a;
}

.td-hd__glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  pointer-events: none;
}

.td-hd__row {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.td-hd__mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 30px;
  font-weight: 800;
}

.td-hd__mark::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(17, 19, 26, .15);
  border-radius: 50%;
}

.td-hd__mark.is-ref { color: oklch(0.78 0.13 35); }

.td-hd__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.td-hd__meta,
.td-hd__pay {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #3a3f4c;
  font-size: 13px;
}

.td-hd__pay {
  gap: 10px;
  font-size: 13.5px;
}

.td-hd__id {
  padding: 3px 8px;
  border: 0;
  border-radius: 7px;
  background: rgba(17, 19, 26, .07);
  color: #11131a;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}

.td-hd__id:hover { background: rgba(17, 19, 26, .12); }

.td-hd__st {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #11131a;
  color: #9adbe6;
  font-weight: 700;
}

.td-hd__st span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.td-hd__amt {
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}

.td-visa {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  background: #11131a;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.td-hd__sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8a8f9e;
}

.td-av {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #e7c9b6;
  color: #11131a;
  font-weight: 800;
}

.td-av--sm {
  width: 24px;
  height: 24px;
  color: inherit;
  font-size: 10px;
}

.td-hd__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}

.td-hd__btns,
.td-hd__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.td-hd__chips { gap: 6px; }

.td-hd__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  color: #11131a;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.td-hd__btn:hover { background: #fff; }

.td-hd__btn--round {
  width: 44px;
  border-radius: 50%;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
}

.td-hd__btn--dark,
.td-hd__btn--dark:hover {
  padding: 0 22px;
  background: #11131a;
  box-shadow: 0 10px 24px rgba(17, 19, 26, .3);
  color: #fff;
  font-weight: 700;
}

.td-hd__btn--dark:disabled {
  opacity: .55;
  cursor: default;
}

.td-hd__chips span {
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(17, 19, 26, .07);
  font-size: 12.5px;
}

.td-hd__chips .is-dark {
  background: #11131a;
  color: #9adbe6;
}

.td-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .55);
}

.td-steps__bar {
  position: relative;
  display: flex;
  height: 22px;
  border-radius: 7px;
}

.td-steps__fill {
  border-radius: 7px;
  background: linear-gradient(90deg, #11131a, #3a4252);
  transition: width .4s;
}

.td-steps__fill.is-ref { background: linear-gradient(90deg, #11131a, #3a4252 75%, oklch(0.72 0.14 35)); }

.td-steps__rest {
  flex: 1;
  margin-left: 3px;
  background: repeating-linear-gradient(-55deg, #11131a 0 1.5px, transparent 1.5px 6px);
  opacity: .5;
}

.td-steps__dots {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.td-steps__dots > span {
  display: flex;
  align-items: center;
  padding-left: 6px;
}

.td-steps__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9adbe6;
  box-shadow: 0 0 0 3px #11131a;
}

.td-steps__dot.is-now { box-shadow: 0 0 0 3px #11131a, 0 0 0 8px rgba(154, 219, 230, .5); }

.td-steps__dot.is-next {
  border: 2px dashed #11131a;
  background: #fff;
  box-shadow: none;
}

.td-steps__dot.is-bad {
  background: oklch(0.72 0.14 35);
  box-shadow: 0 0 0 3px #11131a, 0 0 0 8px rgba(240, 120, 90, .4);
}

.td-steps__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.td-steps__list li { font-size: 16px; }
.td-steps__list b { font-size: 14px; }

.td-steps__list span {
  display: block;
  color: #5b6272;
  font-size: 12px;
}

.td-steps__list .is-next { color: #5b6272; }

/* Order: items and the cyan summary */
.td-order {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.td-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.td-items__head {
  display: flex;
  align-items: center;
}

.td-items__head .td-muted {
  margin-left: auto;
  font-size: 12.5px;
}

.td-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.td-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid var(--tint-05);
  border-radius: 16px;
  background: var(--tint-03);
}

.td-line.is-back { border-color: rgba(240, 120, 90, .3); }

.td-thumb {
  position: relative;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 14px;
}

.td-thumb--sm {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.td-thumb--sneaker { background: linear-gradient(135deg, #f0dcc0, #c9a87a); }
.td-thumb--crew { background: linear-gradient(135deg, #d8eef2, #8fc7d2); }
.td-thumb--tote { background: linear-gradient(135deg, #dbeedd, #9fcfa9); }

.td-thumb__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.td-thumb__q {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid var(--card-to);
  border-radius: 999px;
  background: var(--contrast);
  color: var(--pill-fg);
  font-size: 11px;
  font-weight: 800;
}

.td-line__txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.td-line__n {
  font-size: 14.5px;
  font-weight: 600;
}

.td-line__vs {
  display: flex;
  gap: 5px;
}

.td-line__vs span {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tint-07);
  font-size: 11.5px;
}

.td-line__st {
  color: var(--c-fg);
  font-size: 11.5px;
}

.td-line.is-back .td-line__st { color: var(--td-co); }

.td-line__p { font-size: 15px; }

.td-ship {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed rgba(154, 219, 230, .3);
  border-radius: 14px;
  background: rgba(154, 219, 230, .06);
  color: var(--text-2);
  font-size: 13px;
}

.td-ship span {
  display: flex;
  color: var(--accent-fg);
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(154, 219, 230, .16);
}

.td-sum {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(160deg, #c4f0f6, #a8e6ef 50%, #8fd6e2);
  box-shadow: 0 24px 50px rgba(154, 219, 230, .18);
  color: #11131a;
}

.td-sum__deco {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}

.td-sum__cap {
  position: relative;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.td-sum__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
}

.td-sum__row b { font-weight: 800; }
.td-sum__row s { opacity: .5; }

.td-code {
  padding: 2px 8px;
  border-radius: 7px;
  background: #11131a;
  color: #9adbe6;
  font-size: 11.5px;
  font-weight: 800;
}

.td-sum__total {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .5);
}

.td-sum__ring {
  position: relative;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
}

.td-sum__ring svg {
  display: block;
  transform: rotate(-90deg);
}

.td-sum__ring circle {
  fill: none;
  stroke: rgba(17, 19, 26, .12);
  stroke-width: 6;
}

.td-sum__ring circle.is-val {
  stroke: #11131a;
  stroke-linecap: round;
}

.td-sum__ring > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.td-sum__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.td-sum__t b {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

/* ==========================================================================
   22zw. Transaction detail: refund, money flow, activity
   ========================================================================== */
.td-rf,
.td-ac {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--tint-08);
  border-radius: 28px;
  box-shadow: 0 30px 70px var(--shade-45);
}

.td-rf {
  --td-glow: rgba(154, 219, 230, .08);
  background: radial-gradient(80% 60% at 100% 0%, var(--td-glow), transparent 60%), linear-gradient(180deg, var(--card-from), var(--card-to));
  animation: prDrop .25s ease;
}

.td-rf.is-on { --td-glow: rgba(240, 120, 90, .14); }
.td-rf.is-done { --td-glow: rgba(240, 120, 90, .22); }

.td-rf__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.td-rf__head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.td-rf__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(240, 120, 90, .16);
  color: var(--td-co);
  font-size: 20px;
  font-weight: 800;
}

.td-rf__title {
  font-size: 19px;
  font-weight: 600;
}

.td-rf__st {
  display: flex;
  align-items: center;
  height: 26px;
  margin-left: auto;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(90, 200, 140, .16);
  color: var(--grt);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.td-rf__st.is-done {
  background: oklch(0.72 0.14 35);
  color: #11131a;
}

.td-rf__sum {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.td-rf__amt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}

.td-rf__amt > span:first-child {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.td-rf__amt .is-zero { color: var(--gauge-track); }

.td-rf__pct {
  margin-left: auto;
  color: var(--text-2);
}

.td-rf__bar {
  display: flex;
  gap: 2px;
  height: 14px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.td-rf__bar span { transition: flex .4s; }
.td-rf__bar .is-back { background: linear-gradient(90deg, oklch(0.72 0.14 35), oklch(0.78 0.13 50)); }
.td-rf__bar .is-keep { background: oklch(0.8 0.14 155); }

.td-rf__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--muted);
  font-size: 12.5px;
}

.td-rf__legend > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.td-rf__legend > span:last-child { margin-left: auto; }
.td-rf__legend b { color: var(--text); }

.td-rf__legend .is-back::before,
.td-rf__legend .is-keep::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--td-co);
}

.td-rf__legend .is-keep::before { background: var(--grt); }

.td-rf__edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.td-rf__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1.5px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-03);
  color: var(--text);
  text-align: left;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.td-rf__item.is-on {
  border-color: var(--td-co);
  background: rgba(240, 120, 90, .08);
  box-shadow: 0 0 0 4px rgba(240, 120, 90, .08);
}

.td-rf__item .td-thumb { opacity: .85; }
.td-rf__item.is-on .td-thumb { opacity: 1; }

.td-rf__cb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--gauge-track);
  border-radius: 7px;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
}

.td-rf__item.is-on .td-rf__cb {
  border-color: transparent;
  background: oklch(0.72 0.14 35);
}

.td-rf__txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.td-rf__txt span:first-child {
  font-size: 14px;
  font-weight: 600;
}

.td-rf__txt span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.td-rf__p {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 14.5px;
}

.td-rf__p span {
  color: var(--td-co);
  font-size: 11.5px;
  font-weight: 700;
}

.td-rf__reasons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.td-rf__reason {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  border: 1.5px solid var(--tint-08);
  border-radius: 14px;
  background: var(--tint-03);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
}

.td-rf__reason span { font-size: 16px; }

.td-rf__reason[aria-pressed="true"] {
  border-color: var(--td-co);
  background: rgba(240, 120, 90, .1);
}

.td-rf__note {
  padding: 10px 14px;
  border: 1px solid var(--td-bd);
  border-radius: 14px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font-size: 13.5px;
  resize: none;
}

.td-rf__note:focus { border-color: rgba(154, 219, 230, .55); }

.td-rf__mail {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--tint-03);
  color: var(--text);
  font-size: 13.5px;
  text-align: left;
}

.td-rf__mail > span:last-child {
  display: flex;
  flex-direction: column;
}

.td-rf__mail > span:last-child span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.td-switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  border-radius: 99px;
  background: var(--gauge-track);
  transition: background .2s;
}

.td-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

[aria-checked="true"] > .td-switch { background: var(--cyan); }
[aria-checked="true"] > .td-switch span { left: 19px; }

.td-rf__review {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1.5px dashed rgba(240, 120, 90, .45);
  border-radius: 18px;
  background: rgba(240, 120, 90, .06);
  font-size: 13.5px;
}

.td-rf__rcap {
  color: var(--td-co);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.td-rf__rrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.td-rf__rrow span:first-child { color: var(--text-2); }
.td-rf__rrow span:last-child { text-align: right; }

.td-rf__done {
  display: flex;
  flex-direction: column;
  padding: 6px 4px;
}

.td-tl__s {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  min-height: 44px;
  color: var(--muted);
  font-size: 12px;
}

.td-tl__s::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 0;
  left: 10px;
  width: 2px;
  background: rgba(90, 200, 140, .4);
}

.td-tl__s.is-bad::before { background: var(--today); }
.td-tl__s:last-child::before { display: none; }

.td-tl__dot {
  justify-self: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
}

.td-tl__s.is-bad .td-tl__dot {
  background: oklch(0.72 0.14 35);
  box-shadow: 0 0 0 5px rgba(240, 120, 90, .2), 0 0 18px oklch(0.72 0.14 35);
}

.td-tl__s.is-next .td-tl__dot { background: var(--gauge-track); }

.td-tl__txt {
  display: flex;
  flex-direction: column;
}

.td-tl__txt b {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.td-tl__s.is-next .td-tl__txt b { color: var(--muted); }

.td-mono-line {
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--tint-05);
  color: var(--text-2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap;
}

.td-rf__foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.td-rf__back {
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--tint-14);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.td-rf__back:hover { background: var(--tint-05); }

.td-rf__go {
  flex: 1;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: oklch(0.72 0.14 35);
  box-shadow: 0 14px 30px rgba(240, 120, 90, .3);
  color: #11131a;
  font-size: 14.5px;
  font-weight: 800;
  transition: opacity .2s, box-shadow .2s;
}

.td-rf__go:disabled {
  box-shadow: none;
  opacity: .35;
  cursor: default;
}

.td-rf__go.is-done {
  background: #eef0f5;
  box-shadow: none;
}

/* Money flow */
.td-mf {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 20px;
}

.td-mf__head {
  display: flex;
  align-items: center;
}

.td-mf__head .td-muted {
  margin-left: auto;
  font-size: 12.5px;
}

.td-mf__stops {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1.2fr);
  align-items: center;
}

.td-mf__stops.is-five { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1.2fr); }

.td-mf__arr {
  color: var(--gauge-track);
  text-align: center;
}

.td-mf__stop {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  background: var(--tint-04);
}

.td-mf__stop span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .1em;
}

.td-mf__stop b {
  font-size: 20px;
  font-weight: 700;
}

.td-mf__stop.is-fee b { color: var(--text-2); }
.td-mf__stop.is-vat { background: rgba(111, 184, 198, .1); }
.td-mf__stop.is-vat span { color: #6fb8c6; }
.td-mf__stop.is-vat b { color: var(--accent-fg); }
.td-mf__stop.is-ref { background: rgba(240, 120, 90, .1); }
.td-mf__stop.is-ref span,
.td-mf__stop.is-ref b { color: var(--td-co); }

.td-mf__stop.is-pay {
  border: 1px solid rgba(90, 200, 140, .35);
  background: rgba(90, 200, 140, .14);
}

.td-mf__stop.is-pay span,
.td-mf__stop.is-pay b { color: var(--grt); }

.td-mf__stop.is-pay b {
  font-size: 24px;
  font-weight: 800;
}

.td-mf__bar {
  display: flex;
  gap: 2px;
  height: 16px;
  overflow: hidden;
  border-radius: 99px;
}

.td-mf__bar span { transition: flex .4s; }
.td-mf__bar .is-ref { background: oklch(0.72 0.14 35); }
.td-mf__bar .is-fee { background: #6b7080; }
.td-mf__bar .is-vat { background: #6fb8c6; }
.td-mf__bar .is-pay { background: oklch(0.8 0.14 155); }

.td-mf__bank {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--tint-03);
  font-size: 13px;
}

.td-mf__bank b { margin-left: auto; }

.td-mf__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(90, 200, 140, .14);
}

/* Activity */
.td-ac { background: radial-gradient(70% 50% at 0% 0%, rgba(154, 219, 230, .12), transparent 60%), linear-gradient(180deg, var(--card-from), var(--card-to)); }

.td-ac__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.td-live {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(90, 200, 140, .14);
  color: var(--grt);
  font-size: 11.5px;
  font-weight: 800;
}

.td-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.td-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
  padding: 4px;
  border-radius: 999px;
  background: var(--raised-3);
}

.td-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
}

.td-tab[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.td-tab__n {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--td-bd);
  font-size: 11px;
}

.td-tab[aria-pressed="true"] .td-tab__n { background: rgba(154, 219, 230, .45); }

.td-health {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.td-tile {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--tint-05);
  border-radius: 14px;
  background: var(--tint-04);
}

.td-tile .td-cap { font-size: 10.5px; }

.td-tile p:nth-child(2) {
  font-size: 18px;
  font-weight: 700;
}

.td-tile.is-gr p:nth-child(2) { color: var(--grt); }

.td-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.td-chip {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--td-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.td-chip:hover { background: var(--tint-04); }

.td-chip[aria-pressed="true"] {
  border-color: var(--accent-fg);
  background: rgba(154, 219, 230, .18);
  color: var(--accent-fg);
}

.td-chip--sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 400;
}

.td-page .td-ev {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 34px;
}

.td-ev::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 9px;
  width: 2px;
  background: linear-gradient(180deg, #9adbe6, oklch(0.8 0.14 155) 60%, rgba(240, 180, 90, .6));
}

.td-ev__item {
  display: flex;
  flex-direction: column;
}

.td-ev__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-03);
  transition: background .2s, border-color .2s;
}

.td-ev__item.is-open .td-ev__card {
  border-color: rgba(154, 219, 230, .25);
  background: rgba(154, 219, 230, .05);
}

.td-ev__item + .td-ev__item { margin-top: 0; }

.td-ev__dot {
  position: absolute;
  top: 13px;
  left: -31px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 4px var(--ring-avatar), 0 0 14px var(--c);
}

.td-ev__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.td-ev__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--c) 20%, transparent);
  color: var(--c-fg);
  font-size: 14px;
}

.td-ev__txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.td-ev__name {
  color: var(--text);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}

.td-ev__code {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: color-mix(in oklab, var(--c) 20%, transparent);
  color: var(--c-fg);
  font-size: 11px;
  font-weight: 800;
}

.td-ev__time {
  width: 56px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.td-ev__chev {
  color: var(--muted);
  font-size: 12px;
  transition: transform .2s;
}

.td-ev__item.is-open .td-ev__chev { transform: rotate(180deg); }

.td-ev__more {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.td-ev__json {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(154, 219, 230, .12);
  border-radius: 12px;
  background: var(--td-deep);
  color: var(--accent-fg);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.td-ev__acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.td-ev__acts .td-muted {
  margin-left: auto;
  font-size: 11.5px;
}

.td-ev__btn {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--td-bd2);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.td-ev__btn:hover { background: var(--tint-05); }
.td-ev__btn:disabled { cursor: default; }

.td-ev__gap {
  display: flex;
  align-items: center;
  height: 24px;
  padding-left: 6px;
  color: var(--muted-2);
  font-size: 11px;
}

.td-ev__item:not(:last-child):not(:has(.td-ev__gap)) { margin-bottom: 8px; }

.td-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.td-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.td-note__face {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.td-note__bubble {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 4px 16px 16px 16px;
  background: var(--tint-05);
}

.td-note.is-pin .td-note__bubble {
  border-color: rgba(154, 219, 230, .3);
  background: rgba(154, 219, 230, .08);
}

.td-note__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.td-note__meta b { color: var(--text); }

.td-note__pin {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-size: 12px;
}

.td-note__pin[aria-pressed="true"] { color: var(--accent-fg); }

.td-note .td-note__t {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
}

.td-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--td-bd);
  border-radius: 18px;
  background: var(--tint-03);
  transition: border-color .2s, box-shadow .2s;
}

.td-compose.is-on {
  border-color: rgba(154, 219, 230, .4);
  box-shadow: 0 0 0 4px rgba(154, 219, 230, .08);
}

.td-compose__in {
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  resize: none;
}

.td-compose__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.td-compose__go {
  height: 36px;
  margin-left: auto;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 10px 24px rgba(154, 219, 230, .2);
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
}

.td-compose__go:disabled {
  opacity: .4;
  cursor: default;
}

/* ==========================================================================
   22zx. Transaction detail: customer, card, risk, addresses
   ========================================================================== */
.td-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--card-to);
}

.td-cust {
  padding: 20px;
  border-color: var(--tint-08);
  background: radial-gradient(90% 70% at 100% 0%, rgba(231, 201, 182, .2), transparent 60%), linear-gradient(180deg, var(--card-from), var(--card-to));
  box-shadow: 0 24px 60px var(--shade-35);
}

.td-cust__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.td-cust__av {
  position: relative;
  flex-shrink: 0;
  width: 62px;
  height: 62px;
}

.td-cust__av svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.td-cust__av circle {
  fill: none;
  stroke: var(--tint-08);
  stroke-width: 3;
}

.td-cust__av circle.is-val {
  stroke: oklch(0.8 0.13 70);
  stroke-linecap: round;
}

.td-cust__av > span {
  position: absolute;
  inset: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e7c9b6;
  color: #11131a;
  font-weight: 800;
}

.td-cust__who {
  flex: 1;
  min-width: 0;
}

.td-cust__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 600;
}

.td-gold {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0c98a, #d9a35a);
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
}

.td-cust .td-cust__next {
  margin-top: 2px;
  color: var(--amt);
  font-size: 11.5px;
}

.td-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.td-stats .td-cap {
  font-size: 10px;
  letter-spacing: .1em;
}

.td-stats .td-tile p:nth-child(2) {
  font-size: 22px;
  line-height: 1.1;
}

.td-tile__sub {
  color: var(--muted);
  font-size: 11px;
}

.td-tile__sub.is-gr { color: var(--grt); }

.td-cust__bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.td-cust__cap {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
}

.td-cust__cap span:last-child { color: var(--accent-fg); }

.td-cust__chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
}

.td-cust__chart span {
  flex: 1;
  border-radius: 4px;
  background: var(--raised-3);
}

.td-cust__chart .is-on { background: rgba(154, 219, 230, .3); }

.td-cust__chart .is-now {
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(154, 219, 230, .6);
}

.td-cust__btns {
  display: flex;
  gap: 6px;
}

.td-cust__view {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 999px;
  background: var(--contrast);
  color: var(--pill-fg);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.td-cust__view:hover { background: var(--pill-hover); }

.td-cust__mail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--tint-14);
  border-radius: 50%;
  color: var(--text);
  text-decoration: none;
}

.td-cust__mail:hover { background: var(--tint-05); }

.td-cardx {
  gap: 12px;
  padding: 16px;
}

/* The card itself stays a dark Visa in both themes */
.td-visa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 168px;
  padding: 18px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, #46597d 0%, #1d2436 45%, #10141e 100%);
  box-shadow: 0 22px 46px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .15);
  color: #eef0f5;
  transform: perspective(700px) rotateX(6deg) rotateY(-6deg);
}

[data-theme="light"] .td-visa-card { box-shadow: 0 22px 46px rgba(30, 45, 70, .3), inset 0 1px 0 rgba(255, 255, 255, .15); }

.td-visa-card__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(154, 219, 230, .22) 45%, rgba(231, 201, 182, .18) 52%, transparent 65%);
}

.td-visa-card__ring {
  position: absolute;
  right: -50px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border: 30px solid rgba(255, 255, 255, .04);
  border-radius: 50%;
}

.td-visa-card__top,
.td-visa-card__foot {
  position: relative;
  display: flex;
}

.td-visa-card__top { align-items: center; }

.td-visa-card__chip {
  width: 40px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, #efdca4, #b39551);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

.td-visa-card__nfc {
  margin-left: 10px;
  color: #c9ccd6;
  font-size: 15px;
  transform: rotate(90deg);
}

.td-visa-card__brand {
  margin-left: auto;
  font-size: 22px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .02em;
}

.td-visa-card__num {
  position: relative;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 18px;
  letter-spacing: .16em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

.td-visa-card__foot {
  align-items: flex-end;
  justify-content: space-between;
  color: #c9ccd6;
  font-size: 11px;
  letter-spacing: .08em;
}

.td-visa-card__foot > span:last-child { text-align: right; }

.td-visa-card__foot span span {
  display: block;
  color: #8a8f9e;
  font-size: 9px;
}

.td-cardx__bank {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.td-checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.td-check {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(90, 200, 140, .22);
  border-radius: 14px;
  background: rgba(90, 200, 140, .08);
}

.td-check span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.td-check b { font-size: 12.5px; }

.td-check span:last-child {
  color: var(--muted);
  font-size: 11px;
}

.td-risk {
  padding: 18px;
  background: radial-gradient(70% 60% at 0% 0%, rgba(90, 200, 140, .12), transparent 60%), var(--card-to);
}

.td-risk__top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.td-risk__g {
  position: relative;
  flex-shrink: 0;
  width: 104px;
  height: 104px;
}

.td-risk__g svg {
  display: block;
  transform: rotate(135deg);
}

.td-risk__g circle {
  fill: none;
  stroke: var(--raised-3);
  stroke-width: 10;
  stroke-linecap: round;
}

.td-risk__g circle.is-val {
  stroke: oklch(0.8 0.14 155);
  filter: drop-shadow(0 0 6px oklch(0.8 0.14 155));
}

.td-risk__g > span {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.td-risk__g b {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.td-risk__g span span {
  color: var(--muted);
  font-size: 10.5px;
}

.td-risk__txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.td-risk__l {
  color: var(--grt);
  font-size: 22px;
  font-weight: 700;
}

.td-risk__txt .td-tag { margin-top: 4px; }

.td-factors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.td-factor {
  display: grid;
  grid-template-columns: 1fr 70px auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.td-factor__bar {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.td-factor__bar span {
  display: block;
  height: 100%;
  background: var(--c);
}

.td-factor__v {
  color: var(--muted);
  font-size: 12px;
}

.td-factor.pr-t--am .td-factor__v { color: var(--amt); }

.td-addr {
  gap: 0;
  overflow: hidden;
}

/* A drawn map, dark in both themes */
.td-map {
  position: relative;
  height: 110px;
  background: radial-gradient(circle at 58% 52%, rgba(154, 219, 230, .22), transparent 40%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 22px), linear-gradient(160deg, #1d2230, #12151c);
  color: #eef0f5;
}

.td-map__road {
  position: absolute;
  top: 62%;
  right: 10%;
  left: 12%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
  transform: rotate(-8deg);
}

.td-map__road2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40%;
  width: 3px;
  background: rgba(255, 255, 255, .06);
}

.td-map__pin {
  position: absolute;
  top: 52%;
  left: 58%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #9adbe6;
  box-shadow: 0 0 0 6px rgba(154, 219, 230, .25), 0 0 22px #9adbe6;
}

.td-map__label {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: rgba(17, 19, 26, .7);
  font-size: 11px;
  font-weight: 700;
}

.td-addr__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
}

.td-addr__row {
  display: flex;
  gap: 10px;
}

.td-addr__row > div { flex: 1; }

.td-addr__row p:last-child {
  font-size: 13.5px;
  line-height: 1.45;
}

.td-addr__row--line {
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--tint-06);
}

.td-addr__ic {
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--tint-05);
}

.td-addr__ic.is-cy {
  background: rgba(154, 219, 230, .12);
  color: var(--accent-fg);
}

.td-addr__copy {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 12px;
}

.td-addr__row .td-tag { align-self: center; }

/* ==========================================================================
   22zy. Seller list: KPI row and top sellers
   ========================================================================== */
.sl-kpis,
.sl-card,
.sl-bulk,
.sl-dr {
  --sl-bd: rgba(255, 255, 255, .1);
  --pr-bd: var(--sl-bd);
}

[data-theme="light"] .sl-kpis,
[data-theme="light"] .sl-card,
[data-theme="light"] .sl-bulk,
[data-theme="light"] .sl-dr { --sl-bd: var(--tint-09); }

.sl-kpis p,
.sl-card p,
.sl-dr p,
.sl-kpis h2,
.sl-card h2,
.sl-dr h2 { margin: 0; }

.sl-kpis ul,
.sl-card ul,
.sl-card ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sl-muted { color: var(--muted); }
.sl-soft { color: var(--text-2); }
.sl-sm { font-size: 12px; }
.sl-up { color: var(--grt); }

.o2-row > .o2-block > .sl-kpis {
  display: flex;
  flex: 1 1 100%;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 16px;
  min-width: 0;
}

.sl-hero,
.sl-kc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  border-radius: 28px;
}

.sl-hero {
  flex: 1.7 1 440px;
  padding: 20px 22px;
  border: 1px solid rgba(154, 219, 230, .18);
  background: radial-gradient(70% 90% at 100% 100%, rgba(154, 219, 230, .24), transparent 60%), radial-gradient(50% 60% at 0% 0%, rgba(90, 200, 140, .1), transparent 60%), linear-gradient(180deg, var(--card-from), var(--card-to));
  box-shadow: 0 30px 70px var(--shade-45);
}

.sl-kc {
  flex: 1 1 220px;
  padding: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.sl-kc--gr { background: radial-gradient(90% 70% at 100% 0%, rgba(90, 200, 140, .14), transparent 60%), linear-gradient(180deg, var(--card-from), var(--card-to)); }
.sl-kc--am { background: radial-gradient(90% 70% at 100% 0%, rgba(240, 180, 90, .12), transparent 60%), linear-gradient(180deg, var(--card-from), var(--card-to)); }

.sl-kc--pend {
  border-color: rgba(240, 180, 90, .35);
  background: radial-gradient(90% 80% at 0% 0%, rgba(240, 180, 90, .2), transparent 60%), linear-gradient(180deg, var(--card-from), var(--card-to));
  box-shadow: 0 0 0 4px rgba(240, 180, 90, .05);
}

.sl-kh {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sl-kh__l {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 400;
}

.sl-hero .sl-kh__l { font-size: 13.5px; }

.sl-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c-fg);
}

.sl-ic--b { font-weight: 800; }

.sl-kc--pend .sl-ic { background: rgba(240, 180, 90, .18); }

.sl-seg { margin-left: auto; gap: 2px; }

.sl-seg .pr-seg__btn {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 700;
}

.sl-hero__v {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
}

.sl-hero__num {
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
}

.sl-hero__num span { color: var(--muted-2); }

.sl-hero__d {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(90, 200, 140, .16);
  color: var(--grt);
  font-size: 12.5px;
  font-weight: 800;
}

.sl-hero__d.is-down {
  background: rgba(240, 120, 90, .16);
  color: oklch(0.72 0.14 35);
}

.sl-hero__chart {
  position: relative;
  height: 110px;
  margin-top: 4px;
}

.sl-hero__chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sl-stop-a { stop-color: #9adbe6; stop-opacity: .5; }
.sl-stop-b { stop-color: #9adbe6; stop-opacity: 0; }
.sl-hero__area { fill: url("#sl-fill"); }

.sl-hero__goal {
  stroke: rgba(240, 180, 90, .6);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.sl-hero__prev {
  fill: none;
  stroke: var(--gauge-track);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.sl-hero__line {
  fill: none;
  stroke: var(--accent-fg);
  stroke-width: 2.6;
}

.sl-hero__glabel {
  position: absolute;
  right: 0;
  color: var(--amt);
  font-size: 10.5px;
  font-weight: 700;
}

.sl-hero__guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tint-18);
  pointer-events: none;
}

.sl-hero__dot {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154, 219, 230, .25), 0 0 16px #9adbe6;
  pointer-events: none;
}

.sl-hero__tip {
  position: absolute;
  top: 6px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #eef0f5;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  color: #11131a;
  font-size: 11.5px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
}

.sl-hero__tip.is-left { transform: translateX(calc(-100% - 24px)); }
.sl-hero__tip span { color: #5b6272; }

.sl-hero__cols {
  position: absolute;
  inset: 0;
  display: flex;
}

.sl-hero__cols span { flex: 1; }

.sl-hero .sl-split {
  display: flex;
  gap: 2px;
  height: 8px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 99px;
}

.sl-split span { background: var(--c); }

.sl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
  font-size: 11.5px;
}

.sl-legend li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sl-legend li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--c);
}

.sl-kc__v {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}

.sl-kc__d {
  color: var(--c-fg);
  font-size: 12px;
  font-weight: 800;
}

.sl-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #11131a;
  font-weight: 800;
}

.sl-logo--face {
  width: 26px;
  height: 26px;
  border: 2px solid var(--ring-avatar);
  border-radius: 50%;
  font-size: 10px;
}

.sl-logo--face + .sl-logo--face { margin-left: -8px; }

.sl-kc .sl-faces {
  display: flex;
  margin-top: 2px;
}

.sl-faces > span:last-child {
  align-self: center;
  margin-left: 8px;
  color: var(--muted);
  font-size: 11.5px;
}

.sl-kc .sl-kc__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 44px;
  margin-top: auto;
}

.sl-kc__bars span {
  flex: 1;
  border-radius: 4px;
  background: rgba(90, 200, 140, .25);
}

.sl-kc__bars .is-now {
  background: oklch(0.8 0.14 155);
  box-shadow: 0 0 12px rgba(90, 200, 140, .5);
}

.sl-kc__months {
  display: flex;
  justify-content: space-between;
  color: var(--muted-2);
  font-size: 10.5px;
}

.sl-stars {
  display: flex;
  gap: 2px;
  color: var(--amt);
  font-size: 15px;
}

/* A part star: grey star under an amber one clipped to the fraction. */
.sl-stars__part {
  position: relative;
  color: var(--gauge-track);
}

.sl-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--amt);
}

.sl-kc .sl-dist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}

.sl-dist li {
  display: grid;
  grid-template-columns: 16px 1fr 32px;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10.5px;
}

.sl-dist__bar {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.sl-dist__bar span {
  display: block;
  height: 100%;
  background: var(--c);
}

.sl-dist__bar .is-soft { opacity: .7; }

.sl-kc__foot {
  color: var(--muted-2);
  font-size: 11px;
}

.sl-live {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
  box-shadow: 0 0 10px oklch(0.8 0.13 70);
}

.sl-ages {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sl-ages li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11.5px;
}

.sl-ages li.is-old {
  color: oklch(0.72 0.14 35);
  font-weight: 700;
}

.sl-ages li > span:last-child { width: 46px; }

.sl-ages__bar {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.sl-ages__bar span {
  display: block;
  height: 100%;
  background: var(--c);
}

.sl-review {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin-top: auto;
  border-radius: 999px;
  background: var(--contrast);
  box-shadow: 0 10px 24px rgba(240, 180, 90, .18);
  color: var(--pill-fg);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
}

.sl-review:hover { background: var(--pill-hover); }

/* Cards: 24px radius, no shadow */
.o2-row > .o2-block > .sl-card {
  gap: 14px;
  padding: 18px 20px;
  border-radius: 24px;
  box-shadow: none;
}

.sl-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sl-card__head > .sl-muted:last-child {
  margin-left: auto;
  font-size: 13px;
}

.sl-h {
  font-size: 18px;
  font-weight: 500;
}

.sl-h:focus { outline: none; }

.sl-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.sl-top__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--tint-06);
  border-radius: 18px;
  background: var(--tint-03);
  color: var(--text);
  text-align: left;
  transition: transform .2s, border-color .2s;
}

.sl-top__card:hover { border-color: var(--tint-14); }

/* #1 is lifted and tinted gold */
.sl-top__card.is-first {
  border-color: color-mix(in oklab, oklch(0.8 0.13 70) 40%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.13 70) 10%, transparent);
  box-shadow: 0 14px 30px rgba(240, 180, 90, .12);
  transform: translateY(-2px);
}

.sl-rank {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--tint-07);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 800;
}

.sl-rank--1,
.sl-rank--2,
.sl-rank--3 {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px rgba(0, 0, 0, .25);
  color: #11131a;
}

.sl-rank--1 { background: linear-gradient(135deg, #f6e2b0, #c99a4e); }
.sl-rank--2 { background: linear-gradient(135deg, #f2f5f9, #8e99ab); }
.sl-rank--3 { background: linear-gradient(135deg, #f3cfae, #a7673a); }

.sl-logo--44 {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 16px;
}

.sl-top__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sl-top__n {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sl-top__rev {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
}

.sl-top__rev b {
  font-size: 20px;
  font-weight: 700;
}

/* ==========================================================================
   22zz. Seller list: table, cards, applications, bulk bar, drawer
   ========================================================================== */
.sl-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.sl-search {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--sl-bd);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--muted);
}

.sl-search:focus-within { border-color: rgba(154, 219, 230, .55); }

.sl-search__in {
  flex: 1;
  min-width: 0;
  padding: 1px 2px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
}

.sl-kbd {
  padding: 2px 6px;
  border: 1px solid var(--sl-bd);
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
}

.sl-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--raised-3);
}

.sl-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.sl-tab[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.sl-tab span {
  font-size: 11px;
  opacity: .7;
}

.sl-select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--sl-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.sl-select option {
  background: var(--card-from);
  color: var(--text);
}

.sl-views {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--sl-bd);
  border-radius: 999px;
}

.sl-view {
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
}

.sl-view[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

/* Positioned, so visually hidden labels in far columns stay inside it. */
.sl-scroll {
  position: relative;
  margin: 0 -6px;
  overflow-x: auto;
}

.sl-grid {
  display: flex;
  flex-direction: column;
  min-width: 1140px;
  padding: 0 6px;
}

.sl-row {
  display: grid;
  grid-template-columns: 28px minmax(210px, 2.2fr) 70px 80px minmax(150px, 1.4fr) 70px 80px 76px 130px 110px 36px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-top: 1px solid var(--tint-06);
  border-radius: 14px;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .15s;
}

.sl-row:hover { background: var(--tint-04); }
.sl-row.is-sel { background: color-mix(in oklab, var(--accent-fg) 8%, transparent); }

.sl-row--head,
.sl-row--head:hover {
  padding: 8px 10px;
  border-top: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .1em;
  cursor: default;
}

.ct-cb.sl-cb {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background-size: 11px;
}

.ct-cb.sl-cb--20 {
  width: 20px;
  height: 20px;
}

.sl-who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sl-logo--40 {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 14px;
}

.sl-who__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sl-who__n,
.sl-who__s {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sl-who__n { font-weight: 600; }

.sl-who__s {
  color: var(--muted);
  font-size: 12px;
}

.sl-cc {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--tint-05);
  font-size: 12px;
  font-weight: 700;
}

.sl-rev {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sl-rev b {
  width: 64px;
  font-weight: 700;
}

.sl-spark path {
  fill: none;
  stroke: oklch(0.8 0.14 155);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.sl-spark.is-down path { stroke: oklch(0.72 0.14 35); }

.sl-rt {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sl-rt span { color: var(--amt); }

.sl-ret {
  color: var(--text-2);
  font-weight: 600;
}

.sl-ret.is-mid { color: var(--amt); }
.sl-ret.is-high { color: oklch(0.72 0.14 35); }

.sl-pay {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sl-pay b { font-weight: 600; }

.sl-pay span {
  color: var(--muted);
  font-size: 11.5px;
}

.sl-st {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c-fg);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sl-st .pr-dot {
  width: 6px;
  height: 6px;
  background: currentColor;
}

.sl-more {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
}

.sl-more:hover { background: var(--tint-06); }

.sl-empty {
  padding: 40px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.sl-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 14px;
}

.sl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.sl-gcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--tint-06);
  border-radius: 20px;
  background: var(--tint-03);
  cursor: pointer;
}

.sl-gcard:hover { border-color: var(--tint-14); }
.sl-gcard.is-sel { border-color: var(--accent-fg); }

.sl-gcard__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sl-logo--46 {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 16px;
}

.sl-gcard__n {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.sl-gcard__n span:first-child {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sl-gcard__rev {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.sl-gcard__rev p {
  display: flex;
  flex-direction: column;
  font-size: 11px;
}

.sl-gcard__rev b {
  font-size: 22px;
  font-weight: 700;
}

.sl-gcard__rev svg { margin-left: auto; }

.sl-gcard__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.sl-gcard__chips > span:not(.sl-st) {
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--tint-05);
}

.sl-gcard__chips .sl-st {
  height: auto;
  margin-left: auto;
  padding: 4px 9px;
}

.sl-gcard__chips .sl-st .pr-dot { display: none; }

.sl-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.sl-pages {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.sl-arr,
.sl-pg {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: 13px;
}

.sl-arr {
  border: 1px solid var(--sl-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  font-weight: 600;
}

.sl-arr:disabled {
  opacity: .4;
  cursor: default;
}

.sl-pg {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-weight: 700;
}

.sl-pg:hover { background: var(--tint-05); }

.sl-pg.is-on {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.sl-count {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 18%, transparent);
  color: var(--amt);
  font-size: 12px;
  font-weight: 800;
}

.sl-apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.sl-app {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--tint-06);
  border-radius: 20px;
  background: var(--tint-03);
}

.sl-app__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sl-logo--42 {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 15px;
}

.sl-app__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.sl-app__t b { font-weight: 600; }

.sl-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sl-docs span {
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 14%, transparent);
  color: var(--c-fg);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sl-app__btns {
  display: flex;
  gap: 8px;
}

.sl-app__btns .sl-btn { flex: 1; }

.sl-done {
  padding: 24px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.sl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--sl-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.sl-btn:hover { background: var(--tint-08); }

.sl-btn--light,
.sl-btn--light:hover {
  padding: 0 16px;
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 700;
}

.sl-btn--light:hover { background: var(--pill-hover); }

.sl-x {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
}

.sl-x--ring {
  flex-shrink: 0;
  border: 1px solid var(--sl-bd);
  color: var(--text);
  font-size: 13px;
}

/* Bulk bar: a pill fixed at the bottom while sellers are selected */
.sl-bulk {
  position: fixed;
  bottom: 28px;
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--sl-bd);
  border-radius: 999px;
  background: var(--card-from);
  box-shadow: 0 24px 60px var(--shade-50);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 140%);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), opacity .2s, visibility .3s;
}

.sl-bulk.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.sl-bulk__n {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* Seller drawer */
.sl-bg { z-index: 80; }

.sl-dr {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 81;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 420px;
  max-width: calc(100vw - 24px);
  padding: 22px;
  overflow-y: auto;
  border: 1px solid var(--sl-bd);
  border-radius: 28px;
  background: var(--card-to);
  box-shadow: 0 30px 80px var(--shade-50);
  animation: prQv .3s cubic-bezier(.2, .9, .3, 1);
}

.sl-dr__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.sl-logo--64 {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  font-size: 23px;
}

.sl-dr__who {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.sl-dr__n {
  font-size: 20px;
  font-weight: 600;
}

.sl-dr__who .sl-st { height: 24px; }
.sl-dr__who .sl-st .pr-dot { display: none; }

.sl-dr__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sl-tile {
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--tint-04);
}

.sl-cap {
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .1em;
}

.sl-tile p:last-child {
  font-size: 18px;
  font-weight: 700;
}

.sl-dr__sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sl-dr__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.sl-dr__row b { font-weight: 600; }

.sl-dr__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 90px;
}

.sl-dr__bars span {
  flex: 1;
  border-radius: 6px;
  background: color-mix(in oklab, var(--accent-fg) 30%, transparent);
}

.sl-dr__bars .is-now { background: var(--accent-fg); }

.sl-prod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 14px;
  background: var(--tint-03);
  font-size: 13.5px;
}

.sl-prod .td-thumb {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.sl-prod__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.sl-prod__t b { font-weight: 600; }

.sl-payout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  border-radius: 18px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 10%, transparent);
}

.sl-payout > div { flex: 1; }
.sl-payout > span { font-size: 24px; }

.sl-payout__v {
  font-size: 22px;
  font-weight: 700;
}

.sl-dr__foot {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.sl-dr__foot .sl-btn { flex: 1; }
.sl-dr__foot .sl-btn--wide { flex: 1.3; }

/* ==========================================================================
   22zz2. Seller detail: layout, profile header, KPI cards
   ========================================================================== */
.sd-page {
  --sd-bd: rgba(255, 255, 255, .1);
  --sd-bd2: rgba(255, 255, 255, .12);
  --pr-bd: var(--sd-bd);
  row-gap: 18px;
}

[data-theme="light"] .sd-page {
  --sd-bd: var(--tint-09);
  --sd-bd2: var(--tint-09);
}

.sd-page p,
.sd-page h2 { margin: 0; }

.sd-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-page > .o2-block > *,
.sd-cols { flex: 1 1 100%; }

.sd-cols {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  min-width: 0;
}

.sd-left {
  display: flex;
  flex: 1.6 1 560px;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* The sidebar scrolls with the page, then stays pinned to the bottom of
   the viewport until both columns end together. */
.sd-cols > .o2-block > .sd-side {
  position: sticky;
  bottom: 16px;
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  align-self: flex-end;
  gap: 16px;
  min-width: 0;
}

/* Once the columns wrap (sidebar under the left column), pinning would
   cover content, so the sidebar scrolls normally. */
@media (max-width: 1300px) {
  .sd-cols > .o2-block > .sd-side {
    position: static;
    align-self: auto;
  }
}

.sd-muted { color: var(--muted); }
.sd-soft { color: var(--text-2); }
.sd-sm { font-size: 12px; }
.sd-up { color: var(--grt); }
.sd-mono { font-family: ui-monospace, Menlo, monospace; }

.sd-cap {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
}

.sd-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.sd-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.sd-head__r,
.sd-head__end { margin-left: auto; }

.sd-head__r,
.sd-head > .sd-muted { font-size: 13px; }

.sd-head > .sd-muted { white-space: nowrap; }

.sd-head__end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sd-h {
  font-size: 18px;
  font-weight: 500;
}

.sd-h--b {
  font-size: 19px;
  font-weight: 600;
}

.sd-seg { padding: 3px; gap: 2px; }

.sd-seg .pr-seg__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  font-weight: 700;
}

.sd-seg--md .pr-seg__btn {
  height: 30px;
  font-size: 12.5px;
}

.sd-seg .pr-seg__btn span {
  font-size: 11px;
  opacity: .65;
}

.sd-head > .sd-seg { margin-left: auto; }

.sd-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--sd-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.sd-btn:hover { background: var(--tint-08); }

.sd-btn:disabled {
  opacity: .5;
  cursor: default;
}

.sd-btn--light,
.sd-btn--light:hover {
  padding: 0 16px;
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 700;
}

.sd-btn--38 { height: 38px; }

.sd-link {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 700;
}

.sd-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--sd-bd);
  border-radius: 12px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font-size: 13.5px;
}

.sd-input:focus { border-color: rgba(154, 219, 230, .55); }

.sd-pill {
  display: flex;
  align-items: center;
  justify-self: end;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c-fg);
  font-size: 12px;
  font-weight: 700;
}

.sd-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c-fg);
  font-weight: 800;
}

.sd-ic--sm { font-size: 13px; }

/* Profile header: light in both themes, the menu may overflow it */
.sd-page > .o2-block > .sd-hd {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 22px 24px;
  border-radius: 32px;
  background: linear-gradient(120deg, #e8ebf0 0%, #d4d9e1 55%, #a8e6ef 140%);
  box-shadow: 0 30px 60px var(--shade-35);
  color: #11131a;
}

.sd-hd__glows {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 32px;
  pointer-events: none;
}

.sd-hd__glows span {
  position: absolute;
  top: -110px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .75), transparent 70%);
}

.sd-hd__glows span + span {
  top: auto;
  right: auto;
  bottom: -120px;
  left: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, oklch(0.85 0.08 40 / .45), transparent 70%);
}

.sd-hd__row {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.sd-logo {
  position: relative;
  flex-shrink: 0;
  width: 112px;
  height: 112px;
}

.sd-logo svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.sd-logo circle {
  fill: none;
  stroke: rgba(17, 19, 26, .1);
  stroke-width: 4;
}

.sd-logo circle.is-val {
  stroke: #c99a4e;
  stroke-linecap: round;
}

.sd-logo__in {
  position: absolute;
  inset: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: oklch(0.8 0.09 40);
  box-shadow: 0 12px 28px rgba(17, 19, 26, .2);
  font-size: 32px;
  font-weight: 800;
}

.sd-logo__rank {
  position: absolute;
  bottom: -2px;
  left: 50%;
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: #11131a;
  box-shadow: 0 6px 14px rgba(17, 19, 26, .25);
  color: #f0c98a;
  font-size: 12.5px;
  font-weight: 900;
  white-space: nowrap;
  transform: translateX(-50%);
}

.sd-hd__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sd-hd__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.sd-hd__name {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}

.sd-verified {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2b8a99;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.sd-hd__st {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #11131a;
  color: #9adbe6;
  font-size: 12.5px;
  font-weight: 800;
}

.sd-hd__st.is-susp { color: oklch(0.75 0.15 35); }

.sd-hd__st span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.sd-hd__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
}

.sd-hd__chips span {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
}

.sd-hd__chips .is-dark {
  background: #11131a;
  color: #f0c98a;
  font-weight: 800;
}

.sd-hd__chips .is-gold {
  background: linear-gradient(135deg, #f6e2b0, #d9b06a);
  font-weight: 900;
}

.sd-hd__note {
  color: #3a3f4c;
  font-size: 12.5px;
}

.sd-hd__side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-left: auto;
}

.sd-hd__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.sd-hbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: #11131a;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.sd-hbtn:hover { background: #fff; }

.sd-hbtn--round {
  width: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 400;
}

.sd-hbtn--dark,
.sd-hbtn--dark:hover {
  padding: 0 22px;
  background: #11131a;
  box-shadow: 0 10px 24px rgba(17, 19, 26, .3);
  color: #fff;
  font-weight: 700;
}

.sd-hd__meta {
  color: #3a3f4c;
  font-size: 12px;
}

.sd-menu {
  position: absolute;
  top: 54px;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: 220px;
  padding: 6px;
  border: 1px solid var(--sd-bd);
  border-radius: 16px;
  background: var(--card-from);
  box-shadow: 0 20px 50px var(--shade-50);
  animation: prDrop .2s ease;
}

.sd-menu__item {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
}

.sd-menu__item:hover { background: var(--tint-05); }

.sd-ribbon {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .5);
}

.sd-rb {
  padding: 12px 14px;
  border-radius: 18px;
  background: #fff;
}

.sd-rb.is-dark {
  background: #11131a;
  color: #eef0f5;
}

.sd-rb--bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sd-rb__l {
  display: flex;
  color: #5b6272;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.sd-rb.is-dark .sd-rb__l { color: #9adbe6; }
.sd-rb__ok { margin-left: auto; color: #1f6e45; }

.sd-rb__v {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 22px;
  font-weight: 700;
}

.sd-rb__v span + span {
  color: #9adbe6;
  font-size: 11.5px;
  font-weight: 800;
}

.sd-rb__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(17, 19, 26, .08);
}

.sd-rb__bar span {
  display: block;
  height: 100%;
  background: #2e8a5b;
}

.sd-rb__t {
  color: #5b6272;
  font-size: 11px;
}

.sd-page > .o2-block > .sd-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  min-width: 0;
}

.sd-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.sd-kpi__h {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
}

.sd-kpi__h > span:nth-child(2) { font-size: 13px; }

.sd-kpi__h .sd-ic { color: var(--c); }

.sd-kpi__d {
  display: flex;
  align-items: center;
  height: 22px;
  margin-left: auto;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c-fg);
  font-size: 11.5px;
  font-weight: 800;
}

.sd-kpi__v {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}

.sd-kpi svg {
  width: 100%;
  height: 36px;
}

.sd-kpi__area {
  fill: var(--c);
  opacity: .14;
}

.sd-kpi__line {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
}

/* ==========================================================================
   22zz3. Seller detail: sales heatmap, products, payouts, reviews, activity
   ========================================================================== */
.sd-sales {
  gap: 16px;
  padding: 22px;
  border-radius: 28px;
  background: radial-gradient(60% 80% at 100% 0%, rgba(154, 219, 230, .12), transparent 60%), linear-gradient(180deg, var(--card-from), var(--card-to));
}

.sd-sales__body {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 22px;
}

.sd-sales__side {
  display: flex;
  flex: 0 0 210px;
  flex-direction: column;
  gap: 12px;
}

.sd-sales__tot {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.sd-sales__side .sd-up {
  font-size: 12.5px;
  font-weight: 800;
}

.sd-hovercard {
  min-height: 66px;
  padding: 12px 14px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-03);
  font-size: 12px;
  transition: background .15s, border-color .15s;
}

.sd-hovercard.is-on {
  border-color: color-mix(in oklab, var(--accent-fg) 40%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 10%, transparent);
}

.sd-hovercard p:first-child { font-size: 11.5px; }

.sd-hovercard p:nth-child(2) {
  font-size: 22px;
  font-weight: 700;
}

.sd-tiles {
  display: grid;
  flex: 1 1 360px;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-content: center;
  gap: 6px;
  min-width: 0;
}

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

.sd-tile {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1.35;
  padding: 6px 8px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.sd-tiles--10 .sd-tile { aspect-ratio: 1.15; }
.sd-tile.is-hot { color: #11131a; }

.sd-tile.is-hov {
  border-color: var(--text);
  box-shadow: 0 0 18px rgba(154, 219, 230, .5);
}

.sd-scale {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-2);
  font-size: 11px;
}

.sd-scale__bar {
  width: 120px;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent-fg) 10%, var(--ring-avatar)), var(--accent-fg));
}

.sd-cats {
  display: flex;
  gap: 3px;
  height: 44px;
  overflow: hidden;
  border-radius: 14px;
}

.sd-cats > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0 12px;
  background: var(--c);
  color: #11131a;
  font-size: 11px;
  white-space: nowrap;
}

.sd-cats b {
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
}

/* Products gallery */
.sd-prods {
  position: relative;
  gap: 16px;
  padding: 22px;
  overflow: hidden;
  border-color: var(--tint-08);
  border-radius: 30px;
  background: radial-gradient(50% 60% at 100% 0%, rgba(154, 219, 230, .1), transparent 60%), linear-gradient(180deg, var(--card-from), var(--card-to));
  box-shadow: 0 30px 70px var(--shade-45);
}

.sd-pchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}

.sd-pchips span {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--tint-05);
}

.sd-pchips .is-low {
  background: rgba(240, 120, 90, .14);
  color: oklch(0.72 0.14 35);
  font-weight: 700;
}

.sd-pchips .is-ok {
  background: rgba(90, 200, 140, .14);
  color: var(--grt);
  font-weight: 700;
}

.sd-sort {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--sd-bd2);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.sd-sort:hover { background: var(--tint-05); }

.sd-page .sd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.sd-prod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--tint-03);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.sd-prod:hover,
.sd-prod:focus-within {
  border-color: rgba(154, 219, 230, .4);
  box-shadow: 0 22px 44px var(--shade-45);
  transform: translateY(-5px);
}

.sd-prod.is-low {
  border-color: rgba(240, 120, 90, .35);
  background: rgba(240, 120, 90, .05);
  box-shadow: 0 0 24px rgba(240, 120, 90, .08);
}

.sd-prod.is-draft { border-style: dashed; }

.sd-prod__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px dashed var(--sd-bd2);
  border-radius: 16px;
  background: repeating-linear-gradient(-45deg, var(--tint-05) 0 8px, transparent 8px 16px), #1d212b;
}

[data-theme="light"] .sd-prod__img { background: repeating-linear-gradient(-45deg, var(--tint-05) 0 8px, transparent 8px 16px), var(--crumb-hover); }

.sd-prod__pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-prod__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--muted-2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
}

.sd-prod__ph span + span { font-size: 10px; }

.sd-prod__tags {
  position: absolute;
  top: 12px;
  right: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sd-prod__rank,
.sd-prod__st {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.sd-prod__rank {
  background: linear-gradient(135deg, #f6e2b0, #c99a4e);
  color: #11131a;
  font-size: 11.5px;
  font-weight: 900;
}

.sd-prod__st {
  gap: 5px;
  background: rgba(17, 19, 26, .6);
  color: #fff;
}

.sd-prod__st.is-low {
  background: oklch(0.72 0.14 35);
  color: #11131a;
}

.sd-prod__st span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.sd-prod__over {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 6px;
  padding: 40px 10px 10px;
  background: linear-gradient(180deg, transparent, rgba(12, 14, 19, .85));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s, transform .2s;
}

.sd-prod:hover .sd-prod__over,
.sd-prod:focus-within .sd-prod__over {
  opacity: 1;
  transform: none;
}

.sd-prod__edit,
.sd-prod__act {
  display: flex;
  flex: 1;
  padding: 0;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 0;
  border-radius: 999px;
  font-size: 12.5px;
  text-decoration: none;
}

.sd-prod__edit {
  background: #eef0f5;
  color: #11131a;
  font-weight: 800;
}

.sd-prod__act {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 700;
}

.sd-prod__act:hover { background: rgba(255, 255, 255, .24); }

.sd-prod__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 6px 6px;
}

.sd-prod__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sd-prod__n {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sd-sw { display: flex; }

.sd-sw span {
  width: 12px;
  height: 12px;
  margin-left: -4px;
  border: 2px solid var(--ring-avatar);
  border-radius: 50%;
}

.sd-prod__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}

.sd-prod__price b { font-size: 18px; }

.sd-prod__rt {
  margin-left: auto;
  color: var(--amt);
}

.sd-prod__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.sd-prod__stats > span {
  display: flex;
  flex-direction: column;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--tint-04);
  font-size: 16px;
}

/* The value sits on the tile's 16px line, as in the design. */
.sd-prod__stats b {
  font-size: 13px;
  line-height: 19.2px;
}

.sd-prod__stats .sd-cap {
  color: var(--muted-2);
  font-size: 10px;
  letter-spacing: .08em;
}

.sd-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-fg);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.sd-stock__bar {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.sd-stock__bar span {
  display: block;
  height: 100%;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
}

.sd-restock {
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-size: 12.5px;
  font-weight: 800;
}

.sd-addtile a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  min-height: 300px;
  border: 1.5px dashed rgba(154, 219, 230, .3);
  border-radius: 22px;
  background: rgba(154, 219, 230, .03);
  color: var(--accent-fg);
  font-size: 12px;
  text-decoration: none;
}

.sd-addtile a:hover { background: rgba(154, 219, 230, .08); }

.sd-addtile a > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(154, 219, 230, .12);
  font-size: 24px;
}

.sd-addtile b { font-size: 14px; }

/* Payouts */
.sd-po {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sd-po__bal,
.sd-po__bank {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 18px;
  font-size: 12.5px;
}

.sd-po__bal {
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.14 155) 10%, transparent);
}

.sd-po__bank {
  gap: 6px;
  border: 1px solid var(--tint-06);
  background: var(--tint-03);
}

.sd-po__bank .sd-mono { font-size: 14px; }
.sd-po__bank .sd-btn { margin-top: auto; }

.sd-po__v {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.sd-po__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 110px;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-top: 1px solid var(--tint-06);
  font-size: 13.5px;
}

.sd-po__list li > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sd-po__list .sd-mono { font-size: 13px; }
.sd-po__list .sd-muted { font-size: 12px; }
.sd-po__list b { text-align: right; }

/* Reviews */
.sd-rv {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.sd-rv__score {
  display: flex;
  flex: 0 0 150px;
  flex-direction: column;
  gap: 4px;
}

.sd-rv__n {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.sd-stars {
  color: var(--amt);
  letter-spacing: 2px;
}

.sd-rv__dist {
  display: flex;
  flex: 1 1 240px;
  flex-direction: column;
  gap: 6px;
}

.sd-rv__dist li {
  display: grid;
  grid-template-columns: 24px 1fr 44px;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.sd-rv__dist li > span:last-child { text-align: right; }

.sd-rv__bar {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.sd-rv__bar span {
  display: block;
  height: 100%;
  background: var(--c);
}

.sd-reviews {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sd-review {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--tint-03);
}

.sd-review__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sd-review__av {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #11131a;
  font-size: 12px;
  font-weight: 800;
}

.sd-review__who {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: 13.5px;
}

.sd-review__who b { font-weight: 600; }

.sd-review__stars {
  color: var(--amt);
  font-size: 13px;
}

.sd-review__t {
  font-size: 14px;
  line-height: 1.5;
}

.sd-reply {
  margin-left: 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--accent-fg);
  border-radius: 12px;
  background: var(--tint-04);
  font-size: 13px;
}

.sd-page .sd-reply { margin-left: 14px; }

.sd-replybox {
  display: flex;
  gap: 8px;
}

.sd-replybox .sd-input { height: 38px; font-size: 13px; }

/* Activity */
.sd-page .sd-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sd-feed li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--tint-06);
}

.sd-feed__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: 13.5px;
}

.sd-feed li > .sd-sm {
  white-space: nowrap;
}

.sd-noterow {
  display: flex;
  gap: 8px;
}

/* ==========================================================================
   22zz4. Seller detail: sidebar
   ========================================================================== */
/* Company & contact: live office clock, contact person, mini map, facts */
.sd-co__clock {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c-fg);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sd-co__clock i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 22%, transparent);
}

.sd-co__person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--sd-bd);
  border-radius: 18px;
  background: var(--tint-04);
}

.sd-co__mono {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan-light), var(--cyan-deep));
  color: #0f1a20;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}

.sd-co__who {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 14px;
}

.sd-co__who .sd-muted { font-size: 12px; }

.sd-co__acts {
  display: flex;
  gap: 6px;
}

.sd-co__act,
.sd-co__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--sd-bd2);
  border-radius: 50%;
  background: var(--tint-04);
  color: var(--text);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.sd-co__act {
  width: 32px;
  height: 32px;
}

.sd-co__act:hover,
.sd-co__copy:hover {
  border-color: transparent;
  background: linear-gradient(135deg, var(--cyan-light), var(--cyan-deep));
  color: #0f1a20;
}

/* Narrow phones: the action buttons drop under the name */
@media (max-width: 420px) {
  .sd-co__person { flex-wrap: wrap; }
  .sd-co__acts { flex: 1 1 100%; padding-left: 56px; }
}

.sd-co__map {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 112px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--sd-bd);
  border-radius: 18px;
  background: color-mix(in oklab, var(--cyan-deep) 12%, var(--tint-04));
  color: var(--text);
  text-decoration: none;
}

.sd-co__map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sd-co__road {
  fill: none;
  stroke: var(--tint-14);
  stroke-width: 1.5;
}

.sd-co__main {
  fill: none;
  stroke: var(--tint-18);
  stroke-width: 5;
}

.sd-co__river {
  fill: none;
  stroke: color-mix(in oklab, var(--cyan-light) 35%, transparent);
  stroke-width: 9;
}

.sd-co__pin {
  fill: var(--cyan-deep);
  stroke: #fff;
  stroke-width: 2.5;
}

.sd-co__halo {
  fill: color-mix(in oklab, var(--cyan-deep) 40%, transparent);
  transform-box: fill-box;
  transform-origin: center;
  animation: sd-ping 2.4s ease-out infinite;
}

@keyframes sd-ping {
  from { opacity: 1; transform: scale(.4); }
  to { opacity: 0; transform: scale(1.6); }
}

.sd-co__addr {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--card-to);
  font-size: 13px;
  line-height: 1.35;
}

.sd-co__addr span,
.sd-co__open { font-size: 11.5px; }

.sd-co__addr span { color: var(--muted); }

.sd-co__open {
  position: relative;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card-to);
  font-weight: 700;
}

.sd-co__map:hover .sd-co__open {
  background: linear-gradient(135deg, var(--cyan-light), var(--cyan-deep));
  color: #0f1a20;
}

.sd-co__facts {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.sd-co__facts > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  border-top: 1px solid var(--tint-06);
  font-size: 13px;
}

.sd-co__facts > div:first-child { border-top: 0; }

.sd-co__facts dt {
  flex-shrink: 0;
  width: 78px;
  color: var(--muted);
  font-size: 12px;
}

.sd-co__facts dd {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.sd-co__facts a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--tint-14);
  text-underline-offset: 3px;
}

.sd-co__copy {
  width: 24px;
  height: 24px;
  margin-left: auto;
}

.sd-co__copy svg {
  width: 12px;
  height: 12px;
}

.sd-page .sd-docs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sd-docs li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}

.sd-docs__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--c) 18%, transparent);
  color: var(--c-fg);
  font-size: 12px;
  font-weight: 900;
}

.sd-docs b {
  margin-left: auto;
  color: var(--c-fg);
  font-size: 12px;
}

.sd-docs__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sd-docs__t .sd-muted {
  font-size: 11.5px;
  line-height: 1.35;
}

.sd-vf__n {
  font-size: 12px;
  font-weight: 700;
}

.sd-vf__bar {
  display: flex;
  gap: 4px;
}

.sd-vf__bar span {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--c);
}

.sd-vf__bar span.pr-t--am {
  background: repeating-linear-gradient(135deg, var(--c) 0 4px, color-mix(in oklab, var(--c) 35%, transparent) 4px 8px);
}

.sd-vf .sd-docs li {
  align-items: flex-start;
}

.sd-vf .sd-docs b,
.sd-vf__btn { margin-top: 3px; }

.sd-vf__btn {
  flex-shrink: 0;
  height: 26px;
  margin-left: auto;
  padding: 0 11px;
  border: 1px solid color-mix(in oklab, var(--c) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 14%, transparent);
  color: var(--c-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}

.sd-vf__btn:hover { background: color-mix(in oklab, var(--c) 28%, transparent); }

.sd-box__head {
  display: flex;
  align-items: center;
}

.sd-box__head > :last-child { margin-left: auto; }
.sd-box__head .sd-up { font-size: 13px; font-weight: 800; }

.sd-plan {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent-fg) 16%, transparent);
  color: var(--accent-fg);
  font-size: 11.5px;
  font-weight: 800;
}

.sd-cm {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.sd-cm b {
  font-size: 34px;
  font-weight: 700;
}

.sd-cm__row {
  display: flex;
  justify-content: space-between;
  color: var(--text-2);
  font-size: 13px;
}

.sd-cm__row b { color: var(--text); }

.sd-hl {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sd-hl__row {
  display: flex;
  justify-content: space-between;
  color: var(--text-2);
  font-size: 13px;
}

.sd-hl__row b { color: var(--grt); }

.sd-hl__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.sd-hl__bar span {
  display: block;
  height: 100%;
  background: oklch(0.8 0.14 155);
}

.sd-hl .sd-sm { font-size: 11.5px; }

/* ==========================================================================
   22zz5. Reviews: layout, KPI cards, rating strip, sentiment by topic
   ========================================================================== */
.rw-page {
  --sl-bd: rgba(255, 255, 255, .1);
  --pr-bd: var(--sl-bd);
  --rw-co: oklch(0.72 0.14 35);
  --rw-bd2: rgba(255, 255, 255, .12);
  --rw-axis: rgba(255, 255, 255, .22);
  row-gap: 18px;
}

[data-theme="light"] .rw-page {
  --sl-bd: var(--tint-09);
  --rw-co: oklch(0.56 0.16 35);
  --rw-bd2: var(--tint-09);
  --rw-axis: var(--tint-14);
}

.rw-page p,
.rw-page h2,
.rw-page h3 { margin: 0; }

.rw-page ul,
.rw-page ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rw-page .pr-t--co { --c-fg: var(--rw-co); }

.rw-page > .o2-block > *,
.rw-row,
.rw-cols { flex: 1 1 100%; }

.rw-row,
.rw-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  min-width: 0;
}

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

.rw-left {
  display: flex;
  flex: 1.6 1 560px;
  flex-direction: column;
  min-width: 0;
}

/* The sidebar scrolls with the page, then stays pinned to the bottom of
   the viewport until both columns end together. */
.rw-cols > .o2-block > .rw-side {
  position: sticky;
  bottom: 16px;
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  align-self: flex-end;
  gap: 16px;
  min-width: 0;
}

@media (max-width: 1300px) {
  .rw-cols > .o2-block > .rw-side {
    position: static;
    align-self: auto;
  }
}

.rw-muted { color: var(--muted); }
.rw-sm { font-size: 12px; }

.rw-card0 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.rw-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 13px;
  cursor: pointer;
}

/* KPI cards */
.rw-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.rw-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.rw-kpi.is-alert { border-color: color-mix(in oklab, var(--rw-co) 35%, transparent); }

.rw-kpi__h {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
}

.rw-kpi__d {
  display: flex;
  align-items: center;
  height: 22px;
  margin-left: auto;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c-fg);
  font-size: 11.5px;
  font-weight: 800;
}

.rw-kpi__v {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}

.rw-kpi__s {
  color: var(--muted);
  font-size: 12px;
}

.rw-kpi svg {
  width: 100%;
  height: 34px;
}

.rw-kpi__area {
  fill: var(--c);
  opacity: .14;
}

.rw-kpi__line {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Rating strip: a light panel in both themes */
.rw-row > .o2-block > .rw-rate {
  position: relative;
  display: flex;
  flex: 1.3 1 460px;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 24px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 30px;
  background: linear-gradient(120deg, #e8ebf0 0%, #d4d9e1 55%, #a8e6ef 140%);
  box-shadow: 0 30px 70px var(--shade-45);
  color: #11131a;
}

.rw-rate::before,
.rw-rate::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.rw-rate::before {
  top: -120px;
  right: -90px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(154, 219, 230, .75), transparent 70%);
}

.rw-rate::after {
  bottom: -140px;
  left: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(240, 201, 138, .45), transparent 70%);
}

.rw-rate > * { position: relative; z-index: 1; }

.rw-rate__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
}

.rw-rate__avg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rw-rate__cap {
  color: #3a3f4c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.rw-rate__num {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.rw-rate__num > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rw-rate__v {
  font-size: 68px;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
}

.rw-rate__stars {
  color: #b07a1e;
  font-size: 20px;
  letter-spacing: 2px;
}

/* A part star: a faint star under a gold one clipped to the fraction. */
.rw-rate__part {
  position: relative;
  color: rgba(17, 19, 26, .2);
}

.rw-rate__part > span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #b07a1e;
  line-height: 1.2;
  letter-spacing: 0;
}

.rw-rate__from {
  color: #3a3f4c;
  font-size: 12px;
}

.rw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.rw-chip {
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .8);
  font-size: 11.5px;
}

.rw-chip > span:first-child {
  display: block;
  color: #5b6272;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
}

.rw-chip b { font-size: 18px; }

.rw-chip.is-dark {
  background: #11131a;
  color: #eef0f5;
}

.rw-chip.is-dark > span:first-child,
.rw-chip__u { color: #9adbe6; }

.rw-chip__g {
  color: #1f6e45;
  font-weight: 800;
}

.rw-chip__m { color: #5b6272; }

/* Star bar: one segment per rating, sized by share; click filters */
.rw-rate__mid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rw-dist {
  display: flex;
  gap: 3px;
  height: 56px;
  padding: 3px;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, .55);
}

.rw-dist__b {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 8px;
  min-width: 58px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  color: #11131a;
  text-align: left;
  cursor: pointer;
  transition: opacity .15s, box-shadow .15s;
}

.rw-dist__b--5 { background: linear-gradient(135deg, #11131a, #2a3140); color: #fff; }
.rw-dist__b--4 { background: #3a4252; color: #fff; }
.rw-dist__b--3 { background: #f0c98a; }
.rw-dist__b--2 { background: #eab49f; }
.rw-dist__b--1 { background: #e39a86; }

.rw-dist__b.is-dim { opacity: .4; }

.rw-dist__b[aria-pressed="true"] { box-shadow: 0 0 0 3px #2b8a99, 0 8px 20px rgba(17, 19, 26, .25); }

.rw-dist__b:focus-visible {
  outline: 2px solid #2b8a99;
  outline-offset: -2px;
}

.rw-dist__l {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.rw-dist__l b { font-size: 14px; }

.rw-dist__l span {
  font-size: 11px;
  opacity: .8;
}

.rw-dist__n {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  opacity: .85;
}

.rw-rate__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #3a3f4c;
  font-size: 12px;
}

.rw-rate__ds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.rw-rate__ds > span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  font-weight: 700;
  white-space: nowrap;
}

.rw-rate__ds .is-up { color: #1f6e45; }
.rw-rate__ds .is-dn { color: #a3361f; }

/* Weekly average chart */
.rw-wk {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .62);
}

.rw-wk__h {
  display: flex;
  align-items: center;
  font-size: 12.5px;
}

.rw-wk__h span {
  margin-left: auto;
  color: #1f6e45;
  font-weight: 800;
}

.rw-wk__plot {
  position: relative;
  height: 150px;
}

.rw-wk__plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rw-wk__goal {
  stroke: #b07a1e;
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
}

.rw-wk__line {
  fill: none;
  stroke: #11131a;
  stroke-width: 2.6;
}

.rw-wk__gl {
  position: absolute;
  left: 0;
  color: #8a5a12;
  font-size: 10.5px;
  font-weight: 800;
}

.rw-wk__cols {
  position: absolute;
  inset: 0;
  display: flex;
}

.rw-wk__col {
  position: relative;
  flex: 1;
  cursor: crosshair;
}

.rw-wk__col.is-on::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(17, 19, 26, .18);
  content: "";
}

.rw-wk__dot {
  position: absolute;
  left: 50%;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  border: 2.5px solid #fff;
  border-radius: 50%;
  background: #11131a;
  transform: translate(-50%, -50%);
  transition: width .15s, height .15s, background-color .15s, box-shadow .15s;
}

.rw-wk__dot.is-low { background: #b07a1e; }

.rw-wk__dot.is-last {
  width: 14px;
  height: 14px;
}

.rw-wk__dot.is-hov {
  width: 18px;
  height: 18px;
  background: #2b8a99;
  box-shadow: 0 0 0 5px rgba(43, 138, 153, .25);
}

.rw-tip {
  position: absolute;
  left: 50%;
  z-index: 3;
  padding: 8px 12px;
  border-radius: 12px;
  background: #11131a;
  box-shadow: 0 12px 26px rgba(17, 19, 26, .3);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  pointer-events: none;
}

.rw-tip--l { transform: translate(-15%, -100%); }
.rw-tip--r { transform: translate(-85%, -100%); }

.rw-tip b { font-size: 15px; }

.rw-tip__w {
  display: block;
  color: #9adbe6;
  font-size: 11px;
}

.rw-tip .is-up,
.rw-tip .is-low { font-weight: 800; }

.rw-tip .is-up { color: #9adbe6; }
.rw-tip .is-low { color: #f0c98a; }

.rw-tip > span:last-child {
  display: block;
  color: #c9ccd6;
}

.rw-wk__x {
  display: flex;
  justify-content: space-between;
  color: #5b6272;
  font-size: 11px;
}

/* Sentiment by topic */
.rw-row > .o2-block > .rw-top {
  position: relative;
  display: flex;
  flex: 1 1 420px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--tint-08);
  border-radius: 30px;
  background: radial-gradient(50% 60% at 100% 0%, rgba(90, 200, 140, .1), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(240, 120, 90, .08), transparent 60%), linear-gradient(180deg, var(--card-from), var(--card-to));
  box-shadow: 0 30px 70px var(--shade-45);
}

.rw-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rw-h {
  font-size: 19px;
  font-weight: 600;
}

.rw-seg {
  gap: 2px;
  margin-left: auto;
}

.rw-seg .pr-seg__btn {
  height: 28px;
  padding: 0 12px;
  font-weight: 700;
}

.rw-sent {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rw-sent__bar {
  display: flex;
  gap: 2px;
  height: 12px;
  overflow: hidden;
  border-radius: 99px;
}

.rw-sent__bar span {
  flex: 1 1 0;
  background: var(--c);
}

.rw-sent__bar .rw-sent__neu { background: var(--gauge-track); }

.rw-sent__lg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.rw-sent__lg b { color: var(--c-fg); }
.rw-sent__lg .rw-sent__nb { color: var(--text-2); }
.rw-sent__from { margin-left: auto; }

.rw-scale,
.rw-trow__b {
  display: grid;
  grid-template-columns: 130px 1fr 1fr 44px;
}

.rw-scale {
  align-items: end;
  padding: 6px 10px 0;
  color: var(--muted-2);
  font-size: 10.5px;
  letter-spacing: .1em;
}

.rw-scale > span:nth-child(2),
.rw-scale > span:nth-child(3) {
  display: flex;
  justify-content: space-between;
}

.rw-scale > span:nth-child(2) { padding-right: 6px; }
.rw-scale > span:nth-child(3) { padding-left: 6px; }
.rw-scale > span:last-child { text-align: right; }

.rw-tlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rw-trow {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-02);
  transition: opacity .2s, border-color .2s, background-color .2s;
}

.rw-trow.is-on {
  border-color: var(--accent-fg);
  background: color-mix(in oklab, var(--accent-fg) 6%, transparent);
}

.rw-trow.is-dim { opacity: .5; }

.rw-trow__b {
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.rw-trow__n {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rw-trow__n b { font-size: 14px; }

.rw-trow__n span {
  color: var(--muted);
  font-size: 11.5px;
}

.rw-trow__neg,
.rw-trow__pos {
  display: flex;
  align-items: center;
  height: 24px;
}

.rw-trow__neg {
  justify-content: flex-end;
  padding-right: 3px;
  border-right: 1.5px solid var(--rw-axis);
}

.rw-trow__pos { padding-left: 3px; }

.rw-trow__neg > span,
.rw-trow__pos > span {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 20px;
  overflow: hidden;
  color: #11131a;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.rw-trow__neg > span {
  padding-left: 6px;
  border-radius: 8px 3px 3px 8px;
  background: linear-gradient(90deg, oklch(0.72 0.14 35), oklch(0.66 0.14 30));
}

.rw-trow__pos > span {
  justify-content: flex-end;
  padding-right: 6px;
  border-radius: 3px 8px 8px 3px;
  background: linear-gradient(90deg, oklch(0.74 0.14 155), oklch(0.82 0.14 155));
}

.rw-trow.is-on .rw-trow__pos > span { box-shadow: 0 0 14px rgba(90, 200, 140, .5); }

.rw-trow__tr {
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.rw-trow__tr.is-up { color: var(--grt); }
.rw-trow__tr.is-dn { color: var(--rw-co); }

.rw-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 10px 12px;
}

.rw-q {
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.rw-q.is-pos {
  border-left: 2px solid oklch(0.8 0.14 155);
  background: rgba(90, 200, 140, .08);
}

.rw-q.is-neg {
  border-left: 2px solid oklch(0.72 0.14 35);
  background: rgba(240, 120, 90, .08);
}

.rw-q__note {
  grid-column: 1 / -1;
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================================================
   22zz6. Reviews: feed, review cards, sidebar
   ========================================================================== */
.rw-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.rw-filters .sl-search { flex: 1 1 200px; }

.rw-ph-t { background: transparent; }

.rw-ph-t[aria-pressed="true"],
.rw-ph-t[aria-pressed="true"]:hover {
  border-color: var(--accent-fg);
  background: color-mix(in oklab, var(--accent-fg) 14%, transparent);
  color: var(--accent-fg);
}

.rw-tabs {
  flex-wrap: wrap;
  align-self: flex-start;
}

.rw-tabs .sl-tab { padding: 0 13px; }

.rw-tabs .rw-tabn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--sl-bd);
  font-size: 11px;
  opacity: 1;
}

.rw-tabs .rw-tabn.is-co,
.rw-tabs .rw-tabn.is-am { color: #11131a; }

.rw-tabs .rw-tabn.is-co { background: oklch(0.72 0.14 35); }
.rw-tabs .rw-tabn.is-am { background: oklch(0.8 0.13 70); }

.rw-topicf {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
}

.rw-topicf b { color: var(--text); }

/* Review card */
.rw-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--tint-06);
  border-radius: 20px;
  background: var(--tint-03);
  transition: background-color .2s, border-color .2s;
}

.rw-card.is-flag {
  border-color: color-mix(in oklab, var(--rw-co) 30%, transparent);
  background: color-mix(in oklab, var(--rw-co) 5%, transparent);
}

.rw-card.is-feat { border-color: rgba(240, 190, 100, .45); }

.rw-card.is-sel {
  border-color: var(--accent-fg);
  background: color-mix(in oklab, var(--accent-fg) 6%, transparent);
}

.rw-card > .ct-cb { margin-top: 2px; }

.rw-card__in {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.rw-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.rw-av {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #11131a;
  font-size: 12.5px;
  font-weight: 800;
}

.rw-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rw-who__n {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rw-who b { font-size: 14px; }
.rw-who .rw-muted { font-size: 12px; }

.rw-ver {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 14%, transparent);
  color: var(--grt);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.rw-stars {
  margin-left: auto;
  color: var(--amt);
  font-size: 15px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.rw-pill,
.rw-featp {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  white-space: nowrap;
}

.rw-pill {
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c-fg);
  font-weight: 800;
}

.rw-featp {
  background: linear-gradient(135deg, #f6e2b0, #c99a4e);
  color: #11131a;
  font-weight: 900;
}

.rw-prod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 14px;
  background: var(--tint-03);
}

.rw-ph {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 1px dashed var(--rw-bd2);
  border-radius: 10px;
  background: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px), #1d212b;
  color: var(--muted-2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 8px;
}

[data-theme="light"] .rw-ph { background: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px), var(--crumb-hover); }

.rw-prod__t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rw-prod__n {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rw-prod .rw-muted { font-size: 12px; }

.rw-prod a,
.rw-rank__b:hover .rw-rank__n {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--tint-14);
  text-underline-offset: 3px;
}

.rw-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rw-title {
  font-size: 15px;
  font-weight: 700;
}

.rw-text {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.rw-photos {
  display: flex;
  gap: 6px;
}

.rw-photos .rw-ph {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  font-size: 10px;
}

/* A product photo in place of the placeholder */
.rw-pic {
  border: 0;
  object-fit: cover;
}

.rw-flag {
  padding: 8px 12px;
  border: 1px solid color-mix(in oklab, var(--rw-co) 35%, transparent);
  border-radius: 12px;
  background: color-mix(in oklab, var(--rw-co) 10%, transparent);
  color: var(--rw-co);
  font-size: 12.5px;
  font-weight: 700;
}

.rw-reply {
  padding: 10px 14px;
  border-left: 2px solid var(--accent-fg);
  border-radius: 14px;
  background: var(--tint-04);
  font-size: 13px;
  line-height: 1.5;
}

.rw-reply__t { display: block; }

.rw-ed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--accent-fg);
  border-radius: 14px;
  background: var(--tint-03);
}

.rw-ed__in {
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  resize: none;
}

.rw-ed__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.rw-ed__row > .rw-muted { font-size: 11.5px; }

.rw-tpl {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--sl-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 11.5px;
  cursor: pointer;
}

.rw-tpl:hover { background: var(--tint-06); }

.rw-ed__cancel { margin-left: auto; }

.rw-page .rw-btn {
  height: 32px;
  padding: 0 13px;
  font-size: 12.5px;
  cursor: pointer;
}

.rw-page .sl-btn--light.rw-btn { padding: 0 15px; }

.rw-page .rw-btn:disabled {
  opacity: .45;
  cursor: default;
}

.rw-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.rw-acts .rw-btn[aria-pressed="true"] { border-color: var(--accent-fg); }

.rw-help {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.rw-empty {
  padding: 40px;
  color: var(--muted);
  text-align: center;
}

.rw-empty .rw-link { font-size: 14px; }

.rw-page .rw-more {
  align-self: center;
  height: 42px;
  padding: 0 22px;
  font-size: 12.5px;
  cursor: pointer;
}

/* Sidebar */
.rw-box__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rw-cap {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
}

.rw-queue { border-color: color-mix(in oklab, var(--rw-co) 30%, transparent); }

.rw-count {
  display: flex;
  align-items: center;
  height: 22px;
  margin-left: auto;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--rw-co) 16%, transparent);
  color: var(--rw-co);
  font-size: 11.5px;
  font-weight: 800;
}

.rw-page .rw-qlist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rw-qlist li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: var(--tint-03);
}

.rw-q__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rw-q__top b { font-size: 13.5px; }

.rw-q__top .rw-stars--sm {
  margin-left: 0;
  font-size: 12px;
  letter-spacing: 0;
}

.rw-q__top .rw-muted {
  margin-left: auto;
  font-size: 11.5px;
}

.rw-q__t {
  max-height: 43.4px;
  overflow: hidden;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 21.7px;
}

.rw-reason {
  display: flex;
  align-items: center;
  align-self: flex-start;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: color-mix(in oklab, var(--rw-co) 14%, transparent);
  color: var(--rw-co);
  font-size: 11px;
  font-weight: 800;
}

.rw-q__b {
  display: flex;
  gap: 6px;
}

.rw-q__b .rw-btn { flex: 1; }

.rw-clear {
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.rw-sub {
  color: var(--c-fg);
  font-size: 12px;
  font-weight: 800;
}

.rw-sub--line {
  padding-top: 6px;
  border-top: 1px solid var(--tint-06);
}

.rw-page .rw-ranks,
.rw-page .rw-tpls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rw-ranks li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rw-rank {
  flex-shrink: 0;
  width: 22px;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 800;
}

.rw-rank__b {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.rw-rank__n {
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rw-rank__b .rw-muted { font-size: 11.5px; }

.rw-ranks b {
  color: var(--c-fg);
  font-size: 13.5px;
  white-space: nowrap;
}

.rw-tpls li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: var(--tint-03);
}

.rw-tpls__h {
  display: flex;
  align-items: center;
}

.rw-tpls__h b { font-size: 13px; }

.rw-tpls__h .rw-muted {
  margin-left: auto;
  font-size: 11.5px;
  white-space: nowrap;
}

.rw-tpls li > p:last-child {
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ==========================================================================
   22zz7. Email: toolbar, grid, folders, message list
   ========================================================================== */
.em-page,
.em-cw {
  --em-bd: rgba(255, 255, 255, .1);
  --em-co: oklch(0.72 0.14 35);
}

[data-theme="light"] .em-page,
[data-theme="light"] .em-cw {
  --em-bd: var(--tint-09);
  --em-co: oklch(0.56 0.16 35);
}

.em-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.em-page p,
.em-page h2,
.em-cw p,
.em-cw h2 { margin: 0; }

.em-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.em-page .pr-t--vi { --c: oklch(0.75 0.12 290); --c-fg: oklch(0.75 0.12 290); }
.em-page .pr-t--co { --c-fg: var(--em-co); }

[data-theme="light"] .em-page .pr-t--vi { --c-fg: oklch(0.5 0.14 290); }

.em-muted { color: var(--muted); }
.em-sm { font-size: 12.5px; }

.em-mono {
  color: var(--text-2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
}

.em-cap {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
}

.em-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

/* Buttons */
.em-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--em-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.em-btn:hover { background: var(--tint-08); }

.em-btn:disabled {
  opacity: .45;
  cursor: default;
}

.em-btn.is-co { color: var(--em-co); }
.em-btn--30 { height: 30px; }
.em-btn--34 { height: 34px; }

.em-btn--sq {
  width: 32px;
  padding: 0;
}

.em-send {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-left: auto;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.em-send[aria-disabled="true"] { opacity: .45; }

.em-chip {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--em-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}

.em-chip:hover { background: var(--tint-06); }

.em-chip--sm {
  height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
}

.em-pill {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c-fg);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.em-pill--lg {
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
}

.em-av {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #11131a;
  font-size: 12px;
  font-weight: 800;
}

.em-av--face { object-fit: cover; }

/* Toolbar */
.em-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.em-compose {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.em-search {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--em-bd);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--muted);
}

.em-search:focus-within { border-color: rgba(154, 219, 230, .55); }

.em-search__in {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.em-kbd {
  padding: 2px 7px;
  border: 1px solid var(--em-bd);
  border-radius: 6px;
  color: var(--muted-2);
  font-family: inherit;
  font-size: 11.5px;
}

.em-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--raised-3);
}

.em-seg__b {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.em-seg__b[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.em-acc {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--em-bd);
  border-radius: 999px;
}

.em-acc__b {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px 0 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.em-acc__b[aria-pressed="true"] {
  background: var(--tint-08);
  color: var(--text);
}

.em-acc__av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: oklch(0.82 0.08 200);
  color: #11131a;
  font-size: 10.5px;
  font-weight: 800;
  object-fit: cover;
}

/* Mail grid: columns follow the grid's own width (set by email.js) */
.em-grid {
  display: grid;
  grid-template-columns: 200px minmax(260px, 340px) minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: stretch;
}

.em-grid[data-cols="4"][data-nofo] { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) 280px; }
.em-grid[data-cols="4"][data-nocx] { grid-template-columns: 200px minmax(260px, 340px) minmax(0, 1fr); }
.em-grid[data-cols="4"][data-nofo][data-nocx] { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.em-grid[data-cols="3"] { grid-template-columns: 190px minmax(250px, 320px) minmax(0, 1fr); }
.em-grid[data-cols="3"][data-nofo] { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); }
.em-grid[data-cols="2"] { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); }
.em-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }

.em-grid[data-cols="3"] .em-cx,
.em-grid[data-cols="2"] .em-cx,
.em-grid[data-cols="1"] .em-cx {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.em-grid[data-cols="2"] .em-folders,
.em-grid[data-cols="1"] .em-folders {
  grid-column: 1 / -1;
  flex-flow: row wrap;
  height: auto;
}

.em-grid[data-cols="2"] .em-flist,
.em-grid[data-cols="1"] .em-flist { flex-flow: row wrap; }

.em-grid[data-cols="2"] .em-folders > .em-cap,
.em-grid[data-cols="1"] .em-folders > .em-cap,
.em-grid[data-cols="2"] .em-store,
.em-grid[data-cols="1"] .em-store { display: none; }

.em-grid[data-cols="1"] .em-list { height: 520px; }

/* Folders and labels */
.em-folders {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 780px;
  padding: 14px;
}

.em-flist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.em-f,
.em-lab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}

.em-f {
  height: 40px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
}

.em-f svg { opacity: .9; }

.em-f > span:first-of-type,
.em-lab > span:nth-of-type(2) { flex: 1; }

.em-f:hover,
.em-lab:hover { background: var(--tint-04); }

.em-f[aria-current="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 700;
}

.em-f__n {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 99px;
  background: var(--em-bd);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 800;
}

.em-f__n.is-cy {
  background: var(--cyan);
  color: #11131a;
}

.em-folders > .em-cap { padding: 16px 12px 6px; }

.em-lab {
  height: 36px;
  border-radius: 12px;
  font-size: 13.5px;
}

.em-lab[aria-pressed="true"] { background: var(--tint-06); }

.em-lab__sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c);
}

.em-lab__n {
  color: var(--muted);
  font-size: 12px;
}

.em-store {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 14px 12px 4px;
}

.em-store p {
  display: flex;
  color: var(--muted);
  font-size: 12px;
}

.em-store p span:last-child {
  margin-left: auto;
  color: var(--text-2);
}

.em-store__bar {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.em-store__bar span {
  display: block;
  width: 75%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-fg), #f0c98a);
}

/* Message list */
.em-list {
  display: flex;
  flex-direction: column;
  height: 780px;
}

.em-lhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tint-06);
}

.em-lhead__t {
  font-size: 16px;
  font-weight: 700;
}

.em-lhead > .em-muted { font-size: 12.5px; }
.em-lhead__sel { font-size: 13.5px; }

.em-lhead__acts {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.em-scroll {
  position: relative;
  flex: 1;
  padding: 6px 8px 10px;
  overflow-y: auto;
}

.em-group { padding: 12px 10px 6px; }

.em-row {
  position: relative;
  display: grid;
  grid-template-columns: 18px 36px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  margin-bottom: 2px;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 16px;
}

.em-row::before {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  content: "";
}

.em-row.is-unread::before { background: var(--accent-fg); }

.em-row:hover { background: var(--tint-03); }

.em-row.is-sel { background: color-mix(in oklab, var(--accent-fg) 5%, transparent); }

.em-row.is-open {
  border-color: color-mix(in oklab, var(--accent-fg) 40%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 9%, transparent);
}

.em-row > .em-row__cb,
.em-row > .em-av { grid-row: 1 / span 2; }

.em-row > .em-row__cb {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin-top: 9px;
}

.em-row__open {
  display: flex;
  flex-direction: column;
  grid-column: 3;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}

/* The whole row opens the conversation. */
.em-row__open::after {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  content: "";
}

.em-row__open:focus-visible { outline: none; }

.em-row__open:focus-visible::after {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.em-row__from,
.em-row__subj { font-weight: 500; }

.em-row.is-unread .em-row__open { color: var(--text); }

.em-row.is-unread .em-row__from,
.em-row.is-unread .em-row__subj { font-weight: 700; }

.em-row__l1 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.em-row__from,
.em-row__subj,
.em-row__prev {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.em-row__from { font-size: 14px; }

.em-row__draft { color: var(--em-co); }

.em-row__cnt {
  color: var(--muted);
  font-size: 11.5px;
}

.em-row__time {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.em-row.is-unread .em-row__time { color: var(--accent-fg); }

.em-row__subj { font-size: 13.5px; }

.em-row__prev {
  color: var(--muted);
  font-size: 12.5px;
}

.em-row__meta {
  display: flex;
  grid-column: 3;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  margin-top: 6px;
}

.em-row__att {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 11.5px;
}

.em-star {
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.em-star.is-on { color: var(--amt); }

/* Row actions appear on hover or keyboard focus. */
.em-row__hov {
  position: absolute;
  top: 34px;
  right: 10px;
  z-index: 2;
  display: none;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--em-bd);
  border-radius: 999px;
  background: var(--raised-3);
  box-shadow: 0 8px 20px var(--shade-45);
}

.em-row:hover .em-row__hov,
.em-row:focus-within .em-row__hov { display: flex; }

.em-row__hov button {
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.em-row__hov button:hover { background: var(--tint-08); }
.em-row__hov .is-co { color: var(--em-co); }

.em-empty {
  padding: 60px 20px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* ==========================================================================
   22zz8. Email: reader, reply, client context, compose
   ========================================================================== */
.em-reader {
  display: flex;
  flex-direction: column;
  height: 780px;
}

.em-reader.is-empty { justify-content: center; }

.em-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.em-none b {
  color: var(--text);
  font-size: 18px;
}

.em-rbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tint-06);
}

.em-rbar__pos {
  margin-left: auto;
  font-size: 12px;
}

.em-rbody {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  overflow-y: auto;
}

.em-rhead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.em-subj {
  flex: 1 1 300px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.em-warn {
  padding: 10px 14px;
  border: 1px solid color-mix(in oklab, var(--em-co) 35%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--em-co) 10%, transparent);
  color: var(--em-co);
  font-size: 13px;
  font-weight: 700;
}

.em-msg {
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: 18px;
  background: var(--tint-03);
}

.em-msg.is-open {
  border-color: var(--tint-07);
  background: var(--tint-02);
}

.em-msg__h {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.em-msg__who {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.em-msg__n {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.em-msg__n b {
  font-size: 14px;
  white-space: nowrap;
}

.em-msg__n .em-muted,
.em-msg__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.em-msg__n .em-muted { font-size: 12px; }

.em-msg__sub {
  color: var(--muted);
  font-size: 12.5px;
}

.em-msg__t {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.em-msg__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 16px 60px;
}

.em-msg__body p {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.em-page .em-atts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.em-att {
  width: 180px;
  overflow: hidden;
  border: 1px solid var(--em-bd);
  border-radius: 14px;
  background: var(--tint-03);
}

.em-att__pv {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  background: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px), #1d212b;
  color: var(--muted-2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
}

/* A real preview of the attached file */
.em-att__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

[data-theme="light"] .em-att__pv { background: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px), var(--crumb-hover); }

.em-att__f {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.em-ext {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 5px;
  background: #9adbe6;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
}

.em-ext--pdf { background: #f0a58f; }
.em-ext--xls { background: #9fe0b4; }
.em-ext--jpg { background: #f0c98a; }

.em-att__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.em-att__n {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.em-att__t .em-muted { font-size: 11px; }

/* Reply */
.em-reply {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--tint-06);
}

.em-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.em-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--em-bd);
  border-radius: 18px;
  background: var(--tint-03);
}

.em-box:focus-within { border-color: var(--accent-fg); }

.em-box__top {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.em-modes {
  display: flex;
  gap: 4px;
}

.em-modes__b {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.em-modes__b[aria-pressed="true"] {
  background: var(--em-bd);
  color: var(--text);
}

.em-box__to {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.em-fwd {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.em-fwd input {
  width: 180px;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid var(--em-bd);
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
}

.em-box__in,
.em-cw__in {
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  resize: none;
}

.em-box__in {
  padding: 2px;
  font-size: 14px;
  line-height: 1.5;
}

.em-page .em-files,
.em-cw .em-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.em-files li {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 26px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  background: var(--tint-06);
  font-size: 12px;
}

.em-files li > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.em-files button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.em-cw .em-files--cw { padding: 0 16px 10px; }

.em-box__foot {
  display: flex;
  align-items: center;
  gap: 6px;
}

.em-box__foot > .em-muted { font-size: 12px; }

.em-attach { cursor: pointer; }

.em-attach:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Client context */
.em-cx {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 16px;
  min-width: 0;
}

.em-who {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 28px;
  background: linear-gradient(140deg, #e8ebf0, #d4d9e1 60%, #a8e6ef 150%);
  color: #11131a;
}

.em-who::before {
  position: absolute;
  top: -70px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .8), transparent 70%);
  content: "";
}

.em-who > * { position: relative; }

.em-who__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.em-who__av {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #11131a;
  font-size: 17px;
  font-weight: 800;
  object-fit: cover;
}

.em-who__top p,
.em-who__co {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.em-who__top b { font-size: 17px; }

.em-who__top a {
  color: inherit;
  text-decoration: none;
}

.em-who__top a:hover { text-decoration: underline; }

.em-who__top span,
.em-who__co span {
  color: #3a3f4c;
  font-size: 12.5px;
}

.em-who__co { gap: 2px; }
.em-who__co b { font-size: 14px; }

.em-page .em-who__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.em-who__stats li {
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .75);
}

.em-who__stats li.is-dark {
  background: #11131a;
  color: #eef0f5;
}

.em-who__stats span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  opacity: .75;
}

.em-who__stats b { font-size: 16px; }

.em-tier {
  display: flex;
  align-items: center;
  align-self: flex-start;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #11131a;
  color: #9adbe6;
  font-size: 11.5px;
  font-weight: 800;
}

.em-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
}

.em-cap--line {
  padding-top: 8px;
  border-top: 1px solid var(--tint-06);
}

.em-page .em-work,
.em-page .em-inv,
.em-page .em-calls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.em-work li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.em-work p {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.em-work p .em-muted {
  margin-left: auto;
  font-size: 12px;
}

.em-work__bar {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.em-work__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--c);
}

.em-inv li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.em-inv b { margin-left: auto; }

.em-calls li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 18px;
}

.em-calls li::before {
  position: absolute;
  top: 6px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-fg);
  content: "";
}

.em-calls b {
  font-size: 13px;
  font-weight: 600;
}

.em-calls .em-muted { font-size: 12px; }

/* Compose window */
.em-cw {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: min(520px, calc(100vw - 56px));
  overflow: hidden;
  border: 1px solid var(--em-bd);
  border-radius: 24px;
  background: var(--card-from);
  box-shadow: 0 30px 80px var(--shade-45);
}

.em-cw__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tint-06);
  background: var(--tint-04);
}

.em-cw.is-min .em-cw__head { border-bottom: 0; }

.em-cw__head h2 {
  font-size: 14.5px;
  font-weight: 700;
}

.em-cw__head > .em-muted { font-size: 12px; }

.em-cw__x {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}

.em-cw__x:hover { background: var(--tint-06); }
.em-cw__head > .em-cw__x:nth-of-type(1) { margin-left: auto; }

.em-cw__f {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--tint-06);
}

.em-cw__f label {
  width: 52px;
  color: var(--muted);
  font-size: 13px;
}

.em-cw__f input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.em-cw__in {
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.55;
}

.em-cw__tpl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 10px;
}

.em-cw__tpl > .em-muted {
  align-self: center;
  font-size: 11.5px;
}

.em-cw__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--tint-06);
}

.em-when {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--em-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
}

.em-when option {
  background: var(--card-from);
  color: var(--text);
}

/* ==========================================================================
   22zz9. File manager: toolbar, storage, collections, locations
   ========================================================================== */
.fm-page,
.fm-modal {
  --em-bd: rgba(255, 255, 255, .1);
  --em-co: oklch(0.72 0.14 35);
  --fm-bd10: rgba(255, 255, 255, .12);
}

[data-theme="light"] .fm-page,
[data-theme="light"] .fm-modal {
  --em-bd: var(--tint-09);
  --em-co: oklch(0.56 0.16 35);
  --fm-bd10: rgba(20, 30, 50, .14);
}

.fm-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fm-page p,
.fm-page h2,
.fm-modal p,
.fm-modal h2,
.fm-modal h3 { margin: 0; }

.fm-page ul,
.fm-modal ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fm-page .pr-t--vi { --c: oklch(0.75 0.12 290); --c-fg: oklch(0.75 0.12 290); }
.fm-page .pr-t--co { --c-fg: var(--em-co); }
.fm-page .pr-t--slate { --c: var(--muted-2); }

[data-theme="light"] .fm-page .pr-t--vi { --c-fg: oklch(0.5 0.14 290); }

.fm-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.fm-btn36 { height: 36px; }

/* Toolbar */
.fm-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.fm-btn44 {
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

.fm-search { flex: 1 1 260px; }
.fm-seg { flex-wrap: wrap; }

.fm-views {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--em-bd);
  border-radius: 999px;
}

.fm-views__b {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.fm-views__b[aria-pressed="true"] {
  background: var(--tint-08);
  color: var(--text);
}

/* Storage (light strip in both themes) and collections */
.fm-row2 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
}

.fm-row2 > .o2-block > .fm-stor {
  position: relative;
  display: flex;
  flex: 1 1 340px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px 22px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 28px;
  background: linear-gradient(140deg, #e8ebf0, #d4d9e1 60%, #a8e6ef 150%);
  color: #11131a;
}

.fm-stor::before {
  position: absolute;
  top: -70px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .8), transparent 70%);
  content: "";
  pointer-events: none;
}

.fm-stor > * { position: relative; }

.fm-stor__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fm-stor__top h2 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  opacity: .7;
}

.fm-plan {
  display: flex;
  align-items: center;
  height: 24px;
  margin-left: auto;
  padding: 0 10px;
  border-radius: 999px;
  background: #11131a;
  color: #9adbe6;
  font-size: 11.5px;
  font-weight: 800;
}

.fm-stor__v {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.fm-stor__v b {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
}

.fm-stor__v span {
  color: #3a3f4c;
  font-size: 14px;
}

.fm-stor__bar {
  display: flex;
  gap: 3px;
  height: 14px;
  padding: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .6);
}

.fm-stor__bar span { border-radius: 99px; }

.fm-sw--img { background: #11131a; }
.fm-sw--vid { background: #2b8a99; }
.fm-sw--doc { background: #c99a4e; }
.fm-sw--zip { background: #e39a86; }

.fm-sw--free {
  border: 1px solid rgba(17, 19, 26, .2);
  background: #fff;
}

.fm-page .fm-stor__lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px 14px;
}

.fm-stor__lg li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.fm-stor__lg li > span:nth-child(2) { color: #3a3f4c; }
.fm-stor__lg b { margin-left: auto; }

.fm-sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.fm-upgrade {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  height: 36px;
  margin-top: auto;
  padding: 0 16px;
  border-radius: 999px;
  background: #11131a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.fm-upgrade:hover { background: #2a3140; }

.fm-row2 > .o2-block > .fm-cols {
  display: flex;
  flex: 2.4 1 560px;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
}

.fm-cols__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.fm-cols__head h2 { font-size: 16px; }
.fm-cols__head .em-muted { font-size: 12.5px; }
.fm-cols__head .fm-link { margin-left: auto; }

.fm-page .fm-cols__grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.fm-cols__grid li { display: flex; }

.fm-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-02);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.fm-col:hover { background: var(--tint-04); }

.fm-col[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--accent-fg) 45%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 10%, transparent);
}

.fm-col__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--tint-07);
  border-radius: 12px;
  background: var(--tint-05);
  color: var(--text-2);
}

.fm-col[aria-pressed="true"] .fm-col__ic { color: var(--accent-fg); }

.fm-col__t {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fm-col__t b { font-size: 14.5px; }
.fm-col__t .em-muted { font-size: 12px; }

.fm-stack {
  display: flex;
  margin-top: auto;
}

.fm-stack__av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--card-from);
  border-radius: 50%;
  color: #11131a;
  font-size: 9px;
  font-weight: 800;
  object-fit: cover;
}

.fm-stack__av + .fm-stack__av { margin-left: -8px; }

/* Files grid: columns follow the grid's own width (set by file-manager.js) */
.fm-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 320px;
  align-items: start;
  gap: 16px;
}

.fm-grid[data-cols="3"][data-nolo] { grid-template-columns: minmax(0, 1fr) 320px; }
.fm-grid[data-cols="3"][data-nodt] { grid-template-columns: 210px minmax(0, 1fr); }
.fm-grid[data-cols="3"][data-nolo][data-nodt] { grid-template-columns: minmax(0, 1fr); }
.fm-grid[data-cols="2"] { grid-template-columns: 200px minmax(0, 1fr); }
.fm-grid[data-cols="2"][data-nolo] { grid-template-columns: minmax(0, 1fr); }
.fm-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }

.fm-grid[data-cols="3"] .fm-locs,
.fm-grid[data-cols="2"] .fm-locs,
.fm-grid[data-cols="3"] .fm-det {
  position: sticky;
  top: 16px;
}

.fm-grid[data-cols="2"] .fm-det,
.fm-grid[data-cols="1"] .fm-det {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.fm-grid[data-cols="1"] .fm-locs,
.fm-grid[data-cols="1"] .fm-locs__l { flex-flow: row wrap; }

.fm-grid[data-cols="1"] .fm-locs__cap { display: none; }

.fm-locs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
}

.fm-page .fm-locs__l {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fm-locs .em-f { white-space: nowrap; }
.fm-locs__cap { padding: 16px 12px 6px; }

.fm-prj {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.fm-prj:hover { background: var(--tint-04); }

.fm-prj[aria-pressed="true"] {
  background: var(--tint-06);
  color: var(--text);
  font-weight: 700;
}

.fm-prj__sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c);
}

.fm-prj > span:nth-of-type(2) { flex: 1; }
.fm-prj .em-muted { font-size: 12px; font-weight: 500; }

/* ==========================================================================
   22zz10. File manager: file list, details, uploads, share dialog
   ========================================================================== */
.fm-list {
  display: flex;
  flex-direction: column;
}

.fm-lhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tint-06);
}

.fm-lhead__t {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.fm-lhead__t h2 { font-size: 16px; }
.fm-lhead__t .em-muted { font-size: 12.5px; }
.fm-sort { margin-left: auto; }
.fm-lhead__n { font-size: 13.5px; }

.fm-lhead__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.fm-page .fm-x30 { width: 30px; }

.fm-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 14px;
}

.fm-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  border: 1.5px dashed var(--fm-bd10);
  border-radius: 16px;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}

.fm-drop:hover,
.is-drag .fm-drop {
  border-color: var(--accent-fg);
  color: var(--accent-fg);
}

.is-drag .fm-drop { background: color-mix(in oklab, var(--accent-fg) 8%, transparent); }

/* Table: all columns from 640px of list width, else name + meta line */
.fm-thead,
.fm-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  gap: 12px;
}

.fm-grid[data-wide] .fm-thead,
.fm-grid[data-wide] .fm-row { grid-template-columns: 18px minmax(0, 1fr) 130px 96px 70px 96px 18px; }

.fm-thead {
  display: none;
  padding: 8px 13px 2px;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .12em;
}

.fm-grid[data-wide] .fm-thead { display: grid; }

.fm-page .fm-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fm-row {
  position: relative;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
}

.fm-row:hover { background: var(--tint-03); }
.fm-row.is-sel { background: color-mix(in oklab, var(--accent-fg) 5%, transparent); }

.fm-row.is-open {
  border-color: color-mix(in oklab, var(--accent-fg) 40%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 9%, transparent);
}

.fm-row__own,
.fm-row__mod,
.fm-row__sz,
.fm-row > .fm-st { display: none; }

.fm-grid[data-wide] .fm-row__own { display: flex; }

.fm-grid[data-wide] .fm-row__mod,
.fm-grid[data-wide] .fm-row__sz { display: block; }

.fm-grid[data-wide] .fm-row > .fm-st { display: flex; }
.fm-grid[data-wide] .fm-row__meta { display: none; }

.fm-cb {
  position: relative;
  z-index: 1;
}

.fm-row .fm-cb,
.fm-card .fm-cb {
  width: 18px;
  height: 18px;
}

.fm-row__open,
.fm-card__open {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.fm-row__open {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The whole row or card opens the file. */
.fm-row__open::after,
.fm-card__open::after {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  content: "";
}

.fm-card__open::after { border-radius: 18px; }

.fm-row__open:focus-visible,
.fm-card__open:focus-visible { outline: none; }

.fm-row__open:focus-visible::after,
.fm-card__open:focus-visible::after {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.fm-ext {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #9adbe6;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
}

.fm-ext--pdf { background: #f0a58f; }
.fm-ext--xls { background: #9fe0b4; }
.fm-ext--img { background: #f0c98a; }
.fm-ext--fig { background: oklch(0.8 0.11 330); }
.fm-ext--vid { background: oklch(0.8 0.1 290); }
.fm-ext--zip { background: #c9ccd6; }

.fm-ext--sm,
.fm-ext--md {
  position: absolute;
  width: auto;
}

.fm-ext--sm {
  top: 10px;
  left: 10px;
  height: 20px;
  padding: 0 6px;
  border-radius: 5px;
}

.fm-ext--md {
  top: 12px;
  left: 12px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-family: Urbanist, sans-serif;
  font-size: 10px;
}

.fm-ext--32 {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 9px;
}

.fm-row__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fm-row__n {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-row__p {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.fm-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--c);
}

.fm-row__own {
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-2);
  font-size: 13px;
}

.fm-row__own > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-av24,
.fm-av26,
.fm-av30,
.fm-av32 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #11131a;
  font-weight: 800;
  object-fit: cover;
}

.fm-av24 { width: 24px; height: 24px; font-size: 9.5px; }
.fm-av26 { width: 26px; height: 26px; font-size: 9.5px; }
.fm-av30 { width: 30px; height: 30px; font-size: 10.5px; }
.fm-av32 { width: 32px; height: 32px; font-size: 11px; }

.fm-row__mod,
.fm-row__sz {
  font-size: 13px;
  white-space: nowrap;
}

.fm-row__mod { color: var(--muted); }
.fm-row__sz { color: var(--text-2); }

.fm-page .fm-st {
  justify-self: start;
  height: 22px;
  padding: 0 9px;
}

.fm-page .fm-star { margin-left: 0; }

/* Grid view */
.fm-page .fm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.fm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-02);
}

.fm-card.is-sel { background: color-mix(in oklab, var(--accent-fg) 5%, transparent); }

.fm-card.is-open {
  border-color: color-mix(in oklab, var(--accent-fg) 50%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 7%, transparent);
}

.fm-card__pv,
.fm-file__pv {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px), #1d212b;
  color: var(--muted-2);
  font-family: ui-monospace, Menlo, monospace;
}

[data-theme="light"] .fm-card__pv,
[data-theme="light"] .fm-file__pv { background: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px), var(--crumb-hover); }

.fm-card__pv {
  height: 112px;
  font-size: 10px;
}

.fm-card > .fm-cb {
  position: absolute;
  top: 10px;
  right: 10px;
}

.fm-card__open {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 0;
}

.fm-card__n,
.fm-card__m {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-card__n {
  font-size: 13.5px;
  font-weight: 600;
}

.fm-card__m {
  color: var(--muted);
  font-size: 11.5px;
}

.fm-card__f {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 12px;
}

.fm-card__f .fm-st {
  height: 20px;
  padding: 0 8px;
  font-size: 10.5px;
}

.fm-card__f .fm-star {
  margin-left: auto;
  font-size: 15px;
}

.fm-empty {
  padding: 56px 20px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* Details */
.fm-det {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
}

.fm-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 20px;
  text-align: center;
}

.fm-none b { font-size: 16px; }
.fm-none .em-muted { font-size: 13.5px; }

.fm-file {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.fm-file__pv {
  position: relative;
  height: 170px;
  border-radius: 16px;
  font-size: 11px;
}

.fm-file__t {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fm-file__t h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.fm-file__w {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

.fm-file__w .fm-dot {
  width: 8px;
  height: 8px;
}

.fm-file__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fm-page .fm-send { margin-left: 0; }
.fm-page .fm-trash { width: 36px; height: 36px; margin-left: auto; }

.fm-appr {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fm-appr__seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: var(--tint-03);
}

.fm-appr__b {
  flex: 1;
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.fm-appr__b[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--c) 45%, transparent);
  background: color-mix(in oklab, var(--c) 20%, transparent);
  color: var(--c-fg);
}

.fm-props {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px 16px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--tint-06);
}

.fm-props div { display: contents; }

.fm-props dt {
  color: var(--muted);
  font-size: 12.5px;
}

.fm-props dd {
  margin: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
}

.fm-side__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fm-side__h .em-muted { font-size: 12px; }
.fm-ml { margin-left: auto; }

.fm-side .em-cap--line {
  margin-top: 2px;
  padding-top: 10px;
}

.fm-page .fm-people,
.fm-modal .fm-people {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fm-modal .fm-people--32 { gap: 10px; }

.fm-people li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fm-people__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.fm-people__t b {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-people__t .em-muted,
.fm-people__r {
  font-size: 12px;
  white-space: nowrap;
}

.fm-linkrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--em-bd);
  border-radius: 14px;
  background: var(--tint-03);
  color: var(--text-2);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.fm-linkrow span { flex: 1; }
.fm-linkrow b { color: var(--accent-fg); }

.fm-page .fm-vers,
.fm-page .fm-act {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fm-side:last-child { gap: 10px; }

.fm-vers li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fm-v {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border-radius: 9px;
  background: var(--tint-05);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 800;
}

.fm-v.is-cur {
  background: color-mix(in oklab, var(--accent-fg) 18%, transparent);
  color: var(--accent-fg);
}

.fm-vers__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.fm-vers__t b {
  font-size: 13px;
  font-weight: 600;
}

.fm-vers__t .em-muted { font-size: 11.5px; }
.fm-vers .em-pill { font-size: 10.5px; }
.fm-vers .fm-link { font-size: 12px; }

.fm-act li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.fm-act p {
  min-width: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}

.fm-act p b { color: var(--text); }

.fm-act p .em-muted {
  display: block;
  font-size: 11.5px;
}

/* Upload panel */
.em-cw.fm-upw {
  width: min(400px, calc(100vw - 56px));
  border-radius: 22px;
}

.fm-upw .fm-ups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  margin: 0;
  padding: 10px 14px 14px;
  overflow-y: auto;
  list-style: none;
}

.fm-ups li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fm-ups__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.fm-ups__l {
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.fm-ups__l b {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-ups__l .em-muted {
  margin-left: auto;
  white-space: nowrap;
}

.fm-ups__bar {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.fm-ups__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent-fg);
  transition: width .2s;
}

.fm-ups .is-done .fm-ups__bar span { background: oklch(0.8 0.14 155); }

.fm-ups__p {
  width: 40px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.fm-ups .is-done .fm-ups__p { color: var(--grt); }

/* Share dialog */
.fm-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.fm-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, .55);
}

.fm-dlg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(480px, 100%);
  max-height: calc(100vh - 40px);
  padding: 20px;
  overflow-y: auto;
  border: 1px solid var(--em-bd);
  border-radius: 24px;
  background: var(--card-from);
  box-shadow: 0 30px 80px var(--shade-45);
}

.fm-dlg__h {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fm-dlg__h h2 {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-dlg__x {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint-04);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}

.fm-inv {
  display: flex;
  gap: 8px;
}

.fm-inv input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--em-bd);
  border-radius: 999px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font-size: 14px;
}

.fm-inv input:focus { border-color: var(--accent-fg); }

.fm-modal .fm-send40 {
  height: 40px;
  margin-left: 0;
}

.fm-role {
  height: 32px;
  padding: 0 8px;
}

.fm-dlg__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--tint-06);
}

.fm-dlg__link > span {
  flex: 1;
  color: var(--text-2);
  font-size: 13px;
}

.fm-switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--gauge-track);
  cursor: pointer;
  transition: background-color .2s;
}

.fm-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform .2s;
}

.fm-switch[aria-checked="true"] { background: var(--accent-fg); }
.fm-switch[aria-checked="true"]::after { transform: translateX(16px); }

/* ==========================================================================
   22zz11. Point of sale: shift strip, catalog, variant picker
   ========================================================================== */
.ps-page,
.ps-modal {
  --ps-bd: rgba(255, 255, 255, .1);
  --ps-bd10: rgba(255, 255, 255, .12);
  --ps-bd14: rgba(255, 255, 255, .14);
  --ps-bd16: rgba(255, 255, 255, .16);
  --ps-co: oklch(0.72 0.14 35);
  --ps-inset: #0f1117;
  --ps-inset2: #141720;
  --ps-rail: #2a2e3a;
  --ps-raise: #232734;
  --ps-deep: #171a23;
  --ps-c1: #1d212c;
  --ps-pv: #1b1f29;
  --ps-k25: rgba(0, 0, 0, .18);
}

[data-theme="light"] .ps-page,
[data-theme="light"] .ps-modal {
  --ps-bd: var(--tint-09);
  --ps-bd10: rgba(20, 30, 50, .14);
  --ps-bd14: rgba(20, 30, 50, .14);
  --ps-bd16: rgba(20, 30, 50, .16);
  --ps-co: oklch(0.56 0.16 35);
  --ps-inset: #f1f4f8;
  --ps-inset2: #f1f4f8;
  --ps-rail: #dfe3ea;
  --ps-raise: #e9edf2;
  --ps-deep: #ffffff;
  --ps-c1: #ffffff;
  --ps-pv: #eef1f5;
  --ps-k25: rgba(30, 45, 70, .071);
}

.ps-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ps-page p,
.ps-page h2,
.ps-page dl,
.ps-page dd,
.ps-modal p,
.ps-modal dl { margin: 0; }

.ps-page ul,
.ps-page ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-page .pr-t--co { --c-fg: var(--ps-co); }

.ps-muted { color: var(--muted); }
.ps-mono { font-family: ui-monospace, Menlo, monospace; }
.ps-cy { color: var(--accent-fg); }
.ps-am { color: var(--amt); }
.ps-gr { color: var(--grt); }
.ps-co { color: var(--ps-co); }

.ps-cap {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
}

/* Category colours (shared with E-Commerce › Categories) and the tinted
   striped placeholders used for products, lines and thumbnails */
.ps-k--ap { --cc: #9adbe6; --cct: rgba(154, 219, 230, .28); --ccl: rgba(154, 219, 230, .4); }
.ps-k--fw { --cc: oklch(0.8 0.13 70); --cct: rgba(236, 181, 98, .28); --ccl: rgba(236, 181, 98, .4); }
.ps-k--ac { --cc: oklch(0.8 0.14 155); --cct: rgba(105, 213, 150, .28); --ccl: rgba(105, 213, 150, .4); }
.ps-k--ho { --cc: #6fb8c6; --cct: rgba(111, 184, 198, .28); --ccl: rgba(111, 184, 198, .4); }
.ps-k--be { --cc: oklch(0.78 0.12 350); --cct: rgba(236, 155, 191, .28); --ccl: rgba(236, 155, 191, .4); }
.ps-k--sa { --cc: oklch(0.72 0.14 35); --cct: rgba(234, 138, 108, .28); --ccl: rgba(234, 138, 108, .4); }

.ps-tile__pv,
.ps-line__th,
.ps-th28,
.ps-th30,
.ps-th32 {
  background: radial-gradient(circle at 72% 28%, var(--cct), transparent 62%), repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px), var(--ps-pv);
}

/* Buttons */
.ps-light {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.ps-light--48 {
  height: 48px;
  padding: 0 20px;
  box-shadow: 0 8px 22px var(--shade-35);
  font-size: 14px;
}

.ps-light--50 {
  height: 50px;
  padding: 0 20px 0 16px;
  font-size: 14px;
}

.ps-light--40 {
  flex-shrink: 0;
  gap: 7px;
  height: 40px;
  padding: 0 18px 0 14px;
  box-shadow: 0 8px 20px var(--shade-35);
  font-size: 13px;
}

.ps-light--52 {
  height: 52px;
  font-size: 16px;
}

.ps-light[aria-disabled="true"] { opacity: .45; }

.ps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--ps-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ps-btn:hover { background: var(--tint-08); }
.ps-btn--36 { height: 36px; }

.ps-btn--40 {
  height: 40px;
  padding: 0 16px;
}

.ps-btn--co {
  border-color: color-mix(in oklab, var(--ps-co) 45%, transparent);
  background: color-mix(in oklab, var(--ps-co) 8%, transparent);
  color: var(--ps-co);
}

.ps-btn.is-off {
  opacity: .5;
  cursor: default;
}

.ps-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
}

.ps-seg button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ps-seg--sort {
  margin-left: auto;
  border: 1px solid var(--ps-bd);
}

.ps-seg--sort button {
  height: 30px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.ps-seg--sort button[aria-pressed="true"] {
  background: var(--tint-08);
  color: var(--text);
}

.ps-seg--af,
.ps-seg--pay button[aria-pressed="true"] { flex-shrink: 0; }

.ps-seg--af {
  max-width: 100%;
  margin-left: auto;
  overflow-x: auto;
  border: 1px solid var(--tint-06);
  background: var(--ps-inset);
  scrollbar-width: none;
}

.ps-seg--af::-webkit-scrollbar { display: none; }

.ps-seg--af button {
  flex-shrink: 0;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 800;
}

.ps-seg--af button[aria-pressed="true"],
.ps-seg--pay button[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.ps-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
}

.ps-seg--af .pr-t--ink[aria-pressed="true"] .ps-dot { background: var(--pill-fg); }

.ps-seg__n {
  font-size: 11px;
  opacity: .55;
}

.ps-seg--pay { background: var(--raised-3); }

.ps-seg--pay button {
  flex: 1;
  height: 40px;
  color: var(--text-2);
  font-size: 14px;
}

/* Shift strip */
.ps-shift {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

.ps-regc {
  position: relative;
  display: flex;
  flex: 0 1 240px;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid rgba(154, 219, 230, .22);
  border-radius: 22px;
  background: linear-gradient(160deg, var(--ps-raise), var(--ps-deep));
}

.ps-regc::before {
  position: absolute;
  top: -60px;
  left: -40px;
  width: 180px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(154, 219, 230, .22), transparent);
  content: "";
  pointer-events: none;
}

.ps-regc > * { position: relative; }

.ps-regc__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-regc__ic {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c4f0f6, #8fd3df);
  box-shadow: 0 0 18px rgba(154, 219, 230, .4);
  color: #0d0f15;
}

.ps-regc__t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ps-regc__n {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ps-regc__n b {
  font-size: 14.5px;
  white-space: nowrap;
}

.ps-regc__t .ps-muted { font-size: 12px; }

.ps-open,
.ps-live {
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c-fg);
  font-size: 10.5px;
}

.ps-open {
  height: 20px;
  padding: 0 8px;
  font-weight: 800;
}

.ps-open::before,
.ps-live::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c);
  content: "";
}

.ps-regc__who {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
}

.ps-av24,
.ps-av28,
.ps-av36,
.ps-av40,
.ps-loyal__av {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #11131a;
  font-weight: 800;
  object-fit: cover;
}

.ps-av24 { width: 24px; height: 24px; font-size: 9.5px; }
.ps-av28 { width: 28px; height: 28px; font-size: 10px; }
.ps-av36 { width: 36px; height: 36px; font-size: 12px; }
.ps-av40 { width: 40px; height: 40px; font-size: 13px; }

.ps-av--walk {
  border: 1px solid var(--ps-bd);
  background: var(--tint-06);
  color: var(--text-3);
}

.ps-sales {
  display: flex;
  flex: 1 1 360px;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.ps-sales__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.ps-sales .ps-cap,
.ps-drawer .ps-cap,
.ps-foot dt {
  font-size: 10.5px;
  font-weight: 700;
}

.ps-sales__h b {
  font-size: 24px;
  letter-spacing: -.02em;
}

.ps-sales__h .ps-muted { font-size: 12.5px; }

.ps-mix {
  display: flex;
  gap: 3px;
  height: 12px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.ps-mix span { transition: width .4s; }

.ps-mix--card { background: linear-gradient(90deg, var(--text-2), var(--text)); }
.ps-mix--split { background: var(--amt); }
.ps-mix--cash { background: var(--grt); }

.ps-page .ps-mix__lg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
}

.ps-mix__lg li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  white-space: nowrap;
}

.ps-mix__lg li > span {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.ps-mix__lg b { color: var(--text); }
.ps-mix__lg .ps-mix--card { background: var(--text); }

.ps-drawer {
  display: flex;
  flex: 1 1 380px;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 14px 14px 18px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(236, 181, 98, .12), rgba(236, 181, 98, 0)) padding-box, linear-gradient(160deg, var(--ps-deep), var(--card-to)) padding-box, linear-gradient(140deg, rgb(236, 181, 98), rgba(240, 201, 138, .08) 55%, rgba(236, 181, 98, .5)) border-box;
  box-shadow: 0 18px 44px rgba(240, 180, 90, .08);
}

.ps-drawer__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ps-drawer__top p {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ps-drawer .ps-cap {
  color: var(--amt);
  font-weight: 800;
}

.ps-drawer__top b {
  font-size: 26px;
  letter-spacing: -.02em;
}

.ps-page .ps-denoms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ps-denoms li {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--tint-08);
  border-radius: 8px;
  background: var(--tint-06);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ps-drawer__sub {
  color: var(--text-3);
  font-size: 11.5px;
}

/* Register: catalog + cart, two columns from 1080px of width (point-of-sale.js) */
.ps-reg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.ps-reg[data-two] { grid-template-columns: minmax(0, 1fr) 400px; }

.ps-reg[data-two] .ps-cart {
  position: sticky;
  top: 16px;
}

/* Catalog */
.ps-cat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.ps-cat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ps-cat__head h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.ps-sync {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--tint-05);
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
}

.ps-sync span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grt);
  box-shadow: 0 0 8px var(--grt);
}

.ps-find {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ps-search {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 8px 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(var(--ps-inset2), var(--ps-inset2)) padding-box, linear-gradient(90deg, rgba(154, 219, 230, .6), var(--tint-08) 40%, var(--tint-08)) border-box;
  color: var(--muted);
}

.ps-search input,
.ps-asearch input,
.ps-promo__in input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
}

.ps-search input { font-size: 14.5px; }

.ps-search kbd {
  padding: 3px 8px;
  border: 1px solid var(--ps-bd);
  border-radius: 7px;
  color: var(--muted-2);
  font-family: inherit;
  font-size: 11.5px;
}

.ps-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ps-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  background: var(--tint-035);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ps-chip:first-child { padding-left: 16px; }
.ps-chip.ps-k--sa { color: var(--ps-co); }

.ps-chip__dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--cc);
  box-shadow: 0 0 8px var(--cc);
}

.ps-chip__n {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--tint-06);
  font-size: 11.5px;
  opacity: .8;
}

.ps-chip[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, #c4f0f6, #8fd3df);
  box-shadow: 0 0 20px rgba(154, 219, 230, .3);
  color: #0d0f15;
}

.ps-chip[aria-pressed="true"] .ps-chip__n { background: rgba(13, 15, 21, .12); }

.ps-page .ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.ps-page .ps-grid.has-pop { padding-bottom: 190px; }

.ps-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tint-07);
  border-radius: 22px;
  background: var(--tint-02);
  transition: transform .18s, box-shadow .18s;
}

.ps-tile:hover {
  box-shadow: 0 20px 40px var(--shade-45);
  transform: translateY(-3px);
}

.ps-tile.is-in {
  border-color: color-mix(in oklab, var(--accent-fg) 55%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 5%, transparent);
}

.ps-tile.is-pop {
  z-index: 4;
  border-color: color-mix(in oklab, var(--accent-fg) 55%, transparent);
}

.ps-tile.is-out { opacity: .55; }
.ps-tile.is-out .ps-tile__pv { filter: grayscale(1); }

/* A product photo fills its tile or thumbnail */
.ps-pic {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.ps-tile__pv {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  border-radius: 21px 21px 0 0;
  color: var(--muted-2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
}

.ps-badge,
.ps-incart {
  position: absolute;
  top: 12px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
}

.ps-badge {
  left: 12px;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid color-mix(in oklab, var(--c) 50%, transparent);
  background: rgba(13, 15, 21, .78);
  color: var(--c);
  font-size: 11px;
}

.ps-badge::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
  content: "";
}

.ps-incart {
  right: 12px;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  background: #9adbe6;
  box-shadow: 0 0 16px rgba(154, 219, 230, .55);
  color: #0d0f15;
  font-size: 11.5px;
}

.ps-tile__b {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
}

.ps-tile__open {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

/* The whole tile adds the product. */
.ps-tile__open::after {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  content: "";
}

.ps-tile__open[aria-disabled="true"] { cursor: not-allowed; }
.ps-tile__open:focus-visible { outline: none; }

.ps-tile__open:focus-visible::after {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.ps-tile__cat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cc);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}

.ps-tile__cat::before {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--cc);
  content: "";
}

.ps-tile__n,
.ps-tile__s {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-tile__n {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
}

.ps-tile__s {
  color: var(--muted);
  font-size: 12px;
}

.ps-tile .ps-tile__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin-top: 10px;
}

.ps-tile__row > b {
  font-size: 20px;
  letter-spacing: -.02em;
}

.ps-tile__row s {
  color: var(--muted);
  font-size: 12.5px;
}

.ps-plus {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #c4f0f6, #8fd3df);
  box-shadow: 0 0 16px rgba(154, 219, 230, .4);
  color: #0d0f15;
}

.is-out .ps-plus {
  background: var(--tint-05);
  box-shadow: none;
  color: var(--muted-2);
}

.ps-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: var(--tint-04);
}

.ps-step button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}

.ps-step button:hover { background: var(--tint-08); }

.ps-step b {
  min-width: 18px;
  font-size: 14px;
  text-align: center;
}

.ps-step--glow {
  margin-left: auto;
  border-color: rgba(154, 219, 230, .45);
  background: var(--ps-inset);
  box-shadow: 0 0 14px rgba(154, 219, 230, .25);
}

.ps-step--glow button { color: var(--accent-fg); }

.ps-tile .ps-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
}

.ps-meter__bar {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--raised-3);
}

.ps-meter__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ccl), var(--cc));
  transition: width .3s;
}

.ps-meter.is-low .ps-meter__bar span { background: oklch(0.8 0.13 70); }
.ps-meter.is-out .ps-meter__bar span { background: oklch(0.72 0.14 35); }

/* Variant picker under a tile */
.ps-pop {
  position: absolute;
  top: 100%;
  right: -6px;
  left: -6px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(154, 219, 230, .45);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--ps-raise), var(--card-from));
  box-shadow: 0 24px 60px var(--shade-45), 0 0 0 4px rgba(154, 219, 230, .08);
}

.ps-pop::before {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-top: 1px solid rgba(154, 219, 230, .45);
  border-left: 1px solid rgba(154, 219, 230, .45);
  background: var(--ps-raise);
  content: "";
  transform: rotate(45deg);
}

.ps-pop__h {
  display: flex;
  align-items: center;
}

.ps-pop__x {
  width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.ps-pop__opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ps-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--ps-bd10);
  border-radius: 12px;
  background: var(--tint-04);
  color: var(--text);
  cursor: pointer;
}

.ps-opt b { font-size: 14px; }

.ps-opt span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.ps-opt .ps-am { color: var(--amt); }

.ps-opt[aria-pressed="true"] {
  border-color: var(--accent-fg);
  background: color-mix(in oklab, var(--accent-fg) 20%, transparent);
  box-shadow: 0 0 16px rgba(154, 219, 230, .3);
}

.ps-opt[aria-pressed="true"] b { color: var(--accent-fg); }

.ps-opt:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.ps-opt.is-sold b { text-decoration: line-through; }

.ps-cta {
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #c4f0f6, #8fd3df);
  box-shadow: 0 0 18px rgba(154, 219, 230, .35);
  color: #0d0f15;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}

.ps-cta:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.ps-none {
  padding: 48px 20px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* ==========================================================================
   22zz12. Point of sale: cart, loyalty, payment, shift activity
   ========================================================================== */
.ps-cart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 30px;
  background: linear-gradient(180deg, var(--ps-c1), var(--card-to)) padding-box, linear-gradient(160deg, rgba(154, 219, 230, .75), var(--tint-05) 30%, var(--tint-03) 70%, rgba(154, 219, 230, .4)) border-box;
  box-shadow: 0 40px 90px var(--shade-45), 0 0 60px rgba(154, 219, 230, .06);
}

.ps-cart::before {
  position: absolute;
  top: -100px;
  left: -80px;
  width: 300px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(154, 219, 230, .2), transparent);
  content: "";
  pointer-events: none;
}

.ps-cart > * { position: relative; }

.ps-cart__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-cart__head h2 {
  font-size: 17px;
  font-weight: 700;
}

.ps-cart__head .ps-muted { font-size: 12px; }

.ps-id {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--tint-05);
  color: var(--text-2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
}

.ps-clear {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ps-co);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

/* Loyalty card: a light strip in both themes */
.ps-loyal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(140deg, #eef0f4, #d6dbe3 60%, #a8e6ef 150%);
  box-shadow: inset 0 1px 0 #fff;
  color: #11131a;
}

.ps-loyal::before {
  position: absolute;
  top: -60px;
  right: -50px;
  width: 180px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .9), transparent 70%);
  content: "";
  pointer-events: none;
}

.ps-loyal > * { position: relative; }

.ps-loyal__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-loyal__av {
  width: 44px;
  height: 44px;
  border: 3px solid #fff;
  font-size: 14px;
}

.ps-ring--gold { box-shadow: 0 0 0 2px #c99a4e; }
.ps-ring--member { box-shadow: 0 0 0 2px #9adbe6; }
.ps-ring--guest { box-shadow: 0 0 0 2px #c3c8d2; }

.ps-loyal__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ps-loyal__n {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ps-loyal__n b {
  overflow: hidden;
  font-size: 15.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-loyal__t > span:last-child {
  color: #3a3f4c;
  font-size: 12px;
}

.ps-tier {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.ps-tier--gold { background: linear-gradient(135deg, #f6e2b0, #c99a4e); color: #3a2a0c; }
.ps-tier--member { background: #11131a; color: #9adbe6; }
.ps-tier--guest { background: rgba(17, 19, 26, .12); color: #3a3f4c; }

.ps-loyal__ch {
  padding: 0;
  border: 0;
  background: transparent;
  color: #3a3f4c;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ps-pts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ps-pts__h {
  display: flex;
  align-items: baseline;
  font-size: 12px;
}

.ps-pts__h b { font-size: 16px; }

.ps-pts__h span {
  margin-left: 5px;
  color: #3a3f4c;
}

.ps-pts__h span:last-child { margin-left: auto; }

.ps-pts__bar {
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .7);
}

.ps-pts__bar span {
  position: absolute;
  top: 0;
  bottom: 0;
}

.ps-pts__bar span:first-child {
  left: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #11131a, #2b8a99);
  transition: width .4s;
}

.ps-pts__bar span:last-child { background: repeating-linear-gradient(-45deg, #2b8a99 0 3px, transparent 3px 6px); }

.ps-pts > span:last-child {
  color: #3a3f4c;
  font-size: 11.5px;
}

.ps-redeem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .7);
  color: #11131a;
  text-align: left;
  cursor: pointer;
}

.ps-redeem__sw {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 22px;
  border-radius: 99px;
  background: #c3c8d2;
  transition: background-color .2s;
}

.ps-redeem__sw::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  content: "";
  transition: transform .2s;
}

.ps-redeem[aria-checked="true"] .ps-redeem__sw { background: #2b8a99; }
.ps-redeem[aria-checked="true"] .ps-redeem__sw::after { transform: translateX(14px); }

.ps-redeem > span:nth-child(2) {
  flex: 1;
  font-size: 12.5px;
}

.ps-redeem b { font-size: 13px; }

.ps-walk {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px dashed var(--ps-bd14);
  border-radius: 22px;
  background: var(--tint-02);
  color: var(--text-2);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.ps-walk__ic {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tint-05);
}

.ps-walk__t {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.ps-walk__t b { color: var(--text); }

.ps-walk__t span {
  color: var(--muted);
  font-size: 12px;
}

.ps-walk > .ps-cy { font-size: 12.5px; }

.ps-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--ps-bd);
  border-radius: 18px;
  background: var(--tint-02);
}

.ps-pick input,
.ps-rmail input {
  min-width: 0;
  padding: 0 14px;
  border: 1px solid var(--ps-bd);
  border-radius: 999px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font-size: 14px;
}

.ps-pick input { height: 36px; }

.ps-pick__b {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.ps-pick__b:hover { background: var(--tint-05); }

.ps-pick__n {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-pick__b .ps-muted {
  font-size: 11.5px;
  white-space: nowrap;
}

.ps-cart__lh {
  display: flex;
  align-items: center;
}

.ps-cart__lh .ps-muted {
  margin-left: auto;
  font-size: 11.5px;
}

.ps-page .ps-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ps-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--card-from);
}

.ps-line__th {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
}

.ps-line__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ps-line__n {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-line__s {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.ps-disc {
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--ps-bd10);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}

.ps-disc.is-on {
  border-color: transparent;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 16%, transparent);
  color: var(--grt);
}

.ps-line__tot {
  flex-shrink: 0;
  width: 64px;
  font-size: 14px;
  text-align: right;
}

.ps-rm {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.ps-rm:hover {
  background: color-mix(in oklab, var(--ps-co) 14%, transparent);
  color: var(--ps-co);
}

.ps-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 12px;
  border: 1px dashed var(--tint-08);
  border-radius: 18px;
  text-align: center;
}

.ps-empty span:first-child {
  padding: 2px 0;
  color: var(--muted);
}
.ps-empty b { font-size: 14.5px; }

.ps-empty span:last-child {
  color: var(--muted);
  font-size: 13px;
}

.ps-promo {
  display: flex;
  gap: 6px;
}

.ps-promo__in {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px dashed var(--ps-bd16);
  border-radius: 999px;
  background: var(--tint-02);
  color: var(--muted);
}

.ps-promo__in input {
  font-size: 13px;
  text-transform: uppercase;
}

.ps-sums {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
}

.ps-sums div { display: flex; }
.ps-sums dt { color: var(--text-2); }

.ps-sums dd {
  margin-left: auto;
  color: var(--text-2);
  font-weight: 600;
}

.ps-sums dd.ps-gr { color: var(--grt); }

.ps-total {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--tint-08);
}

.ps-total p { min-width: 0; }

.ps-total__v,
.ps-due { display: block; }

.ps-total .ps-muted { font-size: 11.5px; }

.ps-total__v {
  background: linear-gradient(90deg, var(--text), var(--accent-fg));
  color: var(--text);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ps-save {
  display: flex;
  align-items: center;
  height: 28px;
  margin-left: auto;
  padding: 0 11px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 18%, transparent);
  color: var(--grt);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ps-meth {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--tint-06);
  border-radius: 999px;
  background: var(--ps-inset);
}

.ps-meth button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.ps-meth button[aria-pressed="true"] {
  border-color: rgba(154, 219, 230, .4);
  background: rgba(154, 219, 230, .14);
  color: var(--accent-fg);
}

.ps-go {
  display: flex;
  gap: 8px;
}

.ps-hold {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--ps-bd10);
  border-radius: 50%;
  background: var(--tint-04);
  color: var(--text);
  cursor: pointer;
}

.ps-hold__n {
  position: absolute;
  top: -2px;
  right: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--ps-deep);
  border-radius: 99px;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.ps-charge {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 8px 0 24px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #d2f5fa, #8fd3df 60%, #7cc4d2);
  box-shadow: 0 0 36px rgba(154, 219, 230, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
  color: #0d0f15;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}

.ps-hold[aria-disabled="true"],
.ps-charge[aria-disabled="true"] { opacity: .45; }

.ps-charge__shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: ps-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ps-shine {
  0% { transform: skewX(-18deg) translateX(-120%); }
  60%,
  100% { transform: skewX(-18deg) translateX(520%); }
}

.ps-charge__l {
  position: relative;
  white-space: nowrap;
}

.ps-charge__go {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0d0f15;
  color: #9adbe6;
}

/* Payment dialog */
.ps-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ps-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, .55);
}

.ps-dlg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(500px, 100%);
  max-height: calc(100vh - 40px);
  padding: 20px;
  overflow-y: auto;
  border: 1px solid var(--ps-bd);
  border-radius: 24px;
  background: var(--card-from);
  box-shadow: 0 30px 80px var(--shade-45);
}

.ps-dlg__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-dlg__top p { min-width: 0; }

.ps-due {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.ps-x {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint-04);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}

.ps-term {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-03);
}

.ps-term > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--tint-05);
  color: var(--accent-fg);
}

.ps-term > span:last-child {
  display: flex;
  flex-direction: column;
}

.ps-term b { font-size: 14px; }
.ps-term .ps-muted { font-size: 12.5px; }

.ps-cashin {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ps-big {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--ps-bd);
  border-radius: 16px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
}

.ps-big:focus { border-color: var(--accent-fg); }

.ps-big--48 {
  height: 48px;
  border-radius: 14px;
  font-size: 18px;
}

.ps-big--ro { border-color: var(--tint-07); }

.ps-notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.ps-notes .ps-btn {
  font-size: 13.5px;
  font-weight: 600;
}

.ps-change {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
}

.ps-change span {
  color: var(--text-2);
  font-size: 14px;
}

.ps-change b {
  margin-left: auto;
  font-size: 22px;
}

.ps-change.is-ok { background: color-mix(in oklab, oklch(0.8 0.14 155) 12%, transparent); }
.ps-change.is-ok b { color: var(--grt); }
.ps-change.is-due { background: color-mix(in oklab, oklch(0.8 0.13 70) 10%, transparent); }
.ps-change.is-due b { color: var(--amt); }

.ps-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ps-split p {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ps-wait,
.ps-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ps-wait {
  gap: 14px;
  padding: 30px 10px;
}

.ps-wait b { font-size: 18px; }
.ps-wait .ps-muted { font-size: 13.5px; }

.ps-pulse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent-fg) 14%, transparent);
  animation: ps-pulse 1.4s ease-in-out infinite;
}

.ps-pulse span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-fg);
  box-shadow: 0 0 24px var(--accent-fg);
}

@keyframes ps-pulse {
  0%,
  100% { opacity: .7; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

.ps-done {
  gap: 10px;
  padding: 10px 0 4px;
}

.ps-done__ok {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 18%, transparent);
  color: var(--grt);
}

.ps-done b { font-size: 22px; }

.ps-done > span:not(.ps-done__ok):not(.ps-chg) {
  color: var(--text-2);
  font-size: 14px;
}

.ps-chg {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 16%, transparent);
  color: var(--amt);
  font-size: 14px;
  font-weight: 800;
}

.ps-rmail {
  display: flex;
  gap: 6px;
}

.ps-rmail input {
  flex: 1;
  height: 40px;
}

/* Shift activity */
.ps-act {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px 22px;
  overflow: hidden;
  border: 1px solid var(--tint-08);
  border-radius: 28px;
  background: linear-gradient(180deg, var(--ps-c1), var(--card-to));
  box-shadow: 0 30px 70px var(--shade-45);
}

.ps-act::before {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 420px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(154, 219, 230, .12), transparent);
  content: "";
  pointer-events: none;
}

.ps-act > * { position: relative; }

.ps-act__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.ps-act__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ps-act__tt {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ps-act__tt h2 {
  font-size: 19px;
  font-weight: 700;
}
.ps-act__t > .ps-muted { font-size: 12.5px; }

.ps-live {
  height: 22px;
  padding: 0 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.ps-live::before {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 8px var(--c);
}

.ps-hist {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border-left: 1px solid var(--tint-07);
}

.ps-hist__h {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ps-hist__h > span:last-child {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.ps-hist__h.is-now > span:last-child {
  color: var(--accent-fg);
  font-weight: 800;
}

.ps-hist__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-width: 8px;
  height: 28px;
}

.ps-hist__bars span {
  width: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--text), var(--muted));
}

.ps-hist__bars .is-ref { background: oklch(0.72 0.14 35); }

.ps-hist__bars .is-hold {
  height: 12px;
  background: oklch(0.8 0.13 70);
}

.ps-hist__bars .ps-hist__now {
  width: 2px;
  height: 28px;
  border-radius: 0;
  background: #9adbe6;
  box-shadow: 0 0 8px #9adbe6;
}

.ps-asearch {
  display: flex;
  flex: 0 1 240px;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--ps-bd);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--muted);
}

.ps-asearch input { font-size: 13px; }

/* Timeline: time | node on the rail | card */
.ps-page .ps-tl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ps-tl::before {
  position: absolute;
  top: 20px;
  bottom: 24px;
  left: 87px;
  width: 2px;
  background: linear-gradient(180deg, #9adbe6 0, var(--ps-rail) 14%, var(--ps-rail) 26%, var(--ps-rail) 90%, oklch(0.8 0.14 155));
  content: "";
}

.ps-tl.has-hold::before { background: linear-gradient(180deg, #9adbe6 0, oklch(0.8 0.13 70) 14%, var(--ps-rail) 26%, var(--ps-rail) 90%, oklch(0.8 0.14 155)); }

.ps-ev {
  display: grid;
  grid-template-columns: 58px 34px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.ps-ev--now,
.ps-ev--hr { align-items: center; }

.ps-ev--hr { margin: 4px 0; }

.ps-ev__t {
  padding-top: 16px;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 800;
  text-align: right;
}

.ps-ev__t.ps-am { padding-top: 20px; color: var(--amt); }
.ps-ev__t.ps-co { color: var(--ps-co); }
.ps-ev__t.ps-gr { padding-top: 10px; color: var(--grt); }

.ps-ev--hr .ps-ev__t { padding: 0; }

.ps-ev--now .ps-ev__t {
  padding: 0;
  color: var(--accent-fg);
  font-weight: 900;
}

.ps-ev__node {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.ps-ev--now .ps-ev__node,
.ps-ev--hr .ps-ev__node { padding-top: 0; }

.ps-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--text);
  border-radius: 50%;
  background: var(--ps-deep);
  color: var(--text);
}

.ps-node--hold,
.ps-node--ref,
.ps-node--open {
  --nc: oklch(0.8 0.13 70);
  border-color: var(--nc);
  background: color-mix(in oklab, var(--nc) 22%, transparent);
  box-shadow: 0 0 16px color-mix(in oklab, var(--nc) 50%, transparent);
  color: var(--nc);
}

.ps-node--hold {
  width: 34px;
  height: 34px;
  margin-top: 4px;
}

.ps-node--ref { --nc: oklch(0.72 0.14 35); }

.ps-node--open {
  --nc: oklch(0.8 0.14 155);
  margin-top: -6px;
}

.ps-node--now {
  width: 14px;
  height: 14px;
  border: 0;
  background: #9adbe6;
  box-shadow: 0 0 0 5px rgba(154, 219, 230, .18), 0 0 18px #9adbe6;
}

.ps-node--hr {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 3px;
  background: var(--ps-rail);
  transform: rotate(45deg);
}

.ps-now,
.ps-hr {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-now b {
  color: var(--accent-fg);
  font-size: 12px;
  letter-spacing: .14em;
}

.ps-now__rule,
.ps-hr__rule {
  flex: 1;
  height: 1px;
}

.ps-now__rule { background: linear-gradient(90deg, rgba(154, 219, 230, .6), transparent); }
.ps-hr__rule { background: linear-gradient(90deg, var(--ps-rail), transparent); }

.ps-now .ps-muted,
.ps-hr .ps-muted {
  font-size: 12px;
  white-space: nowrap;
}

.ps-hr b {
  color: var(--text-2);
  font-size: 12px;
  letter-spacing: .12em;
}

.ps-holdc {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 14px 14px 16px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 20px;
  background: linear-gradient(100deg, rgba(236, 181, 98, .14), rgba(236, 181, 98, 0) 70%) padding-box, linear-gradient(100deg, var(--ps-c1), var(--ps-deep) 70%) padding-box, linear-gradient(100deg, rgb(236, 181, 98), rgba(236, 181, 98, .1) 50%, rgba(236, 181, 98, .35)) border-box;
  box-shadow: 0 0 30px color-mix(in oklab, oklch(0.8 0.13 70) 10%, transparent);
}

.ps-ring {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.ps-ring > svg {
  position: absolute;
  top: -4px;
  left: -4px;
  transform: rotate(-90deg);
}

.ps-ring > svg circle {
  fill: none;
  stroke: var(--tint-08);
  stroke-width: 2.5;
}

.ps-ring > svg circle.is-v {
  stroke: oklch(0.8 0.13 70);
  stroke-linecap: round;
}

.ps-holdc__t {
  flex: 1 1 220px;
  min-width: 0;
}

.ps-holdc__n,
.ps-salec__n,
.ps-refc__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ps-holdc__n b { font-size: 15px; }

.ps-holdc__n > span:last-child {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ps-onhold,
.ps-topt,
.ps-refl {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.ps-onhold {
  flex-shrink: 0;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  letter-spacing: .08em;
}

.ps-topt {
  background: linear-gradient(135deg, #f6e2b0, #c99a4e);
  color: #3a2a0c;
  letter-spacing: .06em;
}

.ps-refl {
  background: color-mix(in oklab, var(--ps-co) 16%, transparent);
  color: var(--ps-co);
  letter-spacing: .06em;
}

.ps-holdc__s {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-thumbs {
  display: flex;
  flex-shrink: 0;
}

.ps-thumbs span + span { margin-left: -9px; }

.ps-th28,
.ps-th32 {
  border: 2px solid var(--ps-deep);
  border-radius: 9px;
}

.ps-th28 { width: 28px; height: 28px; }
.ps-th32 { width: 32px; height: 32px; }

.ps-th30 {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.ps-holdc__tot {
  flex-shrink: 0;
  min-width: 86px;
  font-size: 19px;
  text-align: right;
  white-space: nowrap;
}

.ps-discard {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ps-bd10);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.ps-discard:hover {
  border-color: var(--ps-co);
  color: var(--ps-co);
}

.ps-salec {
  min-width: 0;
  border: 1px solid var(--tint-06);
  border-radius: 20px;
  background: var(--tint-02);
}

.ps-salec.is-open {
  border-color: rgba(154, 219, 230, .3);
  background: linear-gradient(180deg, var(--tint-05), var(--tint-02));
  box-shadow: 0 20px 50px var(--shade-35);
}

.ps-salec.is-refd { opacity: .6; }

.ps-salec__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.ps-salec__t {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  min-width: 0;
}

.ps-salec__n b { font-size: 14.5px; }
.ps-salec__n .ps-mono { font-size: 11.5px; }

.ps-salec__t > .ps-muted {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-mpill {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c-fg);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ps-salec__tot {
  flex-shrink: 0;
  min-width: 90px;
  font-size: 17px;
  text-align: right;
  white-space: nowrap;
}

.ps-chev {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--muted);
  transition: transform .2s;
}

.is-open .ps-chev {
  background: rgba(154, 219, 230, .12);
  color: var(--accent-fg);
  transform: rotate(180deg);
}

.ps-salec__x {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  padding: 0 14px 14px 62px;
}

.ps-rcpt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--tint-05);
  border-radius: 16px;
  background: var(--ps-k25);
}

.ps-page .ps-rcpt ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ps-rcpt li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.ps-rcpt__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ps-rcpt__t b {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-rcpt__t .ps-muted { font-size: 11.5px; }
.ps-rcpt li > b { white-space: nowrap; }

.ps-dpill {
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 16%, transparent);
  color: var(--grt);
  font-size: 10.5px;
  font-weight: 800;
}

.ps-rcpt__sum {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 8px;
  border-top: 1px dashed var(--ps-bd10);
}

.ps-rcpt__sum div,
.ps-pay div {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
}

.ps-rcpt__sum dt { color: var(--text-3); }

.ps-rcpt__sum dd {
  margin-left: auto;
  font-weight: 700;
}

.ps-salec__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ps-pay {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-03);
}

.ps-pay dt { color: var(--muted); }

.ps-pay dd {
  margin-left: auto;
  color: var(--text-2);
  font-weight: 500;
  text-align: right;
}

.ps-pay dd.is-b {
  color: var(--text);
  font-weight: 700;
}

.ps-pay dd.is-b.ps-cy { color: var(--accent-fg); }

.ps-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ps-refc {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--ps-co) 35%, transparent);
  border-radius: 20px;
  background: linear-gradient(100deg, rgba(234, 138, 108, .12), var(--tint-02) 70%);
}

.ps-refc p {
  flex: 1;
  min-width: 0;
}

.ps-refc__h b { font-size: 14.5px; }

.ps-refc__h .ps-id {
  height: 22px;
  font-size: 11.5px;
}

.ps-refc__h .ps-muted { font-size: 12px; }

.ps-refc__w {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-2);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-refc > b {
  flex-shrink: 0;
  color: var(--ps-co);
  font-size: 17px;
  white-space: nowrap;
}

.ps-opened {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed color-mix(in oklab, oklch(0.8 0.14 155) 40%, transparent);
  border-radius: 16px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 5%, transparent);
}

.ps-opened b { font-size: 13.5px; }
.ps-opened .ps-muted { font-size: 12.5px; }

.ps-tl__none {
  padding: 30px 20px 30px 106px;
  color: var(--muted);
  font-size: 14px;
}

.ps-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding: 14px 18px;
  border: 1px solid var(--tint-06);
  border-radius: 18px;
  background: var(--ps-k25);
}

.ps-foot dl {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.ps-foot dt {
  color: var(--muted);
  letter-spacing: .12em;
}

.ps-foot dd {
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}

.ps-foot__x { margin-left: auto; }

/* ==========================================================================
   22zz13. Chat: grid, conversation list, stream, composer, side panel
   ========================================================================== */
.ch-grid {
  --ch-bd: rgba(255, 255, 255, .1);
  --ch-bd12: rgba(255, 255, 255, .12);
  --ch-deep: #171a23;
  --ch-co: oklch(0.72 0.14 35);
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  align-items: stretch;
  gap: 16px;
}

[data-theme="light"] .ch-grid {
  --ch-bd: var(--tint-09);
  --ch-bd12: rgba(20, 30, 50, .14);
  --ch-deep: #ffffff;
  --ch-co: oklch(0.56 0.16 35);
}

.ch-grid p,
.ch-grid h2 { margin: 0; }

.ch-grid ul,
.ch-grid ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ch-grid .pr-t--co { --c-fg: var(--ch-co); }

/* Columns follow the grid's own width (set by chat.js) */
.ch-grid[data-noside] { grid-template-columns: 300px minmax(0, 1fr); }
.ch-grid[data-noside] .ch-side,
.ch-grid[data-noctx] .ch-ctx { display: none; }
.ch-grid[data-cols="2"] { grid-template-columns: 280px minmax(0, 1fr); }
.ch-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }

.ch-grid[data-cols="3"] .ch-list,
.ch-grid[data-cols="2"] .ch-list,
.ch-grid[data-cols="3"] .ch-conv,
.ch-grid[data-cols="2"] .ch-conv { height: var(--ch-h, 760px); }

.ch-grid[data-cols="1"] .ch-list { max-height: 360px; }
.ch-grid[data-cols="1"] .ch-conv { height: 640px; }

.ch-grid[data-cols="3"] .ch-side {
  height: var(--ch-h, 760px);
  overflow-y: auto;
  scrollbar-width: none;
}

.ch-grid[data-cols="3"] .ch-side::-webkit-scrollbar { display: none; }

/* The details stretch so the last card reaches the bottom of the column. */
.ch-grid[data-cols="3"] .ch-ctx { flex: 1 0 auto; }
.ch-grid[data-cols="3"] .ch-ctx > .ch-box2:last-child { flex: 1 0 auto; }

.ch-grid[data-cols="2"] .ch-side,
.ch-grid[data-cols="1"] .ch-side { grid-column: 1 / -1; }

.ch-grid:not([data-cols="3"]) .ch-ctxbtn,
.ch-grid:not([data-cols="3"]) .ch-cli__long { display: none; }

.ch-muted { color: var(--muted); }
.ch-cy { color: var(--accent-fg); }
.ch-sm { font-size: 12.5px; }

.ch-cap {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
}

.ch-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

/* Avatars, tiles and status dots */
.ch-av22,
.ch-av28,
.ch-av30,
.ch-av32,
.ch-av36,
.ch-av38,
.ch-av40,
.ch-av52 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #11131a;
  font-weight: 800;
  object-fit: cover;
}

.ch-av22 { width: 22px; height: 22px; font-size: 8.5px; }
.ch-av28 { width: 28px; height: 28px; font-size: 9.5px; }
.ch-av30 { width: 30px; height: 30px; font-size: 10.5px; }
.ch-av32 { width: 32px; height: 32px; font-size: 11px; }
.ch-av36 { width: 36px; height: 36px; font-size: 12px; }
.ch-av38 { width: 38px; height: 38px; font-size: 12.5px; }
.ch-av40 { width: 40px; height: 40px; font-size: 13px; }
.ch-av52 { width: 52px; height: 52px; font-size: 16px; }

.ch-tile {
  border-radius: 12px;
  background: var(--tint-06);
  color: var(--accent-fg);
}

.ch-tile--shared {
  background: color-mix(in oklab, oklch(0.8 0.13 70) 22%, transparent);
  color: var(--amt);
}

.ch-tile--client {
  background: linear-gradient(135deg, #f6e2b0, #c99a4e);
  color: #3a2a0c;
}

.ch-avw {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.ch-st {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border: 2.5px solid var(--ch-deep);
  border-radius: 50%;
}

.ch-st--online { background: oklch(0.8 0.14 155); }
.ch-st--away { background: oklch(0.8 0.13 70); }
.ch-st--meeting { background: oklch(0.72 0.14 35); }
.ch-st--offline { background: #6b7080; }

.ch-stack { display: flex; }

.ch-stack > * {
  border: 2px solid var(--card-from);
}

.ch-stack > * + * { margin-left: -7px; }
.ch-stack--28 > * + * { margin-left: -8px; }

.ch-n {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 99px;
  background: #9adbe6;
  color: #0d0f15;
  font-size: 11.5px;
  font-weight: 800;
}

.ch-cli {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 17px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 18%, transparent);
  color: var(--amt);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}

.ch-cli--lg {
  height: 20px;
  padding: 0 8px;
  font-size: 10px;
}

/* Buttons */
.ch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ch-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ch-btn:hover { background: var(--tint-08); }

.ch-btn--sq {
  width: 36px;
  height: 36px;
  padding: 0;
}

.ch-btn--30 {
  height: 30px;
  font-size: 12px;
}

.ch-btn--36 {
  flex: 1;
  height: 36px;
}

.ch-btn[aria-pressed="true"] { color: var(--accent-fg); }

.ch-light {
  flex: 1;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.ch-light--38 {
  flex: none;
  height: 38px;
  padding: 0 14px;
}

/* Conversation list */
.ch-list {
  display: flex;
  flex-direction: column;
}

.ch-list__top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--tint-06);
}

.ch-list__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ch-list__h h2,
.ch-thread__h h2,
.ch-conv__n h2 { font-weight: 700; }

.ch-list__h h2 { font-size: 16px; }

.ch-new {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pill-bg);
  color: var(--pill-fg);
  cursor: pointer;
}

.ch-pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--ch-bd);
  border-radius: 16px;
  background: var(--tint-02);
}

.ch-pick .ch-cap { padding: 4px 8px 6px; }

.ch-pick__b {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.ch-pick__b:hover { background: var(--tint-05); }

.ch-pick__t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ch-pick__t b {
  font-size: 13.5px;
  font-weight: 600;
}

.ch-pick__t .ch-muted { font-size: 11.5px; }

.ch-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--ch-bd);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--muted);
}

.ch-search input,
.ch-find input,
.ch-thread__in input {
  flex: 1;
  min-width: 0;
  outline: none;
  color: var(--text);
}

.ch-search input {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13.5px;
}

.ch-scroll {
  position: relative;
  flex: 1;
  padding: 6px 8px 10px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ch-sec {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 10px 6px;
}

.ch-sec span {
  font-size: 10.5px;
  opacity: .7;
}

.ch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 2px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.ch-row:hover { background: var(--tint-03); }

.ch-row[aria-current="true"] {
  border-color: color-mix(in oklab, var(--accent-fg) 40%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 9%, transparent);
}

.ch-row__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ch-row__l1,
.ch-row__l2 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ch-row__n {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-row.is-unread .ch-row__n { font-weight: 800; }

.ch-row__time {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.ch-row.is-unread .ch-row__time { color: var(--accent-fg); }

.ch-row__p {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-row.is-unread .ch-row__p { color: var(--text-2); }
.ch-row .ch-row__p.is-typing { color: var(--accent-fg); }

.ch-at {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.ch-row .ch-n {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}

.ch-none {
  padding: 30px 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* Conversation */
.ch-conv {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ch-conv__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tint-06);
}

.ch-conv__t {
  flex: 1 1 180px;
  min-width: 0;
}

.ch-conv__n {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ch-conv__n h2 {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-conv__s {
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-conv__s.is-typing { color: var(--accent-fg); }

.ch-hbtns {
  display: flex;
  gap: 6px;
}

.ch-find,
.ch-pinbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--tint-06);
}

.ch-find { background: var(--tint-02); }

.ch-find input {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(154, 219, 230, .4);
  border-radius: 999px;
  background: var(--tint-03);
  font-size: 13px;
}

.ch-find .ch-muted {
  font-size: 12px;
  white-space: nowrap;
}

.ch-pinbar .ch-muted { white-space: nowrap; }

.ch-pinbar {
  background: color-mix(in oklab, var(--accent-fg) 5%, transparent);
  font-size: 12.5px;
}

.ch-pinbar > span:first-child {
  display: flex;
  color: var(--accent-fg);
}

.ch-pinbar b {
  color: var(--accent-fg);
  white-space: nowrap;
}

.ch-pinbar > span:nth-child(3) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-grid .ch-stream {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px 8px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ch-day,
.ch-newmark {
  display: flex;
  align-items: center;
}

.ch-day {
  gap: 12px;
  margin: 12px 0 6px;
}

.ch-day::before,
.ch-day::after {
  flex: 1;
  height: 1px;
  background: var(--tint-06);
  content: "";
}

.ch-day span {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 700;
}

.ch-newmark {
  gap: 10px;
  margin: 8px 0;
}

.ch-newmark::before {
  flex: 1;
  height: 1px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 60%, transparent);
  content: "";
}

.ch-newmark span {
  color: var(--ch-co);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
}

.ch-sys {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  padding: 8px 12px 8px 10px;
  border: 1px dashed var(--ch-bd);
  border-radius: 14px;
  background: var(--tint-02);
  color: var(--text-2);
  font-size: 12.5px;
}

.ch-sys__ic {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c-fg);
}

.ch-sys > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.ch-sys .ch-muted {
  font-size: 11.5px;
  white-space: nowrap;
}

.ch-msg {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 2px 10px 4px;
  border-left: 2px solid transparent;
  border-radius: 14px;
}

.ch-msg.is-head { padding: 10px 10px 4px; }
.ch-msg:hover { background: var(--tint-03); }

.ch-msg.is-me {
  border-left-color: oklch(0.8 0.13 70);
  background: color-mix(in oklab, oklch(0.8 0.13 70) 7%, transparent);
}

.ch-msg__av {
  flex-shrink: 0;
  width: 36px;
}

.ch-msg__b {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ch-msg__h {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ch-msg__h b { font-size: 14px; }
.ch-msg__h .ch-muted { font-size: 11.5px; }

.ch-msg__co {
  color: var(--amt);
  font-size: 11px;
  font-weight: 700;
}

.ch-msg__x {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.ch-me {
  padding: 0 4px;
  border-radius: 6px;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-weight: 700;
}

.ch-tag { color: var(--accent-fg); }

.ch-att {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 380px;
  padding: 8px;
  border: 1px solid var(--ch-bd);
  border-radius: 16px;
  background: var(--tint-03);
}

.ch-att__pv {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 60px;
  border-radius: 11px;
  background: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px), #1d212b;
  color: var(--muted-2);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
}

[data-theme="light"] .ch-att__pv { background: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px), var(--crumb-hover); }

.ch-att__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ch-att__n {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ch-att__n b {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-att__t > .ch-muted {
  margin-top: 3px;
  font-size: 11.5px;
}

.ch-ext {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: #9adbe6;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
}

.ch-ext--pdf { background: #f0a58f; }
.ch-ext--fig { background: oklch(0.8 0.11 330); }
.ch-ext--img { background: #f0c98a; }
.ch-ext--zip { background: #c9ccd6; }
.ch-ext--xls { background: #9fe0b4; }

.ch-ext--34 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.ch-ap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--c) 40%, transparent);
  border-radius: 18px;
  background: color-mix(in oklab, var(--c) 6%, transparent);
}

.ch-ap__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ch-ap__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in oklab, var(--c) 18%, transparent);
  color: var(--c-fg);
}

.ch-ap__h b {
  flex: 1;
  font-size: 14px;
}

.ch-ap__st {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 18%, transparent);
  color: var(--c-fg);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ch-ap > .ch-muted { font-size: 12.5px; }

.ch-ap__b {
  display: flex;
  gap: 6px;
}

.ch-reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ch-react {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--ch-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ch-react span {
  font-weight: 700;
  opacity: .8;
}

.ch-react[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--accent-fg) 50%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 16%, transparent);
  color: var(--accent-fg);
}

.ch-thsum {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 4px;
  border: 1px solid var(--ch-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.ch-thsum .ch-muted { font-weight: 500; }

.ch-thsum[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--accent-fg) 50%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 10%, transparent);
}

/* Message actions show on hover or keyboard focus. */
.ch-tools {
  position: absolute;
  top: -14px;
  right: 10px;
  z-index: 2;
  display: none;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ch-bd12);
  border-radius: 12px;
  background: var(--raised-3);
  box-shadow: 0 8px 20px var(--shade-45);
}

.ch-msg:hover .ch-tools,
.ch-msg:focus-within .ch-tools { display: flex; }

.ch-tools button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ch-tools button:hover { background: var(--tint-08); }

.ch-typing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  color: var(--muted);
  font-size: 12.5px;
}

.ch-dots {
  display: inline-flex;
  gap: 3px;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--tint-05);
}

.ch-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-fg);
  animation: ch-dot 1.2s infinite ease-in-out;
}

.ch-dots span:nth-child(2) { animation-delay: .15s; }
.ch-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes ch-dot {
  0%,
  80%,
  100% { opacity: .4; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
}

.ch-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: auto 0;
  padding: 40px 20px;
  text-align: center;
}

.ch-start b { font-size: 16px; }
.ch-start .ch-muted { font-size: 13px; }

/* Composer */
.ch-comp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 14px;
}

.ch-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ch-chip {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--ch-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.ch-chip:hover { background: var(--tint-06); }

.ch-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--ch-bd);
  border-radius: 20px;
  background: var(--tint-03);
  transition: border-color .2s, box-shadow .2s;
}

.ch-box:focus-within {
  border-color: rgba(154, 219, 230, .55);
  box-shadow: 0 0 0 4px rgba(154, 219, 230, .1);
}

.ch-box textarea {
  padding: 2px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
}

.ch-box__foot {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.ch-tool {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.ch-tool:hover {
  background: var(--tint-06);
  color: var(--text);
}

.ch-tool:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

.ch-hint {
  min-width: 0;
  margin-left: 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-send {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-left: auto;
  padding: 0 8px 0 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #c4f0f6, #8fd3df);
  box-shadow: 0 0 18px rgba(154, 219, 230, .3);
  color: #0d0f15;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}

.ch-send span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0d0f15;
  color: #9adbe6;
}

.ch-send[aria-disabled="true"] { opacity: .5; }

/* Side panel: thread, context card, pinned, files, members */
.ch-side,
.ch-ctx {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ch-thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 420px;
  border-color: rgba(154, 219, 230, .3);
}

.ch-thread__h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tint-06);
}

.ch-thread__h h2 { font-size: 15px; }
.ch-thread__h .ch-muted { font-size: 12px; }

.ch-x {
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint-04);
  color: var(--muted);
  cursor: pointer;
}

.ch-grid .ch-thread__l {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
  overflow-y: auto;
}

.ch-thread__l li {
  display: flex;
  gap: 10px;
}

.ch-thread__l li.is-root {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tint-06);
}

.ch-thread__t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ch-thread__t > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ch-thread__t b { font-size: 13.5px; }
.ch-thread__t .ch-muted { font-size: 11px; }

.ch-thread__t > span:last-child {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.ch-thread__in {
  display: flex;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--tint-06);
}

.ch-thread__in input {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--ch-bd);
  border-radius: 999px;
  background: var(--tint-03);
  font-size: 13.5px;
}

.ch-cx {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 12px;
  padding: 18px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 28px;
  background: linear-gradient(140deg, #e8ebf0, #d4d9e1 60%, #a8e6ef 150%);
  color: #11131a;
}

.ch-cx::before {
  position: absolute;
  top: -70px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .8), transparent 70%);
  content: "";
  pointer-events: none;
}

.ch-cx > * { position: relative; }

.ch-cx__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ch-cx__top p {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ch-cx__top b { font-size: 16.5px; }

.ch-cx__top p span,
.ch-cx__about {
  color: #3a3f4c;
  font-size: 12.5px;
}

.ch-cx__about { font-size: 13px; }

.ch-cx__av {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #11131a;
  font-size: 16px;
  font-weight: 800;
  object-fit: cover;
}

.ch-cx__av--client,
.ch-cx__av--chan { border-radius: 14px; }

.ch-cx__av--client {
  background: linear-gradient(135deg, #f6e2b0, #c99a4e);
  color: #3a2a0c;
}

.ch-cx__av--chan {
  background: #11131a;
  color: #9adbe6;
}

.ch-grid .ch-cx__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ch-cx__stats li {
  padding: 8px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .75);
}

.ch-cx__stats li.is-dark {
  background: #11131a;
  color: #eef0f5;
}

.ch-cx__stats span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  opacity: .75;
}

.ch-cx__stats b { font-size: 15px; }

.ch-box2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px;
  padding: 16px 18px;
}

.ch-box2__h {
  display: flex;
  align-items: center;
}

.ch-box2__h .ch-muted {
  margin-left: auto;
  font-size: 12px;
}

.ch-grid .ch-pins,
.ch-grid .ch-files,
.ch-grid .ch-mems {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ch-grid .ch-pins { gap: 8px; }

.ch-pins li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--tint-03);
}

.ch-pins .ch-cy {
  display: flex;
  margin-top: 2px;
}

.ch-pins__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ch-pins__t > span:first-child {
  max-height: 2.9em;
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}

.ch-pins__t .ch-muted {
  margin-top: 2px;
  font-size: 11.5px;
}

.ch-unpin {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.ch-files li,
.ch-mems li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ch-files__t,
.ch-mems__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ch-files__t {
  color: inherit;
  text-decoration: none;
}

.ch-files__t b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-files__t:hover b { text-decoration: underline; }
.ch-files__t .ch-muted { font-size: 11.5px; }

.ch-more {
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.ch-more:hover { text-decoration: underline; }

.ch-mems .ch-st {
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-width: 2px;
}

.ch-mems__t b {
  font-size: 13.5px;
  font-weight: 600;
}

.ch-mems__t .ch-muted { font-size: 12px; }

.ch-mems__l {
  font-size: 11.5px;
  white-space: nowrap;
}

/* ==========================================================================
   22zz14. Post: summary, timeline, week strip, next up
   ========================================================================== */
.po-page,
.po-ed {
  --po-bd: rgba(255, 255, 255, .1);
  --po-bd12: rgba(255, 255, 255, .12);
  --po-co: oklch(0.72 0.14 35);
  --po-dot: #181b25;
}

[data-theme="light"] .po-page,
[data-theme="light"] .po-ed {
  --po-bd: var(--tint-09);
  --po-bd12: rgba(20, 30, 50, .14);
  --po-co: oklch(0.56 0.16 35);
  --po-dot: #ffffff;
}

.po-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.po-page p,
.po-page h2,
.po-page h3,
.po-ed p,
.po-ed h2 { margin: 0; }

.po-page ul,
.po-page ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.po-page .pr-t--co { --c-fg: var(--po-co); }

.po-muted { color: var(--muted); }
.po-cy { color: var(--accent-fg); }
.po-am { color: var(--amt); }
.po-co { color: var(--po-co); }

.po-cap {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.po-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

/* Channel colours: icons, dots and toggles */
.po-ch--blog { --chc: var(--accent-fg); }
.po-ch--ig { --chc: oklch(0.8 0.11 330); }
.po-ch--li { --chc: oklch(0.76 0.11 250); }

[data-theme="light"] .po-ch--ig { --chc: oklch(0.58 0.17 330); }
[data-theme="light"] .po-ch--li { --chc: oklch(0.54 0.14 250); }

.po-chs {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
}

.po-ch {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--chc) 14%, transparent);
  color: var(--chc);
}

.po-dots {
  display: flex;
  gap: 3px;
  height: 6px;
}

.po-dots span,
.po-leg li > span {
  border-radius: 50%;
  background: var(--chc);
}

.po-dots span {
  width: 6px;
  height: 6px;
}

.po-dots--5 { height: 5px; }

.po-dots--5 span {
  width: 5px;
  height: 5px;
}

/* Covers: a picked image, or a striped placeholder */
.po-cov56,
.po-cov46 {
  flex-shrink: 0;
  border: 1px solid var(--tint-07);
  background: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px);
}

.po-cov56 {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

.po-cov46 {
  width: 46px;
  height: 46px;
  border-radius: 10px;
}

.po-cov--img { object-fit: cover; }

.po-av20,
.po-av22,
.po-av24 {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.po-av20 { width: 20px; height: 20px; }
.po-av22 { width: 22px; height: 22px; }
.po-av24 { width: 24px; height: 24px; }

/* Summary: hero + three stats, columns from the page width (post.js) */
.po-sum {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.po-page[data-sum="3"] .po-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.po-page[data-sum="3"] .po-hero { grid-column: 1 / -1; }
.po-page[data-sum="1"] .po-sum { grid-template-columns: minmax(0, 1fr); }

.po-hero,
.po-next {
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .9);
  color: #11131a;
}

.po-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
  min-width: 0;
  padding: 22px 24px;
  border-radius: 28px;
  background: linear-gradient(140deg, #e8ebf0, #d4d9e1 60%, #a8e6ef 150%);
}

.po-hero::before,
.po-next::before {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.po-hero::before {
  top: -60px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(154, 219, 230, .55), transparent 70%);
}

.po-hero > *,
.po-next > * { position: relative; }

.po-hero__a,
.po-hero__b {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.po-hero .po-cap,
.po-next .po-cap {
  color: #4b5263;
  font-weight: 800;
}

.po-hero__a b {
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
}

.po-hero__b { padding-bottom: 6px; }
.po-hero__b b { font-size: 14px; }

.po-hero__b span {
  color: #4b5263;
  font-size: 12.5px;
}

.po-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 118px;
  padding: 18px 20px;
}

.po-stat .po-cap { white-space: nowrap; }

.po-stat__v {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.po-stat__v b {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.po-stat__v span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-stat__v span.po-cy { color: var(--accent-fg); }

/* Main grid */
.po-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.po-page[data-two] .po-main { grid-template-columns: minmax(0, 1fr) 340px; }

/* Shared controls */
.po-seg {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 4px;
  border-radius: 20px;
  background: var(--raised-3);
}

.po-seg button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.po-seg button[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.po-seg--r { margin-left: auto; }

.po-ed .po-seg--sm {
  gap: 4px;
  margin-left: auto;
  padding: 3px;
  border-radius: 999px;
}

.po-seg--sm button {
  height: 28px;
  font-size: 12px;
}

.po-arrows {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.po-arr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--po-bd);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
}

.po-pill {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--c-fg);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.po-pill::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

/* Timeline */
.po-tl {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px 20px;
}

.po-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.po-search {
  display: flex;
  flex: 1 1 180px;
  align-items: center;
  gap: 8px;
  min-width: 160px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--po-bd);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--muted);
}

.po-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.po-dayf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--accent-fg) 8%, transparent);
  color: var(--text-2);
  font-size: 13px;
}

.po-btn28 {
  height: 28px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--po-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.po-week {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.po-week__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.po-week__h b { font-size: 14px; }

.po-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.po-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 4px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-03);
  color: var(--text);
  cursor: pointer;
}

.po-day__l {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
}

.po-day b {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.po-day.is-past { color: var(--muted); }

.po-day[aria-pressed="true"] {
  border: 1.5px solid color-mix(in oklab, var(--accent-fg) 60%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 12%, transparent);
}

.po-day.is-today {
  border: 1.5px solid rgba(255, 255, 255, .9);
  background: linear-gradient(140deg, #eef0f4, #d4d9e1 55%, #a8e6ef 140%);
  color: #11131a;
}

.po-day.is-today .po-day__l { color: #4b5263; }
.po-day.is-today[aria-pressed="true"] { border-color: #2b8a99; }

/* Next up: a light hero in both themes */
.po-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: 26px;
  background: linear-gradient(140deg, #eef0f4, #d4d9e1 55%, #a8e6ef 140%);
}

.po-page[data-wide] .po-next { grid-template-columns: minmax(0, 1fr) 240px; }

.po-next::before {
  top: -80px;
  left: 40%;
  width: 300px;
  height: 240px;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
}

.po-next__b {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px 22px;
}

.po-next__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.po-cd,
.po-needs {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.po-cd {
  gap: 6px;
  background: #11131a;
  color: #9adbe6;
}

.po-cd span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154, 219, 230, .3);
}

.po-needs {
  background: rgba(201, 138, 30, .16);
  color: #8a5a00;
}

.po-next__t {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.po-next__m {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #3a4150;
  font-size: 13px;
}

.po-next__m b {
  color: #11131a;
  font-weight: 800;
  white-space: nowrap;
}

.po-next__m span {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.po-next .po-next__a {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.po-dark,
.po-soft,
.po-ghost {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: #11131a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.po-dark {
  background: #11131a;
  color: #eef0f5;
}

.po-soft { background: rgba(255, 255, 255, .7); }

.po-ghost {
  border: 1px solid rgba(17, 19, 26, .15);
  background: transparent;
}

.po-next__cov {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  border-left: 1px solid rgba(17, 19, 26, .08);
  background: repeating-linear-gradient(-45deg, rgba(17, 19, 26, .07) 0 7px, transparent 7px 14px);
  color: rgba(17, 19, 26, .45);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
}

.po-page[data-wide] .po-next__cov { display: flex; }

/* Groups and node rows: date | rail | card */
.po-groups {
  display: flex;
  flex-direction: column;
}

.po-gh {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0 6px 110px;
}

.po-page[data-wide] .po-gh { padding-left: 122px; }

.po-page .po-gh--dr { padding-bottom: 8px; }

.po-gh span:first-child {
  color: var(--c-fg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.po-gh span + span {
  color: var(--muted-2);
  font-size: 12px;
}

.po-node {
  display: grid;
  grid-template-columns: 80px 22px minmax(0, 1fr);
  align-items: start;
}

.po-page[data-wide] .po-node { grid-template-columns: 86px 28px minmax(0, 1fr); }

.po-node__d {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 12px 12px 0 0;
  line-height: 1;
}

.po-node__d b {
  font-size: 22px;
  font-weight: 600;
}

.po-node.is-pub .po-node__d b { color: var(--muted); }

.po-node__d span {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  white-space: nowrap;
}

.po-node__rail {
  position: relative;
  display: flex;
  align-self: stretch;
  justify-content: center;
}

.po-node__rail::before {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tint-08);
  content: "";
}

.po-node__rail span {
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 16px;
  border: 2.5px solid var(--c);
  border-radius: 50%;
  background: var(--po-dot);
  box-shadow: 0 0 0 4px var(--po-dot);
}

.po-node.is-pub .po-node__rail span { background: var(--c); }

.po-node__c {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin: 0 0 10px 8px;
  padding: 12px 14px;
  border: 1px solid var(--tint-06);
  border-radius: 18px;
  background: var(--tint-02);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.po-node__c:hover { border-color: var(--tint-14); }

.po-node.is-rev .po-node__c {
  border-color: color-mix(in oklab, oklch(0.8 0.13 70) 35%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.13 70) 8%, transparent);
}

.po-page:not([data-wide]) .po-node .po-cov56,
.po-page:not([data-wide]) .po-node .po-chs { display: none; }

.po-node__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.po-node__n {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-node__m {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.po-cli {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f6e2b0, #c99a4e);
  color: #3a2a0c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.po-note {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
}

.po-note.po-am { color: var(--amt); }
.po-note.po-co { color: var(--po-co); }

.po-reach {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 2px;
  width: 60px;
}

.po-reach b { font-size: 16px; }

.po-reach span {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.po-page .po-drafts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-left: 110px;
}

.po-page[data-wide] .po-drafts { margin-left: 122px; }

.po-draft {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1.5px dashed var(--po-bd12);
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.po-draft:hover { border-color: rgba(154, 219, 230, .5); }

.po-draft__t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-pick {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.po-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 48px 20px;
  text-align: center;
}

.po-empty b {
  color: var(--text-2);
  font-size: 16px;
  font-weight: 600;
}

.po-empty span {
  color: var(--muted);
  font-size: 13.5px;
}

/* ==========================================================================
   22zz15. Post: calendar, approvals, editor drawer
   ========================================================================== */
.po-side {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  gap: 16px;
  min-width: 0;
}

.po-page[data-two] .po-side { grid-template-columns: minmax(0, 1fr); }

.po-cal,
.po-aps {
  display: flex;
  flex-direction: column;
  padding: 18px;
}

.po-cal { gap: 14px; }
.po-aps { gap: 12px; }

.po-cal__h,
.po-aps__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.po-cal__h h2,
.po-aps__h h2 {
  font-size: 16px;
  font-weight: 700;
}

.po-cal__m {
  min-width: 96px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.po-grid7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.po-dn {
  padding-bottom: 4px;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}

.po-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--tint-02);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.po-cell.is-blank { background: transparent; }
.po-cell.is-past { color: var(--muted-2); }
.po-cell.is-today { border-color: var(--accent-fg); }

.po-cell[aria-pressed="true"] {
  border-color: transparent;
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.po-page .po-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.po-leg li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.po-leg li > span {
  width: 7px;
  height: 7px;
}

.po-gap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--tint-03);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.4;
}

.po-gap span {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-fg);
}

.po-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 18%, transparent);
  color: var(--amt);
  font-size: 11.5px;
  font-weight: 800;
}

.po-page .po-aplist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.po-aplist li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--tint-07);
  border-left: 2px solid oklch(0.8 0.13 70);
  border-radius: 18px;
  background: var(--tint-02);
}

.po-ap__o {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.po-ap__t {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.po-ap__t b {
  max-height: 2.6em;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.po-ap__t span {
  color: var(--muted);
  font-size: 12px;
}

.po-ap__b {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.po-ok,
.po-btn32 {
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 12.5px;
  cursor: pointer;
}

.po-ok {
  border: 0;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 20%, transparent);
  color: var(--grt);
  font-weight: 700;
}

.po-btn32 {
  border: 1px solid var(--po-bd);
  background: transparent;
  color: var(--text-2);
  font-weight: 600;
}

.po-rem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 1px solid var(--po-bd);
  border-radius: 50%;
  color: var(--text-2);
}

.po-rem:hover { background: var(--tint-06); }

.po-none {
  padding: 18px 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* Editor drawer */
.po-ov {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(6, 7, 11, .55);
}

.po-ed {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 81;
  display: flex;
  flex-direction: column;
  width: min(640px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--po-bd);
  border-radius: 26px;
  background: var(--card-from);
  box-shadow: 0 30px 80px var(--shade-45);
}

.po-ed__h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--tint-06);
}

.po-ed__h h2 {
  font-size: 18px;
  font-weight: 700;
}

.po-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--po-bd);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.po-ed__b {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  overflow-y: auto;
}

.po-title {
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
}

.po-drop {
  position: relative;
  display: block;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  cursor: pointer;
}

.po-drop:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.po-drop__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px);
}

.po-drop__l {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  transition: opacity .2s;
}

.po-drop__l .po-muted {
  font-size: 11.5px;
  font-weight: 400;
}

.po-drop .po-cov--img ~ .po-drop__l {
  background: rgba(6, 7, 11, .45);
  color: #fff;
  opacity: 0;
}

.po-drop:hover .po-cov--img ~ .po-drop__l,
.po-drop:focus-within .po-cov--img ~ .po-drop__l { opacity: 1; }

.po-f {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.po-f__h {
  display: flex;
  align-items: center;
  line-height: normal;
}

.po-f__h > span:last-child {
  margin-left: auto;
  font-size: 12px;
}

.po-chsel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.po-chb {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--po-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.po-chb svg { color: var(--chc); }

.po-chb[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--chc) 60%, transparent);
  background: color-mix(in oklab, var(--chc) 14%, transparent);
}

.po-area,
.po-in {
  border: 1px solid var(--po-bd);
  outline: none;
  background: var(--tint-03);
  color: var(--text);
}

.po-area {
  flex-shrink: 0;
  min-height: 140px;
  padding: 14px;
  border-radius: 16px;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.55;
  resize: vertical;
}

.po-area:focus,
.po-in:focus { border-color: rgba(154, 219, 230, .55); }

.po-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.po-in {
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  color-scheme: dark;
  font-size: 14px;
}

[data-theme="light"] .po-in { color-scheme: light; }

.po-in option {
  background: var(--card-from);
  color: var(--text);
}

.po-appr {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--po-bd);
  border-radius: 16px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.po-appr[aria-checked="true"] {
  border-color: color-mix(in oklab, oklch(0.8 0.13 70) 50%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.13 70) 8%, transparent);
}

.po-tg {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--tint-14);
  transition: background-color .2s;
}

.po-tg::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform .2s;
}

.po-appr[aria-checked="true"] .po-tg { background: oklch(0.8 0.13 70); }
.po-appr[aria-checked="true"] .po-tg::after { transform: translateX(16px); }

.po-appr__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.po-appr__t b {
  font-size: 14px;
  font-weight: 600;
}

.po-appr__t .po-muted { font-size: 12.5px; }

/* Channel previews */
.po-pv {
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-02);
}

.po-pv--ig { max-width: 360px; }

.po-pv__img {
  display: block;
  width: 100%;
  border-top: 1px solid var(--tint-07);
  border-bottom: 1px solid var(--tint-07);
  background: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px);
}

.po-pv__img--169 { aspect-ratio: 16 / 9; }
.po-pv__img--11 { aspect-ratio: 1 / 1; }
.po-pv__img--191 { aspect-ratio: 1.91 / 1; }

.po-pv__b {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}

.po-pv__k {
  color: var(--accent-fg);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
}

.po-pv__b b {
  font-size: 19px;
  line-height: 1.3;
}

.po-pv__b > span:nth-child(3) {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.po-pv__b .po-muted { font-size: 12px; }

.po-pv__acc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.po-pv__acc b { font-size: 13px; }
.po-pv__acc > .po-muted { margin-left: auto; }
.po-pv__acc--li { padding: 14px 14px 10px; }

.po-mark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--po-bd);
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 11px;
  font-weight: 800;
}

.po-mark--li {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 13px;
}

.po-pv__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.po-pv__who b { font-size: 14px; }
.po-pv__who .po-muted { font-size: 12px; }

.po-pv__cap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}

.po-pv__cap b { color: var(--text); }

.po-pv__li {
  padding: 0 14px 12px;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.po-pv__lt {
  padding: 10px 14px;
  background: var(--tint-03);
  font-size: 13px;
  font-weight: 600;
}

.po-ed__f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--tint-06);
}

.po-del {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--po-co);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.po-ed .po-ed__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.po-btn36 {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--po-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.po-btn36--light {
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 700;
}

/* ==========================================================================
   22zz16. Calendar: layout, rail, grid
   ========================================================================== */
.ca-page,
.ca-ed {
  --ca-client: #9adbe6;
  --ca-shoot: oklch(0.8 0.13 70);
  --ca-deadline: oklch(0.72 0.14 35);
  --ca-team: oklch(0.8 0.14 155);
  --ca-post: oklch(0.78 0.11 300);
  --ca-off: rgba(127, 132, 148, .18);
  --ca-bd: rgba(255, 255, 255, .1);
  --ca-hole: #171a23;
  --ca-node: #14171f;
  --ca-evbd: #1d212c;
  --ca-past: rgba(0, 0, 0, .18);
  --ca-dim: rgba(0, 0, 0, .2);
  --ca-wkend: rgba(255, 255, 255, .012);
  --ca-row: rgba(255, 255, 255, .025);
  --ca-out: rgba(255, 255, 255, .015);
}

[data-theme="light"] .ca-page,
[data-theme="light"] .ca-ed {
  --ca-client: #2b8a99;
  --ca-bd: var(--tint-09);
  --ca-hole: #ffffff;
  --ca-node: #ffffff;
  --ca-evbd: #ffffff;
  --ca-past: rgba(20, 30, 50, .06);
  --ca-dim: rgba(20, 30, 50, .05);
  --ca-wkend: rgba(20, 30, 50, .028);
  --ca-row: rgba(20, 30, 50, .028);
  --ca-out: rgba(20, 30, 50, .028);
}

/* Type colours: --c solid, --cf text, --cg* event gradients */
.ca-c--client {
  --c: var(--ca-client);
  --cf: var(--ca-client);
  --cg1: rgba(154, 219, 230, .28);
  --cg2: rgba(154, 219, 230, .14);
  --cl1: rgba(154, 219, 230, .4);
  --cl2: rgba(154, 219, 230, .22);
}

.ca-c--shoot {
  --c: var(--ca-shoot);
  --cf: var(--ca-shoot);
  --cg1: oklch(0.8 0.13 70 / .28);
  --cg2: oklch(0.8 0.13 70 / .14);
  --cl1: oklch(0.8 0.13 70 / .4);
  --cl2: oklch(0.8 0.13 70 / .22);
}

.ca-c--deadline {
  --c: var(--ca-deadline);
  --cf: var(--ca-deadline);
  --cg1: oklch(0.72 0.14 35 / .28);
  --cg2: oklch(0.72 0.14 35 / .14);
  --cl1: oklch(0.72 0.14 35 / .4);
  --cl2: oklch(0.72 0.14 35 / .22);
}

.ca-c--team {
  --c: var(--ca-team);
  --cf: var(--ca-team);
  --cg1: oklch(0.8 0.14 155 / .28);
  --cg2: oklch(0.8 0.14 155 / .14);
  --cl1: oklch(0.8 0.14 155 / .4);
  --cl2: oklch(0.8 0.14 155 / .22);
}

.ca-c--post {
  --c: var(--ca-post);
  --cf: var(--ca-post);
  --cg1: oklch(0.78 0.11 300 / .28);
  --cg2: oklch(0.78 0.11 300 / .14);
  --cl1: oklch(0.78 0.11 300 / .4);
  --cl2: oklch(0.78 0.11 300 / .22);
}

[data-theme="light"] .ca-c--client {
  --cg1: rgba(43, 138, 153, .2);
  --cg2: rgba(43, 138, 153, .1);
  --cl1: rgba(43, 138, 153, .3);
  --cl2: rgba(43, 138, 153, .16);
}

[data-theme="light"] .ca-c--shoot { --cf: oklch(0.55 0.13 70); }
[data-theme="light"] .ca-c--deadline { --cf: oklch(0.56 0.16 35); }
[data-theme="light"] .ca-c--team { --cf: oklch(0.52 0.14 155); }
[data-theme="light"] .ca-c--post { --cf: oklch(0.52 0.14 300); }

.ca-page p,
.ca-page h2,
.ca-ed p,
.ca-ed h2 { margin: 0; }

.ca-page ul,
.ca-page ol,
.ca-ed ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ca-muted { color: var(--muted); }

.ca-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.ca-h {
  font-size: 15px;
  font-weight: 700;
}

.ca-av20,
.ca-av22,
.ca-av24,
.ca-av26,
.ca-av28 {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.ca-av20 { width: 20px; height: 20px; }
.ca-av22 { width: 22px; height: 22px; }
.ca-av24 { width: 24px; height: 24px; }
.ca-av26 { width: 26px; height: 26px; }
.ca-av28 { width: 28px; height: 28px; }

.ca-ini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #11131a;
  font-weight: 800;
}

.ca-av20.ca-ini { font-size: 8px; }
.ca-av24.ca-ini { font-size: 9px; }
.ca-av28.ca-ini { font-size: 10.5px; }

/* Layout: columns from the page's own width (calendar.js) */
.ca-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.ca-rail { order: 2; }
.ca-grid { order: 1; }
.ca-side { order: 0; }

.ca-page[data-cols="3"] { grid-template-columns: 260px minmax(0, 1fr) 300px; }
.ca-page[data-cols="2"] { grid-template-columns: 240px minmax(0, 1fr); }
.ca-page[data-cols="3"] .ca-rail,
.ca-page[data-cols="2"] .ca-rail { order: 0; }
.ca-page[data-cols="3"] .ca-side { order: 2; }

.ca-page[data-cols="2"] .ca-side {
  grid-column: 1 / -1;
  order: -1;
}

.ca-rail,
.ca-side {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
  gap: 16px;
}

.ca-side {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.ca-page[data-cols="3"] .ca-rail,
.ca-page[data-cols="2"] .ca-rail,
.ca-page[data-cols="3"] .ca-side { grid-template-columns: minmax(0, 1fr); }

/* Month heatmap: a light surface in both themes */
.ca-hm {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  background: linear-gradient(140deg, #eef0f4, #d4d9e1 55%, #a8e6ef 140%);
  color: #11131a;
}

.ca-hm::before {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: radial-gradient(circle 85px at right 55px top 45px, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.ca-hm > * { position: relative; }

.ca-hm__h {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ca-hm .ca-hm__t {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}

.ca-hm__t span {
  color: #4b5263;
  font-size: 11px;
  letter-spacing: .12em;
}

.ca-hm__arr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  color: #11131a;
  font-size: 15px;
  cursor: pointer;
}

.ca-hm__g {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.ca-hm__dn {
  padding-bottom: 4px;
  color: #4b5263;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
}

.ca-hm__c {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #11131a;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ca-hm__c.is-out {
  color: rgba(17, 19, 26, .25);
  cursor: default;
}

.ca-lv0 { background: rgba(17, 19, 26, .04); }
.ca-lv1 { background: rgba(17, 19, 26, .12); }
.ca-lv2 { background: rgba(17, 19, 26, .24); }
.ca-lv3 { background: rgba(17, 19, 26, .42); }

.ca-lv4 {
  background: rgba(17, 19, 26, .72);
  color: #eef0f5;
}

.ca-hm__c.is-today { box-shadow: 0 0 0 2px #2b8a99; }

.ca-hm__c.is-sel {
  background: #11131a;
  box-shadow: none;
  color: #9adbe6;
}

.ca-hm__c.is-wk::after {
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: rgba(17, 19, 26, .35);
  content: "";
  transform: translateX(-50%);
}

.ca-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #11131a;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
  color: #eef0f5;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

.ca-tip--l {
  left: 0;
  transform: none;
}

.ca-tip--r {
  right: 0;
  left: auto;
  transform: none;
}

.ca-hm__c:hover .ca-tip,
.ca-hm__c:focus-visible .ca-tip { display: flex; }

.ca-tip b {
  font-size: 12px;
  font-weight: 800;
}

.ca-tip__bars {
  display: flex;
  gap: 4px;
}

.ca-tip__bars span {
  width: 18px;
  height: 6px;
  border-radius: 3px;
  background: var(--c);
}

.ca-tip > span:last-child {
  color: #a7abb8;
  font-size: 11px;
  font-weight: 600;
}

.ca-page .ca-hm__st {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.ca-hm__st li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
}

.ca-hm__st b {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.ca-hm__st span {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Calendars: donut + layer switches */
.ca-cals,
.ca-wf {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.ca-cals { gap: 14px; }
.ca-wf { gap: 12px; }

.ca-cals__b {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ca-donut {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--ca-off);
}

.ca-donut__c {
  position: absolute;
  inset: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ca-hole);
  line-height: 1;
}

.ca-donut__c b {
  font-size: 24px;
  font-weight: 600;
}

.ca-donut__c span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
}

.ca-page .ca-cals__l {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ca-sw {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ca-sw__t {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 16px;
  border-radius: 999px;
  background: var(--tint-14);
  transition: background-color .2s;
}

.ca-sw__t::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform .2s;
}

.ca-sw__l {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-sw b { font-weight: 800; }
.ca-sw[aria-checked="true"] { color: var(--text-2); }
.ca-sw[aria-checked="true"] b { color: var(--text); }
.ca-sw[aria-checked="true"] .ca-sw__t { background: var(--c); }
.ca-sw[aria-checked="true"] .ca-sw__t::after { transform: translateX(10px); }

/* Who's free */
.ca-wf__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ca-wf__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin-left: auto;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 16%, transparent);
  color: var(--grt);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ca-wf__chip::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.ca-wf__b {
  position: relative;
  padding-top: 4px;
}

.ca-page .ca-wf__l {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ca-wf__slot {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px dashed color-mix(in oklab, #9adbe6 60%, transparent);
  border-radius: 8px;
  background: color-mix(in oklab, #9adbe6 12%, transparent);
  pointer-events: none;
}

.ca-wf__now {
  position: absolute;
  top: -6px;
  bottom: -4px;
  z-index: 2;
  width: 2px;
  border-radius: 2px;
  background: var(--ca-deadline);
  pointer-events: none;
}

.ca-wf__now::before {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ca-deadline);
  content: "";
}

.ca-wf__p {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 3px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ca-wf__p[aria-pressed="true"] { background: color-mix(in oklab, var(--accent-fg) 10%, transparent); }

.ca-wf__who {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ca-wf__who img { box-shadow: 0 0 0 2px var(--ca-team); }
.ca-wf__p.is-busy .ca-wf__who img { box-shadow: 0 0 0 2px var(--ca-deadline); }

.ca-wf__who span {
  overflow: hidden;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-wf__p[aria-pressed="true"] .ca-wf__who span { color: var(--text); }

.ca-wf__strip {
  position: relative;
  height: 14px;
  border-radius: 5px;
  background: var(--tint-04);
}

.ca-wf__strip > span:not(.visually-hidden) {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: var(--c);
}

.ca-wf__strip > span.is-past { opacity: .35; }

.ca-wf .ca-wf__ax {
  display: flex;
  justify-content: space-between;
  margin-top: -4px;
  padding-left: 72px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 700;
}

.ca-wf__free {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklab, #9adbe6 30%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, #9adbe6 8%, transparent);
}

.ca-wf__free p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ca-wf__free span {
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.ca-wf__free b {
  font-size: 13.5px;
  font-weight: 700;
}

.ca-btn30 {
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.ca-wf__none { font-size: 12.5px; }

.ca-link {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Grid card and toolbar */
.ca-grid {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ca-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tint-06);
}

.ca-today-btn {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.ca-arrows {
  display: flex;
  gap: 4px;
}

.ca-arr {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--ca-bd);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
}

.ca-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.ca-title span {
  color: var(--accent-fg);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ca-page .ca-legend {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: 8px;
}

.ca-page[data-bar] .ca-legend { display: flex; }

.ca-legend li {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 700;
}

.ca-legend svg {
  flex-shrink: 0;
  color: var(--c);
}

.ca-legend .is-off { opacity: .4; }

.ca-bar .ca-seg {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  margin-left: auto;
  padding: 4px;
  border-radius: 20px;
  background: var(--raised-3);
}

.ca-seg button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ca-seg button[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

/* Month view */
.ca-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ca-month__dn { display: contents; }

.ca-month__dn span {
  padding: 10px 8px 8px;
  border-bottom: 1px solid var(--tint-06);
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
}

.ca-mc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 112px;
  padding: 6px;
  border-right: 1px solid var(--tint-06);
  border-bottom: 1px solid var(--tint-06);
  cursor: pointer;
}

.ca-page[data-nar] .ca-mc { min-height: 84px; }
.ca-mc.is-end { border-right: 0; }
.ca-mc.is-last { border-bottom: 0; }
.ca-mc.is-out { background: var(--ca-out); }
.ca-mc.is-sel { background: color-mix(in oklab, var(--accent-fg) 6%, transparent); }
.ca-mc:hover { background: var(--tint-02); }

.ca-mc__n {
  display: flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ca-mc.is-out .ca-mc__n { color: var(--muted-3); }

.ca-mc__n.is-today,
.ca-mc.is-out .ca-mc__n.is-today {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.ca-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: color-mix(in oklab, var(--c) 14%, transparent);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ca-chip.is-all {
  background: color-mix(in oklab, var(--c) 28%, transparent);
  font-weight: 700;
}

.ca-chip__d {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
}

.ca-chip__tm {
  display: none;
  flex-shrink: 0;
  color: var(--text-3);
}

.ca-page[data-mt] .ca-chip__tm { display: inline; }

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

.ca-mc__more {
  padding: 0 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

/* Week and day views */
.ca-tg__r {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
}

.ca-tg__head,
.ca-tg__all { border-bottom: 1px solid var(--tint-06); }

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

.ca-tg[data-n="3"] .ca-tg__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ca-tg[data-n="1"] .ca-tg__cols { grid-template-columns: minmax(0, 1fr); }

.ca-dh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 10px 6px 8px;
  border: 0;
  border-left: 1px solid var(--tint-06);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ca-dh__l {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
}

.ca-dh b {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
}

.ca-dh.is-past b { color: var(--muted); }
.ca-dh.is-today .ca-dh__l { color: var(--accent-fg); }

.ca-dh.is-today b {
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  box-shadow: 0 0 0 3px rgba(154, 219, 230, .25);
  color: #11131a;
}

.ca-dh__dots {
  display: flex;
  gap: 3px;
  height: 5px;
}

.ca-dh__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c);
}

.ca-tg__al {
  padding: 10px 8px 0 0;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: right;
}

.ca-tg__bars {
  padding: 2px 0;
  background: linear-gradient(90deg, var(--tint-06) 1px, transparent 1px) 0 0 / calc(100% / 7) 100%;
}

.ca-tg[data-n="3"] .ca-tg__bars { background-size: calc(100% / 3) 100%; }
.ca-tg[data-n="1"] .ca-tg__bars { background-size: 100% 100%; }

.ca-allb {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 24px;
  margin: 3px 4px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: var(--c);
  color: #11131a;
  font-size: 11.5px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.ca-allb span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-allb svg { flex-shrink: 0; }

.ca-allb.ca-c--deadline {
  border: 1px solid color-mix(in oklab, var(--c) 60%, transparent);
  background: color-mix(in oklab, var(--c) 30%, transparent);
  color: var(--text);
}

.ca-allb.ca-c--deadline svg { color: var(--c); }

.ca-tg__body { padding: 8px 0 10px; }

.ca-gut {
  position: relative;
  display: grid;
  grid-auto-rows: 48px;
  height: 624px;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 600;
}

.ca-gut > span:not(.ca-gut__now) {
  padding-right: 10px;
  text-align: right;
  transform: translateY(-7px);
}

.ca-gut__now {
  position: absolute;
  right: 4px;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 20px;
  margin-top: -10px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ca-deadline);
  box-shadow: 0 0 0 3px var(--ca-hole);
  color: #11131a;
  font-size: 11px;
  font-weight: 800;
}

.ca-days {
  position: relative;
  height: 624px;
}

.ca-days::before,
.ca-days::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  pointer-events: none;
}

.ca-days::before {
  top: 48px;
  background: repeating-linear-gradient(180deg, var(--tint-05) 0 1px, transparent 1px 48px);
}

.ca-days::after {
  top: 24px;
  background: repeating-linear-gradient(180deg, var(--tint-02) 0 1px, transparent 1px 48px);
}

.ca-col {
  position: relative;
  z-index: 1;
  min-width: 0;
  border-left: 1px solid var(--tint-06);
  cursor: copy;
}

.ca-col.is-today { background: color-mix(in oklab, var(--accent-fg) 5%, transparent); }
.ca-col.is-wkend { background: var(--ca-wkend); }

.ca-col__past,
.ca-col__dim {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.ca-col__past {
  inset: 0;
  background: repeating-linear-gradient(-45deg, var(--ca-past) 0 6px, transparent 6px 12px);
}

.ca-col__dim {
  top: 0;
  right: 0;
  left: 0;
  background: var(--ca-dim);
}

.ca-ghost {
  position: absolute;
  z-index: 1;
  border: 1.5px dashed color-mix(in oklab, var(--c) 55%, transparent);
  border-radius: 11px;
  pointer-events: none;
}

.ca-hov {
  position: absolute;
  right: 4px;
  left: 4px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 1.5px dashed color-mix(in oklab, #9adbe6 70%, transparent);
  border-radius: 10px;
  background: color-mix(in oklab, #9adbe6 8%, transparent);
  color: var(--accent-fg);
  font-size: 11.5px;
  font-weight: 800;
  pointer-events: none;
}

.ca-hov[hidden] { display: none; }

.ca-now {
  position: absolute;
  right: 0;
  left: -1px;
  z-index: 7;
  height: 2px;
  background: var(--ca-deadline);
  box-shadow: 0 0 12px color-mix(in oklab, oklch(0.72 0.14 35) 70%, transparent);
  pointer-events: none;
}

.ca-now::before {
  position: absolute;
  top: -4px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ca-deadline);
  content: "";
}

/* Event blocks */
.ca-ev {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  padding: 6px 8px;
  border: 1px solid color-mix(in oklab, var(--c) 50%, transparent);
  border-radius: 11px;
  background: linear-gradient(180deg, var(--cg1), var(--cg2));
  color: var(--text);
  text-align: left;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.ca-ev.is-sm {
  padding: 2px 8px;
  border-radius: 8px;
}

.ca-ev.is-post { cursor: pointer; }
.ca-ev.is-past { opacity: .75; }

.ca-ev.is-live {
  z-index: 4;
  border-color: color-mix(in oklab, var(--c) 90%, transparent);
  background: linear-gradient(180deg, var(--cl1), var(--cl2));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 25%, transparent), 0 12px 26px rgba(0, 0, 0, .4);
}

.ca-ev.is-drag {
  z-index: 8;
  overflow: visible;
  border-color: var(--c);
  background: linear-gradient(180deg, var(--cl1), var(--cl2));
  box-shadow: 0 18px 36px rgba(0, 0, 0, .55);
  cursor: grabbing;
  transform: rotate(-1.5deg);
}

.ca-ev__prog {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 11px 0 0 11px;
  background: color-mix(in oklab, var(--c) 18%, transparent);
  pointer-events: none;
}

.ca-ev__h,
.ca-ev__tm,
.ca-ev__loc,
.ca-ev__who { position: relative; }

.ca-ev__h {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.ca-ev__h svg {
  flex-shrink: 0;
  color: var(--c);
}

.ca-ev__t {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-ev.is-sm .ca-ev__t { font-size: 11px; }

.ca-ev__cf {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ca-shoot);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.ca-ev__tm,
.ca-ev__loc {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-ev__tm {
  color: var(--text-2);
  font-weight: 600;
}

.ca-ev__tm b { color: var(--text); }
.ca-ev__loc { color: var(--text-3); }

.ca-ev__who {
  display: flex;
  margin-top: auto;
}

.ca-ev__who > * {
  border: 2px solid var(--ca-evbd);
}

.ca-ev__who > * + * { margin-left: -8px; }

.ca-ev__drop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f2f3f6;
  color: #11131a;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

.ca-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--tint-06);
  color: var(--muted);
  font-size: 12px;
}

.ca-foot__cf {
  color: var(--amt);
  font-weight: 700;
}

/* ==========================================================================
   22zz17. Calendar: today panel, event editor
   ========================================================================== */
.ca-lv {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  padding: 18px;
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 38%, transparent);
  border-radius: 26px;
  background: radial-gradient(120% 110% at 0% 0%, oklch(0.72 0.14 35 / .26), transparent 58%), radial-gradient(90% 80% at 100% 100%, rgba(154, 219, 230, .14), transparent 60%), linear-gradient(180deg, #1d2130, #141720);
  color: #eef0f5;
}

.ca-lv__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ca-lv__pulse {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}

.ca-lv__pulse::before,
.ca-lv__pulse::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.ca-lv__pulse::before {
  inset: -5px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  animation: ca-pulse 1.6s ease-in-out infinite;
}

.ca-lv__pulse::after {
  inset: 0;
  background: oklch(0.72 0.14 35);
}

@keyframes ca-pulse {
  50% {
    opacity: .3;
    transform: scale(1.35);
  }
}

.ca-lv__k {
  color: oklch(0.72 0.14 35);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.ca-lv__loc {
  max-width: 60%;
  height: 22px;
  margin-left: auto;
  padding: 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #c9ccd6;
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-lv__t {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: pretty;
}

.ca-lv__big {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ca-lv__big b {
  font-size: 52px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: .85;
  letter-spacing: -.03em;
}

.ca-lv__big > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 2px;
  color: #c9ccd6;
  font-size: 12px;
  font-weight: 700;
}

.ca-lv__big > span span {
  color: #8a8f9e;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
}

.ca-lv__pr {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ca-lv__track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}

.ca-lv__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, oklch(0.72 0.14 35 / .7), oklch(0.72 0.14 35));
}

.ca-lv__tick {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 14px;
  border-radius: 2px;
  background: #eef0f5;
  opacity: .5;
}

.ca-lv__knob {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #eef0f5;
  box-shadow: 0 0 0 4px color-mix(in oklab, oklch(0.72 0.14 35) 35%, transparent);
}

.ca-lv__ag {
  display: grid;
  font-size: 11px;
  font-weight: 700;
}

.ca-lv__ag span {
  overflow: hidden;
  color: #6b7080;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-lv__ag span:first-child { text-align: left; }
.ca-lv__ag span:last-child { text-align: right; }
.ca-lv__ag .is-done { color: #eef0f5; }
.ca-lv__ag .is-cur { color: #c9ccd6; }

.ca-lv__who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
}

.ca-lv__ps {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
}

.ca-lv__p { position: relative; }

.ca-lv__p > * {
  border: 2px solid #1a1e2a;
}

.ca-lv__p.is-in::after,
.ca-lv__p.is-wait::after {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border: 2px solid #1a1e2a;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  content: "";
}

.ca-lv__p.is-wait::after { background: #6b7080; }

.ca-lv__who > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  color: #a7abb8;
  font-size: 12px;
  line-height: 1.3;
}

.ca-lv__who b { color: #eef0f5; }

.ca-lv__who > span:last-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-lv__b {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.ca-lv__b--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ca-lv__b--3 { grid-template-columns: 1.4fr 1fr 1fr; }

.ca-lv__join,
.ca-lv__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ca-lv__join {
  gap: 7px;
  background: #f2f3f6;
  box-shadow: 0 8px 20px rgba(242, 243, 246, .12);
  color: #11131a;
  font-size: 14px;
  font-weight: 800;
}

.ca-lv__btn {
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .06);
  color: #eef0f5;
}

/* Up next: light surface */
.ca-up {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  padding: 14px 16px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 22px;
  background: linear-gradient(140deg, #eef0f4, #d4d9e1 55%, #a8e6ef 140%);
  color: #11131a;
  text-align: left;
  cursor: pointer;
}

.ca-up::before {
  position: absolute;
  top: -60px;
  right: -40px;
  width: 170px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.ca-up > span { position: relative; }

.ca-up__h {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.ca-up__k {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
}

.ca-up__cd {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #11131a;
  color: #9adbe6;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ca-up__ps {
  display: flex;
  margin-left: auto;
}

.ca-up__ps > * {
  border: 2px solid #dfe3e9;
}

.ca-up__ps > * + * { margin-left: -8px; }

.ca-up__b {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ca-up__b b,
.ca-up__b span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-up__b b {
  font-size: 16px;
  font-weight: 700;
}

.ca-up__b span {
  color: #3a4150;
  font-size: 12px;
}

.ca-up__prep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  color: #3a4150;
  font-size: 12px;
  line-height: 1.35;
}

.ca-up__prep svg {
  flex-shrink: 0;
  color: #11131a;
}

.ca-up__prep b { color: #11131a; }

/* Today list */
.ca-td {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
}

.ca-td__h {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ca-td__h h2 {
  font-size: 15px;
  font-weight: 700;
}

.ca-td__h span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.ca-td__h .ca-td__free {
  margin-left: auto;
  color: var(--grt);
  font-weight: 800;
}

.ca-due {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in oklab, var(--c) 45%, transparent);
  border-radius: 9px;
  background: color-mix(in oklab, var(--c) 22%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.ca-due span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-page .ca-tr {
  display: flex;
  flex-direction: column;
}

.ca-tr__gap {
  display: grid;
  grid-template-columns: 44px 18px minmax(0, 1fr);
  align-items: center;
  min-height: 30px;
}

.ca-tr__gap.is-short { min-height: 12px; }

.ca-tr__ln {
  grid-column: 2;
  align-self: stretch;
  justify-self: center;
  width: 2px;
  background: var(--tint-08);
}

.ca-tr__ln.is-free { background: repeating-linear-gradient(180deg, oklch(0.8 0.14 155 / .6) 0 3px, transparent 3px 7px); }

.ca-tr__gap > span:last-child:not(.ca-tr__ln) {
  margin-left: 6px;
  color: var(--grt);
  font-size: 11.5px;
  font-weight: 700;
}

.ca-tr__ev {
  display: grid;
  grid-template-columns: 44px 18px minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ca-tr__ev.is-done { opacity: .5; }

.ca-tr__tm {
  padding-top: 11px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}

.ca-tr__ev.is-now .ca-tr__tm { color: var(--ca-deadline); }

.ca-tr__node {
  position: relative;
  display: flex;
  justify-content: center;
}

.ca-tr__node::before {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tint-08);
  content: "";
}

.ca-tr__ev.is-done .ca-tr__node::before { background: var(--ca-deadline); }
.ca-tr__ev.is-now .ca-tr__node::before { background: linear-gradient(180deg, var(--ca-deadline), var(--tint-08)); }

.ca-tr__node span {
  position: relative;
  width: 12px;
  height: 12px;
  margin-top: 12px;
  border: 2px solid var(--c);
  border-radius: 50%;
  background: var(--ca-node);
}

.ca-tr__ev.is-done .ca-tr__node span { background: var(--c); }

.ca-tr__ev.is-now .ca-tr__node span {
  border-color: var(--ca-deadline);
  box-shadow: 0 0 0 4px color-mix(in oklab, oklch(0.72 0.14 35) 25%, transparent);
}

.ca-tr__c {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin: 3px 0 3px 6px;
  padding: 8px 10px;
  border: 1px solid var(--tint-05);
  border-radius: 14px;
  background: var(--ca-row);
}

.ca-tr__ev.is-now .ca-tr__c {
  border-color: color-mix(in oklab, oklch(0.72 0.14 35) 40%, transparent);
  background: color-mix(in oklab, oklch(0.72 0.14 35) 10%, transparent);
}

.ca-tr__c b,
.ca-tr__c span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-tr__c b {
  font-size: 13px;
  font-weight: 700;
}

.ca-tr__ev.is-done .ca-tr__c b { text-decoration: line-through; }

.ca-tr__c span {
  color: var(--muted);
  font-size: 11.5px;
}

.ca-tr__c strong { color: var(--ca-deadline); }

.ca-td__none {
  padding: 12px 4px;
  font-size: 13px;
}

/* Event editor */
html.ca-lock { overflow: hidden; }

.ca-ov {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(6, 7, 11, .55);
}

.ca-ed {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 81;
  display: flex;
  flex-direction: column;
  width: min(860px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--ca-bd);
  border-radius: 26px;
  background: var(--card-from);
  box-shadow: 0 30px 80px var(--shade-45);
}

.ca-ed__h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--tint-06);
}

.ca-ed__h h2 {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.ca-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--cf);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ca-pill::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.ca-ed__cf {
  color: var(--amt);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ca-x {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--ca-bd);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.ca-ed__post {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  overflow-y: auto;
}

.ca-ed__pt {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

.ca-ed__pw {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-2);
  font-size: 14px;
}

.ca-ed__pw b {
  color: var(--text);
  font-weight: 700;
}

.ca-ed__pn {
  padding: 14px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-03);
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.ca-btn38 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--ca-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ca-ed__post .ca-btn38 { align-self: flex-start; }

.ca-btn38--light {
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 800;
}

.ca-ed__b {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: auto;
}

/* Day beside the form */
.ca-dy {
  display: flex;
  flex: 0 0 200px;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
  padding: 14px 10px 16px 0;
  border-right: 1px solid var(--tint-06);
  background: var(--tint-02);
}

.ca-dy__h {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 14px;
}

.ca-dy__h > p:first-child {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ca-dy__h b {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.ca-dy__h > p:first-child span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-ed .ca-dy__ps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ca-dy__ps button {
  display: flex;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: .6;
}

.ca-dy__ps button[aria-pressed="true"] {
  border-color: var(--accent-fg);
  opacity: 1;
}

.ca-dy .ca-dy__all {
  margin-left: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--tint-04);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}

.ca-dy__tl {
  position: relative;
  height: 338px;
  margin-left: 40px;
  background: repeating-linear-gradient(180deg, var(--tint-05) 0 1px, transparent 1px 26px);
}

.ca-ed .ca-dy__hr {
  position: absolute;
  top: 0;
  left: -36px;
  display: grid;
  grid-auto-rows: 26px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 700;
}

.ca-dy__hr span { transform: translateY(-6px); }

.ca-dy__ev,
.ca-dy__me,
.ca-dy__slot {
  position: absolute;
  overflow: hidden;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-dy__ev {
  right: 30%;
  left: 0;
  padding: 4px 6px;
  border: 1px solid color-mix(in oklab, var(--c) 55%, transparent);
  background: color-mix(in oklab, var(--c) 26%, transparent);
  color: var(--text);
}

.ca-dy__ev.is-sm { padding: 0 6px; }

.ca-dy__slot {
  right: 0;
  left: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px dashed color-mix(in oklab, oklch(0.8 0.14 155) 70%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.14 155) 10%, transparent);
  color: var(--grt);
  font-size: 10px;
  cursor: pointer;
}

.ca-dy__me {
  right: 0;
  left: 35%;
  z-index: 2;
  padding: 3px 6px;
  border: 1.5px solid #9adbe6;
  background: color-mix(in oklab, #9adbe6 40%, transparent);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .35);
  color: var(--text);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.ca-dy__me.is-cf { box-shadow: 0 0 0 3px color-mix(in oklab, oklch(0.8 0.13 70) 45%, transparent), 0 10px 20px rgba(0, 0, 0, .4); }

.ca-dy__cf {
  position: absolute;
  left: -8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ca-shoot);
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
}

.ca-dy__hint {
  padding-left: 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

/* Form */
.ca-form {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
}

.ca-title-in {
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
}

.ca-types,
.ca-team,
.ca-clrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ca-tyb,
.ca-team button {
  display: flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
}

.ca-tyb {
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ca-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}

.ca-tyb span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}

.ca-tyb[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--c) 60%, transparent);
  background: color-mix(in oklab, var(--c) 14%, transparent);
}

.ca-when {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 8px;
}

.ca-when.is-all { grid-template-columns: minmax(0, 1fr); }

.ca-f {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ca-cap {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ca-in {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ca-bd);
  border-radius: 12px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  color-scheme: dark;
  font-size: 13.5px;
}

[data-theme="light"] .ca-in { color-scheme: light; }
.ca-in:focus { border-color: rgba(154, 219, 230, .55); }

.ca-in option {
  background: var(--card-from);
  color: var(--text);
}

.ca-area {
  height: auto;
  min-height: 72px;
  padding: 12px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
}

.ca-tgs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ca-tog {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ca-tog__k {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--tint-14);
  transition: background-color .2s;
}

.ca-tog__k::after {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform .2s;
}

.ca-tog[aria-checked="true"] .ca-tog__k { background: var(--accent-fg); }
.ca-tog[aria-checked="true"] .ca-tog__k::after { transform: translateX(16px); }

.ca-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.ca-team button {
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 4px;
  border: 1px solid var(--ca-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  opacity: .6;
}

.ca-team button[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--accent-fg) 50%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 10%, transparent);
  opacity: 1;
}

.ca-clrow { gap: 8px; }

.ca-clrow .ca-in {
  flex: 1 1 200px;
  width: auto;
}

.ca-clrow .ca-btn38 { height: 40px; }

.ca-ed.has-cl .ca-clrow .ca-in {
  border-color: rgba(201, 154, 78, .4);
  background: rgba(201, 154, 78, .08);
}

.ca-guest { font-size: 12px; }

.ca-ed .ca-conf {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklab, oklch(0.8 0.13 70) 40%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 10%, transparent);
  color: var(--text-2);
  font-size: 12.5px;
}

.ca-ed__f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--tint-06);
}

.ca-del {
  height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ca-deadline);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ca-ed .ca-ed__acts {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* ==========================================================================
   22zz18. Data List: tabs, filters, bulk bar, table
   ========================================================================== */
.dl-page,
.o2-block[data-block="ie"] {
  --dl-row: #171a23;
  --dl-rowh: #1c202a;
  --dl-head: #181b24;
  --dl-pop: #1f2330;
  --dl-bd: rgba(255, 255, 255, .1);
  --dl-ckbd: rgba(255, 255, 255, .22);
}

[data-theme="light"] .dl-page,
[data-theme="light"] .o2-block[data-block="ie"] {
  --dl-row: #ffffff;
  --dl-rowh: #f3f5f8;
  --dl-head: #ffffff;
  --dl-pop: #ffffff;
  --dl-bd: var(--tint-09);
  --dl-ckbd: rgba(20, 30, 50, .12);
}

/* Status colours: --c fill, --cf text on a tint */
.dl-s--gr { --c: oklch(0.8 0.14 155); --cf: oklch(0.8 0.14 155); }
.dl-s--cy { --c: #9adbe6; --cf: #9adbe6; }
.dl-s--am { --c: oklch(0.8 0.13 70); --cf: oklch(0.8 0.13 70); }
.dl-s--co { --c: oklch(0.72 0.14 35); --cf: oklch(0.72 0.14 35); }
.dl-s--vi { --c: oklch(0.78 0.11 300); --cf: oklch(0.78 0.11 300); }
.dl-s--mu { --c: #8a8f9e; --cf: #8a8f9e; }

[data-theme="light"] .dl-s--gr { --cf: oklch(0.52 0.14 155); }
[data-theme="light"] .dl-s--cy { --c: #2b8a99; --cf: #2b8a99; }
[data-theme="light"] .dl-s--am { --cf: oklch(0.55 0.13 70); }
[data-theme="light"] .dl-s--co { --cf: oklch(0.56 0.16 35); }
[data-theme="light"] .dl-s--vi { --cf: oklch(0.52 0.14 300); }
[data-theme="light"] .dl-s--mu { --c: #6b7080; --cf: #6b7080; }

.dl-page p,
.dl-page h2,
.dl-page h3 { margin: 0; }

.dl-page ul,
.o2-block[data-block="ie"] ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

html.dl-lock { overflow: hidden; }

.dl-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.dl-page[data-wide][data-open] { grid-template-columns: minmax(0, 1fr) 340px; }

.dl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.dl-av20,
.dl-av22,
.dl-av24 {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.dl-av20 { width: 20px; height: 20px; }
.dl-av22 { width: 22px; height: 22px; }
.dl-av24 { width: 24px; height: 24px; }

.dl-logo,
.dl-logo30,
.dl-logo52 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: #11131a;
  font-weight: 800;
}

.dl-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 11px;
}

.dl-t.is-compact .dl-logo {
  width: 26px;
  height: 26px;
}

.dl-logo30 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 10px;
}

.dl-logo52 {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 14px;
  font-size: 16px;
}

.dl-logo.is-round,
.dl-logo30.is-round,
.dl-logo52.is-round { border-radius: 50%; }

.dl-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}

/* Dataset tabs and density */
.dl-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 18px;
  padding: 12px 18px 0;
  border-bottom: 1px solid var(--tint-06);
}

.dl-tabs__l {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.dl-tabs__l button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-bottom: -1px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.dl-tabs__l button[aria-pressed="true"] {
  border-bottom-color: #9adbe6;
  color: var(--text);
}

.dl-tabs__l span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--tint-05);
  font-size: 11px;
  font-weight: 800;
}

.dl-tabs__l [aria-pressed="true"] span { background: color-mix(in oklab, var(--accent-fg) 18%, transparent); }

.dl-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--raised-3);
}

.dl-tabs .dl-seg {
  margin-bottom: 8px;
  margin-left: auto;
}

.dl-seg button {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.dl-seg button[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.dl-seg--sm button {
  height: 26px;
  padding: 0 10px;
}

/* Filter bar */
.dl-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 8px;
}

.dl-search {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--dl-bd);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--muted);
}

.dl-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}

.dl-pw { position: relative; }
.dl-pw--r { margin-left: auto; }

.dl-fb {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--dl-bd);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.dl-fb.is-set {
  border-color: color-mix(in oklab, var(--accent-fg) 50%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 10%, transparent);
}

.dl-clear {
  height: 36px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.dl-page .dl-pop,
.dl-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: var(--dl-pop);
  box-shadow: 0 18px 40px var(--shade-45);
  list-style: none;
}

[data-theme="light"] .dl-pop { border-color: rgba(20, 30, 50, .12); }

.dl-pop--r {
  right: 0;
  left: auto;
  min-width: 210px;
}

.dl-pop.dl-pop--fixed {
  position: fixed;
  top: auto;
  z-index: 45;
  min-width: 190px;
  border-radius: 14px;
}

.dl-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.dl-opt:hover { background: var(--tint-05); }

.dl-opt__ck {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--dl-ckbd);
  border-radius: 5px;
  color: #11131a;
}

.dl-opt__ck svg { opacity: 0; }

.dl-opt__ck.is-on {
  border-color: transparent;
  background: #9adbe6;
}

.dl-opt__ck.is-on svg { opacity: 1; }

.dl-opt__n {
  margin-left: auto;
  padding-left: 12px;
  color: var(--muted-2);
  font-size: 11.5px;
}

.dl-opt__mk {
  margin-left: auto;
  padding-left: 10px;
  color: var(--accent-fg);
  font-weight: 800;
}

.dl-sw {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--tint-14);
}

.dl-sw::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform .2s;
}

.dl-sw.is-on { background: #9adbe6; }
.dl-sw.is-on::after { transform: translateX(12px); }

.dl-catch {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.dl-views {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 18px 12px;
}

.dl-views > span {
  margin-right: 4px;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.dl-views button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--dl-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.dl-views button[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--accent-fg) 50%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 12%, transparent);
  color: var(--text);
}

.dl-views button span {
  font-size: 11px;
  opacity: .6;
}

/* Bulk bar: light surface */
.dl-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 12px 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 16px;
  background: linear-gradient(140deg, #eef0f4, #d4d9e1 55%, #a8e6ef 140%);
  color: #11131a;
}

.dl-bulk b {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.dl-bb {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  color: #11131a;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.dl-bb--del {
  background: #11131a;
  color: #ff9d84;
}

.dl-bx {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 19, 26, .08);
  color: #11131a;
  cursor: pointer;
}

/* Table: rows on one grid template, two sticky columns */
.dl-scroll {
  max-height: 640px;
  overflow: auto;
  border-top: 1px solid var(--tint-06);
}

.dl-t,
.dl-t thead,
.dl-t tbody { display: block; }

.dl-t {
  border-spacing: 0;
  border-collapse: separate;
}

.dl-t thead {
  position: sticky;
  top: 0;
  z-index: 3;
}

.dl-t thead,
.dl-t tbody { grid-template-columns: inherit; }

.dl-t tr {
  display: grid;
  grid-template-columns: inherit;
  align-items: center;
}

.dl-t thead tr {
  height: 40px;
  border-bottom: 1px solid var(--tint-06);
  background: var(--dl-head);
}

.dl-t tbody tr {
  min-height: 58px;
  border-bottom: 1px solid var(--tint-05);
  background: var(--dl-row);
  cursor: pointer;
}

.dl-t.is-compact tbody tr { min-height: 40px; }
.dl-t tbody tr:hover { background: var(--dl-rowh); }

.dl-t tbody tr.is-sel,
.dl-t tbody tr.is-sel:hover { background: color-mix(in oklab, #9adbe6 8%, var(--dl-row)); }

.dl-t th,
.dl-t td {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-width: 0;
  padding: 0 12px;
  background: inherit;
}

.dl-t th { padding: 0; }

.dl-t .dl-c0 {
  position: sticky;
  left: 0;
  z-index: 2;
  justify-content: center;
  padding: 0;
}

.dl-t .dl-c1 {
  position: sticky;
  left: 44px;
  z-index: 2;
}

.dl-t thead .dl-c0,
.dl-t thead .dl-c1 { z-index: 4; }

.dl-t th button {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
  cursor: pointer;
}

.dl-t th.dl-r button { justify-content: flex-end; }
.dl-t th button.is-on { color: var(--text); }

.dl-t th button span {
  font-size: 10px;
  opacity: 0;
}

.dl-t th button.is-on span { opacity: 1; }
.dl-t .dl-r { justify-content: flex-end; }

.dl-ck {
  display: grid;
  flex-shrink: 0;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--dl-ckbd);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.dl-ck::before {
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311131a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  content: "";
  opacity: 0;
}

.dl-ck:indeterminate::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311131a' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }

.dl-ck:checked,
.dl-ck:indeterminate {
  border-color: transparent;
  background: #9adbe6;
}

.dl-ck:checked::before,
.dl-ck:indeterminate::before { opacity: 1; }

.dl-ck:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.dl-ent {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dl-ent__t {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dl-ent__t b,
.dl-ent__t span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-ent__t b {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
}

.dl-ent__t span {
  color: var(--muted);
  font-size: 11.5px;
}

.dl-t.is-compact .dl-ent__t span { display: none; }

.dl-st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--cf);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.dl-st::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.dl-own {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 3px 8px 3px 3px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.dl-own span {
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-st.is-ed,
.dl-own.is-ed { box-shadow: 0 0 0 2px #9adbe6; }

.dl-prog {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.dl-prog__t {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-06);
}

.dl-prog__t span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--c);
}

.dl-prog b {
  width: 34px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.dl-t td.dl-tx {
  display: block;
  align-self: center;
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-t td.dl-r.dl-tx { text-align: right; }
.dl-t td.is-strong { color: var(--text); }
.dl-t td.is-money { font-weight: 700; }
.dl-t td.is-late { color: var(--amt); }

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

.dl-more button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
}

.dl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 56px 20px;
  text-align: center;
}

.dl-empty b {
  color: var(--text-2);
  font-size: 16px;
  font-weight: 700;
}

.dl-empty span {
  color: var(--muted);
  font-size: 13.5px;
}

.dl-page .dl-empty p {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.dl-btn36 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--dl-bd);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.dl-btn36--light {
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 800;
}

.dl-btn36--del {
  margin-left: auto;
  padding: 0 15px;
  border-style: none;
  background: transparent;
  color: oklch(0.72 0.14 35);
}

.dl-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--tint-06);
  color: var(--muted);
  font-size: 12.5px;
}

.dl-foot > span { white-space: nowrap; }
.dl-foot .dl-foot__hint { color: var(--muted-2); white-space: normal; }

.dl-page .dl-pager {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.dl-arr {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 13.33px;
  border: 1px solid var(--dl-bd);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.dl-arr:disabled {
  cursor: default;
  opacity: .35;
}

.dl-pg {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.dl-pg[aria-current="page"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

/* ==========================================================================
   22zz19. Data List: record panel
   ========================================================================== */
.dl-ov {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(6, 7, 11, .55);
}

.dl-page[data-wide] .dl-ov { display: none; }

.dl-pn {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 81;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card-from);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.dl-page[data-wide] .dl-pn {
  position: sticky;
  right: auto;
  bottom: auto;
  z-index: 1;
  width: auto;
  max-height: calc(100vh - 24px);
  box-shadow: none;
}

.dl-pn__hd {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding: 18px;
  background: linear-gradient(140deg, #eef0f4, #d4d9e1 55%, #a8e6ef 140%);
  color: #11131a;
}

.dl-pn__hd::before {
  position: absolute;
  top: -70px;
  right: -50px;
  width: 200px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.dl-pn__hd > * { position: relative; }

.dl-pn__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.dl-pn__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dl-pn__t b {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.dl-pn__t span {
  overflow: hidden;
  color: #3a4150;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-pn__x {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  color: #11131a;
  cursor: pointer;
}

.dl-pn__st {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dl-pn__st > span:last-child {
  color: #3a4150;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.dl-pn__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #11131a;
  color: var(--c);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.dl-pn__pill::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.dl-page .dl-pn__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.dl-pn__stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
}

.dl-pn__stats b,
.dl-pn__stats span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-pn__stats b {
  font-size: 15px;
  font-weight: 800;
}

.dl-pn__stats span {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 700;
}

.dl-pn__b {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  padding: 16px 18px;
  overflow-y: auto;
}

.dl-pn__g {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dl-pn__g h2 {
  display: flex;
  align-items: baseline;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.dl-pn__g h2 span {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
}

.dl-pn__dl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0 0;
}

.dl-pn__dl div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.dl-pn__dl dt {
  flex-shrink: 0;
  width: 96px;
  color: var(--muted);
}

.dl-pn__dl dd {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-page .dl-pn__rel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dl-rel {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--tint-06);
  border-radius: 12px;
  background: var(--tint-02);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dl-rel:hover { border-color: var(--tint-14); }

.dl-rel__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dl-rel__t b,
.dl-rel__t span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-rel__t b {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.dl-rel__t span {
  color: var(--muted);
  font-size: 11.5px;
}

.dl-pn__none {
  color: var(--muted-2);
  font-size: 12.5px;
}

.dl-page .dl-pn__act {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.dl-pn__act li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.4;
}

.dl-pn__act .dl-dot { margin-top: 5px; }
.dl-pn__act li > span:last-child span { color: var(--muted-2); }

.dl-pn__f {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--tint-06);
}

/* ==========================================================================
   22zz20. Form: header, section cards, fields, side column, action bar
   ========================================================================== */
.fo-page,
.fo-dlg {
  --fo-bd: rgba(255, 255, 255, .1);
  --fo-ckbd: rgba(255, 255, 255, .22);
  --fo-co: oklch(0.72 0.14 35);
  --fo-gr: oklch(0.8 0.14 155);
}

[data-theme="light"] .fo-page,
[data-theme="light"] .fo-dlg {
  --fo-bd: var(--tint-09);
  --fo-ckbd: rgba(20, 30, 50, .12);
  --fo-co: oklch(0.56 0.16 35);
  --fo-gr: oklch(0.52 0.14 155);
}

.fo-page p,
.fo-page h1,
.fo-page h2,
.fo-dlg p,
.fo-dlg h2 { margin: 0; }

.fo-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fo-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fo-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.fo-av24,
.fo-av32 {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.fo-av24 { width: 24px; height: 24px; }
.fo-av32 { width: 32px; height: 32px; }

/* Header */
.fo-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin-bottom: 4px;
  padding-left: 10px;
}

/* The prototype keeps an empty row under the title when editing. */
.fo-head.is-edit { padding-bottom: 8px; }

.fo-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.fo-crumbs a {
  color: var(--accent-fg);
  font-weight: 700;
  text-decoration: none;
}

.fo-crumbs__now { color: var(--text-2); }

.fo-page .fo-h1 {
  overflow: hidden;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fo-seg {
  display: flex;
  align-self: flex-start;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--raised-3);
}

.fo-seg button {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.fo-seg button[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.fo-seg--cur { padding: 4px; }

.fo-seg--cur button {
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
}

.fo-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 40%, transparent);
  border-radius: 16px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 10%, transparent);
  color: var(--text);
  font-size: 13.5px;
}

.fo-banner span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
}

/* Grid: form + side column */
.fo-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.fo-page[data-two] .fo-main { grid-template-columns: minmax(0, 1fr) 320px; }

.fo-secs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Section cards */
.fo-sec {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  scroll-margin-top: 16px;
}

.fo-sec__h {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fo-num {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--tint-05);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
}

.fo-num.is-done {
  background: color-mix(in oklab, oklch(0.8 0.14 155) 20%, transparent);
  color: var(--fo-gr);
}

.fo-sec__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fo-page .fo-sec__t h2 {
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
}

.fo-sec__t p {
  color: var(--muted);
  font-size: 12.5px;
}

.fo-sec__err {
  margin-left: auto;
  color: var(--fo-co);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.fo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.fo-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.fo-field.is-full { grid-column: 1 / -1; }

.fo-lab__row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.fo-lab {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.fo-req {
  margin-left: 6px;
  color: var(--fo-co);
  font-size: 16px;
  letter-spacing: 0;
}

.fo-hint {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 11.5px;
}

.fo-err {
  color: var(--fo-co);
  font-size: 12.5px;
  font-weight: 600;
}

.fo-in {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--fo-bd);
  border-radius: 14px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  color-scheme: dark;
  font-size: 14px;
}

[data-theme="light"] .fo-in,
[data-theme="light"] .fo-money input { color-scheme: light; }

.fo-in:focus,
.fo-money:focus-within,
.fo-tags:focus-within { border-color: rgba(154, 219, 230, .55); }

.fo-in.is-bad,
.fo-money.is-bad { border-color: var(--fo-co); }

.fo-in option {
  background: var(--card-from);
  color: var(--text);
}

.fo-in--sm {
  height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 13.5px;
}

.fo-area {
  height: auto;
  min-height: 110px;
  padding: 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
}

.fo-money {
  display: flex;
  align-items: center;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--fo-bd);
  border-radius: 14px;
  background: var(--tint-03);
}

.fo-money span {
  padding: 0 12px 0 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.fo-money input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  color-scheme: dark;
  font-size: 14px;
}

.fo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fo-chip,
.fo-own {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--fo-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.fo-chip {
  height: 38px;
  padding: 0 14px;
}

.fo-chip span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}

.fo-chip[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--c) 60%, transparent);
  background: color-mix(in oklab, var(--c) 14%, transparent);
}

.fo-own {
  height: 42px;
  padding: 0 14px 0 5px;
  opacity: .65;
}

.fo-own[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--accent-fg) 55%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 10%, transparent);
  opacity: 1;
}

.fo-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 5px 6px;
  border: 1px solid var(--fo-bd);
  border-radius: 14px;
  background: var(--tint-03);
}

.fo-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 6px 0 12px;
  border-radius: 10px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.fo-tag button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint-08);
  color: var(--text-2);
  cursor: pointer;
}

.fo-tags input {
  flex: 1;
  min-width: 140px;
  height: 30px;
  padding: 0 6px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
}

.fo-range {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
}

.fo-range input {
  flex: 1;
  accent-color: #9adbe6;
}

.fo-range b {
  width: 48px;
  font-size: 15px;
  font-weight: 800;
  text-align: right;
}

.fo-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fo-logo__drop {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: repeating-linear-gradient(-45deg, var(--tint-05) 0 7px, transparent 7px 14px);
  color: var(--muted);
  cursor: pointer;
}

.fo-logo__drop:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.fo-logo__drop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fo-logo__t {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.fo-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

/* Contacts rows */
.fo-cts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fo-ct {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .9fr) 34px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
}

.fo-ct.is-pri {
  border-color: color-mix(in oklab, var(--accent-fg) 40%, transparent);
  background: color-mix(in oklab, var(--accent-fg) 6%, transparent);
}

.fo-page[data-narrow] .fo-ct { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 34px; }
.fo-page[data-narrow] .fo-ct__role { grid-column: 2 / 4; }

.fo-page[data-narrow] .fo-ct__rm {
  grid-row: 1;
  grid-column: 4;
}

.fo-ct__pri {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--fo-ckbd);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.fo-ct__pri span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.fo-ct__pri[aria-pressed="true"] { border-color: #9adbe6; }
.fo-ct__pri[aria-pressed="true"] span { background: #9adbe6; }

.fo-ct__rm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.fo-ct__rm:hover { color: var(--fo-co); }

.fo-cts__add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.fo-cts__add button {
  height: 38px;
  padding: 0 14px;
  border: 1.5px dashed rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

[data-theme="light"] .fo-cts__add button { border-color: rgba(20, 30, 50, .2); }

.fo-cts__add span {
  color: var(--muted-2);
  font-size: 12px;
}

/* Side column */
.fo-side {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
  gap: 16px;
  min-width: 0;
  order: -1;
}

.fo-page[data-two] .fo-side {
  position: sticky;
  top: 12px;
  grid-template-columns: minmax(0, 1fr);
  order: 0;
}

.fo-pv {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  padding: 18px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  background: linear-gradient(140deg, #eef0f4, #d4d9e1 55%, #a8e6ef 140%);
  color: #11131a;
}

.fo-pv::before {
  position: absolute;
  top: -70px;
  right: -50px;
  width: 200px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.fo-pv > * { position: relative; }

.fo-page .fo-pv__k {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.fo-pv__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fo-pv__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 14px;
  color: #11131a;
  font-size: 16px;
  font-weight: 800;
  object-fit: cover;
}

.fo-pv__logo.is-round { border-radius: 50%; }

.fo-pv__t {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fo-pv__t b,
.fo-pv__t span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fo-pv__t b {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.fo-pv__t span {
  color: #3a4150;
  font-size: 12.5px;
}

.fo-pv__st {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fo-pv__st > span:last-child {
  color: #3a4150;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.fo-pv__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #11131a;
  color: var(--c);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.fo-pv__pill::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.fo-page .fo-pv__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.fo-pv__stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
}

.fo-pv__stats b,
.fo-pv__stats span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fo-pv__stats b {
  font-size: 15px;
  font-weight: 800;
}

.fo-pv__stats span {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 700;
}

.fo-page .fo-pv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fo-pv__tags li {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: rgba(17, 19, 26, .08);
  font-size: 11px;
  font-weight: 700;
}

.fo-cmp,
.fo-hist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.fo-cmp__h {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.fo-page .fo-cmp__h h2 {
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
}

.fo-cmp__h span {
  margin-left: auto;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 800;
}

.fo-cmp__h .is-done { color: var(--fo-gr); }

.fo-cmp__bar {
  display: flex;
  gap: 4px;
}

.fo-cmp__bar span {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--tint-08);
}

.fo-cmp__bar .is-done { background: oklch(0.8 0.14 155); }
.fo-cmp__bar .is-bad { background: oklch(0.72 0.14 35); }

.fo-page .fo-cmp__l {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fo-cmp__r {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  color: var(--text-2);
  text-decoration: none;
}

.fo-cmp__r:hover { background: var(--tint-03); }

.fo-cmp__ck {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--fo-ckbd);
  border-radius: 7px;
  color: #11131a;
}

.fo-cmp__ck svg { opacity: 0; }

.fo-cmp__r > span:nth-child(2) {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
}

.fo-cmp__r b {
  color: var(--muted-2);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.fo-cmp__r.is-done { color: var(--text); }

.fo-cmp__r.is-done .fo-cmp__ck {
  border-color: transparent;
  background: oklch(0.8 0.14 155);
}

.fo-cmp__r.is-done .fo-cmp__ck svg { opacity: 1; }
.fo-cmp__r.is-done b { color: var(--fo-gr); }
.fo-cmp__r.is-bad .fo-cmp__ck { border-color: var(--fo-co); }
.fo-cmp__r.is-bad b { color: var(--fo-co); }

.fo-hist h2 {
  font-size: 15px;
  font-weight: 700;
}

.fo-page .fo-hist ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fo-hist li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.fo-hist li > span span { color: var(--muted-2); }

.fo-del {
  align-self: flex-start;
  height: 36px;
  margin-top: 4px;
  padding: 0 14px;
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 40%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--fo-co);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* Sticky action bar: dark glass when clean, light while dirty */
.fo-bar {
  position: sticky;
  bottom: 16px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 4px;
  padding: 10px 10px 10px 20px;
  border: 1px solid var(--fo-bd);
  border-radius: 22px;
  background: color-mix(in oklab, var(--card-from) 92%, transparent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
  color: var(--text);
  backdrop-filter: blur(14px);
}

[data-theme="light"] .fo-bar { box-shadow: 0 18px 44px rgba(30, 45, 70, .16); }

.fo-bar.is-dirty {
  border-color: rgba(255, 255, 255, .9);
  background: linear-gradient(140deg, rgba(238, 240, 244, .97), rgba(212, 217, 225, .97) 55%, rgba(168, 230, 239, .97) 140%);
  color: #11131a;
}

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

.fo-bar__dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  box-shadow: 0 0 0 4px color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
}

.fo-bar__dot.is-dirty {
  background: oklch(0.8 0.13 70);
  box-shadow: 0 0 0 4px color-mix(in oklab, oklch(0.8 0.13 70) 30%, transparent);
}

.fo-bar__dot.is-bad {
  background: oklch(0.72 0.14 35);
  box-shadow: 0 0 0 4px color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
}

.fo-bar__s > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.fo-bar__s b {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.fo-bar__s > span:last-child span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .7;
}

.fo-page .fo-bar__a {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.fo-bb {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

[data-theme="light"] .fo-bb { border-color: rgba(20, 30, 50, .14); }
.fo-bb--soft { background: var(--tint-04); }

.fo-bb--main {
  padding: 0 24px;
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 14.5px;
  font-weight: 800;
}

.fo-bar.is-dirty .fo-bb { border-color: rgba(17, 19, 26, .18); }
.fo-bar.is-dirty .fo-bb--soft { background: rgba(255, 255, 255, .6); }

.fo-bar.is-dirty .fo-bb--main {
  background: #11131a;
  color: #eef0f5;
}

/* Confirm dialog */
.fo-ov {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(6, 7, 11, .55);
}

.fo-dlg {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 81;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(420px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--fo-bd);
  border-radius: 24px;
  background: var(--card-from);
  box-shadow: 0 30px 80px var(--shade-45);
  transform: translate(-50%, -50%);
}

.fo-dlg h2 {
  font-size: 19px;
  font-weight: 700;
}

.fo-dlg > p:not(.fo-dlg__a) {
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.5;
}

.fo-dlg .fo-dlg__a {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.fo-dlg .fo-bb {
  height: 40px;
  padding: 0 16px;
  color: var(--text-2);
  font-size: 13.5px;
}

.fo-dlg .fo-bb--co {
  border: 0;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-weight: 800;
}

/* ==========================================================================
   22zz21. Users List: stats, seats, table cells, invite dialog
   The table, filters, popovers and pager are the Data List ones (dl-*).
   ========================================================================== */
.ul-c--cy { --c: #9adbe6; }
.ul-c--vi { --c: oklch(0.78 0.11 300); }
.ul-c--gr { --c: oklch(0.8 0.14 155); }
.ul-c--mu { --c: #8a8f9e; }
.ul-c--gd { --c: #c99a4e; }

[data-theme="light"] .ul-c--cy { --c: #2b8a99; }
[data-theme="light"] .ul-c--mu { --c: #6b7080; }

.dl-page.ul-page { gap: 18px; }

.ul-cap {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

/* Stats and seats */
.ul-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.ul-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.ul-stat,
.ul-seats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 104px;
  padding: 18px 20px;
}

.ul-stat b,
.ul-seats__v b {
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
}

.ul-stat > span {
  color: var(--muted);
  font-size: 13px;
}

.ul-stat > span.is-gr { color: oklch(0.8 0.14 155); }
.ul-stat > span.is-cy { color: var(--accent-fg); }
[data-theme="light"] .ul-stat > span.is-gr { color: oklch(0.52 0.14 155); }

.ul-seats {
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  background: linear-gradient(140deg, #eef0f4, #d4d9e1 55%, #a8e6ef 140%);
  color: #11131a;
  text-align: left;
  cursor: pointer;
}

.ul-seats::before {
  position: absolute;
  top: -60px;
  right: -40px;
  width: 170px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.ul-seats > span { position: relative; }
.ul-seats .ul-cap { color: #4b5263; }

.ul-seats__v {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ul-seats__v span {
  color: #4b5263;
  font-size: 15px;
  font-weight: 700;
}

.ul-seats .ul-seats__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 19, 26, .1);
}

.ul-seats__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #11131a;
}

.ul-seats.is-low .ul-seats__bar span { background: #a8700c; }
.ul-seats.is-full .ul-seats__bar span { background: #b2482c; }

.ul-seats__sub {
  color: #3a4150;
  font-size: 12.5px;
  font-weight: 700;
}

.dl-page .ul-full {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid color-mix(in oklab, oklch(0.8 0.13 70) 40%, transparent);
  border-radius: 16px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 10%, transparent);
  font-size: 13.5px;
}

.ul-full > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
}

.ul-full button {
  height: 32px;
  margin-left: auto;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

/* Table cells */
.dl-bar.ul-bar { padding: 14px 18px; }
.dl-scroll.ul-scroll { max-height: none; }
.dl-t.ul-t th button span { font-size: 9px; }

.dl-t.ul-t {
  min-width: 980px;
  grid-template-columns: 44px minmax(260px, 1.6fr) 150px 140px 120px 110px 150px 52px;
}

.dl-t.ul-t tbody tr {
  min-height: 60px;
  cursor: default;
}

.dl-t.ul-t tbody tr.is-off { opacity: .6; }
.dl-ck:disabled {
  cursor: not-allowed;
  opacity: .3;
}

.ul-th {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
}

.ul-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.ul-av {
  position: relative;
  display: flex;
  flex-shrink: 0;
}

.ul-av38 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.ul-ini {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
}

.ul-av.is-online::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--dl-row);
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  content: "";
}

.ul-user__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ul-user__t > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ul-user__t b {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ul-user__t > span:last-child {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ul-you {
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--tint-08);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 800;
}

.ul-role {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--dl-bd);
  border-radius: 10px;
  background: color-mix(in oklab, var(--c) 10%, transparent);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ul-role svg { opacity: .55; }
.ul-role.is-open { border-color: #9adbe6; }
.ul-role.is-fixed { cursor: default; }

.ul-team {
  color: var(--text-2);
  font-size: 13px;
}

.ul-guest {
  overflow: hidden;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f6e2b0, #c99a4e);
  color: #3a2a0c;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ul-st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--cf);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ul-st::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.ul-fa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ul-fa.is-on {
  background: color-mix(in oklab, oklch(0.8 0.14 155) 12%, transparent);
  color: oklch(0.8 0.14 155);
}

.ul-fa.is-off {
  background: color-mix(in oklab, oklch(0.8 0.13 70) 14%, transparent);
  color: oklch(0.8 0.13 70);
}

[data-theme="light"] .ul-fa.is-on { color: oklch(0.52 0.14 155); }
[data-theme="light"] .ul-fa.is-off { color: oklch(0.55 0.13 70); }
.ul-fa.is-none { color: var(--muted); }

.ul-last {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ul-last b,
.ul-last span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ul-last b {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.ul-last span {
  color: var(--muted-2);
  font-size: 11.5px;
}

.ul-last.is-inv b { color: var(--accent-fg); }
.ul-last.is-now b { color: oklch(0.8 0.14 155); }
.ul-last.is-old b { color: var(--amt); }
[data-theme="light"] .ul-last.is-now b { color: oklch(0.52 0.14 155); }

.dl-t.ul-t .dl-more button {
  width: 32px;
  height: 32px;
  color: var(--text-2);
}

.dl-t.ul-t .dl-more button:hover,
.dl-t.ul-t .dl-more button.is-open { background: var(--tint-08); }

/* Row popovers */
.dl-pop.ul-pop { min-width: 230px; }

.dl-opt.ul-opt {
  min-height: 36px;
  height: auto;
  padding: 6px 10px;
  gap: 10px;
}

.ul-opt__t {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ul-opt__t b {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.ul-opt__t span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  white-space: normal;
}

.dl-opt.ul-danger { color: oklch(0.72 0.14 35); }
[data-theme="light"] .dl-opt.ul-danger { color: oklch(0.56 0.16 35); }

/* Invite dialog */
.ul-inv {
  --dl-bd: rgba(255, 255, 255, .1);
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 81;
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border: 1px solid var(--dl-bd);
  border-radius: 26px;
  background: var(--card-from);
  box-shadow: 0 30px 80px var(--shade-45);
  transform: translate(-50%, -50%);
}

[data-theme="light"] .ul-inv { --dl-bd: var(--tint-09); }

.ul-inv p,
.ul-inv h2 { margin: 0; }

.ul-inv__h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 0;
}

.ul-inv__h h2 {
  font-size: 20px;
  font-weight: 700;
}

.ul-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--dl-bd);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.ul-inv__b {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px;
}

.ul-f {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ul-inv .ul-cap { color: var(--muted-2); }

.ul-in {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--dl-bd);
  border-radius: 14px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  color-scheme: dark;
  font-size: 14px;
}

[data-theme="light"] .ul-in { color-scheme: light; }
.ul-in:focus { border-color: rgba(154, 219, 230, .55); }

.ul-in option {
  background: var(--card-from);
  color: var(--text);
}

.ul-area {
  height: auto;
  min-height: 64px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.ul-in.is-bad { border-color: oklch(0.72 0.14 35); }

.ul-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ul-chips span {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  font-size: 12px;
  font-weight: 700;
}

.ul-chips span.is-bad {
  background: color-mix(in oklab, oklch(0.72 0.14 35) 16%, transparent);
  color: oklch(0.72 0.14 35);
}

.ul-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.ul-rc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--dl-bd);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.ul-rc b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
}

.ul-rc > span {
  color: var(--muted);
  font-size: 11.5px;
}

.ul-rc[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--c) 60%, transparent);
  background: color-mix(in oklab, var(--c) 12%, transparent);
}

.ul-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--tint-07);
  border-radius: 14px;
  background: var(--tint-03);
  color: var(--text-2);
  font-size: 13px;
}

.ul-hint span {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
}

.ul-hint.is-over {
  border-color: color-mix(in oklab, oklch(0.8 0.13 70) 40%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.13 70) 10%, transparent);
}

.ul-hint.is-over span { background: oklch(0.8 0.13 70); }
.ul-hint.is-guest span { background: #c99a4e; }

.ul-inv__f {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--tint-06);
}

.ul-inv__f .dl-btn36 {
  height: 40px;
  padding: 0 16px;
  font-size: 13.5px;
}

.ul-inv__f .dl-btn36--light { padding: 0 18px; }
.ul-inv__f .is-dim { opacity: .45; }

/* ==========================================================================
   22zz22. User Account: header, person card, sections, danger zone
   Fields, the action bar and the dialog are the Form ones (fo-*).
   ========================================================================== */
.ua-page {
  --dl-bd: var(--fo-bd);
  --ua-node: #171a23;
}

[data-theme="light"] .ua-page { --ua-node: #ffffff; }

/* Colour pairs: --c on dark surfaces, --dk on the light card */
.ua-c--cy { --c: #9adbe6; --dk: #2b8a99; }
.ua-c--vi { --c: oklch(0.78 0.11 300); --dk: #7a55b5; }
.ua-c--gr { --c: oklch(0.8 0.14 155); --dk: #2f8a55; }
.ua-c--mu { --c: #8a8f9e; --dk: #5b6272; }
.ua-c--gd { --c: #c99a4e; --dk: #a3782f; }
.ua-c--am { --c: oklch(0.8 0.13 70); --dk: #a8700c; }
.ua-c--co { --c: oklch(0.72 0.14 35); --dk: #b2482c; }

.ua-page ul,
.ua-page ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a.fo-bb { text-decoration: none; }
.fo-bb.is-dim { opacity: .45; }

/* Header and tabs */
.ua-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
  padding-left: 10px;
}

.ua-head__t {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.ua-page .ua-head__t h1 { line-height: 1.05; }

.ua-head__t p {
  padding-bottom: 6px;
  color: var(--text-3);
  font-size: 16px;
}

.ua-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--tint-06);
}

.ua-tabs button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-bottom: -1px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ua-tabs button[aria-current="page"] {
  border-bottom-color: #9adbe6;
  color: var(--text);
  cursor: default;
}

/* Grid */
.ua-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.ua-page[data-two] .ua-grid { grid-template-columns: 320px minmax(0, 1fr); }

.ua-page[data-two] .ua-pc {
  position: sticky;
  top: 12px;
}

/* Person card: light surface in both themes */
.ua-pc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  padding: 24px 18px 18px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 28px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
  text-align: center;
}

.ua-pc::before {
  position: absolute;
  top: -90px;
  left: 50%;
  width: 300px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .75), transparent 70%);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.ua-pc > * { position: relative; }

.ua-pc__av {
  display: flex;
  width: 108px;
  height: 108px;
  border: 4px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(17, 19, 26, .2);
}

.ua-av108 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.ua-ini {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #11131a;
  font-size: 36px;
  font-weight: 800;
}

.ua-pc__dot {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 16px;
  height: 16px;
  border: 3px solid #eef0f4;
  border-radius: 50%;
  background: #8a8f9e;
}

.ua-pc__dot.is-on { background: #2f8a55; }
.ua-pc__dot.is-off { background: #b2482c; }

.ua-pc .ua-pc__n {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}

.ua-page .ua-pc__n h2 {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
}

.ua-page .ua-pc__n p {
  color: #3a4150;
  font-size: 13px;
  font-weight: 600;
}

.ua-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.ua-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ua-pill .dl-dot {
  width: 6px;
  height: 6px;
  background: var(--dk);
}

.ua-pill--dark {
  background: #11131a;
  color: var(--c);
}

.ua-pill--dark::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.ua-page .ua-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: stretch;
  gap: 6px;
}

.ua-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 10px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .65);
}

.ua-stats b,
.ua-stats span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ua-stats b {
  font-size: 18px;
  font-weight: 800;
}

.ua-stats span {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 700;
}

.ua-stats em {
  color: #2f8a55;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}

.ua-now {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #11131a;
  color: #eef0f5;
  text-align: left;
}

.ua-now > b {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}

.ua-now p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ua-now p > span:first-child {
  overflow: hidden;
  color: #8a8f9e;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ua-now__av {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.ua-now__av::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.ua-now__av.is-gr { color: oklch(0.8 0.14 155); }
.ua-now__av.is-am { color: oklch(0.8 0.13 70); }
.ua-now__av.is-co { color: oklch(0.72 0.14 35); }
.ua-now__av.is-mu { color: #8a8f9e; }

.ua-now__h {
  margin-left: auto;
  color: #a7abb8;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}

.ua-pc .ua-quote {
  align-self: stretch;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .55);
  color: #3a4150;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.ua-tile {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .55);
  text-align: left;
}

.ua-tile__h {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ua-tile__h > span:first-child {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ua-tile__n {
  margin-left: auto;
  color: #2b8a99;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ua-page .ua-rows,
.ua-page .ua-pj {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ua-rows li,
.ua-pj li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
}

.ua-rows svg { flex-shrink: 0; }

.ua-rows a,
.ua-rows li > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ua-rows a:hover { text-decoration: underline; }

.ua-rows em {
  color: #4b5263;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.ua-sec b {
  font-weight: 700;
  white-space: nowrap;
}

.ua-sec em {
  margin-left: auto;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
}

.ua-sec .is-gr { color: #2f8a55; }
.ua-sec .is-am { color: #a8700c; }

.ua-pj__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #11131a;
  font-size: 11px;
  font-weight: 800;
}

.ua-pj__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ua-pj__t b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ua-pj__t > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3a4150;
  font-size: 11px;
  font-weight: 800;
}

.ua-pj__bar {
  flex: 1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 19, 26, .1);
}

.ua-pj__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #11131a;
}

.ua-pj .dl-dot { background: var(--dk); }

.ua-page .ua-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ua-skills li {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 9px;
  background: rgba(17, 19, 26, .07);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ua-pc .ua-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: stretch;
  gap: 6px;
}

.ua-msg {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: 15px;
  background: #11131a;
  box-shadow: 0 10px 22px rgba(17, 19, 26, .25);
  color: #eef0f5;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.ua-soft,
.ua-ghost {
  height: 38px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ua-soft {
  border: 0;
  background: rgba(255, 255, 255, .75);
  color: #11131a;
}

.ua-ghost {
  border: 1px solid rgba(17, 19, 26, .15);
  background: transparent;
}

.ua-ghost.is-co { color: #b2482c; }
.ua-ghost.is-gr { color: #2f8a55; }

/* Right column */
.ua-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.fo-logo__drop.ua-photo { border-radius: 50%; }
.ua-page .fo-logo { gap: 16px; }

/* Label and asterisk sit side by side at the top, as in the design. */
.ua-page .fo-lab {
  display: flex;
  gap: 5px;
}

.ua-page .fo-req { margin-left: 0; }
.fo-in.ua-about { min-height: 84px; }

.ua-page .ua-owner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, #9adbe6 30%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, #9adbe6 8%, transparent);
  color: var(--text-2);
  font-size: 13px;
}

.ua-owner svg {
  flex-shrink: 0;
  color: #9adbe6;
}

.ul-roles.ua-roles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.ua-roles .ul-rc {
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
}

.ua-roles .ul-rc b {
  gap: 8px;
  font-size: 14px;
}

.ua-roles .ul-rc .dl-dot {
  width: 9px;
  height: 9px;
}

.ua-roles .ul-rc > span {
  font-size: 12px;
  line-height: 1.4;
}

.ua-mark {
  margin-left: auto;
  color: var(--accent-fg);
  font-weight: 800;
}

.ua-page .fo-seg--cur button { height: 36px; }
.fo-seg button:disabled { cursor: default; }

.fo-hint.ua-hint {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}

.fo-own.ua-cl {
  height: 38px;
  opacity: .6;
}

.fo-own.ua-cl[aria-pressed="true"] { opacity: 1; }

.ua-cl__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #11131a;
  font-size: 10px;
  font-weight: 800;
}

/* Activity */
.fo-sec#ua-activity { gap: 14px; }
.ua-page .ua-af { margin-left: auto; }

.ua-page .ua-tl {
  display: flex;
  flex-direction: column;
}

.ua-tl li {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.ua-tl li::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 2px;
  background: var(--tint-06);
  content: "";
}

.ua-tl__dot {
  position: relative;
  justify-self: center;
  width: 12px;
  height: 12px;
  margin-top: 14px;
  border: 2.5px solid var(--c);
  border-radius: 50%;
  background: var(--ua-node);
}

.ua-tl p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 0;
}

.ua-tl b {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
}

.ua-tl p span {
  color: var(--muted);
  font-size: 12px;
}

.ua-tl__w {
  padding-top: 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ua-more {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--fo-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

/* Danger zone */
.ua-danger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 35%, transparent);
  border-radius: 24px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 5%, var(--card-to));
}

.ua-danger .fo-sec__h { padding-bottom: 8px; }

.fo-num.ua-dz__n {
  background: color-mix(in oklab, oklch(0.72 0.14 35) 18%, transparent);
  color: var(--fo-co);
  font-size: 14px;
  font-weight: 900;
}

.ua-page .ua-dz {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ua-dz li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--tint-06);
}

.ua-dz p {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ua-dz b {
  font-size: 14px;
  font-weight: 700;
}

.ua-dz p span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.ua-dz__b {
  height: 38px;
  padding: 0 16px;
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--fo-co);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.ua-dz__b.is-gr { color: var(--fo-gr); }

.ua-dz__b.is-solid {
  border-color: transparent;
  background: oklch(0.72 0.14 35);
  color: #11131a;
}

.ua-dz__b.is-off {
  cursor: not-allowed;
  opacity: .45;
}

/* ==========================================================================
   22zz23. User Security: score, sections, sessions, history, summary
   Header, pills, bar and dialog are the Account and Form ones.
   ========================================================================== */
.se-c--co { --dk: #b2482c; }
.se-c--am { --dk: #a8700c; }
.se-c--cy { --dk: #2b8a99; }
.se-c--gr { --dk: #2f8a55; }

.se-page {
  --se-gr: oklch(0.8 0.14 155);
  --se-am: oklch(0.8 0.13 70);
  --se-co: oklch(0.72 0.14 35);
  --se-off: #3a3f4d;
}

[data-theme="light"] .se-page {
  --se-gr: oklch(0.52 0.14 155);
  --se-am: oklch(0.55 0.13 70);
  --se-co: oklch(0.56 0.16 35);
  --se-off: #c9d0da;
}

.ua-tabs a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-bottom: -1px;
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.ua-tabs a:hover { color: var(--text-2); }

.se-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.se-page[data-two] .se-grid { grid-template-columns: minmax(0, 1fr) 300px; }

.se-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Score plaque: light in both themes */
.se-score {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  padding: 20px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.se-score::before {
  position: absolute;
  top: -90px;
  left: -60px;
  width: 320px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.se-score > * { position: relative; }

.se-score__a {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
}

.se-ring {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
}

.se-ring > span {
  position: absolute;
  inset: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef0f4;
  line-height: 1;
}

.se-ring b {
  font-size: 30px;
  font-weight: 700;
}

.se-ring > span span {
  margin-top: 4px;
  color: #4b5263;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.se-page .se-score__l {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.se-score__l span:first-child {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.se-page .se-score__l h2 {
  color: var(--dk);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.se-score__l span:last-child {
  color: #3a4150;
  font-size: 13px;
  font-weight: 600;
}

.se-page .se-checks {
  display: grid;
  flex: 1 1 320px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.se-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .85);
  color: #11131a;
  text-decoration: none;
}

.se-check.is-ok { background: rgba(255, 255, 255, .5); }

.se-check > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #c98a12;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.se-check.is-ok > span:first-child { background: #2f8a55; }

.se-check > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.se-check b,
.se-check > span:last-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-check b {
  font-size: 13px;
  font-weight: 800;
}

.se-check > span:last-child span {
  color: #a8700c;
  font-size: 11.5px;
  font-weight: 600;
}

.se-check.is-ok > span:last-child span { color: #4b5263; }

/* Section cards */
.se-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  scroll-margin-top: 16px;
}

#se-pass,
#se-2fa { gap: 16px; }

.se-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.se-h__i,
.se-ico {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--tint-05);
  color: var(--text-2);
}

.se-h__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
}

.se-page .se-h__t h2 {
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
}

.se-h__t p {
  color: var(--muted);
  font-size: 12.5px;
}

.se-btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--fo-bd);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.se-btn--co {
  border-color: color-mix(in oklab, oklch(0.72 0.14 35) 45%, transparent);
  background: transparent;
  color: var(--se-co);
}

.se-btn--sm {
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
}

.se-btn--44 { height: 44px; }
.se-btn.is-dim { opacity: .45; }

.se-state {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

.se-state::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.se-state.is-gr {
  background: color-mix(in oklab, oklch(0.8 0.14 155) 16%, transparent);
  color: var(--se-gr);
}

.se-state.is-am {
  background: color-mix(in oklab, oklch(0.8 0.13 70) 16%, transparent);
  color: var(--se-am);
}

.se-page .is-gr { color: var(--se-gr); }
.se-page .is-am { color: var(--se-am); }
.se-page .is-co { color: var(--se-co); }
.se-page .is-mu { color: var(--muted); }

/* Password */
.se-page .se-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.se-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-03);
}

.se-stats .ul-cap,
.se-pol .ul-cap,
.se-codes .ul-cap { color: var(--muted-2); }

.se-stats b {
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-stats li > span:last-child {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-pol {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.se-page .se-pol ul,
.se-page .se-nets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.se-pol li {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--tint-07);
  border-radius: 999px;
  background: var(--tint-04);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.se-pol li span {
  color: var(--se-gr);
  font-weight: 900;
}

.se-tog {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-02);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.se-tog__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.se-tog__t b {
  font-size: 14px;
  font-weight: 700;
}

.se-tog__t span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.se-tog__k {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--se-off);
  transition: background-color .2s;
}

.se-tog__k::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform .2s;
}

.se-tog[aria-checked="true"] .se-tog__k { background: #9adbe6; }
.se-tog[aria-checked="true"] .se-tog__k::after { transform: translateX(18px); }

/* Two-factor */
.se-warn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, oklch(0.8 0.13 70) 40%, transparent);
  border-radius: 16px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 10%, transparent);
}

.se-warn > span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
}

.se-page .se-warn p {
  flex: 1 1 220px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}

.se-warn button {
  flex-shrink: 0;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.se-page .se-methods,
.se-page .se-sess {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.se-page .se-sess { gap: 14px; }

.se-methods li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--tint-06);
  border-radius: 14px;
  background: var(--tint-02);
}

.se-methods li.is-off { opacity: .6; }
.se-methods .se-ico { width: 36px; height: 36px; }

.se-methods p,
.se-sess p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.se-methods b {
  font-size: 14px;
  font-weight: 700;
}

.se-methods p span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-tag {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.se-tag.is-on {
  background: var(--tint-06);
  color: var(--text-2);
}

.se-tag.is-pri {
  background: color-mix(in oklab, #9adbe6 18%, transparent);
  color: var(--accent-fg);
}

.se-codes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 14px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-03);
}

.se-codes__a {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.se-codes__a > p:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.se-codes__a b {
  font-size: 13px;
  font-weight: 800;
}

.se-page .se-codes__bar {
  display: flex;
  gap: 4px;
}

.se-codes__bar span {
  flex: 1;
  max-width: 26px;
  height: 8px;
  border-radius: 4px;
  background: var(--tint-08);
}

.se-codes__bar .is-gr { background: oklch(0.8 0.14 155); }
.se-codes__bar .is-am { background: oklch(0.8 0.13 70); }

.se-page .se-codes__b {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Sessions */
.se-sess li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-02);
}

.se-sess li.is-odd {
  border-color: color-mix(in oklab, oklch(0.8 0.13 70) 40%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.13 70) 7%, transparent);
}

.se-ico--42 {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.se-sess p { flex: 1 1 200px; gap: 3px; }

.se-sess p > span:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.se-sess b {
  font-size: 14px;
  font-weight: 700;
}

.se-sess p > span:last-child {
  color: var(--muted);
  font-size: 12.5px;
}

.se-odd {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 18%, transparent);
  color: var(--se-am);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.se-last {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

.se-last::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.se-last.is-now { color: var(--se-gr); }

.se-page .se-empty {
  padding: 22px;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 16px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}

[data-theme="light"] .se-page .se-empty { border-color: rgba(20, 30, 50, .16); }

/* History */
.se-page .se-hf {
  padding: 3px;
}

.se-hf button {
  height: 30px;
  font-size: 12.5px;
}

.se-scroll {
  margin: 0 -6px;
  overflow-x: auto;
}

.se-t,
.se-t thead,
.se-t tbody { display: block; }

.se-t {
  min-width: 640px;
  padding: 0 6px;
  border-collapse: separate;
  border-spacing: 0;
}

.se-t tr {
  display: grid;
  grid-template-columns: 120px minmax(140px, 1.2fr) minmax(110px, 1fr) minmax(120px, 1fr) 150px;
  align-items: center;
  gap: 12px;
}

.se-t thead tr {
  padding: 0 10px 8px;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.se-t th {
  padding: 0;
  font-weight: 800;
  text-align: left;
}

.se-t tbody tr {
  padding: 11px 10px;
  border-top: 1px solid var(--tint-05);
  font-size: 13px;
}

.se-t tbody tr.is-fail { background: color-mix(in oklab, oklch(0.72 0.14 35) 5%, transparent); }

.se-t td {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-t .se-t__w {
  color: var(--text-2);
  font-weight: 700;
}

.se-t td.se-t__p.is-odd {
  color: var(--se-am);
  font-weight: 800;
}

.se-t .se-t__m { color: var(--text-3); }

.se-t .se-t__p {
  color: var(--text-2);
  font-weight: 500;
}

.se-t td:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.se-res {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.se-res::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.se-res.is-gr { background: color-mix(in oklab, oklch(0.8 0.14 155) 14%, transparent); }
.se-res.is-co { background: color-mix(in oklab, oklch(0.72 0.14 35) 14%, transparent); }

.se-why {
  color: var(--muted);
  font-size: 11.5px;
}

/* Access rules */
.se-nets { padding-left: 4px; }

.se-nets li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in oklab, #9adbe6 30%, transparent);
  border-radius: 10px;
  background: color-mix(in oklab, #9adbe6 8%, transparent);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.se-nets b { color: var(--text); }

.se-guest {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 14px;
  border: 1px solid rgba(201, 154, 78, .32);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(246, 226, 176, .1), rgba(201, 154, 78, .05));
}

.se-guest .fo-field { flex: 1 1 200px; }

.se-guest__n {
  padding-bottom: 12px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.se-tmo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.se-page .se-tmo > p:first-child {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 2px;
}

.se-tmo b {
  font-size: 14px;
  font-weight: 700;
}

.se-tmo > p:first-child span {
  color: var(--muted);
  font-size: 12.5px;
}

.se-page .se-tmo .fo-seg--cur button {
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
}

/* Person summary: light surface */
.se-sum {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  order: -1;
  padding: 20px 16px 16px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.se-page[data-two] .se-sum {
  position: sticky;
  top: 12px;
  order: 0;
}

.se-sum::before {
  position: absolute;
  top: -80px;
  right: -60px;
  width: 240px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.se-sum > * { position: relative; }

.se-sum__top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.se-sum__av {
  display: flex;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border: 3px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
}

.se-av60 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 20px;
  object-fit: cover;
}

.se-page .se-sum__top p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.se-sum__top b,
.se-sum__top p span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-sum__top b {
  font-size: 17px;
  font-weight: 700;
}

.se-sum__top p span {
  color: #3a4150;
  font-size: 12.5px;
  font-weight: 600;
}

.ua-pills.se-pills { justify-content: flex-start; }

.se-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .55);
}

.se-rows div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
}

.se-rows dt {
  color: #3a4150;
  font-weight: 600;
  white-space: nowrap;
}

.se-rows dd {
  margin: 0 0 0 auto;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-page .se-rows .is-gr { color: #2f8a55; }
.se-page .se-rows .is-am { color: #a8700c; }
.se-page .se-rows .is-co { color: #b2482c; }

.se-page .se-sum__b {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.se-dark,
.se-light {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.se-dark {
  background: #11131a;
  color: #eef0f5;
}

.se-light {
  background: rgba(255, 255, 255, .75);
  color: #11131a;
  font-weight: 700;
}

/* ==========================================================================
   22zz24. User Billing: seat plaque, plan, compare, cards, invoices, spend
   Header, section chrome, table, bar and dialog are the Security ones.
   ========================================================================== */
/* Seat plaque: light in both themes, like the Security score */
.ub-seat {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  overflow: hidden;
  padding: 20px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.ub-seat::before {
  position: absolute;
  top: -90px;
  left: -60px;
  width: 320px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.ub-seat > * { position: relative; }

.ub-seat__who {
  display: flex;
  flex: 1 1 300px;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ub-seat__av {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
}

.ub-av64 {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.ub-seat__av .ua-ini { font-size: 21px; }

.ub-seat__who > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ub-page .ub-k {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ub-page .ub-seat h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}

.ub-page .ub-seat__who p:last-child {
  color: #3a4150;
  font-size: 13px;
  font-weight: 600;
}

.ub-page .ub-seat__st {
  display: grid;
  flex: 0 1 260px;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 6px;
}

.ub-seat__st li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .62);
}

.ub-seat__st b,
.ub-seat__st span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ub-seat__st b {
  font-size: 17px;
  font-weight: 800;
}

.ub-seat__st span {
  color: #4b5263;
  font-size: 11px;
  font-weight: 700;
}

.ub-seat__f {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(17, 19, 26, .08);
}

.ub-page .ub-seat__f > p:first-child {
  flex: 1 1 240px;
  padding-top: 8px;
  color: #3a4150;
  font-size: 12.5px;
  line-height: 1.45;
}

.ub-page .ub-seat__b {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
}

.ub-seat .ua-soft,
.ub-seat .ua-ghost { padding: 0 16px; }

.ub-page .ub-seat .ua-ghost.is-co { color: #b2482c; }
.ub-seat .is-dim { opacity: .45; }

/* Section cards */
.ub-card { gap: 16px; }
#ub-pay,
#ub-inv { gap: 14px; }

.se-state.is-co {
  background: color-mix(in oklab, oklch(0.72 0.14 35) 16%, transparent);
  color: var(--se-co);
}

.ub-co {
  border-color: color-mix(in oklab, oklch(0.72 0.14 35) 40%, transparent);
  background: color-mix(in oklab, oklch(0.72 0.14 35) 10%, transparent);
}

.ub-page .ub-co p { flex-basis: 240px; }
.ub-co strong { color: var(--text); }

.ub-light {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ub-page .se-warn .ub-light {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.ub-light:hover { color: var(--pill-fg); }

.ub-page .ub-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 24px;
}

.ub-plan p {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ub-page .ub-plan__a {
  flex: 1 1 220px;
  min-width: 0;
}

.ub-plan__a b {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
}

.ub-plan__a span {
  color: var(--text-3);
  font-size: 13.5px;
}

.ub-page .ub-plan__b { align-items: flex-end; }
.ub-plan__b .ul-cap { color: var(--muted-2); }

.ub-plan__b b {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.ub-plan__b > span:last-child {
  color: var(--muted);
  font-size: 12.5px;
}

.ub-seats .se-codes__a { flex-basis: 240px; }

.ub-bar {
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-08);
}

.ub-bar > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  background: currentColor;
}

.ub-bar--5 { height: 5px; }
.ub-bar.is-cy { color: #9adbe6; }

.ub-sub {
  color: var(--muted);
  font-size: 12px;
}

.ub-page .ub-seats .se-codes__b {
  align-items: center;
  flex-shrink: 0;
}

.ub-step {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--raised-3);
}

.ub-step button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.ub-step button:hover { background: var(--tint-06); }

.ub-step b {
  min-width: 34px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.ub-step .is-dim { opacity: .35; }

.ub-usage li { gap: 6px; }
.ub-page .ub-usage b { font-size: 16px; }

.ub-page .ub-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Compare plans */
.ub-cyc span {
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 22%, transparent);
  color: var(--se-gr);
  font-size: 10.5px;
  font-weight: 800;
}

.ub-page .ub-cyc button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
}

.ub-page .ub-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.ub-pc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1.5px solid var(--tint-07);
  border-radius: 20px;
  background: var(--tint-02);
}

.ub-pc.is-cur {
  border-color: color-mix(in oklab, #9adbe6 55%, transparent);
  background: color-mix(in oklab, #9adbe6 6%, transparent);
}

.ub-pc.is-sel {
  border-color: color-mix(in oklab, oklch(0.8 0.14 155) 60%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.14 155) 6%, transparent);
}

.ub-pc.is-small { opacity: .5; }

.ub-page .ub-pc__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ub-pc__h b {
  font-size: 17px;
  font-weight: 700;
}

.ub-tag {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ub-pc__h .ub-tag { margin-left: auto; }

.ub-page .ub-tag.is-cy {
  background: color-mix(in oklab, #9adbe6 18%, transparent);
  color: var(--accent-fg);
}

.ub-page .ub-tag.is-gr { background: color-mix(in oklab, oklch(0.8 0.14 155) 18%, transparent); }

.ub-page .ub-tag.is-mu {
  padding: 0 8px;
  background: var(--tint-06);
  color: var(--text-2);
}

.ub-page .ub-pc__p {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ub-pc__p b {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}

.ub-pc__p span {
  color: var(--muted);
  font-size: 12.5px;
}

.ub-page .ub-pc__w {
  min-height: 18px;
  color: var(--text-3);
  font-size: 12.5px;
}

.ub-page .ub-pc__f {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ub-pc__f li {
  display: flex;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.35;
}

.ub-pc__f span {
  color: var(--se-gr);
  font-weight: 900;
}

.ub-pc__b {
  height: 40px;
  margin-top: auto;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.ub-pc__b.is-off {
  border: 1px solid var(--fo-bd);
  background: transparent;
  color: var(--muted);
  cursor: default;
}

/* Payment method */
.ub-page .ub-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ub-cards li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-02);
}

.ub-cards li.is-soon { border-color: color-mix(in oklab, oklch(0.8 0.13 70) 40%, transparent); }

.ub-brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 36px;
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.ub-brand--visa { background: linear-gradient(135deg, #1a3a8f, #2b5fd9); }
.ub-brand--mc { background: linear-gradient(135deg, #d9452b, #f2a93b); }
.ub-brand--amex { background: linear-gradient(135deg, #0d6e8a, #2fa8c6); }

.ub-page .ub-cards li > p:nth-child(2) {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ub-cards li > p:nth-child(2) > span:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ub-cards li > p:nth-child(2) b {
  font-size: 14px;
  font-weight: 700;
}

.ub-cards li > p:nth-child(2) > span:last-child {
  color: var(--muted);
  font-size: 12.5px;
}

.ub-page .ub-cards li > p:nth-child(2) > span.is-am { color: var(--se-am); }

.ub-page .ub-cards__b {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ub-page .ub-ghost {
  border-color: transparent;
  background: none;
  color: var(--muted);
}

/* Invoices */
.ub-page .ub-if { padding: 4px; }
.ub-page .ub-if button { padding: 0 14px; }
.ub-t .se-res { width: max-content; }

.se-t.ub-t {
  position: relative;
  min-width: 600px;
}

.ub-t tr {
  grid-template-columns: minmax(104px, 1.1fr) minmax(84px, .9fr) minmax(110px, 1.2fr) minmax(72px, .8fr) 92px 86px;
}

.ub-page[data-inv-narrow] .se-t.ub-t { min-width: 420px; }

.ub-page[data-inv-narrow] .ub-t tr {
  grid-template-columns: minmax(96px, 1.1fr) minmax(76px, .9fr) minmax(64px, .8fr) 82px 80px;
}

.ub-page[data-inv-narrow] .ub-t .ub-t__per { display: none; }

.ub-page .se-t .ub-t__r { text-align: right; }

.ub-t .ub-t__no { font-weight: 700; }
.ub-t .ub-t__d { color: var(--text-2); }
.ub-t .ub-t__amt { font-weight: 800; }

.se-t.ub-t td:last-child {
  flex-direction: row;
  justify-content: flex-end;
}

.ub-pdf {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--fo-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.ub-pdf.is-pay {
  border: 0;
  background: oklch(0.72 0.14 35);
  color: #11131a;
}

/* Spend summary */
.ub-sum {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

.ub-page[data-two] .ub-sum {
  position: sticky;
  top: 12px;
}

.ub-page .ub-sum__h {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ub-sum__h .ul-cap { color: var(--muted-2); }

.ub-sum__h b {
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
}

.ub-sum__h > span:last-child {
  color: var(--muted);
  font-size: 12.5px;
}

.ub-page .ub-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 6px;
  height: 120px;
}

.ub-chart li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}

.ub-chart li span {
  width: 100%;
  border-radius: 7px;
  background: rgba(154, 219, 230, .35);
}

.ub-chart li.is-now span { background: #9adbe6; }

.ub-chart li.is-next span {
  border: 1.5px dashed color-mix(in oklab, #9adbe6 60%, transparent);
  background: color-mix(in oklab, #9adbe6 10%, transparent);
}

.ub-chart b {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
}

.ub-chart .is-now b { color: var(--accent-fg); }
.ub-chart .is-next b { color: var(--muted); }

.ub-page .ub-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-03);
}

.ub-rows div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.ub-rows dt {
  color: var(--text-3);
  white-space: nowrap;
}

.ub-rows dd {
  margin: 0 0 0 auto;
  font-weight: 800;
  white-space: nowrap;
}

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

/* Dialog: cyan confirm for seat changes, card fields */
.fo-dlg .fo-bb--co.ub-cy { background: #9adbe6; }
.fo-dlg .fo-bb--co.is-dim { opacity: .45; }

.ub-newcard {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* ==========================================================================
   22zz25. User Notifications: plaque, matrix, digest, quiet hours, preview
   Header, section chrome, devices, bar and dialog are the Security ones.
   ========================================================================== */
.un-c--vi { --un: oklch(0.78 0.11 300); }
.un-c--cy { --un: #9adbe6; }
.un-c--gr { --un: oklch(0.8 0.14 155); }
.un-c--am { --un: oklch(0.8 0.13 70); }
.un-c--gd { --un: #c99a4e; }
.un-c--co { --un: oklch(0.72 0.14 35); }
.un-c--mu { --un: #9aa3b0; }

/* Summary plaque: light in both themes, gold while paused */
.un-pl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  padding: 20px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.un-pl.is-paused { background: linear-gradient(160deg, #f6ecd6, #e8d3a6 60%, #d7b36a 160%); }

.un-pl::before {
  position: absolute;
  top: -90px;
  right: -60px;
  width: 320px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.un-pl.is-paused::before { background: radial-gradient(circle, rgba(246, 200, 110, .6), transparent 70%); }
.un-pl > * { position: relative; }

.un-pl__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
}

.un-pl__t {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.un-page .un-pl h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}

.un-page .un-pl__t p:last-child {
  color: #3a4150;
  font-size: 13px;
  font-weight: 600;
}

.un-page .un-pz {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .08);
}

.un-pz button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  color: #11131a;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.un-pz button:hover { background: #fff; }

.un-resume {
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #11131a;
  color: #eef0f5;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.un-page .un-chs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.un-ch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .35);
  color: #11131a;
  text-align: left;
  cursor: pointer;
}

.un-ch[aria-checked="true"] { background: rgba(255, 255, 255, .7); }

.un-ch__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(17, 19, 26, .08);
  color: #6b7080;
}

.un-ch[aria-checked="true"] .un-ch__i {
  background: #11131a;
  color: #9adbe6;
}

.un-ch__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.un-ch__t b {
  font-size: 14px;
  font-weight: 800;
}

.un-ch__t span {
  overflow: hidden;
  color: #4b5263;
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.un-ch__k {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .2);
  transition: background-color .2s;
}

.un-ch__k::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform .2s;
}

.un-ch[aria-checked="true"] .un-ch__k { background: #11131a; }
.un-ch[aria-checked="true"] .un-ch__k::after { transform: translateX(18px); }

/* Header switch: the Security knob on its own */
.un-sw {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.un-sw[aria-checked="true"] .se-tog__k { background: #9adbe6; }
.un-sw[aria-checked="true"] .se-tog__k::after { transform: translateX(18px); }

/* Matrix */
.un-card { gap: 14px; }
#un-dev { gap: 12px; }

.un-page .un-pre,
.un-page .un-dig {
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 4px;
}

.un-page .un-pre button {
  height: 30px;
  padding: 0 13px;
  font-size: 12.5px;
}

.un-page .un-dig button {
  height: 32px;
  padding: 0 13px;
  font-size: 12.5px;
}

.un-page .un-cols,
.un-ev {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 58px);
  align-items: center;
  gap: 6px;
}

.un-page .un-cols {
  padding: 0 12px;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.un-cols span:not(:first-child) { text-align: center; }
.un-page .un-cols .is-off { color: var(--b-4a4e5b, #4a4e5b); }
[data-theme="light"] .un-page .un-cols .is-off { color: #b0b6c0; }

.un-g {
  overflow: hidden;
  border: 1px solid var(--tint-06);
  border-radius: 18px;
  background: var(--tint-02);
}

.un-g__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--tint-05);
  background: var(--tint-03);
}

.un-g__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--un) 16%, transparent);
  color: var(--un);
}

.un-page .un-g__t {
  display: flex;
  flex: 1 1 160px;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.un-page .un-g__t h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: normal;
}

.un-g__t span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.un-lock {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--tint-05);
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.un-page .un-mode { padding: 3px; }

.un-page .un-mode button {
  height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
}

.un-ev {
  padding: 9px 12px;
  border-top: 1px solid transparent;
}

.un-ev + .un-ev { border-top-color: var(--tint-05); }

.un-page .un-ev > p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.un-ev > p > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.un-ev b,
.un-ev > p > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.un-ev b {
  font-size: 13.5px;
  font-weight: 600;
}

.un-ev > p > span:last-child {
  color: var(--muted-2);
  font-size: 11.5px;
}

.un-key {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 16%, transparent);
  color: var(--se-co);
  font-size: 10px;
  font-weight: 800;
}

.un-cell {
  display: flex;
  justify-content: center;
}

.un-cb {
  display: grid;
  place-content: center;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 1.5px solid var(--w12, rgba(255, 255, 255, .16));
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  transition: background-color .15s;
}

[data-theme="light"] .un-cb { border-color: rgba(20, 30, 50, .16); }

.un-cb::before {
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311131a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  content: "";
  opacity: 0;
}

.un-page .un-cb:checked {
  border-color: transparent;
  background: #9adbe6;
}

.un-page .un-cb.is-lock:checked {
  border-color: transparent;
  background: #9aa3b0;
}

.un-cb:checked::before { opacity: 1; }
.un-cb.is-lock { opacity: .75; cursor: not-allowed; }
.un-cb.is-off { opacity: .3; cursor: not-allowed; }

.un-cb:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Digest */
.un-page .un-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}

.un-page .un-f { gap: 8px; }
.un-f .fo-lab { color: var(--muted-2); }

.un-page .un-sel {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13.5px;
}

.un-page .un-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.un-days button {
  width: 44px;
  height: 40px;
  border: 1px solid var(--fo-bd);
  border-radius: 12px;
  background: transparent;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.un-days button[aria-pressed="true"] {
  border-color: #9adbe6;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--text);
}

.un-page .un-note {
  color: var(--muted);
  font-size: 12.5px;
}

.un-page .un-row .un-note { padding-bottom: 12px; }
.un-page #un-quiet .un-row { gap: 12px; }
.un-page #un-digest > .un-note { font-size: 13px; }

.un-mail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 18px;
  background: #f4f5f8;
  color: #11131a;
}

.un-page .un-mail__h {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.un-mail__h > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #11131a;
  color: #9adbe6;
  font-size: 13px;
  font-weight: 900;
}

.un-mail__h > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.un-mail__h b,
.un-mail__h > span:last-child span,
.un-mail__l li span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.un-mail__h b {
  font-size: 13.5px;
  font-weight: 800;
}

.un-mail__h > span:last-child span {
  color: #4b5263;
  font-size: 11.5px;
}

.un-page .un-mail__l {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 42px;
}

.un-mail__l li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #3a4150;
  font-size: 12.5px;
}

.un-mail__l li span:first-child {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--un);
}

/* Quiet hours */
.un-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.un-day.is-off { opacity: .4; }

.un-bar {
  position: relative;
  height: 40px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--tint-04);
}

.un-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(-45deg, rgba(186, 160, 230, .3) 0 6px, rgba(186, 160, 230, .16) 6px 12px);
}

.un-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: oklch(0.72 0.14 35);
}

.un-now__t {
  position: absolute;
  top: 4px;
  margin-left: 6px;
  color: var(--se-co);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.un-page .un-ticks {
  display: flex;
  justify-content: space-between;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 700;
}

/* Devices */
.un-page .un-devs { gap: 12px; }
.un-devs.is-off li { opacity: .5; }
.un-devs p:not(.un-devs__b) { flex: 1 1 200px; gap: 3px; }

.un-devs b {
  font-size: 14px;
  font-weight: 700;
}

.un-devs p span {
  color: var(--muted);
  font-size: 12.5px;
}

.un-page .un-devs .un-devs__b {
  flex: 0 0 auto;
  flex-direction: row;
  gap: 6px;
}

/* Preview column */
.un-see {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.un-page[data-two] .un-see {
  position: sticky;
  top: 12px;
}

.un-page .un-see__h {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.un-see__h b {
  font-size: 15px;
  font-weight: 700;
}

.un-page .un-see__h .ub-tag {
  margin-left: auto;
  padding: 0 8px;
  font-size: 11.5px;
}

.un-page .un-see__l {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.un-see__l li {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
}

.un-see__l li.is-new { background: var(--tint-04); }
.un-see__l li.is-off { opacity: .4; }

.un-page .un-see__l p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.un-see__l b {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}

.un-see__l p span {
  color: var(--muted);
  font-size: 11px;
}

.un-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: #9adbe6;
}

.un-page .un-see__f {
  color: var(--muted-2);
  font-size: 11.5px;
  line-height: 1.45;
}

/* ==========================================================================
   22zz26. User Connections: plaque, sign-in, app cards, catalog, tokens
   Brand tiles are coloured placeholders; swap in the official logos.
   ========================================================================== */
.uc-b--gcal { --bc: #4285f4; }
.uc-b--slack { --bc: #4a154b; }
.uc-b--figma { --bc: #a259ff; }
.uc-b--dropbox { --bc: #0061ff; }
.uc-b--instagram { --bc: #e1306c; }
.uc-b--linkedin { --bc: #0a66c2; }
.uc-b--zoom { --bc: #2d8cff; }
.uc-b--notion { --bc: #2b2b2b; }
.uc-b--gdrive { --bc: #1fa463; }
.uc-b--hubspot { --bc: #ff7a59; }
.uc-b--teams { --bc: #5059c9; }
.uc-b--outlook { --bc: #0078d4; }
.uc-b--pinterest { --bc: #e60023; }
.uc-b--behance { --bc: #1769ff; }
.uc-b--pipedrive { --bc: #1a1a1a; }
.uc-b--frameio { --bc: #5b53ff; }
.uc-b--google { --bc: #4285f4; }
.uc-b--apple { --bc: #11131a; }
.uc-b--ms { --bc: #00a4ef; }

.uc-t {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bc);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.uc-t--44 {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 16px;
}

.uc-t--38 {
  width: 38px;
  height: 38px;
}

.uc-t--30 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 11px;
}

.uc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

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

/* Summary plaque: light in both themes */
.uc-pl {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  overflow: hidden;
  padding: 20px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.uc-pl::before {
  position: absolute;
  top: -90px;
  right: -60px;
  width: 320px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.uc-pl > * { position: relative; }

.uc-pl__t {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.uc-page .uc-pl h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}

.uc-page .uc-pl__t p:last-child {
  color: #3a4150;
  font-size: 13px;
  font-weight: 600;
}

.uc-page .uc-pl__t p.is-attn { color: #a8700c; }

.uc-page .uc-pl__a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.uc-jump {
  position: relative;
  display: flex;
  text-decoration: none;
}

.uc-jump.is-off { opacity: .5; }

.uc-jump__dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border: 2px solid #e3e7ec;
  border-radius: 50%;
  background: #e0a21a;
}

.uc-add {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1.5px dashed rgba(17, 19, 26, .3);
  border-radius: 13px;
  background: rgba(255, 255, 255, .5);
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.uc-add:hover {
  background: rgba(255, 255, 255, .8);
  color: #11131a;
}

/* Sign-in rows and tokens: the Security list */
.uc-page .un-devs p:not(.un-devs__b) { min-width: 0; }
.uc-page .un-devs .uc-row {
  color: var(--text);
  font-size: 14px;
}

.uc-page .un-card { gap: 12px; }
.uc-page #uc-cat { gap: 14px; }
.uc-page .un-devs .ub-tag { font-size: 11px; }

.uc-page .uc-si {
  background: none;
  color: var(--text);
}

.uc-page .uc-si.ub-ghost { color: var(--muted); }

.uc-ico40 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.se-sess li.is-soon { border-color: color-mix(in oklab, oklch(0.8 0.13 70) 35%, transparent); }

.uc-page .uc-mono {
  color: var(--text-3);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
}

.uc-page .un-devs .uc-scope {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--tint-06);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.uc-page .un-devs .uc-scope.is-rw {
  background: color-mix(in oklab, oklch(0.8 0.13 70) 18%, transparent);
  color: var(--se-am);
}

.uc-page .un-devs p span.is-am { color: var(--se-am); }

/* Connected apps */
.uc-page .uc-apps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.uc-app {
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-02);
  scroll-margin-top: 16px;
}

.uc-app.is-attn {
  border-color: color-mix(in oklab, oklch(0.8 0.13 70) 40%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.13 70) 5%, transparent);
}

.uc-app__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px;
}

.uc-page .uc-app__t {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.uc-app__t b {
  font-size: 15px;
  font-weight: 700;
}

.uc-app__t > span:last-child {
  color: var(--muted);
  font-size: 12.5px;
}

.uc-app.is-off .uc-app__h > .uc-t,
.uc-app.is-off .uc-app__t,
.uc-app.is-off .uc-perms { opacity: .55; }

.uc-st {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.uc-st::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.uc-st.is-gr { background: color-mix(in oklab, oklch(0.8 0.14 155) 16%, transparent); }
.uc-st.is-am { background: color-mix(in oklab, oklch(0.8 0.13 70) 16%, transparent); }

.uc-page .uc-st.is-mu {
  background: color-mix(in oklab, #8a8f9e 16%, transparent);
  color: var(--muted);
}

.uc-on {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.uc-on[aria-checked="true"] .se-tog__k { background: #9adbe6; }
.uc-on[aria-checked="true"] .se-tog__k::after { transform: translateX(18px); }

.uc-page .uc-warn {
  margin: 0 14px 12px;
  padding: 10px 12px;
  border-radius: 14px;
}

.uc-warn > span {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.uc-page .uc-warn p {
  flex-basis: 220px;
  font-size: 12.5px;
}

.uc-page .uc-warn button {
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
}

.uc-page .uc-perms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 14px 12px;
}

.uc-perms li {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--tint-05);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.uc-sets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-top: 1px solid var(--tint-06);
  background: var(--tint-02);
}

.uc-page .uc-acct {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 6px;
  font-size: 13px;
}

.uc-acct .ul-cap { color: var(--muted-2); }
.uc-acct b { font-weight: 700; }

.uc-set {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.uc-set > span:first-child {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
}

.uc-set__k {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--se-off);
  transition: background-color .2s;
}

.uc-set__k::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform .2s;
}

.uc-set[aria-checked="true"] .uc-set__k { background: #9adbe6; }
.uc-set[aria-checked="true"] .uc-set__k::after { transform: translateX(14px); }

.uc-page .uc-app__f {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--tint-06);
}

.uc-more,
.uc-disc {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.uc-more { color: var(--text-2); }
.uc-more svg { transition: transform .2s; }
.uc-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.uc-more:hover,
.uc-disc:hover { background: var(--tint-05); }

.uc-disc {
  margin-left: auto;
  color: var(--se-co);
}

/* Catalog */
.uc-page .uc-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.uc-search {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--fo-bd);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--muted);
}

.uc-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}

.uc-search:focus-within { border-color: rgba(154, 219, 230, .55); }

.uc-page .uc-cats {
  flex-wrap: wrap;
  padding: 4px;
}

.uc-page .uc-cats button {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

.uc-page .uc-cat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.uc-cat li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-02);
}

.uc-page .uc-cat p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.uc-cat b,
.uc-cat p span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-cat b {
  font-size: 13.5px;
  font-weight: 700;
}

.uc-cat p span {
  color: var(--muted);
  font-size: 11.5px;
}

.uc-cat button {
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--fo-bd);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.uc-cat button:hover { background: var(--tint-05); }

/* Activity */
.un-see__h > span:last-child {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.uc-page .uc-act {
  display: flex;
  flex-direction: column;
}

.uc-act li {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}

.uc-act li + li { border-top: 1px solid var(--tint-05); }
.uc-act li.is-off .uc-t { opacity: .45; }

.uc-page .uc-act p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.uc-act b {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.uc-page .uc-act b.is-am { color: var(--se-am); }

.uc-act p span {
  color: var(--muted);
  font-size: 11px;
}

/* Dialogs */
.fo-dlg.uc-dlg { width: min(460px, calc(100vw - 32px)); }

.uc-dlg .uc-lose {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 8%, transparent);
}

.uc-lose li {
  display: flex;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
}

.uc-lose span {
  color: oklch(0.72 0.14 35);
  font-weight: 900;
}

.fo-dlg .uc-tok {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--fo-bd);
  border-radius: 14px;
  background: #0b0c11;
}

.uc-tok code {
  flex: 1;
  min-width: 0;
  color: #9adbe6;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  word-break: break-all;
}

.uc-tok button {
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.uc-dlg .fo-seg--cur button {
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
}

/* ==========================================================================
   22zz27. User Profile: cover-issue hero, staff pass, bento board
   The hero, the pass and the work covers look the same in both themes.
   ========================================================================== */
.pf-page {
  --pf-vi: oklch(0.78 0.11 300);
  --pf-gr: oklch(0.8 0.14 155);
  --pf-am: oklch(0.8 0.13 70);
  --pf-co: oklch(0.72 0.14 35);
  --pf-cy: #9adbe6;
  --pf-gd: #c99a4e;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.pf-page .is-vi { color: var(--pf-vi); }
.pf-page .is-gr { color: var(--pf-gr); }
.pf-page .is-am { color: var(--pf-am); }
.pf-page .is-co { color: var(--pf-co); }
.pf-page .is-cy { color: var(--pf-cy); }
.pf-page .is-gd { color: var(--pf-gd); }
.pf-c--vi { --un: oklch(0.78 0.11 300); }
.pf-c--gr { --un: oklch(0.8 0.14 155); }
.pf-c--am { --un: oklch(0.8 0.13 70); }
.pf-c--cy { --un: #9adbe6; }

/* Hero */
.pf-hero {
  overflow: hidden;
  margin-bottom: 4px;
  border: 1px solid var(--tint-07);
  border-radius: 30px;
  background: #151821;
  color: #eef0f5;
}

.pf-cover {
  position: relative;
  height: 420px;
}

.pf-page[data-size="md"] .pf-cover { height: 460px; }
/* Phones: the print drops under the quote instead of covering the name. */
.pf-page[data-size="sm"] .pf-cover { height: 620px; }
.pf-page[data-size="sm"] .pf-mast span:nth-child(2) { display: none; }
.pf-page[data-size="sm"] .pf-mast__no { letter-spacing: .04em; }
.pf-page[data-size="sm"] .pf-mast { gap: 8px; }
.pf-page[data-size="sm"] .pf-lines dt { white-space: normal; }

.pf-cover__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 120% at 15% 10%, rgba(154, 219, 230, .32), transparent 60%), radial-gradient(70% 90% at 90% 100%, rgba(246, 200, 110, .22), transparent 65%), linear-gradient(160deg, #232838, #0e1016);
}

.pf-cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The profile cover photo's size, until the photo is dropped in */
.pf-cover__size {
  position: absolute;
  top: 38%;
  left: 50%;
  color: rgba(255, 255, 255, .8);
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pf-cover__bg::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 12, 17, .8) 0%, rgba(11, 12, 17, .35) 55%, transparent 80%), linear-gradient(180deg, transparent 55%, rgba(11, 12, 17, .9));
  content: "";
}

.pf-page .pf-mast {
  position: absolute;
  top: 24px;
  right: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-size: 11px;
  font-weight: 800;
}

.pf-mast span:first-child {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .32em;
}

.pf-mast span:nth-child(2) {
  color: #9adbe6;
  letter-spacing: .2em;
}

.pf-mast__st {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8a8f9e;
  letter-spacing: .14em;
}

.pf-mast__st.is-on { color: #3fbf7f; }

.pf-mast__st::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.pf-mast__no {
  margin-left: auto;
  color: #a7abb8;
  letter-spacing: .18em;
  white-space: nowrap;
}

.pf-text {
  position: absolute;
  top: 78px;
  right: 300px;
  left: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pf-page[data-size="md"] .pf-text { right: 220px; }
.pf-page[data-size="sm"] .pf-text { right: 30px; }

.pf-page .pf-kick {
  color: #c9ccd6;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .2em;
}

.pf-page .pf-name {
  margin: 0;
  color: #eef0f5;
  font-size: 96px;
  font-weight: 600;
  line-height: .82;
  letter-spacing: -.045em;
}

.pf-page[data-size="md"] .pf-name { font-size: 72px; }
.pf-page[data-size="sm"] .pf-name { font-size: 54px; }

.pf-name span {
  color: transparent;
  -webkit-text-stroke: 1.5px #eef0f5;
}

.pf-page .pf-quote {
  max-width: 380px;
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid #9adbe6;
  color: #e2e5ec;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}

.pf-page .pf-print {
  position: absolute;
  top: 72px;
  right: 46px;
  width: 200px;
  margin: 0;
  padding: 10px 10px 38px;
  border-radius: 8px;
  background: #f4f2ec;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
  transform: rotate(3deg);
}

.pf-page[data-size="md"] .pf-print { width: 160px; }

.pf-page[data-size="sm"] .pf-print {
  top: 290px;
  right: 24px;
  width: 120px;
}

.pf-print__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 4px;
  color: #11131a;
  font-size: 60px;
  font-weight: 800;
}

.pf-page[data-size="md"] .pf-print__ph {
  height: 160px;
  font-size: 42px;
}

.pf-page[data-size="sm"] .pf-print__ph {
  height: 110px;
  font-size: 42px;
}

.pf-print__img,
.pf-id__img,
.pf-ppl__img,
.pf-stack__av {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-print figcaption {
  position: absolute;
  right: 10px;
  bottom: 12px;
  left: 10px;
  display: flex;
  justify-content: space-between;
  color: #3a4150;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.pf-print__tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 70px;
  height: 22px;
  background: rgba(154, 219, 230, .55);
  transform: translateX(-50%) rotate(-3deg);
}

.pf-page .pf-lines {
  position: absolute;
  right: 30px;
  bottom: 22px;
  left: 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 0;
}

.pf-page[data-size="sm"] .pf-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pf-lines div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.pf-lines dd {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.pf-lines dt {
  overflow: hidden;
  color: #a7abb8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  padding: 16px 30px;
}

.pf-page .pf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
}

.pf-tabs button,
.pf-tabs a {
  padding: 0 0 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #6b7080;
  font-size: 22px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pf-tabs button[aria-current] {
  border-bottom-color: #9adbe6;
  color: #eef0f5;
  font-weight: 700;
}

.pf-tabs button:hover,
.pf-tabs a:hover { color: #c9ccd6; }

.pf-tabs sup {
  margin-left: 3px;
  font-size: 11px;
}

.pf-page .pf-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.pf-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: none;
  color: #eef0f5;
  cursor: pointer;
}

.pf-follow,
.pf-light {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pf-follow {
  border: 1px solid rgba(255, 255, 255, .16);
  background: none;
  color: #eef0f5;
}

.pf-follow[aria-pressed="true"] {
  border-color: color-mix(in oklab, #9adbe6 55%, transparent);
  color: #9adbe6;
}

.pf-light {
  border: 0;
  background: #f2f3f6;
  color: #11131a;
}

.pf-light:hover {
  background: #fff;
  color: #11131a;
}

.pf-light--msg { padding: 0 24px; }

/* Body grid */
.pf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.pf-page[data-two] .pf-grid { grid-template-columns: 340px minmax(0, 1fr); }

/* Staff pass */
.pf-pass {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.pf-page[data-two] .pf-pass {
  position: sticky;
  top: 12px;
}

.pf-lanyard {
  z-index: 1;
  width: 46px;
  height: 64px;
  margin-bottom: -14px;
  border-radius: 0 0 10px 10px;
  background: repeating-linear-gradient(90deg, #9adbe6 0 6px, #7cc6d3 6px 12px);
}

.pf-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(170deg, #eef0f4, #d9dee6 70%, #bfe9f0);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .45);
  color: #11131a;
}

.pf-slot {
  align-self: center;
  width: 64px;
  height: 12px;
  margin-top: 16px;
  border-radius: 999px;
  background: #0b0c11;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
}

.pf-sec {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
}

.pf-sec--top {
  gap: 14px;
  padding-top: 14px;
}

.pf-page .pf-pass__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-pass__h span:first-child {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .3em;
}

.pf-pass__h span:nth-child(2) {
  color: #2b8a99;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.pf-pass__h code {
  margin-left: auto;
  color: #4b5263;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
}

.pf-id {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.pf-id__ph {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(17, 19, 26, .18);
  color: #11131a;
  font-size: 28px;
  font-weight: 800;
}

.pf-id > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.pf-page .pf-id h2 {
  color: #11131a;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
}

.pf-page .pf-id p {
  color: #3a4150;
  font-size: 12.5px;
  font-weight: 700;
}

.pf-lvl {
  display: flex;
  align-self: flex-start;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #11131a;
  color: #8a8f9e;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
}

.pf-r--cy { color: #9adbe6; }
.pf-r--vi { color: oklch(0.78 0.11 300); }
.pf-r--gr { color: oklch(0.8 0.14 155); }
.pf-r--gd { color: #c99a4e; }

.pf-page .pf-about {
  color: #3a4150;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.pf-page .pf-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin: 0;
  font-size: 12.5px;
}

.pf-facts div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pf-facts dt,
.pf-cap,
.pf-day p:first-child span {
  color: #6b7080;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .16em;
}

.pf-facts dd {
  margin: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-page .pf-cap {
  margin: 0;
  line-height: normal;
}

.pf-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pf-page .pf-day p:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pf-day p:first-child b {
  margin-left: auto;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.pf-page .pf-day b.is-gr { color: #2f8a55; }
.pf-page .pf-day b.is-am { color: #a8700c; }
.pf-page .pf-day b.is-mu { color: #6b7080; }

.pf-day__bar {
  position: relative;
  display: block;
  height: 14px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(17, 19, 26, .08);
}

.pf-day__ev {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 3px;
  opacity: .75;
}

.pf-day__ev.is-vi { background: oklch(0.78 0.11 300); }
.pf-day__ev.is-cy { background: #9adbe6; }

.pf-day__now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d4582f;
}

.pf-page .pf-day__t {
  display: flex;
  justify-content: space-between;
  color: #6b7080;
  font-size: 9.5px;
  font-weight: 800;
}

.pf-page .pf-perf {
  position: relative;
  height: 0;
  margin: 0 14px;
  border-top: 2px dashed rgba(17, 19, 26, .2);
}

.pf-perf::before,
.pf-perf::after {
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-page);
  content: "";
}

.pf-perf::before { left: -26px; }
.pf-perf::after { right: -26px; }

.pf-page .pf-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pf-stamp {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 2px solid currentColor;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}

.pf-stamp span {
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--ink);
  color: #eef0f4;
  font-size: 10px;
}

.pf-stamp--0 {
  --ink: #11131a;
  color: var(--ink);
  transform: rotate(-2deg);
}

.pf-stamp--1 {
  --ink: #2b8a99;
  color: var(--ink);
  transform: rotate(1.5deg);
}

.pf-stamp--2 {
  --ink: #7a55b5;
  color: var(--ink);
  transform: rotate(-1deg);
}

.pf-page .pf-rest {
  color: #4b5263;
  font-size: 12px;
}

.pf-page .pf-asg {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pf-asg li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pf-asg__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
}

.pf-page .pf-asg p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pf-asg p > span:first-child {
  display: flex;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
}

.pf-asg b {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-asg p > span:first-child span {
  margin-left: auto;
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}

.pf-asg__bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .1);
}

.pf-asg__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #11131a;
}

.pf-page .pf-access {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 2px;
}

.pf-access span,
.pf-access em {
  display: flex;
  align-items: center;
  height: 24px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.pf-access span {
  padding: 0 9px;
  border-radius: 7px;
  background: rgba(17, 19, 26, .07);
}

.pf-access em {
  padding: 0 4px;
  color: #6b7080;
}

.pf-page .pf-crews__h {
  display: flex;
  align-items: baseline;
}

.pf-crews__h a {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: #2b8a99;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
}

.pf-page .pf-crews {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pf-crews li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 800;
}

.pf-crews b {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-lead {
  color: #2f8a55;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.pf-stack {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 8px;
}

.pf-crews .pf-stack__av {
  width: 26px;
  height: 26px;
  margin-left: -8px;
  border: 2px solid #e3e7ec;
  border-radius: 50%;
}

.pf-page .pf-tear {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px dashed rgba(255, 255, 255, .25);
  background: #11131a;
  color: #eef0f5;
}

.pf-tear button,
.pf-tear a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 14px 6px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .08);
  background: none;
  color: #eef0f5;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.pf-tear a:last-child { border-right: 0; }
.pf-page .pf-tear a.is-cy { color: #9adbe6; }

.pf-tear button:hover,
.pf-tear a:hover { background: rgba(255, 255, 255, .05); }

.pf-tear span {
  max-width: 100%;
  overflow: hidden;
  color: #8a8f9e;
  font-size: 10.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bento */
.pf-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pf-page[data-wide] .pf-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pf-sp2,
.pf-sp4 { grid-column: span 2; }
.pf-page[data-wide] .pf-sp4 { grid-column: span 4; }

.pf-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--tint-07);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.pf-tile--rate { gap: 10px; }

.pf-tile--light {
  position: relative;
  overflow: hidden;
  border: 0;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.pf-tile--light::before {
  position: absolute;
  top: -60px;
  right: -50px;
  width: 180px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.pf-tile--light > * { position: relative; }

.pf-page .pf-tile__h {
  display: flex;
  align-items: center;
}

.pf-page .pf-tile__h h2 {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: normal;
}

.pf-page .pf-tile--light .pf-tile__h h2 { color: #4b5263; }

.pf-tile__h > :last-child {
  margin-left: auto;
  font-size: 12px;
}

.pf-tile__h b { font-weight: 900; }
.pf-tile__h > span:last-child:not(:first-child) { color: var(--muted); }

.pf-page .pf-pill {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #11131a;
  color: oklch(0.8 0.14 155);
  font-size: 11px;
}

.pf-page .pf-pj {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pf-pj b,
.pf-big,
.pf-rate b {
  font-size: 56px;
  line-height: .85;
  letter-spacing: -.03em;
}

.pf-pj b { font-weight: 700; }

.pf-page .pf-big,
.pf-rate b { font-weight: 600; }

.pf-ring {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.pf-ring span {
  position: absolute;
  inset: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e6eaef;
  font-size: 12px;
  font-weight: 900;
}

.pf-page .pf-tile__s {
  color: var(--muted);
  font-size: 11.5px;
}

.pf-page .pf-tile--light .pf-tile__s {
  color: #3a4150;
  font-size: 12px;
  font-weight: 700;
}

.pf-tile__s b { font-weight: 800; }

.pf-page .pf-wk {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 40px;
}

.pf-wk li {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  height: 100%;
}

.pf-wk__l,
.pf-wk__d {
  display: block;
  border-radius: 3px;
}

.pf-wk__l { background: oklch(0.72 0.14 35); }
.pf-wk__d { background: color-mix(in oklab, oklch(0.78 0.11 300) 70%, transparent); }

.pf-page .pf-rate {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.pf-rate span {
  padding-bottom: 4px;
  color: var(--pf-am);
  font-size: 15px;
}

.pf-page .pf-dist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pf-dist li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.pf-dist li > span:first-child { width: 10px; }

.pf-dist li > span:last-child {
  width: 16px;
  text-align: right;
}

.pf-dist__b {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--tint-07);
}

.pf-dist__b span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--pf-am);
}

/* Work covers */
.pf-wc,
.pf-shade {
  position: absolute;
  inset: 0;
}

.pf-shade {
  background: linear-gradient(180deg, transparent 45%, rgba(11, 12, 17, .9));
  pointer-events: none;
}

.pf-shade--x { background: linear-gradient(90deg, rgba(11, 12, 17, .85), transparent 80%); }

.pf-feat {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
  color: #eef0f5;
}

.pf-page[data-wide] .pf-feat { grid-row: span 2; }

.pf-page .pf-chips {
  position: absolute;
  top: 16px;
  left: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pf-chips > span {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(17, 19, 26, .55);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.pf-chips > span:first-child {
  padding-left: 4px;
  color: #eef0f5;
}

.pf-chips__i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  color: #11131a;
  font-size: 8px;
  font-weight: 900;
}

.pf-page .pf-dots {
  position: absolute;
  top: 24px;
  right: 20px;
  display: flex;
  gap: 5px;
}

.pf-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: width .2s;
}

.pf-dots button[aria-pressed="true"] {
  width: 18px;
  background: #eef0f5;
}

.pf-feat__f {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.pf-feat__f > div {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pf-feat__f div span:first-child {
  color: #9adbe6;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
}

.pf-page .pf-feat__f h2 {
  color: #eef0f5;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.pf-feat__f div span:last-child {
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
}

.pf-feat .pf-light {
  height: 42px;
  padding: 0 18px;
  font-size: 13.5px;
}

.pf-side,
.pf-row {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 22px;
  color: #eef0f5;
  text-align: left;
  cursor: pointer;
  transition: transform .2s;
}

.pf-side { min-height: 174px; }

.pf-row {
  height: 110px;
  border-radius: 20px;
}

.pf-side:hover,
.pf-row:hover { transform: translateY(-2px); }

.pf-side__st {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .6);
  font-size: 10.5px;
  font-weight: 800;
}

.pf-side__t {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-row .pf-side__t {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.pf-side__t b,
.pf-side__t span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-side__t b {
  font-size: 15px;
  font-weight: 700;
}

.pf-row .pf-side__t b { font-size: 14px; }

.pf-side__t span {
  color: rgba(255, 255, 255, .75);
  font-size: 11.5px;
}

.pf-row .pf-side__t span {
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
}

/* Activity */
.pf-actc__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pf-page .pf-actc__h h2 {
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
}

.pf-actc__h > span {
  color: var(--muted);
  font-size: 12px;
}

.pf-page .pf-af {
  flex-wrap: wrap;
  margin-left: auto;
}

.pf-page .pf-af button {
  padding: 0 11px;
  font-size: 12px;
}

.pf-grp {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-grp .pf-cap {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.pf-page .pf-alist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-act {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--tint-05);
  border-radius: 16px;
  background: var(--tint-03);
}

.pf-page .pf-act__h {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pf-act .un-g__i {
  width: 32px;
  height: 32px;
  border-radius: 11px;
}

.pf-act__h > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.4;
}

.pf-act__h strong { color: var(--text); }

.pf-act__h .pf-when {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.pf-page .pf-act__q {
  padding: 10px 12px;
  border-radius: 4px 14px 14px;
  background: var(--tint-04);
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}

.pf-page .pf-act__r,
.pf-page .pf-act__th {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pf-act__r span {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--tint-05);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.pf-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 46px;
  border-radius: 9px;
}

.pf-thumb--n {
  background: var(--tint-06);
  font-size: 12.5px;
  font-weight: 800;
}

.pf-more {
  align-self: center;
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--fo-bd);
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

/* Works most with */
.pf-page .pf-ppl__h {
  display: flex;
  align-items: baseline;
}

.pf-page .pf-ppl__h h2 {
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
}

.pf-ppl__h a {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.pf-ppl ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pf-ppl li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pf-page .pf-ppl__r {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pf-ppl__av {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  color: #11131a;
  font-size: 12px;
  font-weight: 800;
}

.pf-ppl__av.is-client { border-radius: 10px; }

.pf-ppl__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.pf-ppl__t b,
.pf-ppl__t span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-ppl__t b {
  font-size: 13px;
  font-weight: 700;
}

.pf-ppl__t span {
  color: var(--muted);
  font-size: 11px;
}

.pf-page .pf-ppl__t span.is-gd { color: var(--pf-gd); }

.pf-ppl__f {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--fo-bd);
  border-radius: 50%;
  background: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.pf-ppl__f[aria-pressed="true"] {
  border-color: color-mix(in oklab, #9adbe6 50%, transparent);
  background: color-mix(in oklab, #9adbe6 10%, transparent);
  color: var(--accent-fg);
}

.pf-page .pf-ppl__b {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 44px;
}

.pf-ppl__bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--tint-06);
}

.pf-ppl__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #9adbe6;
}

.pf-ppl__bar.is-gd span { background: #c99a4e; }

.pf-ppl__b > span:last-child {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

/* ==========================================================================
   22zz28. User Teams: compact hero, summary, team cards and list, calendar
   The hero, print, tabs and buttons are the Profile ones (pf-*).
   ========================================================================== */
.tm-hero .pf-cover { height: 240px; }

.tm-page[data-tsize="sm"] .tm-hero .pf-cover,
.tm-page[data-tsize="xs"] .tm-hero .pf-cover { height: 220px; }

.tm-hero .pf-cover__bg::after { background: linear-gradient(90deg, rgba(11, 12, 17, .82), rgba(11, 12, 17, .3) 65%, transparent), linear-gradient(180deg, transparent 50%, rgba(11, 12, 17, .85)); }
.tm-page .tm-hero .pf-mast { top: 22px; }

.tm-text {
  position: absolute;
  right: 220px;
  bottom: 24px;
  left: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tm-page[data-tsize="xs"] .tm-text { right: 30px; }
.tm-page[data-tsize="xs"] .pf-mast span:nth-child(2) { display: none; }
.tm-page[data-tsize="xs"] .pf-mast__no { letter-spacing: .04em; }

.tm-page .tm-name {
  font-size: 64px;
  line-height: .85;
  letter-spacing: -.04em;
}

.tm-page:not([data-tsize="lg"]) .tm-name { font-size: 46px; }

.tm-page .tm-print {
  top: auto;
  right: 40px;
  bottom: -26px;
  z-index: 1;
  width: 150px;
  padding: 8px 8px 28px;
  border-radius: 7px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
}

.tm-page[data-tsize="xs"] .tm-print { display: none; }

.tm-print .pf-print__ph {
  height: 134px;
  font-size: 34px;
}

.tm-print figcaption {
  right: 8px;
  bottom: 8px;
  left: 8px;
  font-size: 10px;
}

.tm-print .pf-print__tape {
  top: -10px;
  width: 56px;
  height: 18px;
}

.tm-hero { position: relative; }
.tm-hero .pf-bar { position: relative; }
.tm-page .tm-msg { padding: 0 22px; }

/* Keep Message clear of the print that hangs over the bar. */
.tm-page:not([data-tsize="xs"]) .tm-hero .pf-acts { margin-right: 170px; }

/* Grid */
.tm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.tm-page[data-two] .tm-grid { grid-template-columns: minmax(0, 1fr) 320px; }

/* Summary plaque: light in both themes */
.tm-sum {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  overflow: hidden;
  padding: 20px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.tm-sum::before {
  position: absolute;
  top: -90px;
  left: -60px;
  width: 320px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.tm-sum > * { position: relative; }

.tm-sum__t {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tm-page .tm-k {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.tm-page .tm-sum h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.tm-page .tm-sum__t p:last-child {
  color: #3a4150;
  font-size: 13px;
  font-weight: 600;
}

.tm-page .tm-sum__st {
  display: grid;
  grid-template-columns: repeat(3, minmax(84px, 1fr));
  gap: 6px;
  margin: 0;
}

.tm-sum__st div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 1px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .62);
}

.tm-sum__st dd {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.tm-sum__st dt {
  color: #4b5263;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.tm-join {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  background: #11131a;
  color: #eef0f5;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.tm-join:hover { color: #fff; }

/* Toolbar */
.tm-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tm-page .tm-seg {
  flex-shrink: 0;
  padding: 3px;
}

.tm-page .tm-seg button {
  height: 34px;
  padding: 0 13px;
  font-size: 12.5px;
}

.tm-page .tm-search { flex: 1 1 200px; }

/* Cards */
.tm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 14px;
}

.tm-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tint-07);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
  scroll-margin-top: 16px;
}

.tm-card.is-muted,
.tm-list li.is-muted { opacity: .7; }

.tm-cover {
  position: relative;
  height: 190px;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}

.tm-cover__sh {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11, 12, 17, .75));
}

.tm-cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The cover photo's size, until the photo is dropped in */
.tm-cover__ph {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(255, 255, 255, .8);
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.tm-chip {
  position: absolute;
  top: 12px;
  left: 14px;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(17, 19, 26, .55);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.tm-page .tm-chip.is-cy { color: #9adbe6; }
.tm-page .tm-chip.is-gd { color: #c99a4e; }

.tm-chip--muted {
  right: 14px;
  left: auto;
  border: 0;
  background: rgba(17, 19, 26, .6);
  color: #a7abb8;
  backdrop-filter: none;
}

.tm-card__b {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 0 16px 16px;
}

.tm-id {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Only the logo overlaps the cover; the name sits below it */
.tm-id > .tm-logo {
  margin-top: -26px;
}

.tm-page .tm-id > div {
  padding-top: 8px;
}

.tm-logo {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 4px solid var(--card-from);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  color: #11131a;
  font-size: 20px;
  font-weight: 900;
}

.tm-logo.is-client { border-radius: 16px; }

.tm-logo--44,
.tm-logo--42 {
  width: 44px;
  height: 44px;
  border: 0;
  box-shadow: none;
  font-size: 16px;
}

.tm-logo--42 {
  width: 42px;
  height: 42px;
  font-size: 15px;
}

.tm-logo--42.is-client { border-radius: 13px; }

.tm-page .tm-id > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-bottom: 2px;
}

.tm-id h3,
.tm-id div span,
.tm-list__t b,
.tm-list__t span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-page .tm-id h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
}

.tm-id div span {
  color: var(--text-3);
  font-size: 12px;
}

.tm-menu { position: relative; }

.tm-dots {
  width: 34px;
  height: 34px;
  border: 1px solid var(--fo-bd);
  border-radius: 50%;
  background: none;
  color: var(--text-2);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.tm-pop {
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 190px;
  padding: 6px;
  border: 1px solid var(--fo-bd);
  border-radius: 16px;
  background: var(--raised-2, #1f2330);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.tm-pop button {
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.tm-pop button:hover,
.tm-pop button:focus-visible { background: var(--tint-05); }

.tm-page .tm-pop .is-co {
  color: var(--pf-co);
  font-weight: 700;
}

.tm-page .tm-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tm-row > span:last-child {
  margin-left: 10px;
  color: var(--muted);
  font-size: 12px;
}

.tm-mem {
  display: flex;
  align-items: center;
}

.tm-av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: -8px;
  overflow: hidden;
  border: 2px solid var(--card-from);
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 800;
}

.tm-av.is-client { border-radius: 9px; }

.tm-av__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-page .tm-more {
  margin-right: 0;
  background: var(--tint-08);
  color: var(--text);
  font-size: 10.5px;
}

.tm-pj,
.tm-ld {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tm-ld { gap: 6px; }

.tm-page .tm-pj .ul-cap,
.tm-ld .ul-cap {
  margin: 0;
  color: var(--muted-2);
  line-height: normal;
}

.tm-pj ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tm-pj li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tm-page .tm-pj p,
.tm-page .tm-ld p {
  display: flex;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
}

.tm-pj p span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-pj p b,
.tm-ld p b {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.tm-ld p b { font-size: 12px; }

.tm-bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-07);
}

.tm-bar--5 { height: 5px; }

.tm-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: currentColor;
}

.tm-page .tm-bar.is-cy { color: #9adbe6; }

.tm-page .tm-last {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--tint-03);
  color: var(--text-2);
  font-size: 12.5px;
}

.tm-last span:first-child {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.tm-last span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-last span:last-child {
  color: var(--muted-2);
  font-size: 11.5px;
  white-space: nowrap;
}

.tm-page .tm-acts {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.tm-a {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px solid var(--fo-bd);
  border-radius: 12px;
  background: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.tm-a:hover { background: var(--tint-05); color: var(--text); text-decoration: none; }

.tm-a--light {
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.tm-a--light:hover { background: var(--pill-bg); color: var(--pill-fg); filter: brightness(1.08); }

.tm-a--pill {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12.5px;
}

/* List view */
.tm-page .tm-list {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--tint-07);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
}

.tm-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px;
  scroll-margin-top: 16px;
}

.tm-list li + li { border-top: 1px solid var(--tint-06); }

.tm-page .tm-list__t {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tm-list__t b {
  font-size: 14.5px;
  font-weight: 700;
}

.tm-list__t span {
  color: var(--muted);
  font-size: 12px;
}

.tm-page .tm-list__ld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 110px;
}

.tm-list__ld > span:first-child {
  font-size: 11px;
  font-weight: 800;
}

.tm-open,
.tm-req {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--fo-bd);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.tm-page .tm-empty {
  padding: 28px;
  border: 1px dashed var(--tint-14);
  border-radius: 20px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.tm-empty button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-fg);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* Right column */
.tm-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.tm-page[data-two] .tm-side {
  position: sticky;
  top: 12px;
}

.tm-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  scroll-margin-top: 16px;
}

.tm-page .tm-box__h {
  display: flex;
  align-items: baseline;
}

.tm-page .tm-box__h h2 {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.tm-box__h span {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.tm-page .tm-cal {
  display: flex;
  flex-direction: column;
}

.tm-cal li {
  display: grid;
  grid-template-columns: 46px 4px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
}

.tm-cal li.is-past { opacity: .45; }

.tm-cal li > b {
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 800;
}

.tm-page .tm-cal li.is-now > b { color: var(--pf-co); }
.tm-cal li > span { border-radius: 3px; }

.tm-page .tm-cal p,
.tm-page .tm-sugg p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tm-cal p span,
.tm-sugg p b,
.tm-sugg p span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-cal p span:first-child {
  font-size: 13px;
  font-weight: 700;
}

.tm-cal p span:last-child,
.tm-sugg p span {
  color: var(--muted);
  font-size: 11.5px;
}

.tm-box .tm-a--pill { align-self: stretch; }

.tm-page .tm-sugg {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tm-sugg li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tm-sugg p b {
  font-size: 13.5px;
  font-weight: 700;
}

.tm-req {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.tm-req[aria-pressed="true"] {
  border-color: color-mix(in oklab, #9adbe6 50%, transparent);
  background: color-mix(in oklab, #9adbe6 10%, transparent);
  color: var(--accent-fg);
}

/* ==========================================================================
   22zz29. User Projects: portfolio summary, filters, grid, timeline, table
   Hero, cards, menus and the right column are the Teams ones (tm-*).
   ========================================================================== */
.uj-page {
  --uj-am: oklch(0.8 0.13 70);
  --uj-vi: oklch(0.78 0.11 300);
  --uj-gr: oklch(0.8 0.14 155);
  --uj-co: oklch(0.72 0.14 35);
}

.uj-page[data-two] .tm-grid { grid-template-columns: minmax(0, 1fr) 300px; }
.uj-page .is-am { color: var(--uj-am); }
.uj-page .is-vi { color: var(--uj-vi); }
.uj-page .is-gr { color: var(--uj-gr); }
.uj-page .is-co { color: var(--uj-co); }
.uj-page .is-cy { color: var(--accent-fg); }
.uj-page .is-mu { color: #8a8f9e; }
.uj-page .is-ar { color: #6b7080; }
.uj-page .is-soft { color: var(--text-3); }

/* Summary plaque: light in both themes */
.uj-sum {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  padding: 20px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.uj-sum::before {
  position: absolute;
  top: -90px;
  right: -60px;
  width: 320px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.uj-sum > * { position: relative; }

.uj-sum__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
}

.uj-page .uj-sum h2,
.uk-page .uj-sum h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}

.uj-page .uj-sum .tm-sum__t p:last-child,
.uk-page .uj-sum .tm-sum__t p:last-child {
  color: #3a4150;
  font-size: 13px;
  font-weight: 600;
}

.uj-page .uj-sum__st,
.uk-page .uj-sum__st { grid-template-columns: repeat(3, minmax(90px, 1fr)); }

.uj-stbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.uj-page .uj-stbar__b,
.uk-page .uj-stbar__b {
  display: flex;
  gap: 2px;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 19, 26, .08);
}

.uj-stbar__b .is-am,
.uj-legend .is-am { background: #e0a21a; }

.uj-stbar__b .is-vi,
.uj-legend .is-vi { background: #7a55b5; }

.uj-stbar__b .is-gr,
.uj-legend .is-gr { background: #2f8a55; }

.uj-stbar__b .is-mu,
.uj-legend .is-mu { background: #9aa3b0; }

.uj-page .uj-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.uj-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #3a4150;
  font-size: 12px;
  font-weight: 700;
}

.uj-legend span {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

/* Toolbar */
.uj-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.uj-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.uj-row__r {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.uj-page .tm-seg button,
.uk-page .tm-seg button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
}

.uj-page .tm-seg button span,
.uk-page .tm-seg button span {
  font-size: 10.5px;
  opacity: .6;
}

/* The chips share one wrapping row with Sort, as in the design. */
.uj-page .uj-chips { display: contents; }
.uj-page .uj-row--chips { gap: 6px; }

.uj-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px 0 4px;
  border: 1px solid var(--fo-bd);
  border-radius: 999px;
  background: none;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.uj-chip[aria-pressed="true"] {
  border-color: color-mix(in oklab, #c99a4e 60%, transparent);
  background: color-mix(in oklab, #c99a4e 12%, transparent);
}

.uj-chip.is-dim { opacity: .55; }

.uj-chip > span:last-child {
  color: var(--muted-2);
  font-size: 11px;
}

.uj-chip__i,
.uj-glass__i,
.uj-t__i,
.uj-cl__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
}

.uj-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.uj-page .uj-sort .fo-in,
.uk-page .uj-sort .fo-in {
  width: auto;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
}

/* Grid */
.uj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}

.uj-card.is-dim { opacity: .65; }

.uj-cover__sh {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 12, 17, .15), transparent 35%, rgba(11, 12, 17, .8));
}

.uj-page .uj-cover__top {
  position: absolute;
  top: 12px;
  right: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
}

.uj-glass {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px 0 3px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .6);
  color: #eef0f5;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.uj-glass__i {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  font-size: 8px;
}

.uj-glass--st {
  gap: 5px;
  height: 24px;
  margin-left: auto;
  padding: 0 9px;
  font-size: 11px;
}

.uj-glass--st::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.uj-page .uj-glass--st.is-mu { color: #8a8f9e; }
.uj-page .uj-glass--st.is-ar { color: #6b7080; }

.uj-feat {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #9adbe6;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.uj-card__b { padding-top: 16px; }

.uj-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.uj-page .uj-title > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.uj-page .uj-title h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.uj-title div span {
  color: var(--text-3);
  font-size: 12.5px;
}

.uj-title strong {
  color: var(--text-2);
  font-weight: 800;
}

.uj-page .uj-title strong.is-cy { color: #9adbe6; }

.uj-prog {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.uj-page .uj-prog p {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}

.uj-prog b { font-weight: 800; }

.uj-prog p span {
  margin-left: auto;
  font-weight: 800;
  white-space: nowrap;
}

.uj-bar6 { height: 6px; }
.uj-page .tm-bar.is-mu span { background: #8a8f9e; }
.uj-page .tm-bar.is-ar span { background: #6b7080; }

.uj-page .uj-av {
  width: 26px;
  height: 26px;
  margin-right: -7px;
  font-size: 9px;
}

.uj-page .uj-av.is-client { border-radius: 8px; }

.uj-team > span:nth-child(2) {
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
}

.uj-rate {
  margin-left: auto;
  color: var(--uj-am);
  font-size: 12.5px;
  font-weight: 800;
}

.uj-page .uj-files {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.uj-files li {
  position: relative;
  height: 58px;
  border-radius: 10px;
}

.uj-files span {
  position: absolute;
  bottom: 4px;
  left: 6px;
  color: rgba(255, 255, 255, .85);
  font-size: 9.5px;
  font-weight: 800;
}

.uj-page .uj-open { flex: 0 0 auto; }

/* Timeline */
.uj-tl {
  padding: 18px;
  overflow-x: auto;
}

.uj-tl__in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 640px;
}

.uj-tl__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.uj-tl__head { padding: 0 0 6px; }

.uj-page .uj-tl__head p {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.uj-tl__head p span {
  padding-left: 6px;
  border-left: 1px solid var(--tint-06);
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.uj-page .uj-tl__head p span.is-now { color: var(--uj-co); }
.uj-tl__row.is-dim { opacity: .65; }

.uj-page .uj-tl__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.uj-page .uj-tl__l {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.uj-tl__l > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.uj-tl__l b,
.uj-tl__l > span:last-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uj-tl__l b {
  font-size: 13px;
  font-weight: 700;
}

.uj-tl__l > span:last-child span {
  color: var(--muted);
  font-size: 11px;
}

.uj-tl__track {
  position: relative;
  height: 34px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 7 - 1px), var(--tint-05) calc(100% / 7 - 1px) calc(100% / 7));
}

.uj-tl__bar {
  position: absolute;
  top: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 10px;
  border: 1px solid;
  border-radius: 10px;
  color: #eef0f5;
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
}

.uj-tl__bar:hover { color: #fff; }

.uj-tl__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.uj-tl__t {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uj-tl__today {
  position: absolute;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: oklch(0.72 0.14 35);
  pointer-events: none;
}

.uj-tl__today span {
  position: absolute;
  bottom: -4px;
  left: -20px;
  color: var(--uj-co);
  font-size: 10px;
  font-weight: 900;
}

.uj-page .uj-tl__in { padding-bottom: 18px; }

/* Table */
.uj-tbl {
  padding: 8px 8px 4px;
  overflow-x: auto;
}

.uj-tbl__in { min-width: 760px; }

.uj-t,
.uj-t thead,
.uj-t tbody { display: block; }

.uj-t {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.uj-t tr {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) 110px 120px 110px 90px 90px 70px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.uj-t thead tr {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.uj-t th {
  padding: 0;
  font-weight: 800;
  text-align: left;
}

.uj-t tbody tr {
  position: relative;
  border-top: 1px solid var(--tint-05);
  font-size: 13px;
}

.uj-t tbody tr:hover { background: var(--tint-03); }
.uj-t tbody tr.is-dim { opacity: .65; }

.uj-t td {
  min-width: 0;
  padding: 0;
}

.uj-t__p {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.uj-t__p::after {
  position: absolute;
  inset: 0;
  content: "";
}

.uj-t__i {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.uj-t__p > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.uj-t__p b,
.uj-t__p > span:last-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uj-t__p b { font-weight: 700; }

.uj-t__p > span:last-child span {
  color: var(--muted);
  font-size: 11.5px;
}

.uj-t .uj-t__role {
  color: var(--text-2);
  font-weight: 800;
}

.uj-page .uj-t .uj-t__role.is-cy { color: #9adbe6; }
.uj-t .uc-st {
  justify-self: start;
  height: 24px;
  padding: 0 9px;
}

.uj-tl__l .uj-chip__i { font-size: 9px; }
.uj-page .uj-t .uc-st.is-vi { background: color-mix(in oklab, oklch(0.78 0.11 300) 16%, transparent); }
.uj-page .uj-t .uc-st.is-am { background: color-mix(in oklab, oklch(0.8 0.13 70) 16%, transparent); }
.uj-page .uj-t .uc-st.is-mu { background: color-mix(in oklab, #8a8f9e 16%, transparent); }
.uj-page .uj-t .uc-st.is-ar { background: color-mix(in oklab, #6b7080 16%, transparent); }

.uj-t__pr {
  display: flex;
  align-items: center;
  gap: 6px;
}

.uj-t__pr .tm-bar { flex: 1; }
.uj-t__pr b {
  font-size: 11.5px;
  font-weight: 800;
}
.uj-t td > b { font-weight: 700; }
.uj-t td.is-gr b,
.uj-t td.is-am b,
.uj-t td.is-co b,
.uj-t td.is-mu b,
.uj-t td.is-soft b {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.uj-t__rate {
  color: var(--uj-am);
  font-weight: 800;
}

/* Right column */
.uj-page .uj-soon {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.uj-page .tm-box:first-child { gap: 10px; }

.uj-soon a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
}

.uj-soon a:hover { background: var(--tint-04); }

.uj-soon__d {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in oklab, currentColor 14%, transparent);
  line-height: 1;
}

.uj-soon__d span {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .08em;
}

.uj-soon__d b {
  margin-top: 2px;
  color: var(--text);
  font-size: 19px;
  font-weight: 800;
}

.uj-soon__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.uj-soon__t b,
.uj-soon__t span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uj-soon__t b {
  font-size: 13px;
  font-weight: 700;
}

.uj-soon__t span {
  font-size: 11.5px;
  font-weight: 700;
}

.uj-page .uj-cl {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.uj-cl li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.uj-page .uj-cl p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.uj-cl__i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 8.5px;
}

.uj-cl p > span:last-child {
  margin-left: auto;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 400;
}

.uj-cl__b {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--tint-06);
}

.uj-cl__b span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

/* ==========================================================================
   22zz30. User Connections (profile): network summary, inner circle, people, map
   Hero, toolbar, list, menus and the right column are the Teams/Projects ones.
   ========================================================================== */
.uk-page .is-gd { color: #c99a4e; }
.uk-page .is-cy { color: #9adbe6; }

.uk-page .uk-sum { gap: 14px; }

.uk-split {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.uk-page .uk-split__b {
  display: flex;
  gap: 2px;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
}

.uk-split__b span:first-child { background: #2b8a99; }

.uk-split__b span:last-child {
  flex: 1;
  background: #a3782f;
}

.uk-page .uk-split p:last-child {
  display: flex;
  justify-content: space-between;
  color: #3a4150;
  font-size: 12px;
  font-weight: 700;
}

/* Avatars */
.uk-av {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  color: #11131a;
  font-weight: 800;
}

.uk-av.is-client { border-radius: 30%; }

.uk-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uk-av--40 {
  width: 40px;
  height: 40px;
  font-size: 13px;
}

.uk-av--52 {
  width: 52px;
  height: 52px;
  font-size: 17px;
}

.uk-avw {
  position: relative;
  display: flex;
  flex-shrink: 0;
}

.uk-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  border: 2.5px solid var(--card-from);
  border-radius: 50%;
  background: #6b7080;
}

.uk-dot.is-on { background: #3fbf7f; }

.uk-list .uk-dot {
  width: 11px;
  height: 11px;
  border-width: 2px;
}

/* Inner circle */
.uk-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.uk-page .uk-inner__h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 4px;
}

.uk-page .uk-inner__h h2 {
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
  line-height: normal;
}

.uk-inner__h span {
  color: var(--muted);
  font-size: 13px;
}

.uk-page .uk-ic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.uk-page[data-ic="3"] .uk-ic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uk-page[data-ic="6"] .uk-ic { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.uk-ic li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 16px 12px 14px;
  text-align: center;
}

.uk-ring {
  position: relative;
  width: 72px;
  height: 72px;
  padding: 3px;
  border-radius: 50%;
}

.uk-ring.is-client { border-radius: 30%; }

.uk-av--ring {
  width: 100%;
  height: 100%;
  border: 3px solid var(--card-from);
  font-size: 22px;
}

.uk-ring .uk-dot {
  right: 4px;
  bottom: 4px;
}

.uk-page .uk-ic__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}

.uk-ic__t b,
.uk-ic__t span,
.uk-ic__l {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uk-ic__t b {
  font-size: 14px;
  font-weight: 700;
}

.uk-ic__t span {
  color: var(--text-3);
  font-size: 11.5px;
}

.uk-page .uk-ic__n {
  display: flex;
  gap: 10px;
  color: var(--text-3);
  font-size: 11.5px;
}

.uk-ic__n strong { color: var(--text); }

.uk-page .uk-ic__l {
  max-width: 100%;
  color: var(--muted-2);
  font-size: 11px;
  line-height: 1.35;
}

.uk-page .uk-lists button { height: 36px; }

.uk-page .uk-search { flex: 1 1 220px; }
.uk-page .uk-sort .fo-in { height: 36px; }

/* Cards */
.uk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}

.uk-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.uk-card__h {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.uk-card__t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.uk-page .uk-card__t h3 {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uk-card__t span {
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uk-card__t span:last-child {
  color: var(--muted-2);
  font-size: 11.5px;
}

.uk-page .uk-card__t span.is-gd { color: #c99a4e; }

.uk-page .uk-dots {
  width: 32px;
  height: 32px;
  font-size: 15px;
}

.uk-page .uk-pjs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.uk-pjs li {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px 0 3px;
  border-radius: 999px;
  background: var(--tint-05);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.uk-pjs li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  color: #11131a;
  font-size: 7.5px;
  font-weight: 900;
}

.uk-tog {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.uk-page .uk-tog p {
  display: flex;
  color: var(--text-3);
  font-size: 11.5px;
}

.uk-tog p b {
  margin-left: auto;
  color: var(--text-2);
  font-weight: 800;
}

.uk-tog__b {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--tint-06);
}

.uk-tog__b span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #9adbe6;
}

.uk-tog__b.is-gd span { background: #c99a4e; }

.uk-page .uk-card__a {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.uk-light,
.uk-fol,
.uk-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.uk-light {
  flex: 1 1 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.uk-light:hover { color: var(--pill-fg); }

.uk-fol,
.uk-msg {
  border: 1px solid var(--fo-bd);
  background: none;
  color: var(--text);
}

.uk-fol[aria-pressed="true"] {
  border-color: color-mix(in oklab, #9adbe6 55%, transparent);
  background: color-mix(in oklab, #9adbe6 10%, transparent);
  color: var(--accent-fg);
}

.uk-msg {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.uk-fol--sm { height: 32px; }

.uk-page .uk-list {
  padding: 6px;
}

.uk-list li {
  gap: 10px 14px;
  padding: 10px 12px;
}

.uk-list .tm-list__t b { font-size: 14px; }

.uk-sh {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.uk-page .uk-more {
  height: 38px;
  font-size: 13px;
}

/* Network map */
.uk-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, #9adbe6 10%, transparent) 0 22%, transparent 22.5%);
}

.uk-map__r1,
.uk-map__r2 {
  position: absolute;
  border-radius: 50%;
}

.uk-map__r1 {
  inset: 18%;
  border: 1px dashed color-mix(in oklab, #9adbe6 40%, transparent);
}

.uk-map__r2 {
  inset: 3%;
  border: 1px dashed color-mix(in oklab, #c99a4e 40%, transparent);
}

.uk-map__me {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 3px solid #9adbe6;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(154, 219, 230, .35);
  color: #11131a;
  font-size: 19px;
  font-weight: 800;
  transform: translate(-50%, -50%);
}

.uk-node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--card-from);
  border-radius: 50%;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 800;
  transform: translate(-50%, -50%);
}

.uk-node.is-client { border-radius: 30%; }

.uk-page .uk-leg {
  display: flex;
  gap: 14px;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 700;
}

.uk-leg > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.uk-leg > span:last-child { margin-left: auto; }

.uk-leg > span > span {
  width: 10px;
  height: 10px;
  border: 1.5px dashed currentColor;
  border-radius: 50%;
}

.uk-page .tm-sugg .uk-av { font-size: 13px; }
.uk-page .tm-box__h span { font-size: 11.5px; }

/* ==========================================================================
   22zz31. Account settings: own account, public preview, strength, theme
   Header, sections, fields, toggles, danger zone and bar are the Users ones.
   ========================================================================== */
.sa-page .ua-head__t p { font-size: 15px; }
.sa-page .ua-head__t p strong { color: var(--text); }

.sa-page #sa-mail .se-state {
  height: 28px;
  padding: 0 11px;
  font-size: 12px;
}

.sa-grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.sa-page[data-two] .sa-grid2 { grid-template-columns: 320px minmax(0, 1fr); }

.sa-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sa-page[data-two] .sa-side {
  position: sticky;
  top: 12px;
}

/* Public preview: the profile hero look in both themes */
.sa-pv {
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 26px;
  background: #151821;
  color: #eef0f5;
}

.sa-pv__cover {
  position: relative;
  height: 120px;
  background: radial-gradient(90% 120% at 15% 10%, rgba(154, 219, 230, .32), transparent 60%), radial-gradient(70% 90% at 90% 100%, rgba(246, 200, 110, .22), transparent 65%), linear-gradient(160deg, #232838, #0e1016);
  background-position: center;
  background-size: cover;
}

.sa-pv__cover::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(21, 24, 33, .9));
  content: "";
}

.sa-pv__k,
.sa-pv__vis {
  position: absolute;
  z-index: 1;
  font-weight: 900;
}

.sa-pv__k {
  top: 12px;
  left: 14px;
  font-size: 10px;
  letter-spacing: .22em;
}

.sa-pv__vis {
  top: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .55);
  color: #9adbe6;
  font-size: 10.5px;
  font-weight: 800;
}

.sa-pv__b {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: -34px;
  padding: 0 16px 16px;
}

.sa-pv__av {
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 4px solid #151821;
  border-radius: 50%;
  background: oklch(0.82 0.08 80);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .4);
}

.sa-me {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sa-page .sa-pv__n {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sa-pv__n h2,
.sa-pv__n span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-page .sa-pv__n h2 {
  color: #eef0f5;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.sa-pv__n span {
  color: #a7abb8;
  font-size: 12.5px;
}

.sa-page .sa-pv__a {
  color: #c9ccd6;
  font-size: 13px;
  line-height: 1.5;
}

.sa-page .sa-pv__sk {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sa-pv__sk li {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(154, 219, 230, .3);
  border-radius: 8px;
  background: rgba(154, 219, 230, .12);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.sa-page .sa-pv__m {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #a7abb8;
  font-size: 12px;
}

.sa-page .sa-pv__m:empty { display: none; }

.sa-pv__go {
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: #f2f3f6;
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

/* Profile strength */
.sa-str {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.sa-str__h {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sa-ring {
  position: relative;
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border-radius: 50%;
}

.sa-ring span {
  position: absolute;
  inset: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card-from);
  font-size: 15px;
  font-weight: 800;
}

.sa-page .sa-str__h > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sa-page .sa-str__h h2 {
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
}

.sa-str__h div span {
  color: var(--muted);
  font-size: 12.5px;
}

.sa-page .sa-todo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sa-todo a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--tint-03);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.sa-todo a.is-done {
  background: none;
  color: var(--muted-2);
  text-decoration: line-through;
}

.sa-todo a > span:nth-child(2) { flex: 1; }

.sa-todo__m {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tint-08);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.is-done .sa-todo__m { background: #3fbf7f; }

.sa-todo b {
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 800;
}

/* Sections */
.sa-card { gap: 16px; }
#sa-mail,
#sa-vis,
#sa-skills { gap: 14px; }
.sa-sec__t { flex: 1; }

.sa-media {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
}

.sa-media__p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sa-me--112 {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #e9ebf0;
}

.sa-media__c {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 8px;
}

/* The cover keeps the shape of the profile cover it becomes (2174 × 420) */
.sa-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2174 / 420;
  border: 1px dashed var(--tint-12, rgba(255, 255, 255, .14));
  border-radius: 16px;
  background: radial-gradient(90% 120% at 15% 10%, rgba(154, 219, 230, .25), transparent 60%), linear-gradient(160deg, #232838, #0e1016);
  background-position: center;
  background-size: cover;
  color: rgba(238, 240, 245, .7);
  font-size: 12.5px;
  font-weight: 700;
}

.sa-cover.has-img { border-style: solid; }

.sa-page .sa-media__a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sa-up { cursor: pointer; }
.sa-up:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.sa-note {
  color: var(--muted);
  font-size: 11.5px;
}

.sa-page .sa-note--13 { font-size: 12.5px; }

.sa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.sa-aside {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 11.5px;
}

.sa-page .sa-aside .is-am { color: var(--se-am); }

.sa-page .sa-about {
  height: auto;
  min-height: 84px;
  padding: 14px;
  line-height: 1.55;
  resize: vertical;
}

.sa-page .sa-pend p { flex-basis: 240px; }
.sa-pend strong { color: var(--text); }

.sa-page .sa-pend .sa-pend__x {
  background: none;
  color: var(--text-2);
  font-weight: 700;
}

.sa-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.sa-f {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sa-fmt {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--tint-04);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.sa-page .sa-themes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sa-theme {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--fo-bd);
  border-radius: 18px;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.sa-theme[aria-pressed="true"] { border-color: #9adbe6; }

.sa-theme__ui {
  display: flex;
  gap: 6px;
  height: 72px;
  padding: 8px;
  border-radius: 12px;
}

.sa-theme__ui > span:first-child {
  width: 26%;
  border-radius: 6px;
}

.sa-theme__ui > span:last-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
}

.sa-theme__ui > span:last-child span:first-child {
  width: 60%;
  height: 10px;
  border-radius: 4px;
}

.sa-theme__ui > span:last-child span:last-child {
  flex: 1;
  border-radius: 6px;
}

.sa-theme__l {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 700;
}

.sa-theme__l span {
  margin-left: auto;
  color: var(--accent-fg);
  font-weight: 900;
}

.sa-page .sa-vis {
  display: grid;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.sa-vis__o {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--fo-bd);
  border-radius: 16px;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.sa-vis__o:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.sa-vis__o.is-on {
  border-color: color-mix(in oklab, #9adbe6 55%, transparent);
  background: color-mix(in oklab, #9adbe6 10%, transparent);
}

.sa-vis__o b {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}

.sa-vis__o b span {
  margin-left: auto;
  color: var(--accent-fg);
  font-weight: 900;
}

.sa-vis__o > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.sa-page .sa-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sa-skills li {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 6px 0 4px;
  border: 1px solid var(--fo-bd);
  border-radius: 12px;
  background: var(--tint-03);
}

.sa-skills li.is-top {
  border-color: rgba(246, 200, 110, .5);
  background: rgba(246, 200, 110, .08);
}

.sa-skills li > span {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.sa-star,
.sa-x {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--b-4b505e, #4b505e);
  font-size: 15px;
  cursor: pointer;
}

[data-theme="light"] .sa-star { color: #b0b6c0; }
.sa-star[aria-pressed="true"] { color: #f6c86e; }

.sa-x {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--muted-2);
}

.sa-star:hover,
.sa-x:hover { background: var(--tint-05); }

.sa-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sa-add .fo-in {
  flex: 1 1 220px;
  width: auto;
}

.sa-page .sa-sug {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sa-sug > span {
  align-self: center;
  color: var(--muted-2);
  font-size: 12px;
}

.sa-sug button {
  height: 28px;
  padding: 0 10px;
  border: 1px dashed var(--tint-12, rgba(255, 255, 255, .16));
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

/* ==========================================================================
   22zz32. Account settings › Security: password, two-factor, checkup
   Header, cards, lists and toggles are the Account, Security and Connections ones.
   ========================================================================== */
.ms-page {
  --ms-gr: #3fbf7f;
  --ms-am: #e0a21a;
  --ms-co: #d4582f;
  --ms-cy: #2b8a99;
}

.ms-page .is-cy { color: var(--accent-fg); }

.ms-grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.ms-page[data-two] .ms-grid2 { grid-template-columns: minmax(0, 1fr) 320px; }

.ms-page[data-two] .ms-side {
  position: sticky;
  top: 12px;
}

.ms-card { gap: 16px; }
.ms-card--12 { gap: 12px; }

.ms-page .ms-pill {
  height: 28px;
  padding: 0 11px;
  font-size: 12px;
}

.ms-page .se-state.is-cy {
  background: color-mix(in oklab, #9adbe6 16%, transparent);
  color: var(--accent-fg);
}

.ms-page .se-state.is-co {
  background: color-mix(in oklab, oklch(0.72 0.14 35) 16%, transparent);
  color: var(--se-co);
}

.ms-page .ub-light.is-dim { opacity: .45; }

.ms-ghost {
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ms-ghost:hover { background: var(--tint-05); }

.ms-page .ms-32 {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

/* Password */
.ms-pwf {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.ms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.ms-show {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-fg);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.ms-str {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-page .ms-str__b {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ms-bars {
  display: flex;
  flex: 1;
  gap: 4px;
}

.ms-bars span {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--tint-08);
  transition: background-color .2s;
}

.ms-bars .is-co,
.ms-dot.is-co { background: var(--ms-co); }

.ms-bars .is-am,
.ms-dot.is-am { background: var(--ms-am); }

.ms-bars .is-cy { background: var(--ms-cy); }

.ms-bars .is-gr,
.ms-dot.is-gr { background: var(--ms-gr); }

.ms-str__b b {
  min-width: 70px;
  font-size: 12.5px;
  font-weight: 800;
  text-align: right;
}

.ms-page .ms-str__b b.is-co { color: var(--ms-co); }
.ms-page .ms-str__b b.is-am { color: var(--ms-am); }
.ms-page .ms-str__b b.is-cy { color: var(--ms-cy); }
.ms-page .ms-str__b b.is-gr { color: var(--ms-gr); }

.ms-page .ms-req {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px 14px;
}

.ms-req li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
}

.ms-req li.is-ok { color: var(--text); }

.ms-req li > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tint-08);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
}

.ms-req li.is-ok > span:first-child { background: var(--ms-gr); }

.ms-page .ms-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ms-act > span {
  color: var(--muted);
  font-size: 12px;
}

.ms-page .ms-ok {
  border-color: color-mix(in oklab, oklch(0.8 0.14 155) 40%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.14 155) 10%, transparent);
}

.ms-page .ms-ok p,
.ms-page .ms-off p { flex-basis: 240px; }

.ms-page .ms-off p {
  flex-basis: 260px;
  font-size: 13.5px;
  line-height: 1.5;
}
.ms-page .ms-off {
  gap: 12px 16px;
  padding: 14px;
}

.ms-page .se-warn .ub-light {
  border: 0;
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.ms-page .se-warn .ms-ghost {
  background: none;
  color: var(--text-2);
  font-weight: 700;
}

/* Two-factor */
.ms-stepw {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ms-stepw .ms-ghost {
  height: 32px;
  margin-left: auto;
}

.ms-page .ms-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ms-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}

.ms-steps li + li::before {
  width: 24px;
  height: 2px;
  background: var(--tint-08);
  content: "";
}

.ms-steps li span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tint-08);
  font-size: 12px;
  font-weight: 900;
}

.ms-steps li.is-now,
.ms-steps li.is-done { color: var(--text); }

.ms-steps li.is-now span {
  background: #9adbe6;
  color: #11131a;
}

.ms-steps li.is-done span {
  background: var(--ms-gr);
  color: #11131a;
}

.ms-page .ms-meth {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ms-meth__o {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1.5px solid var(--fo-bd);
  border-radius: 18px;
  cursor: pointer;
}

.ms-meth__o.is-on {
  border-color: #9adbe6;
  background: color-mix(in oklab, #9adbe6 8%, transparent);
}

.ms-meth__o:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.ms-meth__o b {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
}

.ms-meth__o b span {
  display: flex;
  align-items: center;
  height: 20px;
  margin-left: auto;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--tint-06);
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 800;
}

.ms-page .ms-meth__o b span.is-gr {
  background: color-mix(in oklab, #3fbf7f 18%, transparent);
  color: var(--ms-gr);
}

.ms-meth__o > span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.ms-ver {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}

.ms-qr {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 168px;
  height: 168px;
  border: 1px dashed rgba(17, 19, 26, .25);
  border-radius: 18px;
  background: #f4f5f8;
  color: #4b5263;
  text-align: center;
}

.ms-qr b {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
}

.ms-qr span {
  padding: 0 14px;
  font-size: 11px;
  line-height: 1.4;
}

.ms-ver__b {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 12px;
}

.ms-page .ms-ver__i {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}

.ms-page .ms-keyr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--tint-04);
}

.ms-keyr code {
  flex: 1;
  color: var(--accent-fg);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  letter-spacing: .08em;
  word-break: break-all;
}

.ms-keyr .se-btn {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.ms-page .ms-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 20px;
  letter-spacing: .3em;
}

.ms-codes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: #0e1016;
  color: #eef0f5;
}

.ms-page .ms-codes__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ms-codes__h b {
  font-size: 14px;
  font-weight: 700;
}

.ms-codes__h > span:nth-child(2) {
  color: #8a8f9e;
  font-size: 12px;
}

.ms-codes__a {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.ms-dk {
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: #c9ccd6;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ms-page .ms-codes__l {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
}

.ms-codes__l li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13.5px;
  letter-spacing: .06em;
}

.ms-codes__l li.is-used { color: #6b7080; }

.ms-page .ms-codes__f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ms-codes__f .ub-light {
  margin-left: auto;
  background: #f2f3f6;
  color: #11131a;
}

.ms-saved {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ms-saved input {
  position: absolute;
  opacity: 0;
}

.ms-saved span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
}

.ms-saved input:checked + span {
  border-color: transparent;
  background: var(--ms-gr) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311131a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

.ms-saved input:focus-visible + span {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.ms-on {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-03);
}

.ms-page .ms-on p {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 2px;
}

.ms-on b {
  font-size: 14px;
  font-weight: 700;
}

.ms-on p span {
  color: var(--muted);
  font-size: 12.5px;
}

/* Passkeys, recovery, sessions */
.ms-page .ms-list { gap: 12px; }

.ms-page .ms-list p:not(.un-devs__b):not(.ms-rec__t) {
  flex: 1 1 200px;
  gap: 3px;
  min-width: 0;
}

.ms-page .ms-list .un-devs__b {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  gap: 6px;
}

.ms-page .ms-list b {
  font-size: 14px;
  font-weight: 700;
}

.ms-page .ms-list p > span:last-child {
  color: var(--muted);
  font-size: 12.5px;
}

.ms-page #ms-pk .ms-list p > span:last-child { font-size: 12px; }

.ms-page .ms-list .uc-row {
  color: var(--text);
  font-size: 14px;
}

.ms-page .ms-list .ub-tag {
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.ms-page .ms-rec__t .ul-cap { font-size: 10.5px; }

.ms-page .tm-box__h {
  display: flex;
  align-items: baseline;
}

.ms-page .tm-box__h h2 {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.ms-fp {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--accent-fg);
}

.ms-page .ms-in34 {
  height: 34px;
  font-size: 13.5px;
}

.ms-page .ms-in38 {
  height: 38px;
  font-size: 13.5px;
}

.ms-page .ms-list p.ms-rec__t {
  flex: 1 1 200px;
  gap: 3px;
}

.ms-rec__t .ul-cap { color: var(--muted-2); }

.ms-rec__t b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-list li.is-warn { border-color: color-mix(in oklab, oklch(0.8 0.13 70) 35%, transparent); }

.ms-list li.is-odd {
  border-color: color-mix(in oklab, oklch(0.8 0.13 70) 40%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.13 70) 7%, transparent);
}

.ms-page .ub-tag.ms-new {
  background: color-mix(in oklab, oklch(0.8 0.13 70) 18%, transparent);
  color: var(--se-am);
}

.ms-secure {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

/* Checkup plaque: light in both themes */
.ms-ck {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  padding: 20px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.ms-ck::before {
  position: absolute;
  top: -90px;
  right: -60px;
  width: 280px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.ms-ck > * { position: relative; }

.ms-ck__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ms-ring {
  --ms-r: #b2482c;
  position: relative;
  flex-shrink: 0;
  width: 86px;
  height: 86px;
  border-radius: 50%;
}

.ms-ring.is-am { --ms-r: #a8700c; }
.ms-ring.is-cy { --ms-r: #2b8a99; }
.ms-ring.is-gr { --ms-r: #2f8a55; }

.ms-ring > span {
  position: absolute;
  inset: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9edf2;
  color: #4b5263;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
}

.ms-ring b {
  margin-bottom: 3px;
  color: #11131a;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
}

.ms-page .ms-ck__t {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ms-page .ms-ck__l {
  font-size: 22px;
  font-weight: 700;
  line-height: normal;
}

.ms-page .ms-ck__l.is-co { color: #b2482c; }
.ms-page .ms-ck__l.is-am { color: #a8700c; }
.ms-page .ms-ck__l.is-cy { color: #2b8a99; }
.ms-page .ms-ck__l.is-gr { color: #2f8a55; }

.ms-ck__t > span:last-child {
  color: #3a4150;
  font-size: 12.5px;
  font-weight: 600;
}

.ms-page .ms-ck__l2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ms-ck__l2 a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .85);
  color: #11131a;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.ms-ck__l2 a.is-ok {
  background: rgba(255, 255, 255, .45);
  color: #4b5263;
}

.ms-ck__l2 a > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c98a12;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.ms-ck__l2 a.is-ok > span:first-child { background: #2f8a55; }
.ms-ck__l2 a > span:nth-child(2) { flex: 1; }

.ms-ck__l2 b {
  font-size: 12px;
  font-weight: 900;
}

/* Recent sign-ins and alerts */
.ms-page .tm-box__h span.is-co {
  color: var(--se-co);
  font-weight: 800;
}

.ms-page .ms-hist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-hist li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.ms-hist li + li { border-top: 1px solid var(--tint-05); }

.ms-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ms-page .ms-hist p {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ms-hist b,
.ms-hist p span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-hist b {
  font-size: 12.5px;
  font-weight: 700;
}

.ms-hist p span {
  color: var(--muted);
  font-size: 11px;
}

.ms-page .ms-hist p span.is-am { color: var(--se-am); }
.ms-page .ms-hist p span.is-co { color: var(--se-co); }

.ms-hist li > span:last-child {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ms-al { gap: 2px; }
.ms-al .tm-box__h { padding-bottom: 6px; }

.ms-page .ms-set {
  padding: 10px 0;
}

.ms-set + .ms-set { border-top: 1px solid var(--tint-05); }
.ms-set > span:first-child { font-size: 13px; }

.ms-set .uc-set__k {
  width: 36px;
}

.ms-set[aria-checked="true"] .uc-set__k::after { transform: translateX(16px); }

.fo-dlg .fo-bb--co.ms-dlg--am { background: oklch(0.8 0.13 70); }
.fo-dlg .fo-bb--co.ms-dlg--cy { background: #9adbe6; }

/* ==========================================================================
   22zz33. Account settings › Billing & Plans: plan plaque, plans, seats,
   payment, details, invoices, review change, spend, budget
   Header, section chrome, cards, steppers and dialog are the Security and
   Users › Billing ones.
   ========================================================================== */
.mb-page[data-two] .mb-side {
  position: sticky;
  top: 12px;
}

.mb-page .mb-card { gap: 16px; }
.mb-page .mb-card--14 { gap: 14px; }
.mb-page .se-h .mb-seg { flex-shrink: 0; }

.mb-page .mb-seg { padding: 4px; }

.mb-page .mb-seg button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  font-size: 12.5px;
}

.mb-seg button span {
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 22%, transparent);
  color: var(--se-gr);
  font-size: 10.5px;
  font-weight: 800;
}

/* Plan plaque: light in both themes */
.mb-pl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.mb-pl::before {
  position: absolute;
  top: -90px;
  right: -60px;
  width: 340px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.mb-pl > * { position: relative; }

.mb-pl__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 24px;
}

.mb-pl__a {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mb-page .mb-pl .ub-k { color: #4b5263; }

.mb-pl__k {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mb-st {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #11131a;
  font-size: 11px;
  font-weight: 800;
}

.mb-st::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.mb-page .mb-st.is-gr { color: #7ee0a8; }
.mb-page .mb-st.is-co { color: #ff9b7a; }

.mb-page .mb-pl h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.mb-pl__a > p:last-child,
.mb-pl__b > span:last-child {
  color: #3a4150;
  font-size: 13.5px;
  font-weight: 600;
}

.mb-pl__b {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.mb-pl__b b {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.mb-pl__b > span:last-child { font-size: 12.5px; }

.mb-use {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.mb-use li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .62);
}

.mb-use p {
  display: flex;
  align-items: baseline;
}

.mb-use p span {
  color: #4b5263;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.mb-use p b {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
}

.mb-use li > span:last-child {
  color: #4b5263;
  font-size: 11.5px;
  font-weight: 600;
}

.mb-bar {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 19, 26, .1);
}

.mb-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #11131a;
}

.mb-bar.is-am span { background: #e0a21a; }
.mb-bar.is-co span { background: #d4582f; }
.mb-bar.is-cy span { background: #2b8a99; }

.mb-pl__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mb-dark,
.mb-soft {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: #11131a;
  color: #eef0f5;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mb-dark:hover { color: #eef0f5; }

.mb-soft {
  background: rgba(255, 255, 255, .75);
  color: #11131a;
}

.mb-sched {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .75);
}

.mb-sched p {
  flex: 1 1 240px;
  font-size: 13px;
  font-weight: 700;
}

.mb-sched button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(17, 19, 26, .2);
  border-radius: 999px;
  background: transparent;
  color: #11131a;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

/* Plans */
.mb-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.mb-pc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1.5px solid var(--tint-07);
  border-radius: 20px;
  background: var(--tint-02);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.mb-pc.is-cur {
  border-color: color-mix(in oklab, #9adbe6 55%, transparent);
  background: color-mix(in oklab, #9adbe6 6%, transparent);
  cursor: default;
}

.mb-pc.is-sel {
  border-color: color-mix(in oklab, oklch(0.8 0.14 155) 60%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.14 155) 6%, transparent);
  cursor: default;
}

.mb-pc.is-small {
  opacity: .5;
  cursor: default;
}

.mb-pc__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mb-pc__h b {
  font-size: 17px;
  font-weight: 700;
}

.mb-page .mb-pc__h .ub-tag { margin-left: auto; }
.mb-page .mb-pc .ub-tag.is-gr { color: var(--se-gr); }

.mb-pc__p {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.mb-pc__p b {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}

.mb-pc__p span {
  color: var(--muted);
  font-size: 12px;
}

.mb-pc__t {
  color: var(--text-3);
  font-size: 12px;
}

.mb-pc__f {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mb-pc__f > span {
  display: flex;
  gap: 8px;
  color: var(--text-2);
  font-size: 12.5px;
}

.mb-pc__f > span > span:first-child {
  color: var(--se-gr);
  font-weight: 900;
}

.mb-pc__f > span.is-no > span:first-child { color: #4b505e; }
[data-theme="light"] .mb-pc__f > span.is-no > span:first-child { color: var(--muted-2); }

.mb-pc__b {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin-top: auto;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

.mb-pc__b.is-off {
  border: 1px solid var(--fo-bd);
  background: transparent;
  color: var(--muted);
}

/* Seats */
.mb-seatrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.mb-page .mb-step button {
  width: 38px;
  height: 38px;
  font-size: 20px;
}

.mb-page .mb-step b {
  min-width: 48px;
  font-size: 20px;
}

.mb-seatp {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mb-seatp b {
  font-size: 15px;
  font-weight: 700;
}

.mb-seatp span {
  color: var(--muted);
  font-size: 12px;
}

.mb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
}

.mb-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 800;
}

.mb-grid li.is-free { border: 1.5px dashed var(--tint-18); }

.mb-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Payment */
.mb-page .ub-cards { gap: 14px; }
.mb-page .se-warn .ub-light { margin: 0; }

.mb-bank {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.mb-bank div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--tint-03);
}

.mb-bank dt {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.mb-bank dd {
  margin: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mb-page .un-note {
  color: var(--muted);
  font-size: 12.5px;
}

.mb-bankno {
  padding: 14px;
  border: 1px dashed var(--tint-14);
  border-radius: 16px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}

.mb-bankno button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

/* Billing details */
.mb-detst {
  font-size: 12px;
  font-weight: 800;
}

.mb-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.mb-page .ub-light.is-dim { opacity: .45; }

/* Invoices */
.mb-inv__c {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mb-page .mb-inv__c .mb-seg button { height: 30px; }
.mb-page .mb-36 { height: 36px; }

.se-t.mb-t {
  width: 100%;
  min-width: 0;
}

.mb-t tr { grid-template-columns: minmax(110px, 1fr) minmax(0, 1.4fr) 80px 90px 90px; }
.mb-page[data-inv-narrow] .mb-t tr { grid-template-columns: minmax(110px, 1fr) 80px 90px 86px; }
.mb-page[data-inv-narrow] .mb-t .mb-t__w { display: none; }

.mb-page .se-t.mb-t tbody tr.is-due { background: color-mix(in oklab, oklch(0.8 0.13 70) 5%, transparent); }

.mb-t td:first-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mb-t td:first-child b,
.mb-t td:first-child span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mb-t td:first-child b { font-weight: 700; }

.mb-t td:first-child span {
  color: var(--muted);
  font-size: 11.5px;
}

.mb-page .se-t .mb-t__a {
  font-weight: 800;
  text-align: right;
}

.mb-t .se-res { width: max-content; }
.mb-page .mb-t .se-res.is-am { background: color-mix(in oklab, oklch(0.8 0.13 70) 14%, transparent); }

.se-t.mb-t td.mb-t__b {
  flex-direction: row;
  justify-content: flex-end;
}

.mb-page .ub-pdf.mb-pay { background: oklch(0.8 0.13 70); }

/* Review change: light in both themes */
.mb-rev {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  background: #f2f3f6;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .45);
  color: #11131a;
}

.mb-page .mb-rev .ub-k { color: #4b5263; }

.mb-page .mb-rev__c {
  display: flex;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.mb-rev__c s {
  color: #6b7080;
  font-size: 15px;
  font-weight: 700;
}

.mb-rev__c > span { font-weight: 900; }

.mb-rev__c b {
  font-size: 17px;
  font-weight: 800;
}

.mb-rev__r {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(17, 19, 26, .05);
}

.mb-rev__r div {
  display: flex;
  font-size: 13px;
}

.mb-rev__r dt { color: #3a4150; }

.mb-rev__r dd {
  margin: 0 0 0 auto;
  color: #11131a;
  font-weight: 800;
}

.mb-page .mb-rev__r dd.is-mu { color: #6b7080; }
.mb-page .mb-rev .is-gr { color: #2f8a55; }
.mb-page .mb-rev .is-co { color: #b2482c; }

.mb-rev__f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mb-rev__f li {
  display: flex;
  gap: 8px;
  color: #3a4150;
  font-size: 12.5px;
}

.mb-rev__f li span { font-weight: 900; }

.mb-rev__n {
  color: #4b5263;
  font-size: 12px;
  line-height: 1.45;
}

.mb-rev__a {
  display: flex;
  gap: 8px;
}

.mb-rev__a button {
  flex: 1;
  height: 42px;
  border: 1px solid rgba(17, 19, 26, .2);
  border-radius: 12px;
  background: transparent;
  color: #11131a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mb-rev__a button:last-child {
  flex: 1.4;
  border: 0;
  background: #11131a;
  color: #eef0f5;
  font-weight: 800;
  white-space: nowrap;
}

/* Spend */
.mb-spend__h {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mb-page .mb-spend .ub-k { color: var(--muted-2); }
.mb-page .mb-spend h2 { line-height: normal; }

.mb-spend__h b {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.mb-spend__h > span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.mb-bars {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  align-items: end;
  gap: 4px;
  height: 110px;
}

.mb-bars li {
  border-radius: 5px;
  background: rgba(154, 219, 230, .35);
}

.mb-bars li.is-now { background: #9adbe6; }

.mb-bars li.is-next {
  border: 1.5px dashed color-mix(in oklab, #9adbe6 60%, transparent);
  background: color-mix(in oklab, #9adbe6 10%, transparent);
}

.mb-bars__l {
  display: flex;
  justify-content: space-between;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 800;
}

.mb-page .mb-bars__l .is-cy { color: var(--accent-fg); }

/* Budget alert */
.mb-page .mb-bud__t {
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--text);
  text-align: left;
}

.mb-bud__t > span:first-child {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
}

.mb-bud__l {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
}

.mb-bud__l.is-off { opacity: .45; }

.mb-lim {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--fo-bd);
  border-radius: 12px;
  background: var(--tint-03);
  font-size: 16px;
}

.mb-lim > span {
  color: var(--muted);
  font-weight: 800;
}

.mb-lim input {
  width: 58px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
}

.mb-lim:focus-within { border-color: rgba(154, 219, 230, .55); }

.mb-bud__m {
  font-size: 12.5px;
  font-weight: 700;
}

/* Help */
.mb-help {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 6px;
}

.mb-help a {
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.mb-help button,
.mb-help span {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.mb-help span { text-decoration: none; }

/* ==========================================================================
   22zz34. Account settings › Notifications: right now, channels, matrix,
   muted, focus schedule, digest, sounds, inbox preview
   Header, section chrome, plaque base, switches and bar are the Security,
   Users › Notifications and Account ones.
   ========================================================================== */
.nf-page[data-two] .nf-grid2 { grid-template-columns: minmax(0, 1fr) 300px; }

.nf-page[data-two] .nf-in-box {
  position: sticky;
  top: 12px;
}

.nf-page .nf-card--12 { gap: 12px; }
.nf-page .se-h .nf-seg {
  flex-shrink: 0;
  max-width: 100%;
}

.nf-page .nf-seg {
  flex-wrap: wrap;
  padding: 3px;
  border-radius: 18px;
}

.nf-page .nf-seg button {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

/* Right now: violet while Focus or quiet hours hold notifications */
.nf-pl.is-focus { background: linear-gradient(160deg, #ece8f6, #d6cfe8 60%, #b9a8e6 160%); }
.nf-page .nf-pl .un-pz { gap: 4px; }
.nf-page .se-tog__t span { line-height: normal; }
.nf-pl.is-focus::before { background: radial-gradient(circle, rgba(190, 160, 255, .6), transparent 70%); }

.nf-hrs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nf-hrs__b {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: end;
  gap: 3px;
  height: 54px;
}

.nf-hrs__b li {
  border-radius: 3px;
  background: #11131a;
}

.nf-hrs__b li.is-q { background: rgba(122, 85, 181, .35); }
.nf-hrs__b li.is-now { background: #d4582f; }

.nf-hrs__l {
  display: flex;
  justify-content: space-between;
  color: #4b5263;
  font-size: 10px;
  font-weight: 800;
}

.nf-page .nf-hrs__n {
  color: #3a4150;
  font-size: 12px;
  font-weight: 700;
}

/* Channels */
.nf-chs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.nf-chs li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-02);
  opacity: .6;
}

.nf-chs li.is-on {
  border-color: color-mix(in oklab, #9adbe6 35%, transparent);
  background: color-mix(in oklab, #9adbe6 5%, transparent);
  opacity: 1;
}

.nf-chs__h {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nf-chs__h > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--tint-05);
  color: var(--muted);
}

.nf-chs li.is-on .nf-chs__h > span {
  background: color-mix(in oklab, #9adbe6 16%, transparent);
  color: var(--accent-fg);
}

.nf-chs__h b {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
}

.nf-chs li > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.nf-page .nf-30 {
  align-self: flex-start;
  height: 30px;
}

/* Matrix */
.nf-mx {
  margin: 0 -4px;
  overflow-x: auto;
}

.nf-mx__in {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 440px;
  padding: 0 4px;
}

.nf-mx__r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 52px);
  align-items: center;
  gap: 4px;
}

.nf-page .nf-mx__cols {
  padding: 0 12px;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.nf-mx__cols span:not(:first-child) { text-align: center; }
.nf-page .nf-mx__cols .is-off { color: #4b505e; }
[data-theme="light"] .nf-page .nf-mx__cols .is-off { color: #b9bfca; }

.nf-g {
  overflow: hidden;
  border: 1px solid var(--tint-06);
  border-radius: 18px;
}

.nf-g__h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--tint-03);
}

.nf-g__h > span:first-child {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--un);
}

.nf-page .nf-g__h h3 {
  font-size: 13.5px;
  font-weight: 700;
  line-height: normal;
}

.nf-g__h > span:last-child:not(:first-child) {
  margin-left: auto;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 800;
}

.nf-g__l li {
  padding: 8px 12px;
  border-top: 1px solid var(--tint-05);
}

.nf-g__l li > p {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.nf-g__l li > p > span:first-child {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nf-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9adbe6;
}

.nf-cell {
  display: flex;
  justify-content: center;
}

.nf-cb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: transparent;
  color: #11131a;
  cursor: pointer;
}

[data-theme="light"] .nf-cb { border-color: rgba(20, 30, 50, .18); }

.nf-cb[aria-pressed="true"] {
  border-color: transparent;
  background: #9adbe6;
}

.nf-cb.is-lock { cursor: not-allowed; }

.nf-cb.is-lock[aria-pressed="true"] {
  border-color: transparent;
  background: #9aa3b0;
}

.nf-cb.is-off {
  opacity: .3;
  cursor: not-allowed;
}

/* Muted */
.nf-mute {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nf-mute li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px;
  border: 1px solid var(--tint-06);
  border-radius: 14px;
  background: var(--tint-02);
}

.nf-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.nf-logo--26 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 9.5px;
}

.nf-mute p {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nf-mute b {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nf-mute p span {
  color: var(--muted);
  font-size: 12px;
}

.nf-page .nf-mute .se-btn { height: 32px; }

.nf-add {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.nf-in {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--fo-bd);
  border-radius: 12px;
  outline: 0;
  background: var(--tint-03);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  color-scheme: dark;
}

[data-theme="light"] .nf-in { color-scheme: light; }
.nf-in:focus { border-color: rgba(154, 219, 230, .55); }

.nf-q {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0 14px;
}

.nf-q::-webkit-search-cancel-button { display: none; }

.nf-sug {
  position: absolute;
  top: 46px;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: min(360px, 100%);
  padding: 6px;
  border: 1px solid var(--fo-bd);
  border-radius: 14px;
  background: #1f2330;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

[data-theme="light"] .nf-sug {
  background: #fff;
  box-shadow: 0 18px 40px rgba(30, 45, 70, .18);
}

.nf-sug button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.nf-sug button:hover { background: var(--tint-05); }

.nf-sug b {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

.nf-sug button > span:last-child {
  color: var(--muted);
  font-size: 11px;
}

.nf-page .nf-none {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12.5px;
}

/* Focus schedule */
.nf-week {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nf-week.is-off { opacity: .4; }

.nf-week__r {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.nf-week__r > span:first-child {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.nf-page .nf-week__r.is-today > span:first-child { color: var(--se-co); }

.nf-week__r > span:last-child {
  position: relative;
  height: 16px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--tint-04);
}

.nf-week__r > span:last-child > span {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(-45deg, color-mix(in oklab, oklch(0.78 0.11 300) 45%, transparent) 0 5px, color-mix(in oklab, oklch(0.78 0.11 300) 22%, transparent) 5px 10px);
}

.nf-week__r > span:last-child > .nf-week__now {
  width: 2px;
  background: var(--se-co);
}

.nf-week__t { align-items: start; }

.nf-week__t > span:last-child {
  display: flex;
  justify-content: space-between;
  height: auto;
  overflow: visible;
  background: none;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 700;
}

.nf-week__t > span:last-child > span {
  position: static;
  background: none;
}

.nf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.nf-page .nf-f { gap: 8px; }

/* Digest */
.nf-at {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nf-mail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: #f4f5f8;
  color: #11131a;
}

.nf-mail__h {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nf-mail__h > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #11131a;
  color: #9adbe6;
  font-size: 13px;
  font-weight: 900;
}

.nf-mail__h > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nf-mail__h b {
  font-size: 13.5px;
  font-weight: 800;
}

.nf-mail__h > span:last-child span {
  color: #4b5263;
  font-size: 11.5px;
}

.nf-page .nf-mail > p:last-child {
  padding-left: 40px;
  color: #3a4150;
  font-size: 12.5px;
}

.nf-page .nf-note {
  color: var(--muted);
  font-size: 12.5px;
}

/* Sounds */
.nf-snd {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nf-snd li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 6px 0 14px;
  border: 1.5px solid var(--fo-bd);
  border-radius: 12px;
}

.nf-snd li.is-on {
  border-color: #9adbe6;
  background: color-mix(in oklab, #9adbe6 10%, transparent);
}

.nf-snd li > button:first-child {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.nf-play {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--tint-06);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
}

/* Inbox preview */
.nf-in-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
}

.nf-inb__h {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.nf-inb__h b {
  font-size: 15px;
  font-weight: 700;
}

.nf-page .nf-inb__h .ub-tag {
  margin-left: auto;
  padding: 0 8px;
  font-size: 11.5px;
}

.nf-page .nf-inb__p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.nf-inb {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nf-inb li {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--tint-03);
}

.nf-inb li.is-off {
  background: transparent;
  opacity: .45;
}

.nf-inb__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--un) 16%, transparent);
  color: var(--un);
}

.nf-inb p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.nf-inb b {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}

.nf-inb p span {
  color: var(--muted);
  font-size: 11px;
}

.nf-page .nf-inb li.is-off p span {
  color: var(--se-co);
  font-weight: 800;
}

.nf-page .nf-inb li.is-held p span {
  color: oklch(0.78 0.11 300);
  font-weight: 800;
}

[data-theme="light"] .nf-page .nf-inb li.is-held p span { color: oklch(0.5 0.14 300); }

/* ==========================================================================
   22zz35. Account settings › Connections: plaque, sign-in, app cards with
   sync options, catalog, third-party access, tokens, activity
   Tiles, cards, catalog, activity and dialogs are the Users › Connections
   ones; brand tiles are coloured placeholders — swap in the official logos.
   ========================================================================== */
.uc-b--zap { --bc: #ff4a00; }
.uc-b--make { --bc: #6d00cc; }
.uc-b--linear { --bc: #5e6ad2; }

/*
 * PREVIEW ONLY — real service logos on the app tiles (simple-icons, white
 * on the brand colour). The marks belong to their owners: drop this block and
 * assets/img/brands/ for the ThemeForest package; the tiles fall back to the
 * service's initial on its colour.
 */
.uc-t.uc-b--apple { background: url("../img/brands/apple.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--behance { background: url("../img/brands/behance.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--dropbox { background: url("../img/brands/dropbox.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--figma { background: url("../img/brands/figma.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--gcal { background: url("../img/brands/gcal.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--gdrive { background: url("../img/brands/gdrive.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--google { background: url("../img/brands/google.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--hubspot { background: url("../img/brands/hubspot.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--instagram { background: url("../img/brands/instagram.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--linear { background: url("../img/brands/linear.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--linkedin { background: url("../img/brands/linkedin.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--make { background: url("../img/brands/make.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--ms { background: url("../img/brands/ms.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--notion { background: url("../img/brands/notion.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--outlook { background: url("../img/brands/outlook.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--pinterest { background: url("../img/brands/pinterest.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--slack { background: url("../img/brands/slack.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--teams { background: url("../img/brands/teams.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--zap { background: url("../img/brands/zap.svg") center / 56% no-repeat, var(--bc); }
.uc-t.uc-b--zoom { background: url("../img/brands/zoom.svg") center / 56% no-repeat, var(--bc); }
.uc-t:is(.uc-b--apple, .uc-b--behance, .uc-b--dropbox, .uc-b--figma, .uc-b--gcal, .uc-b--gdrive, .uc-b--google, .uc-b--hubspot, .uc-b--instagram, .uc-b--linear, .uc-b--linkedin, .uc-b--make, .uc-b--ms, .uc-b--notion, .uc-b--outlook, .uc-b--pinterest, .uc-b--slack, .uc-b--teams, .uc-b--zap, .uc-b--zoom) { color: transparent; }

.mc-page[data-two] .mc-grid2 { grid-template-columns: minmax(0, 1fr) 300px; }
.mc-page .mc-card--10 { gap: 10px; }
.mc-page .se-btn--sm { padding: 0 13px; }

.mc-t--36 {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 13px;
}

.mc-t--28 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 10px;
}

.mc-ico36 {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.mc-fix {
  position: relative;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 13px;
  background: #11131a;
  color: #eef0f5;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

/* Rows: sign-in, OAuth, tokens */
.mc-page .mc-rows li {
  padding: 10px 12px;
  border-radius: 14px;
}

.mc-page .mc-rows { gap: 10px; }
.mc-page .mc-rows p { gap: 2px; }
.mc-page .mc-rows p > span:last-child { font-size: 12px; }
.mc-page .mc-rows p > span:last-child span { font-size: inherit; }

.mc-page .un-devs .mc-tag20 {
  height: 20px;
  padding: 0 7px;
  font-size: 10.5px;
}

.mc-page .un-devs .uc-scope {
  height: 20px;
  padding: 0 7px;
  font-size: 10.5px;
}

.mc-page .uc-search { box-sizing: border-box; }
.mc-page #mc-cat { gap: 14px; }

.mc-page .mc-34 {
  height: 34px;
  padding: 0 13px;
  font-size: 12.5px;
}

/* App cards */
.mc-ws {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, #c99a4e 18%, transparent);
  color: #c99a4e;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

[data-theme="light"] .mc-ws { color: #8a6424; }

.mc-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 12px;
}

.mc-app.is-off .mc-opts { opacity: .55; }

.mc-opts p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mc-opts button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--fo-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.mc-opts button[aria-pressed="true"] {
  border-color: color-mix(in oklab, #9adbe6 55%, transparent);
  background: color-mix(in oklab, #9adbe6 10%, transparent);
  color: var(--text);
}

.mc-opts button span { font-weight: 900; }

.mc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--tint-06);
}

.mc-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mc-perms li {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 8px;
  background: var(--tint-05);
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.mc-foot > p {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.mc-ghost {
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.mc-ghost:hover { background: var(--tint-05); }
.mc-page .mc-ghost.is-co { color: var(--se-co); }

.mc-page .mc-empty {
  padding: 18px;
  border: 1px dashed var(--tint-14);
  border-radius: 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.mc-page .mc-none {
  color: var(--muted);
  font-size: 13px;
}

/* Catalog */
.mc-page .uc-search { flex-basis: 200px; }
.mc-page .mc-cats {
  align-self: center;
  padding: 3px;
}

.mc-page .mc-cats button {
  padding: 0 11px;
  font-size: 12px;
}

.mc-page .uc-cat button {
  height: 30px;
  padding: 0 11px;
  background: var(--tint-04);
  color: var(--text-2);
  font-weight: 700;
}

/* Activity */
.mc-page .mc-actv {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-page .mc-actv .un-see__h { padding-bottom: 4px; }
.mc-page .mc-actv .uc-act li { padding: 8px 0; }
.mc-page .mc-actv .uc-act { gap: 6px; }
.mc-page .mc-actv .un-see__h > span:last-child { font-size: 11.5px; }

/* Dialogs */
.mc-pair {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mc-pair > span:nth-child(2) {
  color: var(--muted-2);
  font-size: 18px;
}

.mc-av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #11131a;
  color: #9adbe6;
  font-size: 16px;
  font-weight: 900;
}

.mc-dlg .uc-lose.mc-ok {
  border: 0;
  background: var(--tint-03);
}

.mc-ok span { color: #3fbf7f; }
.mc-dlg { gap: 14px; }

/* ==========================================================================
   22zz36. FAQ: help hero with search, topics, answers, guides, most asked,
   support and status
   The hero and the "Still stuck?" card look the same in both themes.
   ========================================================================== */
.fq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.fq-page[data-two] .fq-grid { grid-template-columns: minmax(0, 1fr) 320px; }

/* Hero */
.fq-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 4px;
  padding: 40px 32px 32px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 30px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
  text-align: center;
}

.fq-hero::before {
  position: absolute;
  top: -120px;
  left: 50%;
  width: 560px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .75), transparent 70%);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.fq-hero > * { position: relative; }

.fq-page .fq-hero__k {
  color: #2b8a99;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .24em;
}

.fq-page .fq-hero__h {
  margin: 0;
  color: #11131a;
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}

.fq-page[data-big] .fq-hero__h { font-size: 64px; }

.fq-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(640px, 100%);
  height: 58px;
  padding: 0 10px 0 20px;
  border: 1px solid rgba(17, 19, 26, .08);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(17, 19, 26, .15);
  color: #4b5263;
}

.fq-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #11131a;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
}

.fq-search input::placeholder { color: #8a8f9e; }
.fq-search input::-webkit-search-cancel-button { display: none; }
.fq-search:focus-within { box-shadow: 0 18px 40px rgba(17, 19, 26, .15), 0 0 0 3px rgba(43, 138, 153, .35); }

.fq-search button {
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #eef0f4;
  color: #11131a;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.fq-try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.fq-try > span {
  color: #4b5263;
  font-size: 12.5px;
  font-weight: 700;
}

.fq-try button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(17, 19, 26, .15);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  color: #11131a;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.fq-try button:hover { background: #fff; }

/* Topics */
.fq-tps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.fq-tp {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1.5px solid var(--tint-07);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .15s;
}

.fq-tp:hover { transform: translateY(-2px); }

.fq-tp[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--un) 60%, transparent);
  background: color-mix(in oklab, var(--un) 8%, transparent);
}

.fq-tp > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: color-mix(in oklab, var(--un) 16%, transparent);
  color: var(--un);
}

.fq-tp[aria-pressed="true"] > span:first-child { background: color-mix(in oklab, var(--un) 28%, transparent); }

.fq-tp > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fq-tp b {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
}

.fq-tp > span:last-child > span {
  color: var(--muted);
  font-size: 12px;
}

/* Questions */
.fq-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.fq-qs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
}

.fq-qs__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
}

.fq-page .fq-qs__h h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: normal;
}

.fq-page .fq-qs__h p {
  color: var(--muted);
  font-size: 13px;
}

.fq-qs__h button {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.fq-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fq-it {
  overflow: hidden;
  border: 1px solid var(--tint-06);
  border-radius: 18px;
  background: rgba(255, 255, 255, .015);
  scroll-margin-top: 20px;
  transition: background-color .2s;
}

[data-theme="light"] .fq-it { background: var(--tint-02); }

.fq-page .fq-it.is-open {
  border-color: color-mix(in oklab, var(--un) 45%, transparent);
  background: color-mix(in oklab, var(--un) 5%, transparent);
}

.fq-page .fq-it h3 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.fq-it h3 button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.fq-it__d {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--un);
}

.fq-it__q {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.fq-it.is-open .fq-it__q { font-weight: 700; }

.fq-it__q mark {
  border-radius: 3px;
  background: rgba(154, 219, 230, .28);
  color: inherit;
}

.fq-pop {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 16%, transparent);
  color: var(--se-am);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.fq-it__p {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tint-05);
  transition: transform .2s;
}

.fq-it.is-open .fq-it__p { transform: rotate(45deg); }

.fq-it__a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 16px 36px;
}

.fq-page .fq-it__a > p:first-child {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

.fq-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fq-steps li {
  display: flex;
  gap: 10px;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.fq-steps li span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in oklab, #9adbe6 18%, transparent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 900;
}

.fq-it__f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-top: 4px;
}

.fq-page .fq-36 {
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
}

.fq-upd {
  color: var(--muted-2);
  font-size: 11.5px;
}

.fq-page .fq-vote {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--text-3);
  font-size: 12.5px;
}

.fq-vote button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

[data-theme="light"] .fq-vote button { border-color: rgba(20, 30, 50, .14); }

.fq-vote button:hover { background: var(--tint-05); }
.fq-vote .is-no svg { transform: rotate(180deg); }

.fq-thx {
  color: var(--se-gr);
  font-weight: 700;
}

.fq-why {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fq-why input { flex: 1 1 240px; }
.fq-page .fq-40 { height: 40px; }

.fq-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 20px;
  border: 1px dashed var(--tint-14);
  border-radius: 18px;
  text-align: center;
}

.fq-page .fq-empty b {
  font-size: 16px;
  font-weight: 700;
}

.fq-page .fq-empty p:nth-child(2) {
  color: var(--muted);
  font-size: 13px;
}

/* Guides */
.fq-vids {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fq-vids__h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 4px;
}

.fq-page .fq-vids__h h2 {
  line-height: normal;
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
}

.fq-vids__h span {
  color: var(--muted);
  font-size: 13px;
}

.fq-vids ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.fq-vid {
  position: relative;
  width: 100%;
  height: 200px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  color: #eef0f5;
  text-align: left;
  cursor: pointer;
}

.fq-vid::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(11, 12, 17, .88));
  content: "";
}

.fq-vid > span { z-index: 1; }

/* The video still's real size (window 2560 px wide), under the play button */
.fq-vid__size {
  position: absolute;
  top: calc(50% + 34px);
  left: 50%;
  color: rgba(255, 255, 255, .85);
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.fq-vid__p {
  position: absolute;
  top: 42%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(242, 243, 246, .92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  color: #11131a;
  transform: translate(-50%, -50%);
  transition: transform .2s;
}

.fq-vid:hover .fq-vid__p { transform: translate(-50%, -50%) scale(1.06); }

.fq-vid__l {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .6);
  font-size: 11.5px;
  font-weight: 800;
}

.fq-vid__t {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fq-vid__t b {
  font-size: 15px;
  font-weight: 700;
}

.fq-vid__t span {
  color: rgba(255, 255, 255, .75);
  font-size: 11.5px;
}

/* Right column */
.fq-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.fq-page[data-two] .fq-side {
  position: sticky;
  top: 12px;
}

.fq-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
}

.fq-page .fq-top h2 {
  padding-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.fq-top ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fq-top li + li { border-top: 1px solid var(--tint-05); }

.fq-top button {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 9px 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.fq-top button:hover { background: var(--tint-03); }

.fq-top button > span:first-child {
  width: 22px;
  color: #4b505e;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

[data-theme="light"] .fq-top button > span:first-child { color: #b9bfca; }

.fq-top button > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fq-top b {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.fq-top button > span:last-child > span {
  color: var(--muted);
  font-size: 11px;
}

.fq-stuck {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 24px;
  background: #151821;
  color: #eef0f5;
}

.fq-stuck::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 100% 0%, rgba(154, 219, 230, .18), transparent 60%);
  content: "";
  pointer-events: none;
}

.fq-stuck > * { position: relative; }

.fq-page .fq-stuck h2 {
  color: #eef0f5;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
}

.fq-stuck__w {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fq-stuck__f { display: flex; }

.fq-face {
  width: 34px;
  height: 34px;
  border: 2px solid #151821;
  border-radius: 50%;
  object-fit: cover;
}

.fq-face + .fq-face { margin-left: -10px; }

.fq-stuck__w > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fq-stuck__w b {
  font-size: 13px;
  font-weight: 700;
}

.fq-stuck__w > span:last-child > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a7abb8;
  font-size: 11.5px;
}

.fq-stuck__w > span:last-child > span::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fbf7f;
  content: "";
}

.fq-stuck__a {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.fq-stuck__a a,
.fq-stuck__a button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: transparent;
  color: #eef0f5;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.fq-stuck__a a {
  border-color: transparent;
  background: #f2f3f6;
  color: #11131a;
  font-weight: 800;
}

.fq-stuck__a a:hover { color: #11131a; }

.fq-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
}

.fq-status__h {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fq-page .fq-status__h h2 {
  line-height: normal;
  font-size: 14px;
  font-weight: 700;
}

.fq-pulse {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3fbf7f;
}

.fq-pulse::before {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(63, 191, 127, .25);
  content: "";
  animation: fq-pulse 2s ease-out infinite;
}

@keyframes fq-pulse {
  0% { opacity: 1; transform: scale(.6); }
  100% { opacity: 0; transform: scale(1.4); }
}

.fq-days {
  display: flex;
  gap: 3px;
}

.fq-days span {
  flex: 1;
  height: 22px;
  border-radius: 3px;
  background: rgba(63, 191, 127, .55);
}

.fq-days span.is-bad { background: #e0a21a; }

.fq-page .fq-status__l {
  display: flex;
  justify-content: space-between;
  color: var(--muted-2);
  font-size: 11px;
}

.fq-hist {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.fq-inc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fq-inc li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--tint-03);
}

.fq-inc b {
  font-size: 12.5px;
  font-weight: 700;
}

.fq-inc span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.fq-dlg .fq-steps { margin: 2px 0; }
.fq-dlg .fo-dlg__a a { text-decoration: none; }

/* ==========================================================================
   22zz37. Pricing: hero with cycle/currency/team size, plan cards, clients,
   yearly savings, add-ons, comparison, questions, call to action
   The hero, the Studio card, the savings card and the call to action keep
   their own colours in both themes.
   ========================================================================== */
.pp-page { gap: 16px; }

.pp-k {
  color: #2b8a99;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .24em;
}

.pp-k2 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
}

/* Hero */
.pp-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 4px;
  padding: 44px 28px 30px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 30px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
  text-align: center;
}

.pp-hero::before {
  position: absolute;
  top: -120px;
  left: 50%;
  width: 600px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .75), transparent 70%);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.pp-hero > * { position: relative; }

.pp-page .pp-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #11131a;
  font-size: 38px;
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.035em;
}

.pp-page[data-sm] .pp-hero h1 { font-size: 48px; }
.pp-page[data-wide] .pp-hero h1 { font-size: 64px; }

.pp-page .pp-hero__s {
  max-width: 520px;
  color: #3a4150;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.pp-ctl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.pp-seg {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .08);
}

.pp-seg button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #3a4150;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.pp-seg button[aria-pressed="true"] {
  background: #11131a;
  color: #eef0f5;
}

.pp-seg button span {
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #2f8a55;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}

.pp-team {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(520px, 100%);
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .62);
}

.pp-team > p:first-child {
  display: flex;
  align-items: baseline;
}

.pp-team label {
  color: #3a4150;
  font-size: 13px;
  font-weight: 700;
}

.pp-team output {
  margin-left: auto;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.pp-team input {
  width: 100%;
  margin: 2px 0;
  accent-color: #11131a;
  cursor: pointer;
}

.pp-ticks {
  display: flex;
  justify-content: space-between;
  color: #4b5263;
  font-size: 11px;
  font-weight: 700;
}

/* Plan cards */
.pp-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.pp-page[data-wide] .pp-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 22px 22px;
  border: 1px solid var(--tint-07);
  border-radius: 28px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
  color: var(--text);
}

.pp-plan.is-pop {
  border: 1.5px solid rgba(255, 255, 255, .9);
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
  color: #11131a;
}

[data-theme="light"] .pp-plan.is-pop { box-shadow: 0 30px 60px rgba(30, 45, 70, .22); }
.pp-page[data-wide] .pp-plan.is-pop { transform: translateY(-10px); }
.pp-plan.is-small { opacity: .55; }

.pp-page .pp-plan__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}

.pp-tag {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.pp-tag.is-ink {
  background: #11131a;
  color: #9adbe6;
}

.pp-tag.is-cy {
  background: color-mix(in oklab, #9adbe6 18%, transparent);
  color: var(--accent-fg);
}

.pp-plan.is-pop .pp-tag.is-cy {
  background: rgba(17, 19, 26, .1);
  color: #11131a;
}

.pp-page .pp-who {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.pp-page .pp-plan.is-pop .pp-who,
.pp-plan.is-pop .pp-price span,
.pp-plan.is-pop .pp-tot span { color: #3a4150; }

.pp-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pp-price b {
  font-size: 52px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.03em;
}

.pp-price span {
  color: var(--muted);
  font-size: 13px;
}

.pp-tot {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--tint-04);
}

.pp-plan.is-pop .pp-tot { background: rgba(255, 255, 255, .62); }

.pp-tot b {
  font-size: 15px;
  font-weight: 800;
}

.pp-tot span {
  color: var(--muted);
  font-size: 12px;
}

.pp-feats {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pp-feats li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
}

.pp-feats li > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 22%, transparent);
  color: var(--se-gr);
  font-size: 10px;
  font-weight: 900;
}

.pp-feats li.is-no { color: var(--muted-2); }

.pp-feats li.is-no > span:first-child {
  background: transparent;
  color: #4b505e;
}

.pp-plan.is-pop .pp-feats li > span:first-child {
  background: #11131a;
  color: #9adbe6;
}

.pp-plan.is-pop .pp-feats li.is-no { color: #6b7080; }

.pp-plan.is-pop .pp-feats li.is-no > span:first-child {
  background: transparent;
  color: #9aa3b0;
}

.pp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-top: auto;
  border: 0;
  border-radius: 14px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pp-btn:hover { color: var(--pill-fg); }

.pp-plan.is-mine .pp-btn {
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: var(--text);
}

[data-theme="light"] .pp-plan.is-mine .pp-btn { border-color: rgba(20, 30, 50, .16); }

.pp-plan.is-pop .pp-btn,
.pp-plan.is-pop.is-mine .pp-btn {
  border: 0;
  background: #11131a;
  color: #eef0f5;
}

.pp-plan.is-small .pp-btn { cursor: not-allowed; }

/* Clients */
.pp-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  padding: 10px 0;
}

.pp-page .pp-trust h2 {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: .2em;
}

.pp-trust ul { display: contents; }

.pp-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  opacity: .75;
}

.pp-trust li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
}

/* Savings and add-ons */
.pp-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.pp-page[data-wide] .pp-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.pp-save {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 26px;
  background: #151821;
  color: #eef0f5;
}

.pp-save::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 120% at 100% 0%, rgba(63, 191, 127, .18), transparent 60%);
  content: "";
  pointer-events: none;
}

.pp-save > * { position: relative; }
.pp-page .pp-save .pp-k2 { color: #7ee0a8; line-height: normal; }

.pp-page .pp-save__v {
  font-size: 44px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.03em;
}

.pp-page[data-mid] .pp-save__v { font-size: 58px; }

.pp-page .pp-save__s {
  color: #c9ccd6;
  font-size: 14px;
  line-height: 1.5;
}

.pp-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pp-bars p {
  display: flex;
  font-size: 12.5px;
  font-weight: 700;
}

.pp-bars p b {
  margin-left: auto;
  font-weight: 700;
}

.pp-bars p.is-gr {
  margin-top: 4px;
  color: #7ee0a8;
}

.pp-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
}

.pp-bar.is-gr {
  width: 80%;
  background: #3fbf7f;
}

.pp-light {
  align-self: flex-start;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #f2f3f6;
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.pp-add {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 24px;
}

.pp-add__h {
  display: flex;
  align-items: baseline;
}

.pp-page .pp-add__h h2 {
  line-height: normal;
  font-size: 18px;
  font-weight: 700;
}

.pp-add__h span {
  margin-left: auto;
  color: var(--muted);
  font-size: 12.5px;
}

.pp-adds {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-tog[aria-checked="true"] {
  border-color: color-mix(in oklab, #9adbe6 50%, transparent);
  background: color-mix(in oklab, #9adbe6 6%, transparent);
}

.pp-page .pp-tog .se-tog__t span {
  font-size: 12px;
  line-height: normal;
}

.pp-add__p {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.pp-est {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--tint-04);
}

.pp-est > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pp-cap {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.pp-est > span > span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.pp-est b {
  margin-left: auto;
  font-size: 24px;
  font-weight: 800;
}

/* Comparison */
.pp-cmp {
  display: flex;
  flex-direction: column;
  padding: 8px 8px 4px;
  border-radius: 24px;
}

.pp-cmp__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 8px;
}

.pp-page .pp-cmp__h h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: normal;
}

.pp-diff {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.pp-diff[aria-checked="true"] .se-tog__k { background: #9adbe6; }
.pp-diff[aria-checked="true"] .se-tog__k::after { transform: translateX(18px); }

/* Positioned, so the hidden "Included" labels scroll with the table. */
.pp-cmp__s {
  position: relative;
  overflow-x: auto;
}
.pp-page[data-stick] .pp-cmp__s { overflow: visible; }

.pp-t {
  display: block;
  min-width: 600px;
  border-collapse: separate;
  border-spacing: 0;
}

.pp-t thead,
.pp-t tbody { display: block; }

.pp-t tr {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) repeat(3, minmax(110px, 1fr));
  align-items: center;
  gap: 8px;
}

.pp-page[data-stick] .pp-t thead {
  position: sticky;
  top: 0;
  z-index: 5;
}

.pp-t thead tr {
  padding: 12px 14px;
  border-radius: 16px;
  background: #1f2330;
}

[data-theme="light"] .pp-t thead tr { background: #fff; }

.pp-t thead th {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  text-align: center;
}

.pp-t thead th:first-child {
  align-items: flex-start;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.pp-t thead b {
  font-size: 14px;
  font-weight: 800;
}

.pp-t thead b.is-cy { color: var(--accent-fg); }

.pp-t thead th span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 400;
}

.pp-t__g { padding: 14px 14px 4px; }

.pp-t__g th {
  grid-column: 1 / -1;
  padding: 0;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: left;
}

.pp-t tbody tr:not(.pp-t__g) {
  padding: 10px 14px;
  border-top: 1px solid var(--tint-05);
  font-size: 13.5px;
}

.pp-t tbody tr:not(.pp-t__g) th {
  padding: 0;
  color: var(--text-2);
  font-weight: 400;
  text-align: left;
}

.pp-t td {
  padding: 4px 0;
  border-radius: 8px;
  font-weight: 700;
  text-align: center;
}

.pp-t td.is-st { background: rgba(154, 219, 230, .05); }

.pp-t td.is-yes {
  color: var(--se-gr);
  font-weight: 900;
}

.pp-t td.is-no { color: #4b505e; }
[data-theme="light"] .pp-t td.is-no { color: #b9bfca; }
.pp-t td.is-add { color: var(--se-am); }

/* Questions */
.pp-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.pp-page[data-wide] .pp-faq { grid-template-columns: 280px minmax(0, 1fr); }

.pp-faq__l {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 4px;
}

.pp-faq__l .pp-k2 { color: var(--accent-fg); }

.pp-page .pp-faq__l h2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.pp-faq__l a {
  align-self: flex-start;
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.pp-qs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pp-qs li {
  overflow: hidden;
  border: 1px solid var(--tint-06);
  border-radius: 18px;
  background: rgba(255, 255, 255, .015);
}

[data-theme="light"] .pp-qs li { background: var(--tint-02); }
.pp-qs li.is-open { border-color: color-mix(in oklab, #9adbe6 40%, transparent); }

.pp-page .pp-qs h3 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.pp-qs button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.pp-qs button > span:first-child {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
}

.pp-qs li.is-open .fq-it__p { transform: rotate(45deg); }

.pp-page .pp-qs li > p {
  padding: 0 16px 16px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

/* Call to action */
.pp-cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  padding: 36px 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 30px;
  background: #11131a;
  color: #eef0f5;
}

.pp-cta::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 140% at 0% 0%, rgba(154, 219, 230, .22), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(190, 160, 255, .2), transparent 60%);
  content: "";
  pointer-events: none;
}

.pp-cta > * { position: relative; }

.pp-cta > div {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 8px;
}

.pp-page .pp-cta h2 {
  color: #eef0f5;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}

.pp-page[data-mid] .pp-cta h2 { font-size: 40px; }

.pp-page .pp-cta > div p {
  color: #c9ccd6;
  font-size: 14.5px;
}

.pp-cta__a {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pp-cta__a button,
.pp-cta__a a {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #f2f3f6;
  color: #11131a;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pp-cta__a a {
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: transparent;
  color: #eef0f5;
  font-weight: 700;
}

.pp-cta__a a:hover { color: #eef0f5; }

/* ==========================================================================
   22zz38. Blog list: cover story, toolbar, magazine grid, list with row
   actions, popular, authors, newsletter, tags
   The cover story and the newsletter look the same in both themes. Covers
   are hue gradients until real photos are set in Write Post.
   ========================================================================== */
.bg-page { gap: 16px; }

.bg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.bg-page[data-two] .bg-grid { grid-template-columns: minmax(0, 1fr) 300px; }

.bg-face {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

/* Cover story */
.bg-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  min-height: 420px;
  padding: 22px 30px 26px;
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 30px;
  background: linear-gradient(135deg, #2a2f3d, #0e1016);
  color: #eef0f5;
}

.bg-page[data-big] .bg-hero { min-height: 460px; }

.bg-hero > :not(.bg-img, .bg-size) {
  position: relative;
  z-index: 2;
}

.bg-cov__t { z-index: 1; }

.bg-hero::before {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 12, 17, .85), rgba(11, 12, 17, .3) 65%, transparent), linear-gradient(180deg, transparent 50%, rgba(11, 12, 17, .85));
  content: "";
  pointer-events: none;
}

/* Masthead on top, story at the bottom; the story pushes the card taller on phones. */
.bg-mast {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.bg-mast h1 { display: contents; }

.bg-mast h1 > span:first-child {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .32em;
}

.bg-mast h1 > span:last-child {
  color: #9adbe6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
}

.bg-mast > span {
  color: #a7abb8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.bg-mast button,
.bg-read {
  height: 36px;
  margin-left: auto;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #f2f3f6;
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.bg-hero__b {
  position: relative;
  display: flex;
  margin-top: auto;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.bg-hero__k {
  display: flex;
  align-items: center;
  align-self: flex-start;
  height: 26px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(17, 19, 26, .55);
  color: var(--un);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.bg-page .bg-hero h2 {
  font-size: 34px;
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.035em;
}

.bg-page[data-mid] .bg-hero h2 { font-size: 44px; }
.bg-page[data-wide] .bg-hero h2 { font-size: 60px; }

.bg-hero h2 button {
  padding: 0;
  border: 0;
  background: none;
  color: #eef0f5;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.bg-page .bg-hero__b > p {
  max-width: 560px;
  color: #d4d7e0;
  font-size: 16px;
  line-height: 1.5;
}

.bg-hero__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.bg-by {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bg-by .bg-face { border: 2px solid rgba(255, 255, 255, .85); }

.bg-by > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bg-by b {
  font-size: 13.5px;
  font-weight: 700;
}

.bg-by > span > span {
  color: #a7abb8;
  font-size: 12px;
  white-space: nowrap;
}

.bg-read {
  height: 42px;
  margin-left: 0;
  padding: 0 20px;
  font-size: 14px;
}

.bg-page .bg-hero__none {
  position: relative;
  margin-top: auto;
  color: #c9ccd6;
  font-size: 16px;
}

/* Toolbar */
.bg-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bg-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bg-cats button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--fo-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.bg-cats .un-c--mu { --un: #c9ccd6; }
[data-theme="light"] .bg-cats .un-c--mu { --un: #5b6272; }

.bg-cats button[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--un) 60%, transparent);
  background: color-mix(in oklab, var(--un) 12%, transparent);
  color: var(--text);
}

.bg-cats button > span:first-child {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--un);
}

.bg-cats button > span:last-child {
  font-size: 11px;
  opacity: .6;
}

.bg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.bg-page .bg-search {
  flex-basis: 220px;
  box-sizing: border-box;
}

.bg-page .bg-seg {
  flex-shrink: 0;
  align-self: center;
  padding: 3px;
}

.bg-page .bg-seg button {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
}

.bg-seg button span {
  font-size: 10.5px;
  opacity: .6;
}

/* Main column */
.bg-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.bg-page .bg-note {
  color: var(--muted);
  font-size: 13px;
}

.bg-note b { color: var(--text); }

.bg-note button,
.bg-empty button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-fg);
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bg-page .bg-empty {
  padding: 30px;
  border: 1px dashed var(--tint-14);
  border-radius: 20px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.bg-load {
  align-self: center;
  height: 42px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

[data-theme="light"] .bg-load { border-color: rgba(20, 30, 50, .14); }

/* Magazine */
.bg-mag {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: dense;
  gap: 14px;
}

.bg-mag[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bg-mag[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bg-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
}

.bg-card.is-big {
  grid-row: span 2;
  grid-column: span 2;
}

/* The cover photo's size on an empty slot */
.bg-size {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(255, 255, 255, .8);
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.bg-size--hero {
  left: auto;
  right: 6%;
  transform: translateY(-50%);
}

.bg-size--xs {
  font-size: 10px;
}

.bg-cov {
  position: relative;
  flex: 0 0 auto;
  min-height: 180px;
  padding: 0;
  overflow: hidden;
  border: 0;
  cursor: pointer;
}

.bg-card.is-big .bg-cov {
  flex: 1 1 auto;
  min-height: 320px;
}

.bg-cov__t {
  position: absolute;
  top: 12px;
  right: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
}

.bg-chip,
.bg-st {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .6);
  color: var(--un);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.bg-st {
  margin-left: auto;
  padding: 0 9px;
  background: rgba(17, 19, 26, .7);
  color: #c9ccd6;
}

.bg-st.is-am { color: oklch(0.8 0.13 70); }

.bg-card__b {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.bg-page .bg-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.bg-page .bg-card.is-big h3 { font-size: 26px; }

.bg-card h3 button,
.bg-row1 h3 button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.bg-page .bg-card__b > p {
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.5;
}

.bg-card__f {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.bg-meta b {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg-meta span { white-space: nowrap; }

.bg-card__a {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.bg-card__a > span {
  color: var(--muted-2);
  font-size: 11.5px;
  white-space: nowrap;
}

.bg-page .bg-28 {
  height: 28px;
  padding: 0 10px;
  font-size: 11.5px;
}

.bg-bm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
}

.bg-bm:hover { background: var(--tint-05); }
.bg-bm.is-on { color: var(--accent-fg); }

/* List */
.bg-list {
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 24px;
}

.bg-row1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px;
}

.bg-row1 + .bg-row1 { border-top: 1px solid var(--tint-06); }

.bg-thumb {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.bg-row1__t {
  display: flex;
  flex: 1 1 240px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bg-row1__t > p {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bg-cat {
  color: var(--un);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.bg-row1 .bg-st { margin-left: 0; }

.bg-page .bg-row1 h3 {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg-row1 h3 button {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg-views {
  margin-left: auto;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.bg-more { position: relative; }

.bg-more > button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

[data-theme="light"] .bg-more > button { border-color: rgba(20, 30, 50, .14); }

.bg-menu {
  position: absolute;
  top: 38px;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 180px;
  padding: 6px;
  border: 1px solid var(--fo-bd);
  border-radius: 14px;
  background: #1f2330;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

[data-theme="light"] .bg-menu {
  background: #fff;
  box-shadow: 0 18px 40px rgba(30, 45, 70, .18);
}

.bg-menu button {
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.bg-menu button:hover { background: var(--tint-05); }
.bg-page .bg-menu .is-co { color: var(--se-co); }

/* Right column */
.bg-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.bg-page[data-two] .bg-side {
  position: sticky;
  top: 12px;
}

.bg-page .bg-pop { gap: 4px; }

.bg-page .bg-pop h2 {
  padding-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}
.bg-page .bg-pop ol { gap: 4px; }
.bg-page .bg-pop button { padding: 9px 4px; }

.bg-page .bg-pop button > span:first-child {
  width: 24px;
  font-size: 24px;
}

.bg-page .bg-pop button > span.is-cy { color: #9adbe6; }
.bg-page .bg-pop button > span:last-child { gap: 3px; }

.bg-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.bg-page .bg-box h2 {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.bg-aus {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bg-aus button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.bg-aus .bg-face { border: 2px solid transparent; }
.bg-aus .is-me .bg-face { border-color: #9adbe6; }
.bg-aus button[aria-pressed="true"] { box-shadow: 0 0 0 1px color-mix(in oklab, #9adbe6 60%, transparent); }

.bg-aus button > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bg-aus b {
  font-size: 13px;
  font-weight: 700;
}

.bg-aus button > span:nth-child(2) > span {
  color: var(--muted);
  font-size: 11.5px;
}

.bg-aus button > span:last-child {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
}

.bg-nl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.bg-page .bg-nl__k { color: #4b5263; }

.bg-page .bg-nl h2 {
  color: #11131a;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.bg-page .bg-nl__s {
  color: #3a4150;
  font-size: 12.5px;
  font-weight: 600;
}

.bg-page .bg-nl__l {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .65);
}

.bg-nl__l li {
  display: flex;
  gap: 8px;
  min-width: 0;
  color: #3a4150;
  font-size: 12px;
  font-weight: 600;
}

.bg-nl__l li span:first-child {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--un);
}

.bg-nl__l li span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg-nl > button {
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: #11131a;
  color: #eef0f5;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.bg-nl > button.is-done {
  cursor: default;
  opacity: .55;
}

.bg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bg-tags button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

[data-theme="light"] .bg-tags button { border-color: rgba(20, 30, 50, .12); }
.bg-tags button.is-m { font-size: 12.5px; }
.bg-tags button.is-l { font-size: 13.5px; }

.bg-tags button[aria-pressed="true"] {
  border-color: color-mix(in oklab, #9adbe6 60%, transparent);
  background: color-mix(in oklab, #9adbe6 12%, transparent);
}

/* ==========================================================================
   22zz39. Blog detail: reading progress, editor bar, cover, rail, article
   blocks, contents, author and project, comments, read next
   The cover, the key-numbers plaque and the photos look the same in both
   themes. Photos are hue gradients until real ones come from Write Post.
   ========================================================================== */
.bd-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}

.bd-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #9adbe6, oklch(0.78 0.11 300));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.bd-face {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

/* Editor bar */
.bd-ed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid color-mix(in oklab, #9adbe6 30%, transparent);
  border-radius: 16px;
  background: color-mix(in oklab, #9adbe6 8%, transparent);
}

.bd-page .bd-ed p {
  flex: 1 1 220px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.bd-page .bd-36 {
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
}

/* Cover */
.bd-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  min-height: 460px;
  padding: 22px 30px 56px;
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 30px;
  color: #eef0f5;
}

.bd-page[data-big] .bd-cover { min-height: 520px; }

.bd-cover::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 12, 17, .3), transparent 30%, rgba(11, 12, 17, .9));
  content: "";
  pointer-events: none;
}

.bd-cover > :not(.bd-cover__size) {
  position: relative;
  z-index: 2;
}

.bd-cover::before { z-index: 1; }

.bd-cover .bd-cover__img,
.bg-hero .bg-img,
.bg-cov .bg-img,
.bg-thumb .bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The cover story shows the top of its photo */
.bg-hero .bg-img { object-position: top; }

.bd-cover__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bd-back {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(17, 19, 26, .45);
  color: #eef0f5;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.bd-back:hover { color: #fff; }

.bd-cover__top > span {
  margin-left: auto;
  color: #a7abb8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
}

.bd-cover__b {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  text-align: center;
}

.bd-chip {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(17, 19, 26, .55);
  color: var(--un);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.bd-page .bd-cover h1 {
  max-width: 860px;
  margin: 0;
  color: #eef0f5;
  font-size: 34px;
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.035em;
}

.bd-page[data-mid] .bd-cover h1 { font-size: 44px; }
.bd-page[data-xl] .bd-cover h1 { font-size: 60px; }

.bd-page .bd-cover__b > p:not(.bd-by) {
  max-width: 620px;
  color: #d4d7e0;
  font-size: 17px;
  line-height: 1.5;
}

.bd-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.bd-by .bd-face { border: 2px solid rgba(255, 255, 255, .85); }

.bd-by b {
  font-size: 13.5px;
  font-weight: 700;
}

.bd-by span {
  color: #a7abb8;
  font-size: 12.5px;
  white-space: nowrap;
}

/* Grid: rail | article | contents */
.bd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-content: center;
  gap: 28px;
}

.bd-page[data-wide] .bd-grid { grid-template-columns: 64px minmax(0, 680px) 200px; }

.bd-rail,
.bd-toc { display: none; }

.bd-page[data-wide] .bd-rail {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bd-page[data-wide] .bd-toc {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bd-page[data-wide] .bd-rowrail { display: none; }

.bd-rowrail {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bd-rb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

[data-theme="light"] .bd-rb { border-color: rgba(20, 30, 50, .14); }
.bd-rb:hover { background: var(--tint-05); color: var(--text); }

.bd-rb.is-lk,
[data-theme="light"] .bd-rb.is-lk {
  border-color: rgba(255, 122, 138, .5);
  background: rgba(255, 122, 138, .12);
  color: #ff7a8a;
}

.bd-rb.is-sv,
[data-theme="light"] .bd-rb.is-sv {
  border-color: color-mix(in oklab, #9adbe6 55%, transparent);
  color: var(--accent-fg);
}

.bd-rn {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

/* Article */
.bd-art {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-self: center;
  width: 100%;
  max-width: 680px;
  min-width: 0;
}

.bd-page .bd-p {
  white-space: pre-line;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.75;
}

.bd-drop {
  float: left;
  margin: 6px 10px 0 0;
  color: var(--text);
  font-size: 64px;
  font-weight: 700;
  line-height: .82;
}

.bd-page .bd-h2 {
  margin: 14px 0 0;
  color: var(--text);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  scroll-margin-top: 20px;
}

.bd-q {
  margin: 10px 0;
  padding: 6px 0 6px 22px;
  border-left: 3px solid #9adbe6;
}

.bd-page .bd-q p {
  color: var(--text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.bd-q footer {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.bd-fig {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0;
}

.bd-ph {
  display: block;
  width: 100%;
  object-fit: cover;
  height: 240px;
  border-radius: 18px;
}

/* A story without a cover photo shows its size, right of the title */
.bd-cover__size {
  position: absolute;
  top: 50%;
  right: 6%;
  color: rgba(255, 255, 255, .8);
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
}

/* An empty photo slot says the photo's size */
span.bd-ph {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-ph__size {
  color: rgba(255, 255, 255, .8);
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}

.bd-fig .bd-ph {
  height: 360px;
  border-radius: 20px;
}

.bd-fig figcaption {
  color: var(--muted);
  font-size: 12.5px;
}

.bd-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bd-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--tint-07);
  border-radius: 20px;
  background: var(--tint-03);
}

.bd-page .bd-list > p {
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
}

.bd-list ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bd-list li {
  display: flex;
  gap: 10px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
}

.bd-list li span {
  color: var(--se-gr);
  font-weight: 900;
}

.bd-nums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.bd-nums div {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  text-align: center;
}

.bd-nums dd {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.bd-nums dt {
  color: #4b5263;
  font-size: 12px;
  font-weight: 700;
}

.bd-page .bd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
}

.bd-tags a {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--fo-bd);
  border-radius: 9px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.bd-tags a:hover { background: var(--tint-05); }

/* Contents */
.bd-page .bd-toc > p:first-child {
  padding-bottom: 6px;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.bd-toc ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bd-toc a {
  display: flex;
  padding: 6px 0 6px 12px;
  border-left: 2px solid rgba(255, 255, 255, .1);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

[data-theme="light"] .bd-toc a { border-left-color: rgba(20, 30, 50, .12); }

.bd-toc a[aria-current="location"],
[data-theme="light"] .bd-toc a[aria-current="location"] {
  border-left-color: #9adbe6;
  color: var(--text);
  font-weight: 700;
}

.bd-page .bd-left {
  margin-top: 10px;
  color: var(--muted-2);
  font-size: 12px;
}

/* Author and project */
.bd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.bd-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
}

.bd-au {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bd-au > div,
.bd-pj > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bd-page .bd-k { color: var(--muted-2); }

.bd-page .bd-au h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.bd-au > div > span:last-child,
.bd-pj > div span {
  color: var(--muted);
  font-size: 12.5px;
}

.bd-page .bd-bio {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.bd-card__a {
  display: flex;
  gap: 8px;
}

.bd-card__a .is-on {
  border-color: color-mix(in oklab, #9adbe6 55%, transparent);
  color: var(--accent-fg);
}

.bd-pj {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bd-pj > span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: #11131a;
  font-size: 14px;
  font-weight: 900;
}

.bd-page .bd-pj h3 {
  overflow: hidden;
  line-height: normal;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bd-prog2 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bd-prog2 p {
  display: flex;
  justify-content: space-between;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}

.bd-bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-07);
}

.bd-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.bd-link {
  align-self: flex-start;
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

/* Comments */
.bd-cms {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  border-radius: 24px;
  scroll-margin-top: 20px;
}

.bd-page .bd-cms h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}

.bd-new {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.bd-new > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.bd-page .bd-ta {
  height: auto;
  min-height: 56px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.bd-new__a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bd-new__a > span {
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 700;
}

.bd-x {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.bd-new__a .ub-light { margin-left: auto; }
.bd-page .ub-light.is-dim { opacity: .45; }

.bd-thread > li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--tint-06);
}

.bd-thread > li + li { margin-top: 18px; }

.bd-cm {
  display: flex;
  gap: 12px;
}

.bd-cm.is-re { padding-left: 46px; }

.bd-cm > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.bd-ini {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 800;
}

.bd-ini.is-sm {
  width: 30px;
  height: 30px;
}

.bd-cm__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.bd-cm__h b {
  font-size: 13.5px;
  font-weight: 700;
}

.bd-page .bd-tag {
  height: 20px;
  padding: 0 7px;
  font-size: 10.5px;
}

.bd-cm__h > span:last-child {
  color: var(--muted-2);
  font-size: 11.5px;
}

.bd-page .bd-cm__t {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

.bd-cm__a {
  display: flex;
  gap: 14px;
}

.bd-cm__a button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.bd-cm__a button.is-lk { color: #ff7a8a; }

/* Read next */
.bd-next {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
}

.bd-next__h {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.bd-page .bd-next__h h2 {
  line-height: normal;
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
}

.bd-next__h span {
  color: var(--muted);
  font-size: 13px;
}

.bd-next__l {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.bd-next__l a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  color: var(--text);
  text-decoration: none;
}

.bd-next__c {
  position: relative;
  display: block;
  height: 240px;
}

.bd-next__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bd-next__c .bd-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 22px;
  padding: 0 9px;
  border: 0;
  background: rgba(17, 19, 26, .6);
  font-size: 10.5px;
}

.bd-next__t {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.bd-next__t b {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.bd-next__t span {
  color: var(--muted);
  font-size: 12px;
}

.bd-pns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 6px;
}

.bd-pn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-02);
  color: var(--text);
  text-decoration: none;
}

.bd-pn.is-r { text-align: right; }
.bd-pn.is-off { opacity: .45; }
a.bd-pn:hover { background: var(--tint-04); color: var(--text); }

.bd-pn span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}

.bd-pn b {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}

/* ==========================================================================
   22zz40. Write post: editor bar, cover and photo drops, title, block
   editor with insert menu and tools, preview, publishing column, checklist
   Photos are downscaled and kept in this browser until a real upload API.
   ========================================================================== */
.wp-page { gap: 16px; }

.wp-face {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.wp-page .wp-36 {
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
}

.wp-page .ub-light.is-dim { opacity: .45; }

/* Editor bar */
.wp-bar {
  position: sticky;
  top: 12px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--fo-bd);
  border-radius: 20px;
  background: color-mix(in oklab, var(--card-from) 92%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  backdrop-filter: blur(14px);
}

[data-theme="light"] .wp-bar { box-shadow: 0 14px 34px rgba(30, 45, 70, .14); }

/* On phones the bar wraps to three rows, so it scrolls away with the page. */
.wp-page:not([data-big]) .wp-bar { position: relative; top: auto; }

.wp-back {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.wp-back:hover { background: var(--tint-05); color: var(--text); }

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

.wp-st {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #8a8f9e 16%, transparent);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.wp-st.is-pub {
  background: color-mix(in oklab, oklch(0.8 0.14 155) 16%, transparent);
  color: var(--se-gr);
}

.wp-st.is-sched {
  background: color-mix(in oklab, oklch(0.8 0.13 70) 16%, transparent);
  color: var(--se-am);
}

.wp-bar__s > span:last-child,
.wp-page .wp-bar__n {
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.wp-page .wp-bar__n { color: var(--text-3); }

.wp-page .wp-bar__a {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* Grid */
.wp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.wp-page[data-two] .wp-grid { grid-template-columns: minmax(0, 1fr) 320px; }

.wp-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.wp-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.wp-page[data-two] .wp-side {
  position: sticky;
  top: 86px;
}

/* Photo drops: cover, image, pair */
.wp-cover {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 28px;
}

.wp-page[data-big] .wp-cover { min-height: 320px; }

.wp-cover__k {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .6);
  color: #eef0f5;
  font-size: 11.5px;
  font-weight: 800;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.wp-drop {
  position: relative;
  display: flex;
  height: 300px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(135deg, oklch(0.42 0.08 220), #151821);
}

.wp-drop.is-cover {
  position: absolute;
  inset: 0;
  height: auto;
  border-radius: 0;
  background: none;
}

.wp-drop.is-half {
  height: 200px;
  border-radius: 14px;
}

.wp-pair .wp-drop:nth-child(2) { background: linear-gradient(135deg, oklch(0.42 0.08 260), #151821); }

.wp-drop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wp-drop__l {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: #c9ccd6;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.wp-drop__l span {
  padding: 8px 14px;
  border: 1px dashed rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: rgba(17, 19, 26, .55);
  backdrop-filter: blur(8px);
}

/* An empty slot: diagonal stripes over its colour, and the photo's real size */
.wp-drop:not(.has-img) {
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 28px), linear-gradient(135deg, oklch(0.42 0.08 220), #151821);
}

.wp-pair .wp-drop:nth-child(2):not(.has-img) {
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 28px), linear-gradient(135deg, oklch(0.42 0.08 260), #151821);
}

.wp-drop.is-cover:not(.has-img) {
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 14px, transparent 14px 28px);
}

.wp-drop:not(.has-img) .wp-drop__l {
  flex-direction: column;
  gap: 12px;
}

.wp-drop__size {
  color: #eef0f5;
  font-size: 26px;
  font-weight: 800;
  white-space: nowrap;
}

.wp-drop.is-half .wp-drop__size { font-size: 20px; }

.wp-drop.has-img .wp-drop__l { align-items: flex-end; opacity: 0; transition: opacity .15s; }
.wp-drop.has-img:hover .wp-drop__l,
.wp-drop.has-img:focus-within .wp-drop__l { opacity: 1; }
.wp-drop.is-over { box-shadow: inset 0 0 0 2px #9adbe6; }
.wp-drop:focus-within { box-shadow: inset 0 0 0 2px rgba(154, 219, 230, .7); }

.wp-drop__x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 19, 26, .7);
  color: #eef0f5;
  font-size: 15px;
  cursor: pointer;
}

/* Title card */
.wp-title {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 24px;
}

.wp-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wp-cats button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--fo-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.wp-cats button span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--un);
}

.wp-cats button[aria-pressed="true"] {
  border-color: color-mix(in oklab, var(--un) 60%, transparent);
  background: color-mix(in oklab, var(--un) 14%, transparent);
  color: var(--text);
}

.wp-t,
.wp-ex,
.wp-blk textarea,
.wp-blk input {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  resize: none;
}

.wp-t {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.wp-page[data-big] .wp-t { font-size: 44px; }

.wp-page .wp-tn,
.wp-page .wp-cnt {
  color: var(--muted-2);
  font-size: 11.5px;
  font-weight: 700;
  text-align: right;
}

.wp-page .wp-tn.is-over { color: var(--se-co); }
.wp-page .wp-cnt { font-size: 11px; }
.wp-page .wp-cnt.is-over { color: var(--se-am); }

.wp-ex {
  color: var(--text-3);
  font-size: 17px;
  line-height: 1.5;
}

/* Body */
.wp-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: 24px;
}

.wp-ins {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
}

.wp-ins > span {
  flex: 1;
  height: 1px;
  background: var(--tint-06);
}

.wp-ins > button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: #171a23;
  color: var(--text-2);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

[data-theme="light"] .wp-ins > button {
  border-color: rgba(20, 30, 50, .25);
  background: #fff;
}

.wp-menu {
  position: absolute;
  top: 34px;
  left: 50%;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  width: min(420px, 90vw);
  padding: 8px;
  border: 1px solid var(--fo-bd);
  border-radius: 16px;
  background: #1f2330;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  transform: translateX(-50%);
}

[data-theme="light"] .wp-menu {
  background: #fff;
  box-shadow: 0 18px 40px rgba(30, 45, 70, .18);
}

.wp-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.wp-menu button:hover,
.wp-menu button:focus-visible { background: var(--tint-05); }

.wp-menu button > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--tint-06);
  font-size: 12px;
  font-weight: 900;
}

.wp-menu button > span:last-child {
  display: flex;
  flex-direction: column;
}

.wp-menu b {
  font-size: 13px;
  font-weight: 700;
}

.wp-menu button > span:last-child > span {
  color: var(--muted);
  font-size: 11px;
}

.wp-blk {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: rgba(255, 255, 255, .015);
}

[data-theme="light"] .wp-blk { background: var(--tint-02); }
.wp-blk:hover,
.wp-blk:focus-within { border-color: rgba(154, 219, 230, .25); }

.wp-blk__b {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.wp-page .wp-blk__k {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.wp-p textarea {
  min-height: 60px;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.7;
  resize: vertical;
}

.wp-h input {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.wp-q {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 16px;
  border-left: 3px solid #9adbe6;
}

.wp-q textarea {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  resize: vertical;
}

.wp-q input {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.wp-blk .wp-cap input,
.wp-blk .wp-box textarea {
  box-sizing: border-box;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--fo-bd);
  border-radius: 12px;
  background: var(--tint-03);
  font-size: 13.5px;
}

.wp-blk .wp-cap.is-empty input { border-color: color-mix(in oklab, oklch(0.8 0.13 70) 45%, transparent); }

.wp-blk .wp-box textarea {
  height: auto;
  padding: 10px 12px;
  font-size: 14.5px;
  line-height: 1.7;
  resize: vertical;
}

.wp-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.wp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wp-list > input {
  color: var(--accent-fg);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .16em;
}

.wp-nums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.wp-nums > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  background: var(--tint-03);
}

.wp-nums input {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}

.wp-nums input:nth-of-type(2) {
  color: var(--muted);
  font-size: 12px;
}

.wp-tools {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wp-tools button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--fo-bd);
  border-radius: 9px;
  background: var(--card-from);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.wp-tools button.is-dim { opacity: .35; cursor: default; }
.wp-page .wp-tools .is-co { color: var(--se-co); font-size: 14px; }

.wp-prev {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.wp-del button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--se-co);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* Right column */
.wp-box2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 24px;
}

.wp-page .wp-k {
  color: var(--muted-2);
  line-height: normal;
}

.wp-page .wp-seg {
  align-self: stretch;
  padding: 3px;
}

.wp-page .wp-seg button {
  flex: 1;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
}

.wp-page .wp-in {
  box-sizing: border-box;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13.5px;
}

.wp-page .wp-ta {
  height: auto;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.wp-f {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wp-f label {
  color: var(--muted);
  font-size: 11.5px;
}

.wp-url {
  display: flex;
  align-items: center;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--fo-bd);
  border-radius: 12px;
  background: var(--tint-03);
}

.wp-url:focus-within { border-color: rgba(154, 219, 230, .55); }

.wp-url span {
  padding-left: 12px;
  color: var(--muted-2);
  font-size: 12.5px;
  white-space: nowrap;
}

.wp-url input {
  width: 100%;
  min-width: 0;
  padding: 0 12px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}

.wp-co {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.wp-co > span {
  color: var(--muted);
  font-size: 11.5px;
}

.wp-co button {
  display: flex;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  opacity: .55;
}

.wp-co button[aria-pressed="true"] {
  border-color: #9adbe6;
  opacity: 1;
}

.wp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wp-tags li {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 4px 0 10px;
  border: 1px solid color-mix(in oklab, #9adbe6 35%, transparent);
  border-radius: 9px;
  background: color-mix(in oklab, #9adbe6 12%, transparent);
  font-size: 12px;
  font-weight: 700;
}

.wp-tags button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
}

.wp-sug {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wp-sug button {
  height: 26px;
  padding: 0 9px;
  border: 1px dashed rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

[data-theme="light"] .wp-sug button { border-color: rgba(20, 30, 50, .22); }

.wp-lp {
  overflow: hidden;
  border: 1px solid var(--tint-08, rgba(255, 255, 255, .1));
  border-radius: 14px;
  background: #f4f5f8;
  color: #11131a;
}

.wp-lp__c {
  position: relative;
  display: block;
  height: 110px;
}

.wp-lp__c img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wp-lp__t {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
}

.wp-lp__t > span:first-child {
  color: #6b7080;
  font-size: 10.5px;
  font-weight: 700;
}

.wp-lp__t b {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-lp__t > span:last-child {
  max-height: 34px;
  overflow: hidden;
  color: #4b5263;
  font-size: 12px;
  line-height: 1.4;
}

.wp-ck {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wp-ck li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 13px;
}

.wp-ck li > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tint-08, rgba(255, 255, 255, .1));
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.wp-ck li.is-ok { color: var(--text-3); }
.wp-ck li.is-ok > span:first-child { background: #3fbf7f; }
.wp-ck li.is-todo > span:first-child { background: #e0a21a; }

.wp-ck em {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 10.5px;
  font-style: normal;
}

/* ==========================================================================
   22zz41. Error page: preview switcher, cover-issue hero with a giant code,
   state helpers, tilted photo card, usual places, request ID footer
   The hero and the photo card look the same in both themes.
   ========================================================================== */
.er-page { gap: 16px; }

.er-kinds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.er-page .er-cap {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
}

.er-page .er-seg {
  flex-wrap: wrap;
  padding: 4px;
}

.er-page .er-seg button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  font-size: 12.5px;
}

.er-seg button span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--un);
}

/* Hero */
.er-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  min-height: 520px;
  box-sizing: border-box;
  padding: 70px 22px 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 30px;
  background: #11131a;
  color: #eef0f5;
}

.er-page[data-wide] .er-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  padding: 70px 40px 40px;
}

.er-hero::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 120% at 0% 0%, color-mix(in oklab, var(--un) 22%, transparent), transparent 60%), radial-gradient(70% 100% at 100% 100%, color-mix(in oklab, var(--un) 14%, transparent), transparent 60%);
  content: "";
  pointer-events: none;
}

.er-hero.un-c--co { --un: oklch(0.72 0.14 35); }

.er-mast {
  position: absolute;
  top: 22px;
  right: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.er-mast span:first-child {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .32em;
}

.er-mast span:nth-child(2) {
  color: var(--un);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
}

.er-mast span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: auto;
  color: #a7abb8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
}

.er-l {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding-top: 40px;
}

.er-page .er-big {
  font-size: 110px;
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.06em;
  white-space: nowrap;
}

.er-page[data-mid] .er-big { font-size: 150px; }
.er-page[data-xl] .er-big { font-size: 200px; }
.er-page .er-big.is-word { font-size: 64px; }
.er-page[data-mid] .er-big.is-word { font-size: 88px; }
.er-page[data-xl] .er-big.is-word { font-size: 120px; }

.er-big span:last-child {
  color: transparent;
  -webkit-text-stroke: 2px var(--un);
}

.er-page .er-hero h1 {
  margin: 0;
  color: #eef0f5;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.025em;
}

.er-page[data-t] .er-hero h1 { font-size: 40px; }

.er-page .er-sub {
  max-width: 520px;
  color: #c9ccd6;
  font-size: 16px;
  line-height: 1.55;
}

.er-page .er-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
}

/* 404 search */
.er-search {
  position: relative;
  max-width: 520px;
}

.er-q {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #a7abb8;
}

.er-q:focus-within { border-color: rgba(154, 219, 230, .55); }

.er-q input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eef0f5;
  font: inherit;
  font-size: 15px;
}

.er-q input::-webkit-search-cancel-button { display: none; }

.er-res {
  position: absolute;
  top: 56px;
  right: 0;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: #1f2330;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.er-res a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #eef0f5;
  text-decoration: none;
}

.er-res a:hover,
.er-res a:focus-visible { background: rgba(255, 255, 255, .05); color: #eef0f5; }

.er-res a > span:first-child {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--un);
}

.er-res b {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
}

.er-res a > span:last-child {
  color: #8a8f9e;
  font-size: 11.5px;
}

.er-page .er-none {
  margin-top: 8px;
  color: #a7abb8;
  font-size: 12.5px;
}

/* 403 access */
.er-own {
  display: flex;
  align-items: center;
  gap: 10px;
}

.er-face {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.er-own > span {
  display: flex;
  flex-direction: column;
}

.er-own b {
  font-size: 13.5px;
  font-weight: 700;
}

.er-own > span > span {
  color: #a7abb8;
  font-size: 12px;
}

.er-ta {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  outline: 0;
  background: rgba(255, 255, 255, .04);
  color: #eef0f5;
  font: inherit;
  font-size: 13.5px;
  resize: vertical;
}

.er-ta:focus { border-color: rgba(154, 219, 230, .55); }

.er-page .er-ok {
  color: #7ee0a8;
  font-size: 13px;
  font-weight: 700;
}

/* 500 services */
.er-page .er-svc {
  gap: 6px;
  padding: 12px 14px;
}

.er-svc li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.er-svc li > span:first-child {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--un);
}

.er-svc b {
  flex: 1;
  font-weight: 600;
}

.er-svc li > span:last-child {
  color: var(--un);
  font-size: 12px;
  font-weight: 800;
}

/* Offline */
.er-page .er-net {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.er-dot {
  position: relative;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e0a21a;
}

.er-dot::before {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(224, 162, 26, .25);
  content: "";
  animation: fq-pulse 2s ease-out infinite;
}

.er-net.is-on .er-dot { background: #3fbf7f; }
.er-net.is-on .er-dot::before { background: rgba(63, 191, 127, .25); }

.er-net b {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}

.er-net > span:last-child {
  color: #a7abb8;
  font-size: 12px;
}

/* Countdowns */
.er-cd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.er-cd__t {
  display: flex;
  gap: 6px;
}

.er-cd__t > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  box-sizing: border-box;
}

.er-cd__t b {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.er-cd__t > span > span {
  color: #8a8f9e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.er-page .er-cd > p:last-child {
  color: #a7abb8;
  font-size: 13px;
}

/* Actions */
.er-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.er-pri,
.er-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: transparent;
  color: #eef0f5;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.er-sec:hover { background: rgba(255, 255, 255, .06); color: #eef0f5; }

.er-pri {
  border: 0;
  background: #f2f3f6;
  color: #11131a;
  font-weight: 800;
}

.er-pri:hover { color: #11131a; }
.er-pri.is-done { opacity: .6; cursor: default; }

/* Photo card */
.er-art {
  position: relative;
  justify-self: center;
  width: 220px;
  margin: 0;
  padding: 12px 12px 46px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #f4f2ec;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
  transform: rotate(4deg);
}

.er-page[data-wide] .er-art { width: 300px; }

.er-art__p {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--un) 45%, transparent), #151821);
}

.er-art__p,
.mt-art__p,
.cs-art__p {
  position: relative;
}

.mt-art__p span,
.cs-art__p span {
  position: relative;
}

.er-art__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.er-art__p span {
  position: relative;
  color: rgba(244, 242, 236, .18);
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -.05em;
}

.er-art figcaption {
  position: absolute;
  right: 12px;
  bottom: 14px;
  left: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #3a4150;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
}

.er-tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 80px;
  height: 24px;
  background: color-mix(in oklab, var(--un) 60%, transparent);
  transform: translateX(-50%) rotate(-4deg);
}

/* Places */
.er-places {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.er-page .er-places h2 {
  padding: 0 4px;
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: .2em;
}

.er-places ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.er-places a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 24px;
  color: var(--text);
  text-decoration: none;
  transition: transform .15s;
}

.er-places a:hover { transform: translateY(-2px); color: var(--text); }

.er-places a > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--un) 16%, transparent);
  color: var(--un);
}

.er-places a > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.er-places b {
  font-size: 14.5px;
  font-weight: 700;
}

.er-places a > span:last-child > span {
  color: var(--muted);
  font-size: 12px;
}

/* Footer */
.er-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 14px 18px;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 18px;
}

[data-theme="light"] .er-foot { border-color: rgba(20, 30, 50, .16); }

.er-page .er-id {
  flex: 1 1 200px;
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.er-copy {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

[data-theme="light"] .er-copy { border-color: rgba(20, 30, 50, .16); }

.er-rep {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.er-rep__f {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 8px;
}

.er-rep__f input {
  flex: 1 1 260px;
  box-sizing: border-box;
  height: 40px;
  font-size: 13.5px;
}

.er-rep__f .ub-light { height: 40px; }

/* ==========================================================================
   22zz42. Under maintenance: hero with countdown and progress, step
   timeline, live updates, works now, what's new, urgent contact, past
   The hero, the photo card and the urgent card look the same in both themes.
   ========================================================================== */
.mt-page { gap: 16px; }

.mt-face {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

/* Hero */
.mt-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  box-sizing: border-box;
  padding: 70px 22px 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 30px;
  background: #11131a;
  color: #eef0f5;
}

.mt-page[data-wide] .mt-hero {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  padding: 70px 40px 40px;
}

.mt-hero::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 120% at 0% 0%, rgba(190, 160, 255, .22), transparent 60%), radial-gradient(70% 100% at 100% 100%, rgba(154, 219, 230, .14), transparent 60%);
  content: "";
  pointer-events: none;
}

.mt-mast {
  position: absolute;
  top: 22px;
  right: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.mt-mast > span:first-child {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .32em;
}

.mt-mast > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  color: oklch(0.78 0.11 300);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt-mast > span:last-child {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: oklch(0.78 0.11 300);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
}

.mt-mast > span:last-child > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(190, 160, 255, .25);
}

.mt-mast > span.is-on { color: #3fbf7f; }
.mt-mast > span.is-on > span { box-shadow: 0 0 0 4px rgba(63, 191, 127, .25); }

.mt-l {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding-top: 40px;
}

.mt-page .mt-big {
  font-size: 68px;
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.05em;
}

.mt-page[data-mid] .mt-big { font-size: 96px; }
.mt-page[data-xl] .mt-big { font-size: 130px; }

.mt-big span {
  color: transparent;
  -webkit-text-stroke: 2px oklch(0.78 0.11 300);
}

.mt-page .mt-hero h1 {
  margin: 0;
  color: #eef0f5;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.025em;
}

.mt-page[data-t] .mt-hero h1 { font-size: 40px; }

.mt-page .mt-sub {
  max-width: 540px;
  color: #c9ccd6;
  font-size: 16px;
  line-height: 1.55;
}

.mt-cd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.mt-cd__t {
  display: flex;
  gap: 6px;
}

.mt-cd__t > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  min-width: 70px;
  padding: 12px 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
}

.mt-cd__t b {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mt-cd__t > span > span {
  color: #8a8f9e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.mt-cd > p:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mt-cd > p:last-child b {
  font-size: 14px;
  font-weight: 700;
}

.mt-cd > p:last-child span {
  color: #a7abb8;
  font-size: 12.5px;
}

.mt-prog {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 540px;
}

.mt-prog > p {
  display: flex;
  font-size: 12.5px;
  font-weight: 800;
}

.mt-prog > p span:last-child {
  margin-left: auto;
  color: oklch(0.78 0.11 300);
}

.mt-bar {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.mt-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9adbe6, oklch(0.78 0.11 300));
  transition: width .8s;
}

.mt-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mt-mail {
  display: flex;
  flex: 1 1 300px;
  min-width: 0;
  gap: 6px;
  max-width: 420px;
}

.mt-mail input {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 46px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  outline: 0;
  background: rgba(255, 255, 255, .05);
  color: #eef0f5;
  font: inherit;
  font-size: 14px;
}

.mt-mail input:focus { border-color: rgba(154, 219, 230, .55); }

.mt-mail button {
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #f2f3f6;
  color: #11131a;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.mt-page .mt-ok {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(63, 191, 127, .14);
  color: #7ee0a8;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.mt-sec {
  display: flex;
  align-items: center;
  height: 46px;
  box-sizing: border-box;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: #eef0f5;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.mt-sec:hover { background: rgba(255, 255, 255, .06); color: #eef0f5; }

.mt-art {
  position: relative;
  justify-self: center;
  box-sizing: border-box;
  width: 220px;
  margin: 0;
  padding: 12px 12px 46px;
  border-radius: 8px;
  background: #f4f2ec;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
  transform: rotate(-3deg);
}

.mt-page[data-wide] .mt-art { width: 290px; }

.mt-art__p {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(135deg, color-mix(in oklab, oklch(0.78 0.11 300) 45%, transparent), #151821);
}

.mt-art__p span {
  color: rgba(244, 242, 236, .18);
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -.05em;
}

.mt-art figcaption {
  position: absolute;
  right: 12px;
  bottom: 14px;
  left: 12px;
  display: flex;
  justify-content: space-between;
  color: #3a4150;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
}

.mt-tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 80px;
  height: 24px;
  background: rgba(190, 160, 255, .55);
  transform: translateX(-50%) rotate(3deg);
}

/* Pairs */
.mt-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.mt-page[data-wide] .mt-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.mt-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border-radius: 24px;
  scroll-margin-top: 20px;
}

.mt-card__h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 10px;
}

.mt-page .mt-card h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
}

.mt-card__h > span {
  margin-left: auto;
  color: var(--muted);
  font-size: 12.5px;
}

/* Steps */
.mt-page .mt-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mt-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 12px;
}

.mt-steps li::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 13px;
  width: 2px;
  background: var(--tint-08);
  content: "";
}

.mt-steps li.is-done::before { background: #3fbf7f; }
.mt-steps li:last-child::before { display: none; }

.mt-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin-top: 10px;
  border: 2px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: var(--card-to);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

[data-theme="light"] .mt-node { border-color: rgba(20, 30, 50, .2); }

.mt-steps .is-done .mt-node {
  border-color: transparent;
  background: #3fbf7f;
  color: #11131a;
}

.mt-steps .is-now .mt-node {
  border-color: transparent;
  background: oklch(0.78 0.11 300);
  box-shadow: 0 0 0 5px rgba(190, 160, 255, .2);
}

.mt-steps li > p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0 16px;
}

.mt-steps b {
  font-size: 14.5px;
  font-weight: 700;
}

.mt-steps .is-now b { font-weight: 800; }
.mt-steps .is-next b { color: var(--muted); }

.mt-steps li > p > span:not(.mt-mini) {
  color: var(--muted);
  font-size: 12.5px;
}

.mt-mini {
  display: block;
  max-width: 260px;
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-08);
}

.mt-mini span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: oklch(0.78 0.11 300);
  transition: width .8s;
}

.mt-when {
  padding-top: 12px;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.mt-steps .is-done .mt-when { color: #3fbf7f; }
.mt-steps .is-now .mt-when { color: oklch(0.78 0.11 300); }
[data-theme="light"] .mt-steps .is-now .mt-when { color: oklch(0.5 0.14 300); }
[data-theme="light"] .mt-steps .is-done .mt-when { color: #2f8a55; }

/* Live updates */
.mt-page .mt-upd { gap: 10px; }
.mt-upd .mt-card__h { align-items: center; padding-bottom: 0; }

.mt-live {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mt-page .mt-live {
  color: #3fbf7f;
  font-size: 11.5px;
  font-weight: 800;
}

.mt-live span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.mt-page .mt-upd ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mt-upd li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
}

.mt-upd li + li { border-top: 1px solid var(--tint-05); }

.mt-upd time {
  padding-top: 2px;
  color: var(--accent-fg);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.mt-upd li > p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mt-upd li > p > span:first-child {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.mt-upd li > p > span:last-child {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-2);
  font-size: 11.5px;
}

/* Works now, what's new */
.mt-sec2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mt-page .mt-k {
  padding: 0 4px;
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: .2em;
}

.mt-page .mt-k.is-vi { color: oklch(0.78 0.11 300); }
[data-theme="light"] .mt-page .mt-k.is-vi { color: oklch(0.5 0.14 300); }

.mt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.mt-work {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-color: color-mix(in oklab, var(--un) 30%, transparent);
  border-radius: 24px;
}

.mt-work__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mt-work__h > span:first-child {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--un);
}

.mt-work__h b {
  font-size: 15px;
  font-weight: 700;
}

.mt-work__h > span:last-child {
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
}

.mt-work ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mt-work li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--tint-05);
}

.mt-work li b {
  font-size: 13.5px;
  font-weight: 700;
}

.mt-work li span {
  color: var(--muted);
  font-size: 12px;
}

.mt-new {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 24px;
}

.mt-new > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: color-mix(in oklab, var(--un) 16%, transparent);
  color: var(--un);
}

.mt-new b {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.mt-new > span:nth-of-type(2) {
  font-size: 14px;
  font-weight: 700;
}

.mt-new > span:last-child {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Urgent and past */
.mt-urg {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.mt-page .mt-urg__k {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.mt-page .mt-urg h2 {
  color: #11131a;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

.mt-urg__l {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mt-urg__l button,
.mt-urg__l a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .7);
  color: #11131a;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mt-urg__l button:hover,
.mt-urg__l a:hover { background: #fff; color: #11131a; }

.mt-urg__l span:first-child {
  width: 54px;
  color: #4b5263;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
}

.mt-urg__l b {
  flex: 1;
  font-size: 14px;
  font-weight: 800;
}

.mt-urg__l span:last-child {
  color: #2b8a99;
  font-size: 12px;
  font-weight: 800;
}

.mt-page .mt-past { gap: 6px; }
.mt-page .mt-past h2 { padding-bottom: 6px; }

.mt-page .mt-past ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mt-past li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.mt-past li + li { border-top: 1px solid var(--tint-05); }

.mt-past li > p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mt-past b {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt-past li > p span {
  color: var(--muted);
  font-size: 12px;
}

.mt-dur {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.mt-dur.is-gr {
  background: color-mix(in oklab, oklch(0.8 0.14 155) 16%, transparent);
  color: oklch(0.8 0.14 155);
}

.mt-dur.is-am {
  background: color-mix(in oklab, oklch(0.8 0.13 70) 16%, transparent);
  color: oklch(0.8 0.13 70);
}

[data-theme="light"] .mt-dur.is-gr { color: #2f8a55; }
[data-theme="light"] .mt-dur.is-am { color: #a8700c; }

/* ==========================================================================
   22zz43. Coming soon: teaser hero with countdown and waitlist, features,
   roadmap, vote, private-beta application
   The hero, the photo card and the beta card look the same in both themes.
   ========================================================================== */
.cs-page { gap: 16px; }

/* Hero */
.cs-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  box-sizing: border-box;
  padding: 70px 22px 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 30px;
  background: #11131a;
  color: #eef0f5;
}

.cs-page[data-wide] .cs-hero {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  padding: 70px 40px 40px;
}

.cs-hero::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 120% at 0% 0%, rgba(201, 154, 78, .24), transparent 60%), radial-gradient(70% 100% at 100% 100%, rgba(154, 219, 230, .16), transparent 60%);
  content: "";
  pointer-events: none;
}

.cs-mast {
  position: absolute;
  top: 22px;
  right: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.cs-mast span:first-child {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .32em;
}

.cs-mast span:nth-child(2) {
  color: #c99a4e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  white-space: nowrap;
}

.cs-mast span:last-child {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: #a7abb8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-l {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding-top: 40px;
}

.cs-page .cs-k,
.cs-page .cs-k2 {
  color: #c99a4e;
  font-size: 11px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: .2em;
}

.cs-page .cs-k2 { padding: 0 4px; }
[data-theme="light"] .cs-page .cs-k2 { color: #8a6424; }

.cs-page .cs-big {
  margin: 0;
  color: #eef0f5;
  font-size: 64px;
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.05em;
}

.cs-page[data-mid] .cs-big { font-size: 90px; }
.cs-page[data-xl] .cs-big { font-size: 120px; }

.cs-big span {
  color: transparent;
  -webkit-text-stroke: 2px #c99a4e;
}

.cs-page .cs-pitch {
  max-width: 540px;
  color: #d4d7e0;
  font-size: 18px;
  line-height: 1.5;
}

.cs-cd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.cs-cd__t {
  display: flex;
  gap: 6px;
}

.cs-cd__t > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  min-width: 64px;
  padding: 12px 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
}

.cs-cd__t b {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cs-cd__t > span > span {
  color: #8a8f9e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.cs-cd > p:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-cd > p:last-child b {
  font-size: 14px;
  font-weight: 700;
}

.cs-cd > p:last-child span {
  color: #a7abb8;
  font-size: 12.5px;
}

.cs-wait {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 540px;
}

.cs-join {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cs-join input {
  flex: 1 1 240px;
  width: 0;
  min-width: 0;
  height: 48px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  outline: 0;
  background: rgba(255, 255, 255, .05);
  color: #eef0f5;
  font: inherit;
  font-size: 14.5px;
}

.cs-join input:focus { border-color: rgba(201, 154, 78, .7); }
.cs-join input[aria-invalid="true"] { border-color: oklch(0.72 0.14 35); }

.cs-join button {
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #f2f3f6;
  color: #11131a;
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.cs-page .cs-err {
  color: oklch(0.72 0.14 35);
  font-size: 12.5px;
  font-weight: 600;
}

.cs-pos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 16px;
  border: 1px solid rgba(201, 154, 78, .4);
  border-radius: 18px;
  background: rgba(201, 154, 78, .12);
}

.cs-pos p {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: 2px;
}

.cs-pos b {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.cs-pos p span {
  color: #d4d7e0;
  font-size: 12.5px;
}

.cs-pos button {
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #c99a4e;
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.cs-proof {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cs-proof > span:first-child { display: flex; }

.cs-proof > span:first-child span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: -8px;
  box-sizing: border-box;
  border: 2px solid #11131a;
  border-radius: 50%;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 800;
}

.cs-proof > span:last-child {
  margin-left: 10px;
  color: #c9ccd6;
  font-size: 13px;
}

.cs-proof b { color: #eef0f5; }

.cs-art {
  position: relative;
  justify-self: center;
  box-sizing: border-box;
  width: 220px;
  margin: 0;
  padding: 12px 12px 46px;
  border-radius: 8px;
  background: #f4f2ec;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
  transform: rotate(3deg);
}

.cs-page[data-wide] .cs-art { width: 290px; }

.cs-art__p {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(201, 154, 78, .5), #151821);
}

.cs-art__p span {
  color: rgba(244, 242, 236, .2);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.cs-art figcaption {
  position: absolute;
  right: 12px;
  bottom: 14px;
  left: 12px;
  display: flex;
  justify-content: space-between;
  color: #3a4150;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
}

.cs-tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 80px;
  height: 24px;
  background: rgba(201, 154, 78, .6);
  transform: translateX(-50%) rotate(-3deg);
}

/* What's inside */
.cs-sec {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.cs-feats li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 24px;
}

.cs-feats li > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--un) 16%, transparent);
  color: var(--un);
}

.cs-feats b {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.cs-feats li > span:last-child {
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Roadmap */
.cs-road {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: 24px;
}

.cs-road__h {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.cs-page .cs-road h2,
.cs-page .cs-vote h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}

.cs-road__h span {
  color: var(--muted);
  font-size: 13px;
}

.cs-road ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cs-page[data-road] .cs-road ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cs-road li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.cs-road__n {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cs-road__n span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 900;
}

[data-theme="light"] .cs-road__n span:first-child { border-color: rgba(20, 30, 50, .2); }

.cs-road__n span:last-child {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: var(--tint-08);
}

.cs-road li:last-child .cs-road__n span:last-child { display: none; }

.cs-road .is-done .cs-road__n span:first-child {
  border-color: transparent;
  background: #3fbf7f;
  color: #11131a;
}

.cs-road .is-done .cs-road__n span:last-child { background: #3fbf7f; }

.cs-road .is-now .cs-road__n span:first-child {
  border-color: transparent;
  background: #c99a4e;
  box-shadow: 0 0 0 5px rgba(201, 154, 78, .25);
  color: #11131a;
}

.cs-road li > p:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-road li b {
  font-size: 15px;
  font-weight: 700;
}

.cs-road .is-now b { font-weight: 800; }
.cs-road .is-next b { color: var(--text-3); }

.cs-road li > p:last-child > span:nth-child(2) {
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 700;
}

.cs-road .is-done li > p:last-child > span:nth-child(2),
.cs-road .is-done > p:last-child > span:nth-child(2) { color: #3fbf7f; }
.cs-road .is-now > p:last-child > span:nth-child(2) { color: #c99a4e; }
[data-theme="light"] .cs-road .is-done > p:last-child > span:nth-child(2) { color: #2f8a55; }
[data-theme="light"] .cs-road .is-now > p:last-child > span:nth-child(2) { color: #8a6424; }

.cs-road li > p:last-child > span:last-child {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Vote and beta */
.cs-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.cs-page[data-wide] .cs-two { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }

.cs-vote {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 24px;
}

.cs-page .cs-vote__s {
  color: var(--muted);
  font-size: 13px;
}

.cs-vote ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-vote li button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  overflow: hidden;
  border: 1.5px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-02);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.cs-vote li button.is-mine { border-color: rgba(201, 154, 78, .6); }

.cs-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--tint-04);
  transition: width .4s;
  pointer-events: none;
}

.is-mine .cs-fill { background: rgba(201, 154, 78, .22); }

.cs-radio {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
}

[data-theme="light"] .cs-radio { border-color: rgba(20, 30, 50, .22); }
.is-mine .cs-radio { border-color: #c99a4e; }

.is-mine .cs-radio::after {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c99a4e;
  content: "";
}

.cs-idea {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cs-idea b {
  font-size: 14px;
  font-weight: 700;
}

.cs-idea span {
  color: var(--muted);
  font-size: 12px;
}

.cs-pct {
  position: relative;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.cs-beta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.cs-page .cs-beta__k {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.cs-page .cs-beta h2 {
  color: #11131a;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}

.cs-page .cs-beta__s {
  color: #3a4150;
  font-size: 13.5px;
  line-height: 1.5;
}

.cs-page .cs-cap {
  color: #4b5263;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
}

.cs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cs-chips button {
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid rgba(17, 19, 26, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .4);
  color: #11131a;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.cs-chips.is-sm button {
  height: 34px;
  padding: 0 12px;
  font-size: 12.5px;
}

.cs-chips button[aria-pressed="true"] {
  border-color: #11131a;
  background: rgba(255, 255, 255, .85);
}

.cs-apply {
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: #11131a;
  color: #eef0f5;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.cs-apply.is-dim { opacity: .45; }

.cs-sent {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
}

.cs-sent b {
  font-size: 16px;
  font-weight: 800;
}

.cs-sent span {
  color: #3a4150;
  font-size: 13px;
}

.cs-links {
  display: flex;
  gap: 14px;
  padding-top: 4px;
}

.cs-links a {
  color: #2b8a99;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.cs-links a:hover { color: #11131a; }

/* ==========================================================================
   22zz44. Not authorized: reason hero with who / what, request-access flow
   and status, role matrix, while you wait
   Masthead, actions, places and footer are the Error page ones (er-*).
   ========================================================================== */
.na-page { gap: 16px; }
.er-hero.na-hero { min-height: 0; }
.na-page[data-wide] .na-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.na-hero::before { background: radial-gradient(90% 120% at 0% 0%, color-mix(in oklab, var(--un) 24%, transparent), transparent 60%), radial-gradient(70% 100% at 100% 100%, rgba(154, 219, 230, .12), transparent 60%); }

.na-face {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.na-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: color-mix(in oklab, var(--un) 18%, transparent);
  color: var(--un);
}

.na-page .er-hero .na-big {
  margin: 0;
  color: #eef0f5;
  font-size: 52px;
  font-weight: 700;
  line-height: .85;
  letter-spacing: -.045em;
}

.na-page[data-mid] .er-hero .na-big { font-size: 72px; }
.na-page[data-xl] .er-hero .na-big { font-size: 96px; }

.na-big span {
  color: transparent;
  -webkit-text-stroke: 2px var(--un);
}

.na-page .na-why {
  max-width: 560px;
  color: #d4d7e0;
  font-size: 17px;
  line-height: 1.55;
}

.na-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
}

.na-ini {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: oklch(0.82 0.08 40);
  color: #11131a;
  font-size: 12px;
  font-weight: 800;
}

.na-who p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.na-who b {
  font-size: 13.5px;
  font-weight: 700;
}

.na-who p span {
  color: #a7abb8;
  font-size: 12px;
}

.na-who button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: transparent;
  color: #eef0f5;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.na-who button:hover { background: rgba(255, 255, 255, .06); }

/* What they tried to open */
.na-res {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-self: stretch;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
}

.na-page[data-wide] .na-res {
  justify-self: center;
  width: 300px;
  box-sizing: border-box;
}

.na-page .na-res__k {
  color: #a7abb8;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.na-res__p {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, oklch(0.42 0.08 210), #151821);
}

.na-res__p img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px) saturate(.7);
  transform: scale(1.08);
}

.na-res__p span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(17, 19, 26, .7);
  color: var(--un);
  backdrop-filter: blur(6px);
}

.na-page .na-res h2 {
  color: #eef0f5;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.na-res__l {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
}

.na-res__l div {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.na-res__l dt {
  width: 62px;
  flex-shrink: 0;
  color: #8a8f9e;
}

.na-res__l dd {
  margin: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pair */
.na-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.na-page[data-wide] .na-two { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }

.na-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: 24px;
  scroll-margin-top: 20px;
}

.na-card__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.na-page .na-card h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}

.na-card__h span,
.na-page .na-card__s {
  color: var(--muted);
  font-size: 12.5px;
}


.na-f {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.na-page .na-k {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.na-lv {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.na-lv button,
.na-ap button,
.na-du button {
  border: 1.5px solid var(--fo-bd);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.na-lv button[aria-pressed="true"],
.na-ap button[aria-pressed="true"],
.na-du button[aria-pressed="true"] {
  border-color: color-mix(in oklab, #9adbe6 55%, transparent);
  background: color-mix(in oklab, #9adbe6 8%, transparent);
}

.na-lv button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
}

.na-lv b {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}

.na-lv b span {
  margin-left: auto;
  color: var(--accent-fg);
  font-weight: 900;
}

.na-lv button > span {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.na-ap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.na-ap button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
}

.na-ap__f {
  display: flex;
  flex-shrink: 0;
}

.na-ap__f .na-face {
  margin-right: -8px;
  border: 2px solid var(--card-to);
}

.na-ap button > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin-left: 8px;
}

.na-ap b {
  font-size: 13.5px;
  font-weight: 700;
}

.na-ap button > span:nth-child(2) > span {
  color: var(--muted);
  font-size: 12px;
}

.na-dot {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
}

[data-theme="light"] .na-dot { border-color: rgba(20, 30, 50, .22); }
.na-ap button[aria-pressed="true"] .na-dot { border-color: #9adbe6; }

.na-ap button[aria-pressed="true"] .na-dot::after {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9adbe6;
  content: "";
}

.na-du {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.na-du button {
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.na-page .na-ta {
  height: auto;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.na-send {
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
}

/* Request status */
.na-st {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(224, 162, 26, .35);
  border-radius: 18px;
  background: rgba(224, 162, 26, .07);
}

.na-st.is-ok {
  border-color: rgba(63, 191, 127, .35);
  background: rgba(63, 191, 127, .08);
}

.na-st__h {
  display: flex;
  align-items: center;
  gap: 10px;
}

.na-st__h > span:first-child {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e0a21a;
}

.na-st__h > span:first-child::before {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(224, 162, 26, .25);
  content: "";
  animation: fq-pulse 2s ease-out infinite;
}

.na-st.is-ok .na-st__h > span:first-child { background: #3fbf7f; }
.na-st.is-ok .na-st__h > span:first-child::before { background: rgba(63, 191, 127, .25); animation: none; }

.na-st__h b {
  font-size: 16px;
  font-weight: 800;
}

.na-st__h > span:last-child {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.na-page .na-st > p:nth-child(2) {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.na-st__a {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.na-page .na-38 { height: 38px; }
.na-page .na-40 { height: 40px; padding: 0 18px; font-size: 13.5px; }

.na-x,
.na-sim {
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--se-co);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.na-sim {
  margin-left: auto;
  border: 1px dashed rgba(255, 255, 255, .22);
  color: var(--text-3);
  font-size: 12px;
}

[data-theme="light"] .na-sim { border-color: rgba(20, 30, 50, .22); }

/* Roles */
.na-card:has(.na-t) { gap: 12px; }
/* Positioned, so the hidden "Yes / No" labels scroll with the table. */
.na-tw {
  position: relative;
  overflow-x: auto;
}

.na-t {
  display: block;
  min-width: 380px;
  border-collapse: separate;
  border-spacing: 0;
}

.na-t thead,
.na-t tbody { display: block; }

.na-t tr {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) repeat(4, minmax(54px, 1fr));
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
}

.na-t thead tr { align-items: stretch; }
.na-t tbody tr { border-top: 1px solid var(--tint-05); }
.na-t tbody tr.is-row { background: color-mix(in oklab, var(--un, #c99a4e) 7%, transparent); }

.na-t thead th {
  padding: 6px 2px;
  border-radius: 10px;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
}

.na-t thead th span {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  letter-spacing: .08em;
}

.na-t thead th.is-me {
  background: color-mix(in oklab, #9adbe6 10%, transparent);
  color: var(--accent-fg);
}

.na-t thead th.is-need {
  background: color-mix(in oklab, var(--un) 12%, transparent);
  color: var(--un);
}

.na-t tbody th {
  padding: 0;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.na-t tbody tr.is-row th { font-weight: 800; }

.na-t td {
  padding: 3px 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.na-t td.is-yes { color: var(--se-gr, oklch(0.8 0.14 155)); }
.na-t td.is-no { color: #4b505e; }
[data-theme="light"] .na-t td.is-no { color: #b9bfca; }
.na-t td.is-me { background: rgba(154, 219, 230, .06); }

.na-help {
  align-self: flex-start;
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

/* While you wait: the Error page places in a row */
.na-tiles ul { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.na-page .na-tiles a {
  flex-direction: row;
  align-items: center;
}

.na-tiles a > span:first-child {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.na-tiles a > span:last-child { min-width: 0; }

.na-tiles a > span:last-child > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   22zz45. Update profile: progress, step card (photo and cover, about,
   skills, featured work, availability, done), live preview
   ========================================================================== */
.up-page {
  --up-bd: rgba(255, 255, 255, .1);
  --up-bd2: rgba(255, 255, 255, .14);
  --up-bd3: rgba(255, 255, 255, .25);
  --up-dash: rgba(255, 255, 255, .2);
  --up-ok: #3fbf7f;
  gap: 16px;
}

[data-theme="light"] .up-page {
  --up-bd: rgba(20, 30, 50, .14);
  --up-bd2: rgba(20, 30, 50, .18);
  --up-bd3: rgba(20, 30, 50, .3);
  --up-dash: rgba(20, 30, 50, .24);
  --up-ok: #2f8a55;
}

.up-page .is-gr { color: var(--up-ok); }

/* Progress */
.up-pg {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
}

.up-pg__t {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-size: 13px;
}

.up-pg__t > b {
  color: var(--accent-fg);
  font-weight: 800;
  white-space: nowrap;
}

.up-pg__t > span { color: var(--text-3); }

.up-page .up-str {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  color: var(--muted);
  font-weight: 700;
}

.up-str s { color: var(--muted-2); }
.up-str > span { color: var(--text); }

.up-str b {
  font-size: 18px;
  font-weight: 800;
}

.up-str .is-gr { color: #3fbf7f; }
.up-str .is-am { color: #e0a21a; }
.up-str .is-co { color: #d4582f; }

.up-page .up-seg {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.up-seg button {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.up-seg button > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.up-seg__bar {
  height: 5px;
  border-radius: 999px;
  background: var(--up-bd);
}

.up-seg .is-cur {
  color: var(--text);
  font-weight: 800;
}

.up-seg .is-cur .up-seg__bar { background: #9adbe6; }
.up-seg .is-done .up-seg__bar { background: #3fbf7f; }
.up-seg button:hover { color: var(--text); }

/* Grid: step card and the sticky preview */
.up-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.up-page[data-two] .up-grid { grid-template-columns: minmax(0, 1fr) 340px; }

/* Step card */
.up-step {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 520px;
  padding: 20px;
}

.up-page[data-mid] .up-step { padding: 28px; }

.up-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.up-page .up-k {
  color: var(--un);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
}

.up-page .up-head h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
  outline: none;
}

.up-page[data-mid] .up-head h1 { font-size: 36px; }

.up-page .up-head p:last-child {
  max-width: 560px;
  color: var(--text-3);
  font-size: 15px;
  line-height: 1.5;
}

.up-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.up-page .up-f {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.up-page .up-f--10 { gap: 10px; }

.up-page .up-l {
  margin: 0;
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.up-page .up-lr {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.up-lr > span {
  color: var(--muted-2);
  font-size: 11.5px;
  font-weight: 700;
}

.up-lr > .is-gr { color: var(--up-ok); }

.up-in {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--up-bd);
  border-radius: 14px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  color-scheme: dark;
}

[data-theme="light"] .up-in { color-scheme: light; }
.up-in:focus { border-color: rgba(154, 219, 230, .55); }
[data-theme="light"] .up-in:focus { border-color: #2b8a99; }

.up-in option {
  background: var(--card-to);
  color: var(--text);
}

.up-ta {
  height: auto;
  padding: 14px;
  font-size: 15px;
  line-height: 1.55;
  resize: vertical;
}

.up-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}

.up-three {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 14px;
}

/* 1 · Photo and cover */
.up-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.up-page[data-ph] .up-media { grid-template-columns: 180px minmax(0, 1fr); }

.up-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.up-ph__s {
  position: relative;
  display: block;
  width: 160px;
  height: 160px;
  overflow: hidden;
  border-radius: 50%;
  background: #e9ebf0;
  cursor: pointer;
}

.up-ph__s img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.up-ph__h {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(11, 12, 17, .55);
  color: #eef0f5;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transition: opacity .2s;
}

.up-ph__s:hover .up-ph__h,
.up-ph__s:focus-within .up-ph__h,
.up-ph__s.is-drag .up-ph__h { opacity: 1; }

.up-ph__s:focus-within,
.up-cover:focus-within { outline: 2px solid #9adbe6; outline-offset: 3px; }

.up-note {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.up-note b { font-weight: 700; }

.up-cv {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.up-cover {
  position: relative;
  display: block;
  height: 180px;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(90% 120% at 15% 10%, rgba(154, 219, 230, .25), transparent 60%), linear-gradient(160deg, #232838, #0e1016);
  cursor: pointer;
}

.up-cover__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.up-cover__e {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px dashed rgba(255, 255, 255, .18);
  border-radius: 18px;
  color: #a7abb8;
  font-size: 13px;
  text-align: center;
}

.up-cover:hover .up-cover__e,
.up-cover.is-drag .up-cover__e {
  border-color: rgba(154, 219, 230, .6);
  color: #eef0f5;
}

.up-cover.is-drag { box-shadow: 0 0 0 2px #9adbe6; }

.up-page .up-cv__a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
}

.up-ck {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--up-bd3);
  border-radius: 6px;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
}

.up-ck.is-on {
  border-color: transparent;
  background: #3fbf7f;
}

.up-cv__a button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font: inherit;
  cursor: pointer;
}

.up-cv__a button:hover { text-decoration: underline; }

.up-page .up-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 8px;
}

.up-tips li {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--tint-03);
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.up-tips li span {
  color: var(--up-ok);
  font-weight: 900;
}

/* 2 · About */
.up-page .up-ex {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.up-ex button {
  width: 100%;
  padding: 12px 14px;
  border: 1px dashed var(--up-dash);
  border-radius: 14px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.up-ex button:hover { border-color: rgba(154, 219, 230, .55); }
.up-ex [aria-pressed="true"] { border-color: color-mix(in oklab, oklch(0.78 0.11 300) 60%, transparent); }

/* 3 · Skills */
.up-page .up-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.up-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 1.5px solid var(--up-bd);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.up-chip span {
  color: var(--muted-2);
  font-weight: 900;
}

.up-chip.is-gd {
  border-color: rgba(246, 200, 110, .55);
  background: rgba(246, 200, 110, .08);
}

.up-chip.is-gd span { color: #f6c86e; }

.up-chip.is-gr {
  border-color: color-mix(in oklab, oklch(0.8 0.14 155) 50%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.14 155) 8%, transparent);
}

.up-chip.is-gr span { color: var(--up-ok); }
[data-theme="light"] .up-chip.is-gd span { color: #b07a12; }

/* 4 · Featured work */
.up-page .up-wn {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 700;
}

.up-page .up-wk {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 10px;
}

.up-w {
  position: relative;
  display: block;
  width: 100%;
  height: 150px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 18px;
  color: #eef0f5;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.up-w::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11, 12, 17, .88));
  content: "";
}

.up-w.is-on { border-color: #9adbe6; }

.up-w__n {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: rgba(17, 19, 26, .5);
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
}

.up-w.is-on .up-w__n { background: #9adbe6; }

.up-w__t {
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: 12px;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.up-w__t b {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.up-w__t > span {
  color: rgba(255, 255, 255, .75);
  font-size: 11px;
}

/* 5 · Availability */
.up-page .up-sts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 8px;
}

.up-st {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 14px;
  border: 1.5px solid var(--up-bd);
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.up-st.is-on {
  border-color: color-mix(in oklab, #9adbe6 55%, transparent);
  background: color-mix(in oklab, #9adbe6 8%, transparent);
}

[data-theme="light"] .up-st.is-on { border-color: #2b8a99; }

.up-st b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.up-st > span {
  color: var(--muted);
  font-size: 12px;
}

.up-page .un-c--mu { --un: var(--muted); }

.up-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--un);
}

.up-page .up-until { max-width: 240px; }

.up-page .up-warn {
  color: var(--fo-co);
  font-size: 13px;
  font-weight: 700;
}

.up-page .up-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.up-days button {
  width: 48px;
  height: 42px;
  border: 1.5px solid var(--up-bd);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.up-days [aria-pressed="true"] {
  border-color: #9adbe6;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--text);
}

[data-theme="light"] .up-days [aria-pressed="true"] { border-color: #2b8a99; }

/* 6 · Done: light plaque in both themes, summary rows */
.up-plq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.up-ring {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.up-ring span {
  position: absolute;
  inset: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9edf2;
  font-size: 24px;
  font-weight: 800;
}

.up-page .up-plq p {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 4px;
}

.up-plq b {
  font-size: 22px;
  font-weight: 700;
}

.up-plq p span {
  color: #3a4150;
  font-size: 13.5px;
}

.up-page .up-sum {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.up-sum button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--tint-07);
  border-radius: 14px;
  background: var(--tint-02);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.up-sum button:hover { border-color: var(--up-bd2); }

.up-sum__m {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3fbf7f;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.up-sum__m.is-am { background: #e0a21a; }

.up-sum__k {
  flex-shrink: 0;
  width: 110px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.up-sum__v {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Narrow: the value drops under the label so it stays readable */
.up-page:not([data-mid]) .up-sum button { flex-wrap: wrap; }
.up-page:not([data-mid]) .up-sum__k { flex: 1; width: auto; }

.up-page:not([data-mid]) .up-sum__v {
  flex-basis: 100%;
  order: 3;
  padding-left: 34px;
  white-space: normal;
}

.up-sum__e {
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 800;
}

/* Footer actions */
.up-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}

.up-ghost {
  height: 46px;
  padding: 0 20px;
  border: 1px solid var(--up-bd2);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.up-next ~ .up-ghost { height: 48px; }
.up-ghost:hover { background: var(--tint-05); }

.up-skip {
  height: 46px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.up-skip:hover { color: var(--text); }

.up-page .up-next {
  height: 48px;
  margin-left: auto;
  padding: 0 26px;
  font-size: 14.5px;
}

/* Live preview: dark card in both themes */
.up-pv {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.up-page[data-two] .up-pv {
  position: sticky;
  top: 12px;
}

.up-page .up-pv__h {
  margin: 0;
  padding: 0 4px;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
}

.up-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 26px;
  background: #151821;
  color: #eef0f5;
}

.up-card__c {
  position: relative;
  height: 170px;
  background: radial-gradient(90% 120% at 15% 10%, rgba(154, 219, 230, .32), transparent 60%), linear-gradient(160deg, #232838, #0e1016);
}

.up-card__c > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.up-card__c::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(21, 24, 33, .95));
  content: "";
}

.up-card__m {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .22em;
}

.up-page .up-card__n {
  position: absolute;
  bottom: 12px;
  left: 16px;
  z-index: 1;
  font-size: 30px;
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.04em;
}

.up-card__n span {
  color: transparent;
  -webkit-text-stroke: 1.2px #eef0f5;
}

.up-card__p {
  position: absolute;
  right: 14px;
  bottom: -26px;
  z-index: 2;
  width: 76px;
  padding: 5px 5px 16px;
  border-radius: 5px;
  background: #f4f2ec;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .5);
  transform: rotate(3deg);
}

.up-card__p img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 3px;
  background: #e9ebf0;
  object-fit: cover;
}

.up-card__b {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px 16px 16px;
}

.up-page .up-card__k {
  color: #c9ccd6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  overflow-wrap: anywhere;
}

.up-page .up-card__a {
  color: #c9ccd6;
  font-size: 13.5px;
  line-height: 1.5;
}

.up-page .up-card__a.is-e { color: #8a8f9e; }

.up-page .up-card__s {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--un);
  font-size: 12px;
  font-weight: 800;
}

.up-card__s span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.up-page .up-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.up-stamp {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border: 2px solid #9adbe6;
  border-radius: 8px;
  color: #9adbe6;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
  transform: rotate(-2deg);
}

.up-stamp--1 {
  border-color: #f6c86e;
  color: #f6c86e;
  transform: rotate(1.5deg);
}

.up-stamp--2 {
  border-color: oklch(0.78 0.11 300);
  color: oklch(0.78 0.11 300);
  transform: rotate(-1deg);
}

.up-page .up-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.up-thumbs li {
  position: relative;
  height: 52px;
  border-radius: 9px;
}

.up-page .up-card__h {
  color: #8a8f9e;
  font-size: 11.5px;
}

.up-open {
  height: 42px;
  border: 1px solid var(--up-bd);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.up-open:hover { background: var(--tint-05); }

/* ==========================================================================
   22zz46. Change password: why plaque, three-step form, options, success
   ========================================================================== */
.cw-page {
  --cw-bd: rgba(255, 255, 255, .1);
  --cw-bd2: rgba(255, 255, 255, .14);
  --cw-co: oklch(0.72 0.14 35);
  --cw-gr: #3fbf7f;
  --cw-am: oklch(0.8 0.13 70);
  --cw-tg: #3a3f4d;
  gap: 16px;
}

[data-theme="light"] .cw-page {
  --cw-bd: rgba(20, 30, 50, .14);
  --cw-bd2: rgba(20, 30, 50, .18);
  --cw-co: oklch(0.56 0.16 35);
  --cw-gr: #2f8a55;
  --cw-am: #a86f00;
  --cw-tg: #c3c8d2;
}

.cw-page[data-two] {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: start;
}

/* Why plaque: light in both themes */
.cw-why {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
  padding: 22px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.cw-page[data-two] .cw-why {
  position: sticky;
  top: 12px;
}

.cw-why::before {
  position: absolute;
  top: -90px;
  right: -60px;
  width: 280px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 219, 230, .7), transparent 70%);
  content: "";
  pointer-events: none;
}

.cw-why > * { position: relative; }

.cw-page .cw-why__k {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.cw-why__t {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cw-ring {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(#2b8a99 0 var(--deg), rgba(17, 19, 26, .12) var(--deg) 360deg);
}

.cw-ring.is-am { background: conic-gradient(#e0a21a 0 var(--deg), rgba(17, 19, 26, .12) var(--deg) 360deg); }

.cw-ring > span {
  position: absolute;
  inset: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9edf2;
  line-height: 1;
}

.cw-ring b { font-size: 26px; }

.cw-ring b + span {
  margin-top: 3px;
  color: #4b5263;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .1em;
}

.cw-page .cw-why__t p {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cw-why__h {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

.cw-why__h + span {
  color: #3a4150;
  font-size: 13px;
  font-weight: 600;
}

.cw-page .cw-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cw-tips li {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .62);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.cw-tips b {
  color: #2b8a99;
  font-weight: 900;
}

.cw-why__a {
  align-self: flex-start;
  color: #2b8a99;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.cw-why__a:hover {
  color: #1d6470;
  text-decoration: underline;
}

/* Form card */
.cw-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  padding: 20px;
}

.cw-page[data-mid] .cw-card { padding: 30px; }

.cw-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cw-page .cw-k {
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2em;
}

.cw-page .cw-card h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
  outline: none;
}

.cw-page[data-mid] .cw-card h1 { font-size: 36px; }

.cw-page .cw-head p:last-child {
  color: var(--text-3);
  font-size: 14.5px;
}

.cw-lock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--cw-co) 40%, transparent);
  border-radius: 16px;
  background: color-mix(in oklab, var(--cw-co) 10%, transparent);
}

.cw-lock b {
  color: var(--cw-co);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cw-lock span {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.cw-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.cw-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.cw-step.is-locked { opacity: .5; }

.cw-page .cw-st {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.cw-st__n {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cw-bd);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.cw-st__n.is-cur {
  background: #9adbe6;
  color: #11131a;
}

.cw-st__n.is-ok {
  background: #3fbf7f;
  color: #11131a;
}

.cw-in {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 50px;
  overflow: hidden;
  border: 1px solid var(--cw-bd);
  border-radius: 14px;
  background: var(--tint-03);
}

.cw-in:focus-within { border-color: rgba(154, 219, 230, .55); }
[data-theme="light"] .cw-in:focus-within { border-color: #2b8a99; }
.cw-in.is-bad { border-color: var(--cw-co); }
.cw-in.is-ok { border-color: color-mix(in oklab, var(--cw-gr) 50%, transparent); }

.cw-in input {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.cw-show {
  height: 100%;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.cw-in__m {
  padding: 0 14px;
  color: var(--cw-co);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.cw-in__m.is-ok { color: var(--cw-gr); }

.cw-page .cw-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.cw-err {
  color: var(--cw-co);
  font-size: 12.5px;
  font-weight: 700;
}

.cw-link {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.cw-link:hover { text-decoration: underline; }

.cw-nw {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cw-nw .cw-in { flex: 1 1 260px; }

.cw-gen {
  height: 50px;
  padding: 0 18px;
  border: 1px solid var(--cw-bd2);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.cw-gen:hover { background: var(--tint-05); }

.cw-page .cw-caps {
  color: var(--cw-am);
  font-size: 12.5px;
  font-weight: 700;
}

.cw-genv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--tint-04);
}

.cw-genv code {
  flex: 1;
  min-width: 0;
  color: var(--accent-fg);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px;
  word-break: break-all;
}

.cw-page .cw-genv .ub-light {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.cw-again {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--cw-bd2);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
}

.cw-meter {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cw-t--co { --cw-t: #d4582f; }
.cw-t--am { --cw-t: #e0a21a; }
.cw-t--tl { --cw-t: #2b8a99; }
.cw-t--gr { --cw-t: #3fbf7f; }

.cw-bars {
  display: flex;
  flex: 1;
  gap: 5px;
}

.cw-bars span {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--tint-08);
  transition: background .2s;
}

.cw-bars .is-on { background: var(--cw-t); }

.cw-meter b {
  min-width: 80px;
  color: var(--cw-t);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.cw-page .cw-crack {
  color: var(--text-3);
  font-size: 12.5px;
}

.cw-crack strong { color: var(--text); }

.cw-page .cw-req {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 6px 14px;
}

.cw-req li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
}

.cw-req li > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cw-bd);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
}

.cw-req .is-ok { color: var(--text); }
.cw-req .is-ok > span:first-child { background: #3fbf7f; }

/* Options */
.cw-page .cw-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cw-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--tint-07);
  border-radius: 14px;
  background: var(--tint-02);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cw-opt > span:first-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cw-opt b {
  font-size: 13.5px;
  font-weight: 700;
}

.cw-opt b + span {
  color: var(--muted);
  font-size: 12px;
}

.cw-tg {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--cw-tg);
  transition: background .2s;
}

.cw-tg::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: left .2s;
}

.cw-opt[aria-checked="true"] .cw-tg { background: #9adbe6; }
[data-theme="light"] .cw-opt[aria-checked="true"] .cw-tg { background: #2b8a99; }
.cw-opt[aria-checked="true"] .cw-tg::after { left: 20px; }

/* Footer */
.cw-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cw-ghost {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--cw-bd2);
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.cw-ghost:hover {
  background: var(--tint-05);
  color: var(--text);
}

.cw-hint {
  color: var(--muted);
  font-size: 12.5px;
}

.cw-page .cw-go {
  height: 48px;
  margin-left: auto;
  padding: 0 26px;
  font-size: 14.5px;
}

.cw-page .cw-go.is-dim {
  opacity: .45;
  cursor: default;
}

/* Success */
.cw-ok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 30px 10px;
  text-align: center;
}

.cw-ok__i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(63, 191, 127, .15);
  box-shadow: 0 0 0 10px rgba(63, 191, 127, .07);
  color: var(--cw-gr);
}

.cw-page .cw-ok h1 {
  font-size: 36px;
  letter-spacing: -.02em;
}

.cw-page .cw-ok > p {
  max-width: 440px;
  color: var(--text-3);
  font-size: 15px;
  line-height: 1.55;
}

.cw-page .cw-ok__l {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(420px, 100%);
}

.cw-ok__l li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--tint-03);
  font-size: 13px;
  text-align: left;
}

.cw-ok__l span {
  color: var(--cw-gr);
  font-weight: 900;
}

.cw-page .cw-ok__a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.cw-ok__a .cw-ghost { height: 46px; }

.cw-page .cw-ok__a .ub-light {
  height: 46px;
  padding: 0 24px;
  font-size: 14px;
}

/* ==========================================================================
   22zz47. Invoice list: cash-flow plaque, filters, table / cards, bulk bar,
   row menu, top clients, due soon, recurring
   ========================================================================== */
.iv-page {
  --iv-bd: rgba(255, 255, 255, .1);
  --iv-bd2: rgba(255, 255, 255, .12);
  --iv-ck: rgba(255, 255, 255, .22);
  --iv-tg: #3a3f4d;
  gap: 16px;
}

[data-theme="light"] .iv-page {
  --iv-bd: rgba(20, 30, 50, .14);
  --iv-bd2: rgba(20, 30, 50, .16);
  --iv-ck: rgba(20, 30, 50, .28);
  --iv-tg: #c3c8d2;
}

.iv-c--mu { --iv: #8a8f9e; }
.iv-c--cy { --iv: #9adbe6; }
.iv-c--vi { --iv: oklch(0.78 0.11 300); }
.iv-c--gr { --iv: oklch(0.8 0.14 155); }
.iv-c--co { --iv: oklch(0.72 0.14 35); }
.iv-c--am { --iv: oklch(0.8 0.13 70); }

[data-theme="light"] .iv-c--cy { --iv: #2b8a99; }
[data-theme="light"] .iv-c--vi { --iv: oklch(0.55 0.15 300); }
[data-theme="light"] .iv-c--gr { --iv: oklch(0.52 0.14 155); }
[data-theme="light"] .iv-c--co { --iv: oklch(0.56 0.16 35); }
[data-theme="light"] .iv-c--am { --iv: #a86f00; }
[data-theme="light"] .iv-c--mu { --iv: #6b7080; }

.iv-page .is-gr { color: oklch(0.8 0.14 155); }
.iv-page .is-co { color: oklch(0.72 0.14 35); }
.iv-page .is-am { color: oklch(0.8 0.13 70); }
.iv-page .is-mu { color: var(--muted); }
[data-theme="light"] .iv-page .is-gr { color: oklch(0.52 0.14 155); }
[data-theme="light"] .iv-page .is-co { color: oklch(0.56 0.16 35); }
[data-theme="light"] .iv-page .is-am { color: #a86f00; }

.iv-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
}

.iv-logo--24 {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 8.5px;
}

.iv-logo--30 {
  width: 30px;
  height: 30px;
  font-size: 9px;
}

.iv-logo--36 {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 11px;
}

/* Cash-flow plaque: light in both themes */
.iv-pl {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 24px;
  align-items: end;
  overflow: hidden;
  padding: 22px;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: linear-gradient(160deg, #eef0f4, #d4d9e1 60%, #a8e6ef 160%);
  color: #11131a;
}

.iv-page[data-hero] .iv-pl { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }

.iv-pl__l,
.iv-pl__r {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.iv-pl__r { gap: 10px; }

.iv-page .iv-pl__k {
  margin: 0;
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.iv-page .iv-out {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.iv-out b {
  font-size: 46px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.03em;
}

.iv-page[data-hero] .iv-out b { font-size: 64px; }

.iv-out span {
  color: #3a4150;
  font-size: 14px;
  font-weight: 700;
}

.iv-page .iv-kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.iv-kpi li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .62);
}

.iv-kpi b,
.iv-kpi span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iv-kpi b { font-size: 18px; }
.iv-page .iv-kpi .is-gr { color: #2f8a55; }
.iv-page .iv-kpi .is-co { color: #b2482c; }

.iv-kpi span {
  color: #4b5263;
  font-size: 11px;
  font-weight: 700;
}

.iv-page .iv-bar {
  display: flex;
  gap: 2px;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 19, 26, .08);
}

.iv-k--pd { background: #2f8a55; }
.iv-k--sv { background: #2b8a99; }
.iv-k--od { background: #d4582f; }
.iv-k--dr { background: #9aa3b0; }

.iv-page .iv-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.iv-leg li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #3a4150;
  font-size: 12px;
  font-weight: 700;
}

.iv-leg li span {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.iv-page .iv-pl__rh {
  display: flex;
  align-items: baseline;
}

.iv-pl__rh > span {
  color: #4b5263;
  font-size: 12px;
  font-weight: 800;
}

.iv-new {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin-left: auto;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: #11131a;
  color: #eef0f5;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.iv-new:hover {
  background: #262a36;
  color: #eef0f5;
}

.iv-page .iv-hist {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: end;
  height: 110px;
}

.iv-hist li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  height: 100%;
}

.iv-hist li > span:first-child {
  width: 100%;
  border-radius: 7px;
  background: rgba(17, 19, 26, .25);
}

.iv-hist .is-now > span:first-child { background: #11131a; }

.iv-hist b {
  color: #4b5263;
  font-size: 10.5px;
  font-weight: 800;
}

/* Filters */
.iv-fl {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iv-fl__r {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.iv-fl__r + .iv-fl__r { gap: 6px; }

.iv-fl__e {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  margin-left: auto;
}

/* Scrolls sideways on a phone instead of widening the page */
.iv-page .iv-seg {
  display: flex;
  gap: 2px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 3px;
  border-radius: 999px;
  background: var(--raised-3);
}

.iv-seg button {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.iv-seg button:hover { color: var(--text); }

.iv-seg [aria-pressed="true"],
.iv-seg [aria-pressed="true"]:hover {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.iv-seg button span {
  font-size: 11px;
  opacity: .6;
}

.iv-page .iv-q {
  display: flex;
  flex: 1 1 200px;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--iv-bd);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--muted);
}

.iv-q:focus-within { border-color: rgba(154, 219, 230, .55); }

.iv-q input {
  flex: 1;
  width: 0;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}

.iv-q input::-webkit-search-cancel-button { filter: grayscale(1); }

.iv-page .iv-chips {
  display: contents;
}

.iv-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px 0 4px;
  border: 1px solid var(--iv-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.iv-chip.is-on {
  border-color: color-mix(in oklab, #c99a4e 60%, transparent);
  background: color-mix(in oklab, #c99a4e 12%, transparent);
}

.iv-chip.is-dim { opacity: .55; }

/* Grid: list and side column */
.iv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.iv-page[data-two] .iv-grid { grid-template-columns: minmax(0, 1fr) 300px; }

.iv-ls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Bulk bar */
.iv-bulk {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px 10px 18px;
  border-radius: 18px;
  background: linear-gradient(140deg, #eef0f4, #d4d9e1 55%, #a8e6ef 140%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  color: #11131a;
}

.iv-bulk > b {
  font-size: 14px;
  font-weight: 800;
}

.iv-bulk > span {
  color: #3a4150;
  font-size: 12.5px;
}

.iv-page .iv-bulk__a {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.iv-bulk__a button {
  height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  color: #11131a;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.iv-bulk__a button:hover { background: #fff; }

.iv-bulk__a .is-ink,
.iv-bulk__a .is-ink:hover {
  background: #11131a;
  color: #eef0f5;
}

.iv-page .iv-bulk__a .is-co { color: #b2482c; }

.iv-bulk__a .iv-bulk__x,
.iv-bulk__a .iv-bulk__x:hover {
  width: 34px;
  padding: 0;
  border: 1px solid rgba(17, 19, 26, .2);
  border-radius: 50%;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
}

/* Table */
.iv-tw {
  position: relative;
  padding: 6px;
  overflow-x: auto;
}

.iv-t {
  display: block;
  min-width: 500px;
  border-collapse: collapse;
}

.iv-page[data-wt] .iv-t { min-width: 760px; }

.iv-t thead,
.iv-t tbody { display: block; }

.iv-t tr {
  display: grid;
  grid-template-columns: 28px 96px minmax(0, 1.3fr) 88px 86px 96px 34px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}

.iv-page[data-wt] .iv-t tr { grid-template-columns: 34px 120px minmax(150px, 1.3fr) minmax(120px, 1fr) 104px 110px 120px 40px; }
.iv-page:not([data-wt]) .iv-pj { display: none; }

.iv-t th,
.iv-t td {
  min-width: 0;
  padding: 0;
  font-weight: inherit;
  text-align: left;
}

.iv-page .iv-t th {
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
}

.iv-t th button:not(.iv-ck) {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.iv-t th button:hover,
.iv-t th .is-on { color: var(--text); }

.iv-t .iv-r { text-align: right; }

.iv-t tbody tr {
  border-top: 1px solid var(--tint-05);
  font-size: 13px;
}

.iv-t tr.is-od { background: color-mix(in oklab, oklch(0.72 0.14 35) 4%, transparent); }
.iv-t tr.is-sel { background: color-mix(in oklab, #9adbe6 6%, transparent); }

.iv-ck {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1.5px solid var(--iv-ck);
  border-radius: 6px;
  background: transparent;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.iv-ck[aria-pressed="true"] {
  border-color: transparent;
  background: #9adbe6;
}

.iv-no {
  color: var(--text);
  text-decoration: none;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.iv-no:hover { color: var(--accent-fg); }

.iv-t .iv-cl {
  display: flex;
  align-items: center;
  gap: 9px;
}

.iv-cl b,
.iv-t .iv-pj {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iv-cl b { font-weight: 700; }
.iv-t .iv-pj { color: var(--text-3); }

.iv-t .iv-due {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.iv-due b { font-weight: 700; }

.iv-due span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.iv-t .iv-r b { font-weight: 800; }

.iv-st {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--iv) 16%, transparent);
  color: var(--iv);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.iv-st span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.iv-more {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--iv-bd2);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.iv-more:hover,
.iv-more[aria-expanded="true"] { background: var(--tint-05); }

.iv-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px;
  border-top: 1px solid var(--tint-06);
  color: var(--text-3);
  font-size: 12.5px;
}

.iv-page .iv-pages {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.iv-pages button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--iv-bd);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.iv-pages [aria-current="page"] {
  border-color: #9adbe6;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
}

/* Row menu: floats over the table */
.iv-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: 190px;
  padding: 6px;
  border: 1px solid var(--iv-bd2);
  border-radius: 14px;
  background: var(--raised-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

[data-theme="light"] .iv-menu {
  background: #fff;
  box-shadow: 0 18px 40px rgba(20, 30, 50, .18);
}

.iv-menu button {
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.iv-menu button:hover,
.iv-menu button:focus-visible { background: var(--tint-05); }

/* Cards */
.iv-page .iv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 12px;
}

.iv-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
  color: var(--text);
  text-decoration: none;
}

.iv-card:hover {
  border-color: var(--iv-bd2);
  color: var(--text);
}

.iv-card__h {
  display: flex;
  align-items: center;
  gap: 10px;
}

.iv-card__h > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.iv-card__h b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iv-card__h code {
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
}

.iv-card__v {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.iv-card__p {
  overflow: hidden;
  color: var(--text-3);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iv-card__d {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
}

.iv-card__d > span { color: var(--muted); }

.iv-card__t {
  display: block;
  height: 5px;
  margin-top: -7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-08);
}

.iv-card__t span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--iv);
}

.iv-page .iv-empty {
  padding: 28px;
  border: 1px dashed var(--iv-bd2);
  border-radius: 20px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.iv-empty button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Side column */
.iv-sd {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.iv-page[data-two] .iv-sd {
  position: sticky;
  top: 12px;
}

.iv-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.iv-page .iv-box h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.iv-page .iv-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iv-top li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.iv-page .iv-top p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.iv-top p > b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iv-top p > span:last-child { font-weight: 800; }
.iv-page .iv-top .iv-top__b { padding-left: 32px; }

.iv-meter {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--tint-06);
}

.iv-meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.iv-page .iv-top__b > span:last-child {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.iv-box--soon { gap: 8px; }

.iv-page .iv-soon {
  display: flex;
  flex-direction: column;
}

.iv-soon a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 6px;
  border: 0;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}

.iv-soon a:hover {
  background: var(--tint-04);
  color: var(--text);
}

.iv-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 11px;
  background: color-mix(in oklab, var(--iv) 14%, transparent);
  line-height: 1;
}

.iv-date span {
  color: var(--iv);
  font-size: 9px;
  font-weight: 900;
}

.iv-date b {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 800;
}

.iv-soon a > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.iv-soon a > span:nth-child(2) b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iv-soon a > span:nth-child(2) span {
  color: var(--muted);
  font-size: 11.5px;
}

.iv-soon a > b {
  font-size: 13px;
  font-weight: 800;
}

.iv-page .iv-none {
  color: var(--muted);
  font-size: 13px;
}

.iv-page .iv-rec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iv-rec li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--tint-03);
}

.iv-page .iv-rec p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.iv-rec p b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iv-rec p span {
  color: var(--muted);
  font-size: 11.5px;
}

.iv-tg {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--iv-tg);
  cursor: pointer;
}

.iv-tg::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: left .2s;
}

.iv-tg[aria-checked="true"] { background: #9adbe6; }
[data-theme="light"] .iv-tg[aria-checked="true"] { background: #2b8a99; }
.iv-tg[aria-checked="true"]::after { left: 18px; }

/* ==========================================================================
   22zz48. Invoice preview: sticky toolbar, "spine" invoice sheet with stamp,
   lines, payment progress, totals and tear-off slip; payment, timeline,
   share link, reminders, project
   Status colours and logo tiles are the Invoice List ones (iv-c--*, iv-logo).
   ========================================================================== */
.ip-page {
  --ip-bd: rgba(255, 255, 255, .14);
  --ip-in: rgba(255, 255, 255, .1);
  --ip-tg: #3a3f4d;
  gap: 16px;
}

[data-theme="light"] .ip-page {
  --ip-bd: rgba(20, 30, 50, .16);
  --ip-in: rgba(20, 30, 50, .14);
  --ip-tg: #c3c8d2;
}

/* Toolbar */
/* Sticky only where it fits on one or two rows */
.ip-bar {
  position: relative;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ip-in);
  border-radius: 20px;
  background: color-mix(in oklab, var(--card-from) 92%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.ip-page[data-wide] .ip-bar {
  position: sticky;
  top: 12px;
}

[data-theme="light"] .ip-bar { box-shadow: 0 14px 34px rgba(20, 30, 50, .12); }

.ip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--ip-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ip-btn:hover {
  background: var(--tint-05);
  color: var(--text);
}

.ip-back { border-color: transparent; }

.ip-sq {
  width: 38px;
  padding: 0;
}

.ip-btn[aria-disabled="true"] {
  opacity: .35;
  cursor: default;
}

.ip-btn--l,
.ip-btn--l:hover {
  border-color: transparent;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 800;
}

.ip-no {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 14px;
  font-weight: 700;
}

.ip-st {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--iv) 16%, transparent);
  color: var(--iv);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ip-st span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ip-tot {
  font-size: 15px;
  font-weight: 800;
}

.ip-step {
  display: flex;
  gap: 4px;
}

.ip-bar__a {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.ip-page .ip-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--raised-3);
}

.ip-seg button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ip-seg [aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

/* Grid */
.ip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.ip-page[data-two] .ip-grid { grid-template-columns: minmax(0, 1fr) 320px; }

.ip-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ip-page .ip-note {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 820px;
  padding: 10px 14px;
  border: 1px solid color-mix(in oklab, #9adbe6 30%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, #9adbe6 10%, transparent);
  color: var(--text-2);
  font-size: 12.5px;
}

.ip-note b {
  color: var(--accent-fg);
  font-weight: 800;
}

/* Sheet: paper in both themes */
.ip-sheet {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  width: 100%;
  max-width: 820px;
  overflow: hidden;
  border-radius: 4px;
  background: #fbfaf7;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  color: #11131a;
}

[data-theme="light"] .ip-sheet { box-shadow: 0 30px 70px rgba(20, 30, 50, .18); }
.ip-sheet.is-client { border-radius: 22px; }
.ip-page[data-wide] .ip-sheet { grid-template-columns: 120px minmax(0, 1fr); }

.ip-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0;
  background: #11131a;
  color: #fbfaf7;
}

.ip-spine > * {
  white-space: nowrap;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

.ip-spine > span:first-child {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .34em;
}

.ip-spine__t {
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}

.ip-page[data-wide] .ip-spine__t { font-size: 92px; }

.ip-spine__t span {
  color: transparent;
  -webkit-text-stroke: 1.5px #fbfaf7;
}

.ip-spine code {
  color: #9adbe6;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
}

.ip-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  padding: 24px 20px 28px;
}

.ip-page[data-wide] .ip-body { padding: 34px 40px 36px; }

.ip-page .ip-stamp {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px;
  border-width: 3px;
  border-style: solid;
  border-color: var(--ip-s);
  border-radius: 12px;
  color: var(--ip-s);
  mix-blend-mode: multiply;
  opacity: .55;
  pointer-events: none;
  transform: rotate(8deg) scale(.7);
  transform-origin: top right;
}

.ip-page[data-wide] .ip-stamp { transform: rotate(8deg); }
.ip-stamp--gr { --ip-s: #2f8a55; }
.ip-stamp--co { --ip-s: #b2482c; }

.ip-stamp > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 22px;
  border-width: 1.5px;
  border-style: solid;
  border-color: var(--ip-s);
  border-radius: 7px;
  line-height: 1;
}

.ip-stamp b {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .14em;
}

.ip-stamp b + span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  white-space: nowrap;
}

.ip-to {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ip-page[data-wide] .ip-to.has-stamp { padding-right: 250px; }

/* Narrow: the stamp takes its own corner above the client, not a column */
.ip-page:not([data-wide]) .ip-stamp {
  position: relative;
  top: auto;
  right: auto;
  align-self: flex-end;
  margin: -6px -6px -50px 0;
}

.ip-page .ip-lbl {
  color: #6b7080;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.ip-page .ip-to__n {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.ip-page .ip-to__a {
  color: #4b5263;
  font-size: 12.5px;
  line-height: 1.5;
}

.ip-info {
  display: flex;
  flex-wrap: wrap;
  border: 1.5px solid #11131a;
}

.ip-page .ip-cell {
  display: flex;
  flex: 1 1 90px;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
}

.ip-cell + .ip-cell { border-left: 1px solid rgba(17, 19, 26, .2); }
.ip-page .ip-cell--pj { flex: 2 1 160px; }

.ip-cell span {
  color: #6b7080;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.ip-cell b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ip-cell.is-late { background: #f7e4dd; }
.ip-cell.is-late b { color: #b2482c; }

.ip-page .ip-lines {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ip-lines li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(17, 19, 26, .1);
}

.ip-ln__n {
  color: #a7abb8;
  font-size: 12px;
  font-weight: 900;
}

.ip-page .ip-lines p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ip-lines p b {
  font-size: 15px;
  font-weight: 700;
}

.ip-lines p span {
  color: #6b7080;
  font-size: 12px;
}

.ip-lines li > b {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.ip-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: end;
}

.ip-page[data-wide] .ip-foot { grid-template-columns: minmax(0, 1fr) 280px; }

.ip-prog {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ip-page .ip-prog__bar {
  display: flex;
  height: 34px;
  border: 1.5px solid #11131a;
}

.ip-prog__bar span:first-child {
  background: #2f8a55;
  transition: width .4s;
}

.ip-prog__bar span + span {
  flex: 1;
  background: repeating-linear-gradient(135deg, rgba(17, 19, 26, .1) 0 6px, transparent 6px 12px);
}

.ip-prog__bar.is-late span + span { background: repeating-linear-gradient(135deg, rgba(178, 72, 44, .18) 0 6px, transparent 6px 12px); }
.ip-prog__bar.is-paid span + span { background: transparent; }

.ip-page .ip-prog__l {
  display: flex;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
}

.ip-prog__l span:first-child { color: #2f8a55; }

.ip-prog__l span + span {
  margin-left: auto;
  color: #4b5263;
}

.ip-prog__l .is-late { color: #b2482c; }

.ip-page .ip-sums {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 13px;
}

.ip-sums div { display: flex; }

.ip-sums dt { color: #4b5263; }
.ip-sums .is-gr dd { color: #2f8a55; }

.ip-sums dd {
  margin: 0 0 0 auto;
}

.ip-sums .is-b { font-weight: 700; }

.ip-sums .ip-bal {
  align-items: baseline;
  margin-top: 6px;
  padding: 12px 14px;
  background: #11131a;
  color: #fbfaf7;
}

.ip-sums .ip-bal dt {
  color: #fbfaf7;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .14em;
}

.ip-bal dd {
  font-size: 24px;
  font-weight: 800;
}

.ip-page .ip-terms {
  color: #6b7080;
  font-size: 12px;
  line-height: 1.55;
}

/* Tear-off slip: bleeds to the sheet edges */
.ip-slip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 -20px -28px;
  padding: 20px;
  border-top: 2px dashed rgba(17, 19, 26, .3);
  background: #f1efe9;
}

.ip-page[data-wide] .ip-slip {
  margin: 0 -40px -36px;
  padding: 20px 40px 24px;
}

.ip-slip__x {
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 0 6px;
  background: #fbfaf7;
  color: #6b7080;
  font-size: 13px;
}

.ip-slip__g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

.ip-page[data-wide] .ip-slip__g { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, .9fr) auto; }

.ip-page .ip-slip__g p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ip-slip__g code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ip-page .ip-slip__g .ip-slip__pay { align-items: flex-end; }

.ip-slip__pay b {
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
}

.ip-page .ip-slip__l {
  color: #2b8a99;
  font-size: 12px;
  font-weight: 800;
}

.ip-slip__b {
  height: 50px;
  border: 0;
  background: #11131a;
  color: #fbfaf7;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.ip-slip__b:hover { background: #262a36; }

/* Side column */
.ip-sd {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ip-page[data-two] .ip-sd {
  position: sticky;
  top: 86px;
}

.ip-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.ip-box--tl { gap: 4px; }
.ip-box--8 { gap: 8px; }
.ip-box--2 { gap: 2px; }

.ip-page .ip-box h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.ip-page .ip-box--tl h2 { padding-bottom: 8px; }
.ip-page .ip-box--2 h2 { padding-bottom: 6px; }

.ip-page .ip-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ip-left b {
  font-size: 28px;
  font-weight: 700;
}

.ip-left span {
  color: var(--muted);
  font-size: 12.5px;
}

.ip-meter {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-08);
}

.ip-meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #3fbf7f;
  transition: width .4s;
}

.ip-rec {
  display: flex;
  gap: 6px;
}

.ip-rec input {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ip-in);
  border-radius: 12px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}

.ip-rec input:focus { border-color: rgba(154, 219, 230, .55); }

.ip-page .ip-tl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ip-tl li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 10px;
}

.ip-tl__d {
  position: relative;
  display: flex;
  justify-content: center;
}

.ip-tl__d::before {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tint-08);
  content: "";
}

.ip-tl li:last-child .ip-tl__d::before { content: none; }

.ip-tl__d::after {
  position: relative;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--iv);
  content: "";
}

.ip-page .ip-tl p {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 12px;
}

.ip-tl p b {
  font-size: 13px;
  font-weight: 700;
}

.ip-tl p span {
  color: var(--muted);
  font-size: 11.5px;
}

.ip-tl__w {
  color: var(--muted-2);
  font-size: 11.5px;
  white-space: nowrap;
}

.ip-page .ip-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--tint-04);
}

.ip-link code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--accent-fg);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ip-link button {
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.ip-sw {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ip-sw > span:first-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
}

.ip-sw b {
  font-size: 13px;
  font-weight: 700;
}

.ip-sw b + span {
  color: var(--muted);
  font-size: 11.5px;
}

.ip-tg {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--ip-tg);
}

.ip-tg::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: left .2s;
}

.ip-sw[aria-checked="true"] .ip-tg { background: #9adbe6; }
[data-theme="light"] .ip-sw[aria-checked="true"] .ip-tg { background: #2b8a99; }
.ip-sw[aria-checked="true"] .ip-tg::after { left: 18px; }

.ip-box.ip-pj {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.ip-page .ip-pj__i {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 12px;
}

.ip-page .ip-pj p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ip-pj p b {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ip-pj p span {
  color: var(--muted);
  font-size: 11.5px;
}

.ip-pj a {
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
}

.ip-pj a:hover { text-decoration: underline; }

/* ==========================================================================
   22zz49. Invoice edit: toolbar, six form cards (client, details, lines,
   tax, payment, note), live sheet with change flash, dialogs
   Buttons, status chip, segments and switches are the Preview ones (ip-*);
   the page wrapper carries ip-page for them.
   ========================================================================== */
.ie-page {
  --ie-bd: rgba(255, 255, 255, .1);
  --ie-fx: rgba(154, 219, 230, .38);
}

[data-theme="light"] .ie-page { --ie-bd: rgba(20, 30, 50, .14); }

.ie-page .is-am { color: oklch(0.8 0.13 70); }
.ie-page .is-gr { color: oklch(0.8 0.14 155); }
.ie-page .is-co { color: oklch(0.72 0.14 35); }
[data-theme="light"] .ie-page .is-am { color: #a86f00; }
[data-theme="light"] .ie-page .is-gr { color: oklch(0.52 0.14 155); }
[data-theme="light"] .ie-page .is-co { color: oklch(0.56 0.16 35); }

/* Toolbar */
.ie-bar {
  position: relative;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ip-in);
  border-radius: 20px;
  background: color-mix(in oklab, var(--card-from) 92%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.ie-page[data-two] .ie-bar {
  position: sticky;
  top: 12px;
}

[data-theme="light"] .ie-bar { box-shadow: 0 14px 34px rgba(20, 30, 50, .12); }

.ie-page .ie-ttl {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ie-page .ie-ttl h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.ie-ttl code { font-family: ui-monospace, Menlo, monospace; }

.ie-ttl > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ie-ttl > span::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.ie-bar__a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.ie-page .ie-tot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 6px;
  line-height: 1.1;
}

.ie-tot span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ie-tot b {
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}

.ie-send { gap: 6px; }

/* Grid */
.ie-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.ie-page[data-two] .ie-grid { grid-template-columns: minmax(0, 1fr) minmax(0, min(520px, 42%)); }

.ie-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ie-lock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, oklch(0.8 0.13 70) 40%, transparent);
  border-radius: 18px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 12%, transparent);
}

.ie-lock > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-weight: 900;
}

.ie-page .ie-lock p {
  display: flex;
  flex: 1 1 240px;
  flex-direction: column;
  gap: 2px;
}

.ie-lock b {
  font-size: 14px;
  font-weight: 800;
}

.ie-lock p span {
  color: var(--text-2);
  font-size: 12.5px;
}

.ie-fs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: opacity .2s;
}

.ie-fs:disabled { opacity: .5; }

.ie-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px;
}

.ie-card--12 { gap: 12px; }
.ie-card--10 { gap: 10px; }
.ie-card--8 { gap: 8px; }

.ie-page .ie-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ie-h span:first-child {
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 900;
}

.ie-h b {
  font-size: 17px;
  font-weight: 700;
}

.ie-h b + span {
  color: var(--muted);
  font-size: 12.5px;
}

.ie-page .ie-err {
  color: oklch(0.72 0.14 35);
  font-size: 12px;
  font-weight: 700;
}

[data-theme="light"] .ie-page .ie-err { color: oklch(0.56 0.16 35); }

/* 01 · Client */
.ie-page .ie-cl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr));
  gap: 8px;
}

.ie-cl button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1.5px solid var(--tint-07);
  border-radius: 14px;
  background: var(--tint-02);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ie-cl [aria-pressed="true"] {
  border-color: #9adbe6;
  background: color-mix(in oklab, #9adbe6 10%, transparent);
}

[data-theme="light"] .ie-cl [aria-pressed="true"] { border-color: #2b8a99; }

.ie-page .ie-cl__i {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 11px;
}

.ie-cl button > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ie-cl b,
.ie-cl b + span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ie-cl b {
  font-size: 13px;
  font-weight: 700;
}

.ie-cl b + span {
  color: var(--muted);
  font-size: 11px;
}

.ie-clb {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--tint-07);
  border-radius: 14px;
  background: var(--tint-03);
}

.ie-page .ie-clb p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ie-clb b {
  font-size: 13.5px;
  font-weight: 700;
}

.ie-clb b + span {
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.5;
}

.ie-clb span + span {
  color: var(--muted);
  font-size: 12px;
}

.ie-clb button,
.ie-del {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

/* 02 · Details */
.ie-dg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 12px;
}

.ie-f {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ie-f > label,
.ie-page .ie-l {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ie-in {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--ie-bd);
  border-radius: 12px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  color-scheme: dark;
}

[data-theme="light"] .ie-in { color-scheme: light; }
.ie-in:focus { border-color: rgba(154, 219, 230, .6); }
[data-theme="light"] .ie-in:focus { border-color: #2b8a99; }
.ie-in--no { font-family: ui-monospace, Menlo, monospace; }
.ie-in.is-bad { border-color: oklch(0.72 0.14 35); }

.ie-in option {
  background: var(--card-to);
  color: var(--text);
}

.ie-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.ie-page .ie-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border-radius: 14px;
  background: var(--tint-04);
}

.ie-seg button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.ie-seg [aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.ie-page .ie-due {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 14px;
  border: 1px dashed var(--ip-bd);
  border-radius: 14px;
  background: var(--tint-03);
}

.ie-due b {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.ie-due b span {
  color: var(--muted);
  font-weight: 600;
}

/* 03 · Line items */
.ie-h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.ie-h3 > b {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
}

.ie-page .ie-lh,
.ie-ln {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 54px 84px 64px;
  gap: 8px;
}

.ie-page[data-lw] .ie-lh,
.ie-page[data-lw] .ie-ln { grid-template-columns: 22px minmax(0, 1fr) 64px 96px 104px 64px; }

.ie-page:not([data-lw]) .ie-ln__a { display: none; }

.ie-page .ie-lh {
  padding: 0 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ie-lh span:nth-child(n+3) { text-align: right; }

.ie-page .ie-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ie-ln {
  align-items: start;
  padding: 8px 4px;
  border: 1px solid var(--tint-06);
  border-radius: 14px;
  background: var(--tint-02);
  transition: background .2s;
}

.ie-ln.is-drag {
  border-color: color-mix(in oklab, #9adbe6 45%, transparent);
  background: color-mix(in oklab, #9adbe6 10%, transparent);
  opacity: .8;
}

.ie-grip {
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  font-size: 14px;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
}

.ie-grip:focus-visible { outline: 2px solid #9adbe6; }

.ie-ln__d {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ie-in--t {
  height: 38px;
  font-weight: 700;
}

.ie-in--s {
  height: 30px;
  border-color: transparent;
  background: none;
  color: var(--text-3);
  font-size: 12.5px;
}

.ie-in--n {
  height: 38px;
  text-align: right;
}

.ie-ln .ie-ln__a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 38px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.ie-ln__x {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  height: 38px;
}

.ie-ln__x button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.ie-ln__x button:hover {
  background: var(--tint-06);
  color: var(--text);
}

.ie-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ie-dash { border-style: dashed; }
.ie-add .ie-l { padding: 0 4px 0 8px; }

.ie-chip {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ie-bd);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ie-chip:hover { border-color: rgba(154, 219, 230, .5); }

.ie-chip--s {
  height: 30px;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
}

.ie-disc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--tint-06);
}

.ie-in--dv {
  width: 96px;
  height: 36px;
  text-align: right;
}

.ie-disc > b {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
}

/* 04 · Tax, 05 · Payment, 06 · Note */
.ie-tax {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.ie-page .ie-note {
  color: var(--text-3);
  font-size: 12.5px;
}

.ie-bank { padding-top: 6px; }

.ie-sw {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ie-sw > span:first-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.ie-sw b {
  font-size: 13.5px;
  font-weight: 700;
}

.ie-sw b + span {
  color: var(--muted);
  font-size: 12px;
}

.ie-sw .ip-tg {
  width: 38px;
  height: 22px;
  transition: background .2s;
}

.ie-sw .ip-tg::after {
  top: 3px;
  left: 3px;
}

.ie-sw[aria-checked="true"] .ip-tg { background: #9adbe6; }
[data-theme="light"] .ie-sw[aria-checked="true"] .ip-tg { background: #2b8a99; }
.ie-sw[aria-checked="true"] .ip-tg::after { left: 19px; }

.ie-rems {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--tint-06);
}

.ie-ta {
  height: auto;
  min-height: 84px;
  padding: 12px;
  line-height: 1.5;
  resize: vertical;
}

.ie-page .ie-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ie-page .ie-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 4px 90px;
}

.ie-foot .ie-del {
  height: 38px;
  padding: 0 15px;
  color: oklch(0.72 0.14 35);
  font-size: 13px;
  font-weight: 700;
}

[data-theme="light"] .ie-foot .ie-del { color: oklch(0.56 0.16 35); }

/* Live sheet: paper in both themes */
.ie-pv {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ie-page[data-two] .ie-pv {
  position: sticky;
  top: 86px;
}

.ie-pv__h {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ie-page .ie-pv__h h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.ie-pv__h h2 span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(154, 219, 230, .18);
}

.ie-page .ie-pv__seg { margin-left: auto; }

.ie-page .ie-pv__seg button {
  height: 30px;
  font-size: 12px;
}

.ie-sheet {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 4px;
  background: #fbfaf7;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .45);
  color: #11131a;
}

[data-theme="light"] .ie-sheet { box-shadow: 0 26px 60px rgba(20, 30, 50, .18); }
.ie-sheet.is-client { border-radius: 20px; }

.ie-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 0;
  background: #11131a;
  color: #fbfaf7;
}

.ie-spine > * {
  white-space: nowrap;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

.ie-spine > span:first-child {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .32em;
}

.ie-spine__t {
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}

.ie-spine__t span {
  color: transparent;
  -webkit-text-stroke: 1.2px #fbfaf7;
}

.ie-spine code {
  border-radius: 4px;
  color: #9adbe6;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
}

/* Changed fields flash, then fade */
.ie-sheet code,
.ie-sheet .ie-to > *,
.ie-info p,
.ie-sl,
.ie-sum,
.ie-sn,
.ie-bk {
  border-radius: 4px;
  transition: background .6s;
}

.ie-sheet .is-fx { background: var(--ie-fx); }

.ie-sb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 22px 22px 0;
}

.ie-page .ie-draft {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px;
  border: 2px solid #6b7080;
  border-radius: 9px;
  color: #6b7080;
  opacity: .55;
  pointer-events: none;
  transform: rotate(7deg);
}

.ie-draft span {
  display: block;
  padding: 5px 14px;
  border: 1px solid #6b7080;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .16em;
}

.ie-to {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 110px;
}

.ie-to b {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.ie-to b + span {
  color: #4b5263;
  font-size: 10.5px;
  line-height: 1.45;
}

.ie-sheet .ip-lbl,
.ie-info span {
  color: #6b7080;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .16em;
}

.ie-info {
  display: flex;
  flex-wrap: wrap;
  border: 1.2px solid #11131a;
  font-size: 11.5px;
}

.ie-page .ie-info p {
  display: flex;
  flex: 1 1 60px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
}

.ie-info p + p { border-left: 1px solid rgba(17, 19, 26, .2); }
.ie-page .ie-info .ie-info__pj { flex: 2 1 110px; }

.ie-info b {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ie-page .ie-sl {
  display: flex;
  flex-direction: column;
}

.ie-sl li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(17, 19, 26, .1);
}

.ie-sl li > span {
  color: #a7abb8;
  font-size: 10px;
  font-weight: 900;
}

.ie-page .ie-sl p {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ie-sl p b,
.ie-sl p span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ie-sl p b {
  font-size: 12.5px;
  font-weight: 700;
}

.ie-sl p span {
  color: #6b7080;
  font-size: 10.5px;
}

.ie-sl li > b {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ie-sl .ie-sl__e {
  display: block;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(17, 19, 26, .2);
  color: #a7abb8;
  font-size: 12px;
  text-align: center;
}

.ie-page .ie-sum {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  gap: 4px;
  width: min(240px, 100%);
  margin: 0;
  font-size: 11.5px;
}

.ie-sum div { display: flex; }
.ie-sum dt { color: #4b5263; }
.ie-sum dd { margin: 0 0 0 auto; }
.ie-sum .is-gr dd { color: #2f8a55; }

.ie-sum .ie-sum__t {
  align-items: baseline;
  margin-top: 4px;
  padding: 9px 11px;
  background: #11131a;
  color: #fbfaf7;
}

.ie-sum .ie-sum__t dt {
  color: #fbfaf7;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .14em;
}

.ie-sum__t dd {
  font-size: 17px;
  font-weight: 800;
}

.ie-page .ie-sn {
  color: #6b7080;
  font-size: 10.5px;
  line-height: 1.5;
}

.ie-bk {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 -22px;
  padding: 14px 22px 16px;
  border-top: 1.5px dashed rgba(17, 19, 26, .3);
  border-radius: 0;
  background: #f1efe9;
}

.ie-page .ie-bk p:first-child {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ie-bk p:first-child > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ie-bk code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ie-bk p:first-child > b {
  margin-left: auto;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.ie-page .ie-bk__l {
  color: #2b8a99;
  font-size: 10.5px;
  font-weight: 800;
}

.ie-page .ie-bk__b {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  margin-top: 4px;
  background: #11131a;
  color: #fbfaf7;
  font-size: 12.5px;
  font-weight: 800;
}

.ie-page .ie-pv__n {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* Dialogs */
.ie-dlg {
  box-sizing: border-box;
  width: min(420px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--ip-bd);
  border-radius: 24px;
  background: var(--card-from);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  color: var(--text);
}

.ie-dlg[open] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ie-dlg::backdrop { background: rgba(6, 7, 11, .6); }

.ie-page .ie-dlg h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.ie-page .ie-dlg p {
  margin: 0;
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.5;
}

.ie-page .ie-dlg .ie-dlg__a {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 6px;
}

.ie-dlg .ie-dlg__co,
.ie-dlg .ie-dlg__co:hover {
  background: oklch(0.72 0.14 35);
  color: #11131a;
}

/* ==========================================================================
   22zz50. Invoice add: Start from (sources, project / duplicate / estimate
   panels), new-invoice toolbar, client hint, billable bar, ready checklist,
   review & send dialog, Sent screen
   The editor itself is the Invoice Edit one (ie-*).
   ========================================================================== */
.ia-page { --up-bd3: rgba(255, 255, 255, .25); }
[data-theme="light"] .ia-page { --up-bd3: rgba(20, 30, 50, .3); }

.ia-page .ie-ttl small {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
}

.ia-page .is-cy { color: var(--accent-fg); }

/* Step 1 — Start from */
.ia-start {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 60px;
}

.ia-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.ia-hd__t {
  display: flex;
  flex: 1 1 360px;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ia-page .ia-back {
  align-self: flex-start;
  padding: 0 10px 0 4px;
}

.ia-page .ia-k {
  color: var(--accent-fg);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
}

.ia-k code { font-family: ui-monospace, Menlo, monospace; }

.ia-page .ia-hd h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.ia-page[data-lw] .ia-hd h1 { font-size: 38px; }

.ia-page .ia-sub {
  color: var(--muted);
  font-size: 15px;
}

.ia-page .ia-unb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-03);
}

.ia-unb > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ia-unb b {
  font-size: 22px;
  font-weight: 800;
}

.ia-unb > span + span {
  max-width: 120px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.ia-page .ia-src {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 12px;
}

.ia-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  height: 100%;
  min-height: 190px;
  padding: 20px;
  border: 1.5px solid var(--tint-07);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-from), var(--card-to));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.ia-card:hover { border-color: rgba(154, 219, 230, .5); }

.ia-card[aria-pressed="true"] {
  border-color: #9adbe6;
  background: linear-gradient(180deg, color-mix(in oklab, #9adbe6 12%, transparent), var(--card-to));
}

[data-theme="light"] .ia-card[aria-pressed="true"] { border-color: #2b8a99; }

.ia-card__h {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ia-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--tint-06);
  color: var(--text-2);
}

.ia-card[aria-pressed="true"] .ia-ic {
  background: #9adbe6;
  color: #11131a;
}

.ia-n {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 900;
}

.ia-card__t {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ia-card__t b {
  font-size: 18px;
  font-weight: 700;
}

.ia-card__t span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.ia-chip {
  display: flex;
  align-self: flex-start;
  align-items: center;
  height: 24px;
  margin-top: auto;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--tint-06);
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ia-page .ia-chip.is-gr { background: color-mix(in oklab, oklch(0.8 0.14 155) 16%, transparent); }

/* Source panels */
.ia-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

.ia-panel--two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
}

.ia-panel--dup {
  gap: 4px;
  padding: 10px;
}

.ia-page .ia-dup-h {
  margin: 0;
  padding: 8px 10px 4px;
}

.ia-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ia-page .ia-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ia-panel--dup .ia-list { gap: 4px; }

.ia-pj {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-02);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ia-pj[aria-pressed="true"],
.ia-est[aria-pressed="true"] {
  border-color: #9adbe6;
  background: color-mix(in oklab, #9adbe6 8%, transparent);
}

[data-theme="light"] .ia-pj[aria-pressed="true"],
[data-theme="light"] .ia-est[aria-pressed="true"] { border-color: #2b8a99; }

.ia-pj__h {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.ia-pj__h > span:nth-child(2),
.ia-est > span:nth-child(2),
.ia-it > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ia-pj__h > span:nth-child(2) b,
.ia-est > span:nth-child(2) b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ia-pj__h > span:nth-child(2) span,
.ia-est > span:nth-child(2) span { color: var(--muted); font-size: 11.5px; }

.ia-pj__h > b {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.ia-page .ia-av30 {
  width: 30px;
  height: 30px;
  font-size: 10.5px;
}

.ia-page .ia-av36 {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 11px;
}

.ia-bar {
  display: flex;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-08);
}

.ia-bar--10 { height: 10px; }
.ia-bar span { background: var(--muted-2); }
.ia-bar .is-u { background: oklch(0.8 0.14 155); }

.ia-bar .is-t {
  background: #9adbe6;
  transition: width .3s;
}

.ia-billable.is-over .ia-bar .is-t,
.ia-billable.is-over .ia-leg .is-t { background: oklch(0.72 0.14 35); }

.ia-pj__m {
  color: var(--muted);
  font-size: 11px;
}

.ia-it {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--tint-06);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ia-it[aria-pressed="true"] {
  border-color: color-mix(in oklab, #9adbe6 35%, transparent);
  background: color-mix(in oklab, #9adbe6 6%, transparent);
}

.ia-cb {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--up-bd3, rgba(255, 255, 255, .25));
  border-radius: 7px;
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
}

.ia-it[aria-pressed="true"] .ia-cb {
  border-color: transparent;
  background: #9adbe6;
}

.ia-it > span:nth-child(2) b {
  font-size: 13.5px;
  font-weight: 700;
}

.ia-it > span:nth-child(2) span {
  color: var(--muted);
  font-size: 12px;
}

.ia-est > b {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.ia-page .ia-est > span:nth-child(2) span { font-size: 12px; }

.ia-it > b {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ia-page .ia-cta {
  justify-content: center;
  height: 46px;
  margin-top: 6px;
}

.ia-page .ia-cta[aria-disabled="true"] { opacity: .45; }

.ia-page .ia-cta--e {
  margin-top: 0;
  margin-left: auto;
}

.ia-rc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--tint-02);
}

.ia-page .ia-rc p {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ia-rc p b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ia-rc p span {
  color: var(--muted);
  font-size: 12px;
}

.ia-rc code,
.ia-est code { font-family: ui-monospace, Menlo, monospace; }

.ia-rc > b {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.ia-tag {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 16%, transparent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 800;
}

.ia-page .ia-ests {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 8px;
}

.ia-est {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1.5px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-02);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ia-bill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ia-page .ia-parts button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  height: auto;
  padding: 8px 14px;
}

.ia-parts b {
  font-size: 13px;
  font-weight: 800;
}

.ia-parts span {
  font-size: 11.5px;
  font-weight: 600;
  opacity: .75;
}

/* Editor parts */
.ia-page .ia-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 12.5px;
}

.ia-pill {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
}

.ia-page .ia-pill.is-gr { background: color-mix(in oklab, oklch(0.8 0.14 155) 16%, transparent); }
.ia-page .ia-pill.is-am { background: color-mix(in oklab, oklch(0.8 0.13 70) 16%, transparent); }

.ia-billable {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-03);
}

.ia-page .ia-billable__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.ia-billable__h b {
  margin-left: auto;
  color: oklch(0.8 0.14 155);
  font-size: 12.5px;
  font-weight: 800;
}

.ia-billable.is-over .ia-billable__h b { color: oklch(0.72 0.14 35); }
[data-theme="light"] .ia-billable__h b { color: oklch(0.52 0.14 155); }
[data-theme="light"] .ia-billable.is-over .ia-billable__h b { color: oklch(0.56 0.16 35); }

.ia-page .ia-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--text-3);
  font-size: 12px;
}

.ia-leg span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ia-leg span:last-child { margin-left: auto; }

.ia-leg i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--muted-2);
}

.ia-leg i.is-t { background: #9adbe6; }

.ia-ready {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}

.ia-ready__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ia-page .ia-ready__h h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.ia-ready__h span {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.ia-segs {
  display: flex;
  gap: 4px;
}

.ia-segs span {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--tint-08);
}

.ia-segs .is-ok { background: oklch(0.8 0.14 155); }

.ia-page .ia-chk {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 4px 10px;
}

.ia-chk li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.ia-chk li > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tint-09);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
}

.ia-chk .is-ok { color: var(--text); }
.ia-chk .is-ok > span:first-child { background: oklch(0.8 0.14 155); }

/* Review & send */
.ie-dlg.ia-rv {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border-radius: 26px;
  overflow-y: auto;
}

.ia-rv[open] { gap: 0; }

.ia-rv__h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--tint-06);
}

.ia-page .ia-rv__h p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--text);
}

.ia-rv__h b {
  font-size: 18px;
  font-weight: 700;
}

.ia-rv__h p span {
  color: var(--muted);
  font-size: 12.5px;
}

.ia-rv code { font-family: ui-monospace, Menlo, monospace; }

.ia-x {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ie-bd);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.ia-rv__b {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
}

.ia-page .ia-to {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--tint-07);
  border-radius: 14px;
  background: var(--tint-03);
  color: var(--text);
}

.ia-to > .ie-l { width: 56px; }

.ia-to__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
}

.ia-to > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ia-to b {
  font-size: 13.5px;
  font-weight: 700;
}

.ia-to b + span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ia-msg { line-height: 1.55; }

.ia-page .ia-att {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text);
}

.ia-att > span {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--tint-04);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ia-att > span > span:last-child {
  color: var(--muted);
  font-weight: 600;
}

.ia-att .ia-pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #b2482c;
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
}

.ia-page .ia-when {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-bottom: 6px;
}

.ia-rv__f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--tint-06);
}

.ia-rv__f > span {
  color: var(--muted);
  font-size: 12px;
}

.ia-rv__f strong { color: var(--accent-fg); }

.ia-page .ia-rv .ia-rv__f p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* Sent */
.ia-done {
  display: flex;
  justify-content: center;
  padding: 40px 0 80px;
}

.ia-done__c {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(560px, 100%);
  overflow: hidden;
  padding: 34px 30px 28px;
  border: 1px solid var(--ie-bd);
  border-radius: 30px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, oklch(0.8 0.14 155) 18%, transparent), transparent 60%), linear-gradient(180deg, var(--card-from), var(--card-to));
  text-align: center;
}

.ia-done__i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  box-shadow: 0 0 0 10px color-mix(in oklab, oklch(0.8 0.14 155) 16%, transparent);
  color: #11131a;
}

.ia-page .ia-done h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  outline: none;
}

.ia-page .ia-done__c > p:not(.ia-done__a) {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.ia-page .ia-sum {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-03);
}

.ia-sum div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ia-sum dt {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ia-sum dd {
  margin: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ia-page .ia-done__a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}

/* ==========================================================================
   22zz51. Login (full-screen, no shell; dark in both themes): studio cover
   with slides and a week card, sign-in form, SSO, lock, magic link, welcome
   ========================================================================== */
.main--bare {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: #0b0c11;
}

.lg-page {
  --lg-co: oklch(0.72 0.14 35);
  --lg-gr: oklch(0.8 0.14 155);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  background: #0b0c11;
  color: #eef0f5;
  color-scheme: dark;
}

.lg-page[data-wide] { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

.lg-page p,
.lg-page h1 { margin: 0; }

.lg-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lg-page button {
  font-family: inherit;
  cursor: pointer;
}

/* Cover */
.lg-page:not([data-wide]) .lg-cover { display: none; }

.lg-cover {
  box-sizing: border-box;
  display: flex;
  min-height: 100vh;
  padding: 14px;
}

.lg-cv {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 32px;
  background: radial-gradient(90% 70% at 20% 10%, rgba(154, 219, 230, .28), transparent 60%), radial-gradient(80% 60% at 90% 90%, rgba(201, 154, 78, .22), transparent 60%), #151821;
}

/* Slides: replace the gradients with the studio's photos (2400 × 1600 px) */
.lg-sl {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.lg-sl.is-on { opacity: 1; }

.lg-sl__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The cover photo's real size, until the photo is set */
.lg-sl__size {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(255, 255, 255, .8);
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.lg-sl--1 { background-image: radial-gradient(70% 60% at 30% 35%, rgba(154, 219, 230, .32), transparent 65%), radial-gradient(60% 50% at 80% 80%, rgba(201, 154, 78, .2), transparent 60%), linear-gradient(160deg, #1f2b36, #0e1016); }
.lg-sl--2 { background-image: radial-gradient(70% 60% at 65% 30%, oklch(0.62 0.09 45 / .45), transparent 65%), radial-gradient(60% 50% at 20% 85%, rgba(154, 219, 230, .14), transparent 60%), linear-gradient(160deg, #2a221d, #0f0e10); }
.lg-sl--3 { background-image: radial-gradient(75% 60% at 40% 25%, oklch(0.55 0.07 250 / .5), transparent 65%), radial-gradient(60% 50% at 85% 75%, oklch(0.6 0.08 155 / .2), transparent 60%), linear-gradient(160deg, #1b2230, #0d1015); }

.lg-cv__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 12, 17, .55) 0%, transparent 26%, transparent 52%, rgba(11, 12, 17, .88) 100%);
  pointer-events: none;
}

.lg-page .lg-cv__top {
  position: absolute;
  top: 24px;
  right: 28px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.lg-cv__top span:first-child {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .36em;
}

.lg-cv__top span + span {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(17, 19, 26, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
}

.lg-week {
  position: absolute;
  top: 70px;
  right: 24px;
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(250px, calc(100% - 48px));
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 22px;
  background: rgba(17, 19, 26, .42);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.lg-page .lg-week__k {
  color: #c9ccd6;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
}

.lg-week dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
}

.lg-week dl div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 2px;
}

.lg-week dt {
  color: #c9ccd6;
  font-size: 11.5px;
}

.lg-week dd {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.lg-week .is-warm dd { color: #f0b48a; }

.lg-page .lg-week__t {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px;
  font-weight: 600;
}

.lg-stack { display: flex; }

.lg-stack__av {
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  border: 2px solid #1b1f2a;
  border-radius: 50%;
  object-fit: cover;
}

.lg-stack__av + .lg-stack__av { margin-left: -7px; }

.lg-cap {
  position: absolute;
  right: 28px;
  bottom: 26px;
  left: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.lg-page .lg-cap__t {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lg-cap__t span:first-child {
  color: #9adbe6;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
}

.lg-cap__t b {
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.lg-page[data-xxl] .lg-cap__t b { font-size: 40px; }

.lg-cap__t span:last-child {
  color: #c9ccd6;
  font-size: 13.5px;
}

.lg-page .lg-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lg-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(17, 19, 26, .35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
}

.lg-arrow:hover { background: rgba(17, 19, 26, .6); }

.lg-dots {
  display: flex;
  gap: 6px;
}

.lg-dots button {
  position: relative;
  width: 10px;
  height: 6px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  transition: width .3s;
}

.lg-dots .is-on { width: 34px; }

.lg-dots button span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: #fff;
}

.lg-dots .is-on span { animation: lg-fill 7s linear forwards; }

@keyframes lg-fill {
  from { width: 0; }
  to { width: 100%; }
}

/* Form column */
.lg-main {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100vh;
  padding: 24px 20px;
}

.lg-page[data-mid] .lg-main { padding: 24px 36px; }
.lg-page[data-xl] .lg-main { padding: 24px 56px; }

.lg-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.lg-word {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .36em;
}

.lg-page[data-wide] .lg-word { display: none; }

.lg-page .lg-top p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.lg-top p span {
  color: #8a8f9e;
  font-size: 13.5px;
}

.lg-top button,
.lg-top a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: transparent;
  color: #eef0f5;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.lg-top button:hover,
.lg-top a:hover {
  border-color: rgba(154, 219, 230, .55);
  color: #eef0f5;
  text-decoration: none;
}

.lg-mid {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.lg-box {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 420px;
}

.lg-hd {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lg-page .lg-k {
  color: #9adbe6;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
}

.lg-page .lg-hd h1 {
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  outline: none;
}

.lg-page .lg-magic h1 { font-size: 38px; }
.lg-page .lg-wel h1 { font-size: 40px; }

.lg-page .lg-sub {
  color: #8a8f9e;
  font-size: 15px;
  line-height: 1.5;
}

.lg-magic .lg-sub,
.lg-wel .lg-sub { color: #a7abb8; }
.lg-sub strong { color: #eef0f5; }

/* Lock */
.lg-lock {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--lg-co) 45%, transparent);
  border-radius: 18px;
  background: color-mix(in oklab, var(--lg-co) 12%, transparent);
}

.lg-lock__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--lg-co);
  color: #11131a;
}

.lg-page .lg-lock p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lg-lock b {
  font-size: 14px;
  font-weight: 800;
}

.lg-lock p > span:not(.lg-lock__a) {
  color: #c9ccd6;
  font-size: 13px;
  line-height: 1.45;
}

.lg-lock strong {
  color: #eef0f5;
  font-variant-numeric: tabular-nums;
}

.lg-lock__a {
  display: flex;
  gap: 14px;
  padding-top: 4px;
}

.lg-lock__a button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #9adbe6;
  font-size: 13px;
  font-weight: 800;
}

.lg-lock__a button + button {
  color: #8a8f9e;
  font-size: 12.5px;
  font-weight: 700;
}

/* Form */
.lg-form,
.lg-fs {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lg-fs {
  margin: 0;
  padding: 0;
  border: 0;
  transition: opacity .2s;
}

.lg-fs:disabled { opacity: .45; }

.lg-socs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lg-soc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  color: #eef0f5;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.lg-soc:hover {
  border-color: rgba(154, 219, 230, .5);
  background: rgba(255, 255, 255, .06);
}

.lg-page:not([data-soc]) .lg-soc__l { display: none; }

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

.lg-ms {
  display: grid;
  grid-template-columns: 7px 7px;
  gap: 2px;
}

.lg-ms span {
  width: 7px;
  height: 7px;
  background: #f25022;
}

.lg-ms span:nth-child(2) { background: #7fba00; }
.lg-ms span:nth-child(3) { background: #00a4ef; }
.lg-ms span:nth-child(4) { background: #ffb900; }

.lg-page .lg-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #6b7080;
  font-size: 12px;
  font-weight: 700;
}

.lg-or span {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .08);
}

.lg-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lg-f {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lg-f label {
  color: #8a8f9e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.lg-page .lg-f__h {
  display: flex;
  align-items: baseline;
}

.lg-f__h button {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9adbe6;
  font-size: 12.5px;
  font-weight: 700;
}

.lg-in {
  position: relative;
  display: flex;
}

.lg-in input {
  box-sizing: border-box;
  width: 100%;
  height: 54px;
  padding: 0 44px 0 16px;
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  outline: none;
  background: rgba(255, 255, 255, .03);
  color: #eef0f5;
  font: inherit;
  font-size: 15px;
  transition: border-color .2s;
}

.lg-in input::placeholder { color: #6b7080; }
.lg-in input:focus { border-color: rgba(154, 219, 230, .6); }
.lg-in.is-ok input { border-color: rgba(154, 219, 230, .4); }
.lg-in.is-bad input { border-color: var(--lg-co); }
.lg-in--pw input { padding-right: 76px; }
.lg-in.is-dots input { letter-spacing: .12em; }

.lg-ok {
  position: absolute;
  top: 50%;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--lg-gr);
  color: #11131a;
}

.lg-show {
  position: absolute;
  top: 50%;
  right: 8px;
  height: 34px;
  margin-top: -17px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: #c9ccd6;
  font-size: 12.5px;
  font-weight: 700;
}

.lg-typo {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c9ccd6;
  font-size: 13px;
  text-align: left;
}

.lg-typo strong { color: #9adbe6; }

.lg-page .lg-err {
  color: var(--lg-co);
  font-size: 12.5px;
  font-weight: 700;
}

.lg-page .lg-caps {
  display: flex;
  align-items: center;
  gap: 6px;
  color: oklch(0.8 0.13 70);
  font-size: 12.5px;
  font-weight: 700;
}

.lg-sso {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(154, 219, 230, .3);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(154, 219, 230, .1), rgba(154, 219, 230, .03));
}

.lg-page .lg-sso p {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lg-sso__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
}

.lg-sso p > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lg-sso b {
  font-size: 14px;
  font-weight: 800;
}

.lg-sso b + span {
  color: #a7abb8;
  font-size: 12.5px;
}

.lg-sso__b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border: 0;
  border-radius: 14px;
  background: #9adbe6;
  color: #11131a;
  font-size: 14.5px;
  font-weight: 800;
}

.lg-keep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c9ccd6;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
}

.lg-keep > span:first-child {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: 7px;
  color: #11131a;
  transition: background .2s;
}

.lg-keep[aria-pressed="true"] > span:first-child {
  border-color: transparent;
  background: #9adbe6;
}

.lg-page .lg-bad {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--lg-co) 40%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--lg-co) 12%, transparent);
  font-size: 13px;
  line-height: 1.4;
}

.lg-bad span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lg-co);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
}

.lg-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  border: 0;
  border-radius: 16px;
  background: #f2f3f6;
  box-shadow: 0 14px 34px rgba(242, 243, 246, .12);
  color: #11131a;
  font-size: 15.5px;
  font-weight: 800;
  transition: transform .15s;
}

.lg-go:hover { background: #fff; }
.lg-go:active { transform: scale(.99); }

.lg-page .lg-alt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lg-alt button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: transparent;
  color: #eef0f5;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.lg-alt button:hover,
.lg-soc:focus-visible { border-color: rgba(154, 219, 230, .5); }

.lg-spin {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: #eef0f5;
  border-radius: 50%;
  animation: lg-spin .7s linear infinite;
}

.lg-spin.is-dark {
  border-color: rgba(17, 19, 26, .25);
  border-top-color: #11131a;
}

.lg-go .lg-spin {
  width: 18px;
  height: 18px;
  border-width: 2.5px;
}

@keyframes lg-spin {
  to { transform: rotate(360deg); }
}

/* Demo presets */
.lg-demo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 16px;
}

.lg-demo__t {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: #a7abb8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: left;
}

.lg-demo__t span:first-child {
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(154, 219, 230, .14);
  color: #9adbe6;
  font-size: 10px;
}

.lg-demo__t span:last-child {
  margin-left: auto;
  transition: transform .2s;
}

.lg-demo__t[aria-expanded="true"] span:last-child { transform: rotate(180deg); }

.lg-page .lg-demo__l {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 10px 10px;
}

.lg-demo__l button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #eef0f5;
  font-size: 12.5px;
  text-align: left;
}

.lg-demo__l button:hover { background: rgba(255, 255, 255, .04); }

.lg-demo__l code {
  min-width: 0;
  overflow: hidden;
  color: #9adbe6;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lg-demo__l code + span {
  margin-left: auto;
  color: #8a8f9e;
  white-space: nowrap;
}

/* Magic link */
.lg-magic,
.lg-wel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lg-wel {
  align-items: flex-start;
  gap: 18px;
}

.lg-magic__i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: linear-gradient(135deg, #9adbe6, #c4eef5);
  box-shadow: 0 18px 40px rgba(154, 219, 230, .25);
  color: #11131a;
}

.lg-page .lg-mail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lg-mail a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  color: #eef0f5;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.lg-mail .lg-mail__a {
  border-color: transparent;
  background: #f2f3f6;
  color: #11131a;
  font-weight: 800;
}

.lg-mail a:hover {
  color: #eef0f5;
  text-decoration: none;
}

.lg-mail .lg-mail__a:hover {
  background: #fff;
  color: #11131a;
}

.lg-page .lg-resend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}

.lg-resend span {
  flex: 1;
  color: #a7abb8;
  font-size: 13px;
}

.lg-resend button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #9adbe6;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lg-resend [aria-disabled="true"] {
  color: #6b7080;
  cursor: default;
}

.lg-page .lg-back {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.lg-back button,
.lg-back a {
  padding: 0;
  border: 0;
  background: transparent;
  color: #9adbe6;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.lg-back a { font-weight: 800; }

.lg-back button + button,
.lg-back a + button {
  color: #6b7080;
  font-size: 12.5px;
}

.lg-wel .lg-back a + button {
  color: #8a8f9e;
  font-size: 13px;
}

/* Welcome */
.lg-wel__p {
  position: relative;
  width: 84px;
  height: 84px;
}

.lg-wel__p img {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
}

.lg-wel__p > span {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 3px solid #0b0c11;
  border-radius: 50%;
  background: var(--lg-gr);
  color: #11131a;
}

.lg-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.lg-bar__t {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.lg-bar__t span {
  display: block;
  width: 0;
  height: 100%;
  background: #9adbe6;
  animation: lg-fill 2.2s linear forwards;
}

.lg-bar__t .is-stop { animation-play-state: paused; }

.lg-bar p {
  color: #8a8f9e;
  font-size: 12.5px;
}

/* Footer */
.lg-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  color: #6b7080;
  font-size: 12.5px;
}

.lg-foot select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  outline: none;
  background: transparent;
  color: #a7abb8;
  font: inherit;
  font-size: 12.5px;
}

.lg-foot option {
  background: #151821;
  color: #eef0f5;
}

.lg-foot button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a8f9e;
}

.lg-foot button:hover { color: #eef0f5; }

.lg-ok-dot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  white-space: nowrap;
}

.lg-ok-dot::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lg-gr);
  box-shadow: 0 0 0 3px color-mix(in oklab, oklch(0.8 0.14 155) 22%, transparent);
  content: "";
}

/* ==========================================================================
   22zz52. Register: cover perks and quote, stepper, account / studio / team
   steps, verify code, studio ready
   Page, cover, inputs, social buttons and demo box are the Login ones (lg-*).
   ========================================================================== */
.lg-page.rg-page[data-wide] { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

.rg-c--cy { --rg: #9adbe6; }
.rg-c--gr { --rg: oklch(0.8 0.14 155); }
.rg-c--am { --rg: oklch(0.8 0.13 70); }
.rg-c--vi { --rg: oklch(0.78 0.11 300); }
.rg-c--co { --rg: oklch(0.72 0.14 35); }
.rg-c--mu { --rg: #8a8f9e; }

.lg-top a { text-decoration: none; }

/* Cover */
.lg-cv__shade.rg-shade { background: linear-gradient(180deg, rgba(11, 12, 17, .55) 0%, transparent 26%, transparent 46%, rgba(11, 12, 17, .9) 100%); }

.lg-week.rg-perks {
  gap: 10px;
  width: min(270px, calc(100% - 48px));
}

.rg-perks ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rg-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
}

.rg-perk {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--rg);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
}

.lg-page .rg-free {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #9adbe6;
  font-size: 12.5px;
  font-weight: 800;
}

.rg-cap {
  position: absolute;
  right: 28px;
  bottom: 26px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rg-quote {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
  margin: 0;
}

.rg-quote blockquote {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.lg-page[data-xxl] .rg-quote blockquote { font-size: 30px; }

.rg-quote figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rg-q__i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.rg-quote figcaption > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rg-quote b {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.rg-quote b + span {
  color: #c9ccd6;
  font-size: 12px;
}

.lg-page .rg-cap__r {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.rg-cap__r > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #c9ccd6;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wizard */
.lg-box.rg-box { max-width: 460px; }

.lg-page .rg-stepper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.rg-stepper button {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b7080;
  text-align: left;
  cursor: default;
}

.rg-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  transition: background .3s;
}

.rg-st {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.rg-st > span:first-child {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
}

.rg-stepper .is-cur button { color: #eef0f5; }
.rg-stepper .is-cur .rg-bar { background: #9adbe6; }

.rg-stepper .is-cur .rg-st > span:first-child {
  border-color: transparent;
  background: #9adbe6;
  box-shadow: 0 0 0 1.5px #9adbe6;
}

.rg-stepper .is-done button {
  color: #c9ccd6;
  cursor: pointer;
}

.rg-stepper .is-done .rg-bar { background: oklch(0.8 0.14 155); }

.rg-stepper .is-done .rg-st > span:first-child {
  border-color: transparent;
  background: oklch(0.8 0.14 155);
  box-shadow: 0 0 0 1.5px oklch(0.8 0.14 155);
}

.lg-page .rg-hd h1 { font-size: 40px; line-height: 1.02; }

.rg-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.rg-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rg-step--18 { gap: 18px; }
.rg-page .lg-in input { height: 52px; }
.rg-page .lg-in input:focus { border-color: rgba(154, 219, 230, .7); }

.rg-team {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(154, 219, 230, .32);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(154, 219, 230, .12), rgba(154, 219, 230, .03));
}

.rg-team__i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
}

.lg-page .rg-team p {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rg-team b {
  font-size: 14px;
  font-weight: 800;
}

.rg-team b + span {
  color: #a7abb8;
  font-size: 12.5px;
}

.rg-team button {
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #9adbe6;
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.lg-page .rg-meter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rg-meter__b {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.rg-meter__b span {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  transition: background .25s;
}

.rg-meter__b .is-on { background: var(--rg); }

.rg-meter b {
  min-width: 48px;
  color: var(--rg);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.lg-page .rg-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

.rg-rules li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8a8f9e;
  font-size: 12.5px;
  font-weight: 600;
  transition: color .2s;
}

.rg-rules.is-tried li { color: #c9a08a; }

.rg-rules li > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
}

.rg-rules li.is-ok { color: #eef0f5; }
.rg-rules .is-ok > span:first-child { background: oklch(0.8 0.14 155); }

.lg-keep.rg-terms {
  align-items: flex-start;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

.rg-terms > span:first-child { flex-shrink: 0; }
.rg-terms.is-bad > span:first-child { border-color: oklch(0.72 0.14 35); }
.rg-terms + .lg-err { margin-top: -8px; }

/* Step 2 */
.rg-studio {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.rg-studio .lg-f {
  flex: 1;
  min-width: 0;
}

.rg-logo {
  position: relative;
  box-sizing: content-box;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  cursor: pointer;
}

.rg-logo > span:first-child {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #11131a;
  font-size: 24px;
  font-weight: 800;
}

.rg-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rg-logo:focus-within { outline: 2px solid #9adbe6; }

.rg-slug {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  height: 52px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}

.rg-slug:focus-within { border-color: rgba(154, 219, 230, .7); }
.rg-slug.is-ok { border-color: rgba(154, 219, 230, .4); }
.rg-slug.is-bad { border-color: oklch(0.72 0.14 35); }

.rg-slug > span:first-child {
  padding: 0 2px 0 16px;
  color: #6b7080;
  font-size: 15px;
  white-space: nowrap;
}

.rg-slug input {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #eef0f5;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}

.rg-slug__s {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  color: var(--rg);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lg-spin.rg-spin12 {
  width: 12px;
  height: 12px;
  border-color: rgba(255, 255, 255, .2);
  border-top-color: #9adbe6;
}

.lg-page .rg-alts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: #a7abb8;
  font-size: 12.5px;
}

.rg-alts button {
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(154, 219, 230, .35);
  border-radius: 999px;
  background: rgba(154, 219, 230, .08);
  color: #9adbe6;
  font-size: 12px;
  font-weight: 700;
}

.lg-f.rg-f8 { gap: 8px; }

.rg-l {
  color: #8a8f9e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.lg-page .rg-lr {
  display: flex;
  align-items: baseline;
}

.rg-lr > span:last-child {
  margin-left: auto;
  color: #6b7080;
  font-size: 12px;
}

.lg-page .rg-sizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.rg-sizes button {
  height: 48px;
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  color: #c9ccd6;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}

.rg-sizes .is-bad { border-color: oklch(0.72 0.14 35); }

.rg-sizes [aria-pressed="true"] {
  border-color: #9adbe6;
  background: rgba(154, 219, 230, .12);
  color: #eef0f5;
}

.lg-page .rg-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rg-kinds button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 8px;
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .02);
  color: #eef0f5;
  font-size: 13.5px;
  font-weight: 700;
  transition: background .2s, border-color .2s;
}

.rg-kinds .is-bad { border-color: oklch(0.72 0.14 35); }

.rg-kinds button span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.rg-kinds [aria-pressed="true"] {
  border-color: var(--rg);
  background: color-mix(in oklab, var(--rg) 12%, transparent);
}

.rg-kinds [aria-pressed="true"] span { background: var(--rg); }

/* Step 3 */
.lg-page .rg-inv {
  display: flex;
  gap: 8px;
}

.rg-inv .lg-in { flex: 1; }

.rg-inv > button {
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  color: #eef0f5;
  font-size: 14px;
  font-weight: 800;
}

.lg-page .rg-hint {
  color: #6b7080;
  font-size: 12px;
}

.lg-page .rg-invs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rg-invs li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  animation: rg-pop .25s ease;
}

@keyframes rg-pop {
  from {
    opacity: 0;
    transform: scale(.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.rg-inv__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.rg-invs li > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rg-invs select {
  height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  outline: none;
  background: #151821;
  color: #eef0f5;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
}

.rg-invs li > button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8a8f9e;
}

.rg-invs li > button:hover { background: rgba(255, 255, 255, .06); }

.rg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px;
  border: 1.5px dashed rgba(255, 255, 255, .12);
  border-radius: 18px;
  text-align: center;
}

.rg-empty > span:first-child { display: flex; }

.rg-empty i {
  box-sizing: content-box;
  width: 30px;
  height: 30px;
  border: 2px solid #0b0c11;
  border-radius: 50%;
}

.rg-empty i + i { margin-left: -9px; }

.rg-empty b {
  font-size: 13.5px;
  font-weight: 700;
}

.rg-empty b + span {
  color: #8a8f9e;
  font-size: 12.5px;
}

.rg-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}

.rg-link__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(154, 219, 230, .14);
  color: #9adbe6;
}

.lg-page .rg-link p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rg-link b {
  font-size: 13px;
  font-weight: 700;
}

.rg-link code {
  overflow: hidden;
  color: #8a8f9e;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rg-link button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #f2f3f6;
  color: #11131a;
  font-size: 12.5px;
  font-weight: 800;
}

/* Footer of the wizard */
.lg-page .rg-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rg-back {
  height: 56px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: transparent;
  color: #eef0f5;
  font-size: 14.5px;
  font-weight: 700;
}

.lg-go.rg-next { flex: 1; }

.lg-page .lg-go.is-off,
.lg-page .lg-go.is-off:hover {
  background: #5d616d;
  box-shadow: none;
}

.rg-skip {
  align-self: center;
  margin-top: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a8f9e;
  font-size: 13.5px;
  font-weight: 700;
}

/* Verify */
.rg-code-f {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rg-cells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rg-cell {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 64px;
  border: 1.5px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  outline: none;
  background: rgba(255, 255, 255, .03);
  color: #eef0f5;
  font: inherit;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}

.rg-cell:focus { border-color: rgba(154, 219, 230, .7); }

.rg-cell.is-on {
  border-color: rgba(154, 219, 230, .5);
  background: rgba(154, 219, 230, .06);
}

.rg-cell.is-bad { border-color: oklch(0.72 0.14 35); }

.lg-page .rg-code-e {
  margin-top: -8px;
  font-size: 13px;
}

.rg-vb [aria-disabled="true"] {
  color: #6b7080;
  cursor: default;
}

.lg-page .rg-vb button:first-child {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lg-page .rg-vb button + button {
  color: #8a8f9e;
  font-size: 13.5px;
}

/* Ready */
.lg-page .rg-ready h1 {
  font-size: 40px;
  line-height: 1.02;
}

.rg-ready .lg-sub { color: #a7abb8; }
.rg-ready .lg-sub strong { color: #eef0f5; }

.rg-ready {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lg-page .rg-k--gr { color: oklch(0.8 0.14 155); }

.rg-app {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  background: #151821;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}

.rg-app__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  background: #11131a;
}

.rg-app__side > span,
.rg-app__side > img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  object-fit: cover;
}

.rg-app__side i {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .15);
}

.rg-app__side i:first-of-type { background: #9adbe6; }

.rg-app__m {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

.lg-page .rg-app__m > p:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rg-app__m b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rg-app__team {
  display: flex;
  margin-left: auto;
}

.rg-app__team span {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: -6px;
  border: 2px solid #151821;
  border-radius: 50%;
  color: #11131a;
  font-size: 8px;
  font-weight: 900;
}

.rg-app__m .rg-l {
  font-size: 10px;
  letter-spacing: .14em;
}

.lg-page .rg-app__m ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}

.rg-app__m li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  animation: rg-pop .35s ease;
}

.rg-app__m li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--rg);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
}

.lg-page .rg-done {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rg-done li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c9ccd6;
  font-size: 13.5px;
}

.rg-done span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

a.lg-go,
a.lg-go:hover {
  color: #11131a;
  text-decoration: none;
}

.rg-demo b { font-weight: 700; }

.rg-demo code {
  margin-left: auto;
  font-size: 11.5px;
}

.rg-eu {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  white-space: nowrap;
}

/* ==========================================================================
   22zz53. Verify email: cover with "why" cards, inbox (mail apps, code,
   resend, fix address, help), verifying, verified, expired, already
   Page, inputs, code cells and demo box are the Login / Register ones.
   ========================================================================== */
.lg-page.ve-page[data-wide] { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

.lg-cv__shade.ve-shade { background: linear-gradient(180deg, rgba(11, 12, 17, .55) 0%, transparent 28%, transparent 45%, rgba(11, 12, 17, .92) 100%); }

.ve-cap {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lg-page .ve-cap h2 {
  max-width: 520px;
  margin: 0;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.lg-page[data-xxl] .ve-cap h2 { font-size: 40px; }

.lg-page .ve-whys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.ve-whys li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 18px;
  background: rgba(17, 19, 26, .42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.ve-whys .rg-perk {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 13px;
}

.ve-whys b {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.ve-whys b + span {
  color: #c9ccd6;
  font-size: 12px;
  line-height: 1.45;
}

/* Top bar */
.lg-page .lg-top .ve-who {
  flex-wrap: wrap;
  gap: 10px;
  color: #8a8f9e;
  font-size: 13px;
}

.lg-top .ve-who > span {
  color: inherit;
  font-size: 13px;
}

.lg-top .ve-who > .ve-ini {
  color: #11131a;
  font-size: 10px;
}

.ve-ini {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: oklch(0.82 0.08 80);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
}

.ve-who > span:nth-child(2) { white-space: nowrap; }
.ve-who strong { color: #eef0f5; }
.ve-who > span:nth-child(3) { color: #3a3f4d; }

.lg-top .ve-who a {
  height: auto;
  padding: 0;
  border: 0;
  color: #9adbe6;
  font-size: 13px;
  font-weight: 700;
}

.lg-top .ve-who a:hover {
  color: #c4eef5;
  text-decoration: underline;
}

/* States */
.lg-box.ve-box { max-width: 450px; }

.ve-st {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ve-st--20 {
  align-items: flex-start;
  gap: 20px;
}

.ve-st--20 .lg-hd { align-self: stretch; }
.lg-page .ve-sub { color: #a7abb8; }
.lg-page .lg-hd .ve-h38 { font-size: 38px; }
.lg-page .lg-hd .ve-h40 { font-size: 40px; }
.lg-page .ve-k--gr { color: oklch(0.8 0.14 155); }
.lg-page .ve-k--am { color: oklch(0.8 0.13 70); }

.ve-icon {
  position: relative;
  width: 76px;
  height: 76px;
  animation: ve-float 3.2s ease-in-out infinite;
}

.ve-ring {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: rgba(154, 219, 230, .35);
  animation: ve-ring 2.4s ease-out infinite;
}

.ve-tile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: linear-gradient(135deg, #9adbe6, #c4eef5);
  box-shadow: 0 18px 40px rgba(154, 219, 230, .28);
  color: #11131a;
}

.ve-icon b {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 3px solid #0b0c11;
  border-radius: 999px;
  background: oklch(0.72 0.14 35);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

@keyframes ve-float {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes ve-ring {
  from {
    opacity: .7;
    transform: scale(.8);
  }

  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes ve-pop {
  0% {
    opacity: 0;
    transform: scale(.5);
  }

  70% { transform: scale(1.08); }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.ve-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .03);
}

.ve-edit label {
  color: #8a8f9e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.lg-page .ve-edit p {
  display: flex;
  gap: 8px;
}

.ve-edit .lg-in { flex: 1; }

.ve-edit .lg-in input {
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border-color: rgba(255, 255, 255, .12);
}

.ve-edit p > button {
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: #f2f3f6;
  color: #11131a;
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lg-page .ve-edit .ve-edit__f { align-items: center; }

.ve-edit__f button {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a8f9e;
  font-size: 12.5px;
  font-weight: 700;
}

.ve-mail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lg-go.ve-mail__p {
  gap: 10px;
  text-decoration: none;
}

.ve-m24,
.ve-m20 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.ve-m20 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 10px;
}

.lg-page .ve-mail__r {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ve-mail__r a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  color: #eef0f5;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.ve-mail__r a:hover {
  border-color: rgba(154, 219, 230, .5);
  color: #eef0f5;
  text-decoration: none;
}

.ve-code {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rg-cell.ve-cell { height: 62px; }
.lg-page .ve-err { font-size: 13px; }

.ve-verify {
  height: 50px;
  border: 1px solid rgba(154, 219, 230, .45);
  border-radius: 14px;
  background: rgba(154, 219, 230, .1);
  color: #9adbe6;
  font-size: 14.5px;
  font-weight: 800;
}

.ve-rs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}

.ve-rs > button:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9adbe6;
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ve-rs [aria-disabled="true"] {
  color: #6b7080;
  cursor: default;
}

.ve-rs > span {
  color: #6b7080;
  font-size: 12px;
}

.ve-wrong {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c9ccd6;
  font-size: 13px;
  font-weight: 700;
}

.ve-help {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
}

.ve-help > button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: #eef0f5;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
}

.ve-help > button span {
  margin-left: auto;
  color: #8a8f9e;
  transition: transform .2s;
}

.ve-help > button[aria-expanded="true"] span { transform: rotate(180deg); }

.ve-help__b {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 14px;
}

.lg-page .ve-help ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ve-help li {
  display: flex;
  gap: 10px;
  color: #c9ccd6;
  font-size: 13px;
  line-height: 1.45;
}

.ve-help li span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(154, 219, 230, .14);
  color: #9adbe6;
  font-size: 10.5px;
  font-weight: 900;
}

.ve-help__b > button {
  align-self: flex-start;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: transparent;
  color: #eef0f5;
  font-size: 12.5px;
  font-weight: 700;
}

.ve-spin {
  box-sizing: border-box;
  width: 76px;
  height: 76px;
  border: 4px solid rgba(154, 219, 230, .18);
  border-top-color: #9adbe6;
  border-radius: 50%;
  animation: lg-spin .9s linear infinite;
}

.ve-ok {
  position: relative;
  width: 84px;
  height: 84px;
}

.ve-ring--gr {
  border-radius: 50%;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 35%, transparent);
  animation-duration: 1.6s;
}

.ve-ok > span:last-child {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  animation: ve-pop .5s ease;
}

.lg-bar.ve-bar .lg-bar__t span {
  background: oklch(0.8 0.14 155);
  animation-duration: 3s;
}

.ve-bar .lg-bar__t .is-stop {
  width: 0;
  animation: none;
}

.lg-page .ve-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lg-go.ve-b {
  height: 52px;
  padding: 0 22px;
  font-size: 15px;
  text-decoration: none;
}

.ve-b2 {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: transparent;
  color: #eef0f5;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.ve-b2:hover {
  color: #eef0f5;
  text-decoration: none;
}

.ve-badge {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 24px;
}

.ve-badge--am {
  border: 1.5px solid color-mix(in oklab, oklch(0.8 0.13 70) 50%, transparent);
  background: color-mix(in oklab, oklch(0.8 0.13 70) 18%, transparent);
  color: oklch(0.8 0.13 70);
}

.ve-badge--cy {
  border: 1.5px solid rgba(154, 219, 230, .4);
  background: rgba(154, 219, 230, .12);
  color: #9adbe6;
}

.lg-go.ve-new {
  height: 56px;
  padding: 0 24px;
  font-size: 15px;
}

.ve-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: #9adbe6;
  font-size: 13.5px;
  font-weight: 700;
}

.ve-demo__e {
  margin-left: auto;
  color: #8a8f9e;
  white-space: nowrap;
}

.lg-foot .ve-help-a {
  color: #8a8f9e;
  text-decoration: none;
}

.lg-foot .ve-help-a:hover { color: #eef0f5; }

/* ==========================================================================
   22zz54. Reset password: account card, generator, rules, devices, link
   timer, 2-step confirm, done list, link error states
   States, cover cards and code cells are the Verify Email / Register ones.
   ========================================================================== */
.lg-page.rp-page[data-wide] { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.lg-cv__shade.rp-shade { background: linear-gradient(180deg, rgba(11, 12, 17, .55) 0%, transparent 28%, transparent 42%, rgba(11, 12, 17, .92) 100%); }
.lg-page .ve-cap .rp-h2 { font-size: 34px; }
.lg-page[data-xxl] .ve-cap .rp-h2 { font-size: 44px; }

.ve-st.rp-st { gap: 18px; }

.rp-st--20 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rp-acc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .03);
}

.rp-acc img {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.lg-page .rp-acc p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rp-acc b {
  font-size: 14px;
  font-weight: 700;
}

.rp-acc b + span {
  overflow: hidden;
  color: #a7abb8;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-acc a {
  color: #9adbe6;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.rp-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lg-f__h .rp-gen {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
}

.rp-in__b {
  position: absolute;
  top: 50%;
  right: 8px;
  display: flex;
  gap: 4px;
  margin-top: -17px;
}

.rp-in__b .lg-show {
  position: static;
  margin: 0;
}

.rp-copy {
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: rgba(154, 219, 230, .16);
  color: #9adbe6;
  font-size: 12px;
  font-weight: 800;
}

.lg-in.rp-in--gen input {
  padding-right: 138px;
  font-family: ui-monospace, Menlo, monospace;
}

.lg-page .rg-rules.rp-rules {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 5px 12px;
}

.rp-rules li.is-bad { color: #e8a48a; }
.rp-rules .is-bad > span:first-child { background: oklch(0.72 0.14 35); }

.rp-devs {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .02);
}

.lg-keep.rp-out {
  align-items: center;
  gap: 12px;
  padding: 14px;
  color: #eef0f5;
}

.rp-out > span:last-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.rp-out b {
  font-size: 13.5px;
  font-weight: 700;
}

.rp-out b + span {
  color: #8a8f9e;
  font-size: 12px;
  font-weight: 400;
}

.lg-page .rp-devs ul {
  display: flex;
  flex-direction: column;
  padding: 0 14px 10px;
  transition: opacity .2s;
}

.lg-page .rp-devs ul.is-dim { opacity: .45; }

.rp-devs li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.rp-dev__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  color: #c9ccd6;
}

.lg-page .rp-devs li p {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.rp-devs li b {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-devs li b + span {
  color: #8a8f9e;
  font-size: 11.5px;
}

.rp-devs li > span:last-child {
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.rp-devs .is-gr { color: oklch(0.8 0.14 155); }
.rp-devs .is-co { color: oklch(0.72 0.14 35); }
.rp-devs .is-mu { color: #8a8f9e; }

.rp-shake { animation: rp-shake .3s ease; }

@keyframes rp-shake {
  0%,
  100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.rp-pop { animation: ve-pop .3s ease; }

.lg-page .rp-exp {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #6b7080;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.lg-page .rp-exp.is-am { color: oklch(0.8 0.13 70); }

.rp-tfa {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lg-page .rp-tfa-e {
  margin-top: -8px;
  font-size: 13px;
}

.rp-backup {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  outline: none;
  background: rgba(255, 255, 255, .03);
  color: #eef0f5;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rp-backup.is-ok { border-color: rgba(154, 219, 230, .45); }
.rp-backup.is-bad { border-color: oklch(0.72 0.14 35); }

.lg-page .rp-done {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
}

.rp-done li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  color: #c9ccd6;
  font-size: 13.5px;
}

.rp-done li span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rg);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.rp-done .rg-c--mu { --rg: rgba(255, 255, 255, .15); }

.lg-go.rp-signin {
  align-self: stretch;
  text-decoration: none;
}

.lg-page .rp-secure {
  color: #8a8f9e;
  font-size: 13px;
}

.rp-secure a {
  color: oklch(0.72 0.14 35);
  font-weight: 800;
}

.ve-badge.rp-badge {
  border: 1.5px solid color-mix(in oklab, var(--rg) 50%, transparent);
  background: color-mix(in oklab, var(--rg) 16%, transparent);
  color: var(--rg);
}

.lg-page .lg-k.rp-k { color: var(--rg); }
.rp-btns .lg-go { white-space: nowrap; }
.rp-btns .ve-b2 { white-space: nowrap; }

/* ==========================================================================
   22zz55. Forgot password: recovery path, email with SSO hand-off, rate
   limit, other ways, link sent, code by text, ask an admin
   ========================================================================== */
.lg-page.fp-page[data-wide] { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.lg-cv__shade.fp-shade { background: linear-gradient(180deg, rgba(11, 12, 17, .55) 0%, transparent 28%, transparent 38%, rgba(11, 12, 17, .93) 100%); }
.ve-cap.fp-cap { gap: 18px; }
.lg-page[data-xxl] .ve-cap.fp-cap h2 { font-size: 42px; }

/* Recovery path */
.lg-page .fp-path {
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  max-width: 440px;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 22px;
  background: rgba(17, 19, 26, .45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  list-style: none;
}

.fp-path li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  transition: background .3s;
}

.fp-path li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .1);
  color: #c9ccd6;
  font-size: 13px;
  font-weight: 900;
  transition: background .3s;
}

.lg-page .fp-path p {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.fp-path b {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.fp-path b + span {
  color: #c9ccd6;
  font-size: 12px;
}

.fp-path em {
  color: #8a8f9e;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
}

.fp-path li.fp-path--now { background: rgba(154, 219, 230, .1); }

.fp-path .fp-path--now > span {
  background: #9adbe6;
  color: #11131a;
}

.fp-path--now em { color: #9adbe6; }

.fp-path .fp-path--done > span {
  background: oklch(0.8 0.14 155);
  color: #11131a;
}

.fp-path--done em { color: oklch(0.8 0.14 155); }

/* Enter email */
.ve-st.fp-st { gap: 18px; }
.ve-st.fp-g20 { gap: 20px; }

.fp-key {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 1.5px solid rgba(154, 219, 230, .4);
  border-radius: 22px;
  background: rgba(154, 219, 230, .12);
  color: #9adbe6;
}

.fp-lim {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, oklch(0.8 0.13 70) 45%, transparent);
  border-radius: 18px;
  outline: none;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 12%, transparent);
}

.fp-lim > span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-weight: 900;
}

.lg-page .fp-lim p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fp-lim b {
  font-size: 14px;
  font-weight: 800;
}

.fp-lim b + span {
  color: #c9ccd6;
  font-size: 13px;
  line-height: 1.45;
}

.fp-lim strong {
  color: #eef0f5;
  font-variant-numeric: tabular-nums;
}

.fp-lim button {
  align-self: flex-start;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a8f9e;
  font-size: 12.5px;
  font-weight: 700;
}

.fp-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lg-page .fp-sso__b {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fp-sso__b a {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 160px;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 14px;
  background: #9adbe6;
  color: #11131a;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.fp-sso__b a + a {
  flex-basis: 140px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: none;
  color: #eef0f5;
  font-size: 13.5px;
  font-weight: 700;
}

.fp-sso__b a:hover {
  color: #11131a;
  text-decoration: none;
}

.fp-sso__b a + a:hover {
  border-color: rgba(154, 219, 230, .55);
  color: #eef0f5;
}

.fp-alts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fp-alt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .02);
  color: #eef0f5;
  text-align: left;
  transition: border-color .2s;
}

.fp-alt:hover { border-color: rgba(154, 219, 230, .45); }

.fp-alt__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  color: #c9ccd6;
}

.fp-alt > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fp-alt b {
  font-size: 13.5px;
  font-weight: 700;
}

.fp-alt b + span {
  color: #8a8f9e;
  font-size: 12px;
}

.fp-alt__a {
  color: #6b7080;
  font-size: 16px;
}

.lg-page .fp-priv {
  display: flex;
  gap: 8px;
  color: #6b7080;
  font-size: 12px;
  line-height: 1.5;
}

.fp-priv svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Link sent */
.ve-icon.fp-icon { animation: none; }
.fp-icon .ve-tile { animation: ve-pop .45s ease; }
.fp-icon svg { animation: fp-fly 2.6s ease-in-out infinite; }

@keyframes fp-fly {
  0%,
  100% { transform: translate(0, 0) rotate(0); }
  40% { transform: translate(6px, -6px) rotate(-6deg); }
}

.fp-sim {
  align-self: flex-start;
  color: #6b7080;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.fp-sim:hover {
  color: #9adbe6;
  text-decoration: none;
}

/* Code by text */
.fp-code {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lg-page .fp-err { margin-top: -8px; }

.lg-page .fp-back {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.fp-back button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #9adbe6;
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fp-back [aria-disabled="true"] {
  color: #6b7080;
  cursor: default;
}

.fp-back button + button {
  color: #8a8f9e;
  font-weight: 700;
}

.fp-back--cy button { font-weight: 700; }

/* Ask an admin */
.lg-page .fp-admins {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-admin {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .02);
  color: #eef0f5;
  text-align: left;
}

.lg-page .fp-admin:disabled { cursor: default; }

.fp-admin.is-on {
  border-color: #9adbe6;
  background: rgba(154, 219, 230, .08);
}

.fp-admin__av {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.fp-admin > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fp-admin b {
  font-size: 14px;
  font-weight: 700;
}

.fp-admin b + span {
  color: #8a8f9e;
  font-size: 12px;
}

.fp-radio {
  box-sizing: content-box;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
}

.is-on .fp-radio {
  border-color: #9adbe6;
  background: radial-gradient(circle, #9adbe6 0 45%, transparent 50%);
}

.fp-note {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fp-note textarea,
.ts-sup-f textarea {
  padding: 12px 14px;
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  outline: none;
  background: rgba(255, 255, 255, .03);
  color: #eef0f5;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.fp-note textarea::placeholder,
.ts-sup-f textarea::placeholder { color: #6b7080; }
.fp-note textarea:focus,
.ts-sup-f textarea:focus { border-color: rgba(154, 219, 230, .7); }

.lg-page .fp-ok {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 40%, transparent);
  border-radius: 16px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 10%, transparent);
  animation: ve-pop .35s ease;
}

.fp-ok > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-weight: 900;
}

.fp-ok > span:last-child {
  font-size: 13.5px;
  line-height: 1.45;
}

.ve-demo__e.fp-demo__e {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
}

/* ==========================================================================
   22zz56. Two steps: sign-in attempt, method tabs, code ring, push number
   match, security key, backup code, locked, recovery, verified
   ========================================================================== */
.lg-page.ts-page[data-wide] { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.lg-cv__shade.ts-shade { background: linear-gradient(180deg, rgba(11, 12, 17, .55) 0%, transparent 28%, transparent 36%, rgba(11, 12, 17, .93) 100%); }
.ve-cap.ts-cap { gap: 18px; }
.lg-page .ve-cap.ts-cap h2 { font-size: 34px; }
.lg-page[data-xxl] .ve-cap.ts-cap h2 { font-size: 44px; }

/* Sign-in attempt */
.ts-att {
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 22px;
  background: rgba(17, 19, 26, .45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.lg-page .ts-att__h {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c9ccd6;
}

.ts-att__h span:first-child {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
  box-shadow: 0 0 0 4px color-mix(in oklab, oklch(0.8 0.13 70) 25%, transparent);
}

.ts-att__h span:nth-child(2) {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
}

.ts-att__h span:last-child {
  margin-left: auto;
  font-size: 12px;
}

.ts-att dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 0;
}

.ts-att dl div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ts-att dt {
  color: #8a8f9e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ts-att dd {
  margin: 0;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.ts-att .ts-ip {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}

.ts-att .ts-ok { color: oklch(0.8 0.14 155); }

.lg-page .ts-att__f {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #c9ccd6;
  font-size: 12.5px;
}

.ts-att__f a {
  color: #f0b48a;
  font-weight: 800;
  text-decoration: none;
}

.ts-att__f a:hover {
  color: #f6cbaa;
  text-decoration: none;
}

/* Top bar */
.lg-page .lg-top .ts-step {
  gap: 10px;
  color: #8a8f9e;
  font-size: 13px;
  white-space: nowrap;
}

.lg-top .ts-step > span {
  display: flex;
  gap: 3px;
}

.lg-top .ts-step > span span {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: oklch(0.8 0.14 155);
}

.lg-top .ts-step > span span:last-child { background: #9adbe6; }
.lg-top .ts-step > span .is-gr:last-child { background: oklch(0.8 0.14 155); }

/* Verify */
.lg-box.ts-box {
  max-width: 460px;
  gap: 20px;
}

.ve-st.ts-st { gap: 18px; }

.lg-page .lg-hd .ts-h {
  font-size: 40px;
  line-height: 1.02;
}

.lg-page .lg-hd .ts-h.ve-h38 { font-size: 38px; }

.ts-acc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}

.ts-acc img {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.lg-page .ts-acc p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ts-acc b {
  font-size: 13.5px;
  font-weight: 700;
}

.ts-acc b + span {
  overflow: hidden;
  color: #a7abb8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-acc a {
  color: #9adbe6;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.ts-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
}

.ts-tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 9px 2px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #a7abb8;
  transition: background .2s, color .2s;
}

.ts-tabs button[aria-pressed="true"] {
  background: #f2f3f6;
  color: #11131a;
}

.ts-tabs span {
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lg-page[data-narrow] .ts-tabs span { display: none; }

.ts-form,
.ts-app,
.ts-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ts-app,
.ts-col { gap: 12px; }

.lg-page .ts-hint {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ts-hint > span:first-child {
  flex: 1;
  color: #a7abb8;
  font-size: 13px;
}

.ts-hint strong { color: #eef0f5; }

.ts-ring {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  color: #9adbe6;
}

.ts-ring.is-am { color: oklch(0.8 0.13 70); }

.ts-ring svg {
  display: block;
  transform: rotate(-90deg);
}

.ts-ring circle {
  fill: none;
  stroke: rgba(255, 255, 255, .1);
  stroke-width: 3;
}

.ts-ring circle + circle {
  stroke: currentColor;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}

.ts-ring b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rg-cell.ts-cell { font-size: 28px; }
.ts-shake { animation: ts-shake .45s ease; }

@keyframes ts-shake {
  0%,
  100% { transform: translateX(0); }
  20%,
  60% { transform: translateX(-6px); }
  40%,
  80% { transform: translateX(6px); }
}

.ts-rs {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9adbe6;
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ts-rs[aria-disabled="true"] {
  color: #6b7080;
  cursor: default;
}

/* Push */
.ts-push {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(154, 219, 230, .25);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(154, 219, 230, .1), rgba(154, 219, 230, .02));
}

.ts-phone {
  position: relative;
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 86px;
  height: 140px;
  border: 2px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  background: #151821;
}

.ts-phone > span:first-child {
  position: absolute;
  top: 6px;
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .18);
}

.ts-phone > span:nth-child(2) {
  color: #8a8f9e;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ts-phone > span:nth-child(3) {
  color: #c9ccd6;
  font-size: 9.5px;
  font-weight: 700;
}

.ts-phone > span:last-child {
  display: flex;
  gap: 4px;
}

.ts-phone > span:last-child span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  font-size: 9.5px;
  font-weight: 900;
}

.ts-phone > span:last-child .is-ok {
  background: oklch(0.8 0.14 155);
  color: #11131a;
}

.ts-buzz { animation: ts-buzz .6s ease; }

@keyframes ts-buzz {
  0%,
  50%,
  100% { transform: rotate(0); }
  10%,
  30% { transform: rotate(-6deg); }
  20%,
  40% { transform: rotate(6deg); }
}

.lg-page .ts-push p {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ts-push p > span:first-child {
  color: #a7abb8;
  font-size: 12px;
}

.ts-push strong { color: #eef0f5; }

.ts-push p b {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
}

.ts-push__st {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
}

.ts-push__sp {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(154, 219, 230, .25);
  border-top-color: #9adbe6;
  border-radius: 50%;
  animation: lg-spin .8s linear infinite;
}

.ts-c--cy { color: #9adbe6; }
.ts-c--gr { color: oklch(0.8 0.14 155); }
.ts-c--co { color: oklch(0.72 0.14 35); }
.ts-c--am { color: oklch(0.8 0.13 70); }
.ts-c--mu { color: #8a8f9e; }

.lg-page .ts-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: -4px;
}

.ts-links button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #9adbe6;
  font-size: 13.5px;
  font-weight: 800;
}

.ts-links button + button {
  color: #8a8f9e;
  font-weight: 700;
}

.ts-links button:last-child {
  margin-left: auto;
  color: #6b7080;
  font-size: 12.5px;
}

/* Security key */
.ts-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  background: rgba(255, 255, 255, .03);
  text-align: center;
}

.ts-key__i {
  position: relative;
  width: 84px;
  height: 84px;
}

.ts-key__i > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(154, 219, 230, .14);
  color: #9adbe6;
  transition: background .3s;
}

.ts-key__i > .ts-key__r {
  background: rgba(154, 219, 230, .3);
  animation: ts-ring 1.6s ease-out infinite;
}

.ts-key--wait .ts-key__i > span:last-child {
  background: #9adbe6;
  color: #11131a;
}

.ts-key--ok .ts-key__i > span:last-child {
  background: oklch(0.8 0.14 155);
  color: #11131a;
}

@keyframes ts-ring {
  from {
    opacity: .75;
    transform: scale(.85);
  }

  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

.ts-key b {
  font-size: 15px;
  font-weight: 700;
}

.ts-key b + span {
  max-width: 320px;
  color: #8a8f9e;
  font-size: 13px;
}

.ts-key button {
  height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(154, 219, 230, .45);
  border-radius: 14px;
  background: rgba(154, 219, 230, .1);
  color: #9adbe6;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.ts-key button[aria-disabled="true"] { cursor: default; }

/* Backup code */
.ts-bk {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lg-page .ts-bk p {
  display: flex;
  align-items: baseline;
}

.ts-bk label {
  color: #8a8f9e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ts-bk p span {
  margin-left: auto;
  color: #a7abb8;
  font-size: 12px;
  font-weight: 700;
}

.ts-bk__in {
  box-sizing: border-box;
  height: 60px;
  padding: 0 18px;
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  outline: none;
  background: rgba(255, 255, 255, .03);
  color: #eef0f5;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 22px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ts-bk__in::placeholder { color: #6b7080; }
.ts-bk__in:focus { border-color: rgba(154, 219, 230, .7); }
.ts-bk__in.is-ok { border-color: rgba(154, 219, 230, .45); }
.ts-bk__in.is-bad { border-color: oklch(0.72 0.14 35); }

.ts-bk > span {
  color: #6b7080;
  font-size: 12.5px;
}

.lg-keep.ts-trust > span:last-child span { color: #6b7080; }

.lg-page .ts-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ts-foot button,
.ts-back {
  padding: 0;
  border: 0;
  background: transparent;
  color: #9adbe6;
  font-size: 13.5px;
  font-weight: 700;
}

.ts-foot span {
  margin-left: auto;
  color: #6b7080;
  font-size: 12px;
}

/* Locked */
.ts-lock {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border: 1.5px solid color-mix(in oklab, oklch(0.72 0.14 35) 50%, transparent);
  border-radius: 24px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 16%, transparent);
  color: oklch(0.72 0.14 35);
}

.lg-page .lg-k.ts-k--co { color: oklch(0.72 0.14 35); }
.ts-num { font-variant-numeric: tabular-nums; }

.ts-btns .lg-go {
  height: 52px;
  padding: 0 20px;
  font-size: 14.5px;
  white-space: nowrap;
}

.ts-btns .ve-b2 { white-space: nowrap; }

.ts-skip {
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b7080;
  font-size: 12.5px;
  font-weight: 700;
}

/* Recovery */
.lg-page .ts-rec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ts-rec button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .02);
  color: #eef0f5;
  text-align: left;
}

.ts-rec button:hover { border-color: rgba(154, 219, 230, .45); }

.ts-rec__i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--rg);
  color: #11131a;
}

.ts-rec__i.rg-c--mu { --rg: rgba(255, 255, 255, .18); }

.ts-rec button > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ts-rec b {
  font-size: 14px;
  font-weight: 700;
}

.ts-rec b + span {
  color: #8a8f9e;
  font-size: 12.5px;
}

.ts-rec em {
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.lg-page .fp-admin.ts-adm { cursor: default; }

.lg-go.ts-go54 {
  height: 54px;
  font-size: 15px;
}

.lg-page .fp-priv.ts-note {
  color: #8a8f9e;
  font-size: 12.5px;
}

.fp-priv.ts-note svg { margin-top: 2px; }

.lg-page .ts-case {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(154, 219, 230, .35);
  border-radius: 16px;
  outline: none;
  background: rgba(154, 219, 230, .08);
  animation: ve-pop .35s ease;
}

.ts-case b {
  color: #9adbe6;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.ts-case span {
  font-size: 13.5px;
  line-height: 1.45;
}

.ts-back { align-self: flex-start; }

/* Verified */
.lg-page .ts-codes {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, oklch(0.8 0.13 70) 45%, transparent);
  border-radius: 16px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 12%, transparent);
}

.ts-codes span {
  flex: 1 1 220px;
  font-size: 13.5px;
  line-height: 1.45;
}

.ts-codes a {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.ts-codes a:hover {
  color: #11131a;
  text-decoration: none;
}

/* ==========================================================================
   22zz57. Wizard checkout: stepper, cart, delivery, payment with card
   preview, review, order placed, action bar, order summary
   ========================================================================== */
.wc-page {
  --wc-co: oklch(0.72 0.14 35);
  --wc-gr: var(--grt);
  --wc-bd: rgba(255, 255, 255, .12);
  --wc-bd2: rgba(255, 255, 255, .25);
  --wc-bd3: rgba(255, 255, 255, .2);
  --wc-bd1: rgba(255, 255, 255, .1);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

[data-theme="light"] .wc-page {
  --wc-bd: rgba(20, 30, 50, .16);
  --wc-bd2: rgba(20, 30, 50, .3);
  --wc-bd3: rgba(20, 30, 50, .24);
  --wc-bd1: rgba(20, 30, 50, .14);
}

.wc-page p,
.wc-page ul,
.wc-page ol,
.wc-page dl,
.wc-page h2 { margin: 0; }

.wc-page ul,
.wc-page ol {
  padding: 0;
  list-style: none;
}

.wc-card {
  border: 1px solid var(--tint-07);
  border-radius: 24px;
  background: var(--surface-card);
}

/* Header */
.wc-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.wc-hd__t {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wc-page .wc-k {
  color: var(--accent-fg);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
}

.wc-hd h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.wc-secure {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 12%, transparent);
  color: var(--wc-gr);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.wc-shop {
  color: var(--accent-fg);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.wc-shop:hover {
  color: var(--accent-fg);
  text-decoration: underline;
}

/* Stepper */
.wc-page .wc-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--tint-07);
  border-radius: 24px;
  background: var(--surface-card);
}

.wc-steps button {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wc-steps button[aria-disabled="true"] { cursor: default; }

.wc-steps__bar {
  height: 4px;
  border-radius: 999px;
  background: var(--tint-08);
  transition: background .3s;
}

.wc-steps__r {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.wc-steps__d {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--wc-bd3);
  border-radius: 50%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  transition: background .3s, border-color .3s;
}

.wc-steps__r > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.wc-steps b,
.wc-steps b + span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-steps b {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 800;
}

.wc-steps b + span {
  color: var(--muted);
  font-size: 11.5px;
}

.wc-page:not([data-w760]) .wc-steps b + span { display: none; }
.wc-steps .is-cur .wc-steps__bar { background: var(--cyan); }
.wc-steps .is-done .wc-steps__bar { background: oklch(0.8 0.14 155); }

.wc-steps .is-cur .wc-steps__d {
  border-color: transparent;
  background: var(--cyan);
  color: var(--ink);
}

.wc-steps .is-done .wc-steps__d {
  border-color: transparent;
  background: oklch(0.8 0.14 155);
  color: var(--ink);
}

.wc-steps .is-cur b { color: var(--text); }
.wc-steps .is-done b { color: var(--text-2); }

/* Grid */
.wc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.wc-page[data-two] .wc-grid { grid-template-columns: minmax(0, 1fr) 360px; }

.wc-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.wc-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.wc-page[data-two] .wc-mini { display: none; }

.wc-mini b {
  font-size: 14px;
  font-weight: 700;
}

.wc-mini b + span {
  color: var(--muted);
  font-size: 13px;
}

.wc-mini strong {
  margin-left: auto;
  font-size: 16px;
  font-weight: 800;
}

.wc-mini > span:last-child {
  color: var(--muted);
  transition: transform .2s;
}

.wc-mini[aria-expanded="true"] > span:last-child { transform: rotate(180deg); }

/* Step cards */
.wc-sec {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.wc-sec--14 { gap: 14px; }

.wc-sh {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.wc-sh > span:first-child {
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 900;
}

.wc-page .wc-sh h2 {
  font-size: 18px;
  font-weight: 700;
  outline: none;
}

.wc-sh h2 + span {
  color: var(--muted);
  font-size: 13px;
}

.wc-sh .wc-sh__r {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}

.wc-page .wc-undo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--tint-04);
  font-size: 13px;
}

.wc-undo span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-undo button,
.wc-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.wc-link--mu {
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 700;
}

.wc-link--co {
  color: var(--wc-co);
  font-size: 12.5px;
  font-weight: 700;
}

.wc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 16px;
  border: 1.5px dashed var(--tint-14);
  border-radius: 18px;
  text-align: center;
}

.wc-empty > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--tint-06);
  color: var(--text-3);
}

.wc-empty b {
  font-size: 17px;
  font-weight: 700;
}

.wc-empty b + span {
  color: var(--muted);
  font-size: 13px;
}

.wc-empty .wc-pill { margin-top: 4px; }

.wc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--tint-14);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.wc-pill:hover {
  color: var(--text);
  text-decoration: none;
}

.wc-pill--p,
.wc-pill--p:hover {
  border-color: transparent;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 800;
}

.wc-pill--s {
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
}

.wc-pill--48 { height: 48px; }
.wc-pill--g { border-color: transparent; }

/* Cart */
.wc-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wc-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--tint-06);
  border-radius: 18px;
  background: var(--tint-02);
}

.wc-page[data-w640] .wc-item { grid-template-columns: 96px minmax(0, 1fr) auto; }

.wc-thumb {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 14px;
}

.wc-page[data-w640] .wc-thumb {
  width: 96px;
  height: 96px;
}

.wc-thumb40,
/* A product photo, or the size it needs, inside a checkout thumb */
.wc-pic {
  overflow: hidden;
}

.wc-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wc-pic__size {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .85);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.wc-thumb44 .wc-pic__size,
.wc-thumb40 .wc-pic__size { font-size: 8px; }

.wc-thumb40.wc-pic { position: relative; }

.wc-thumb44 {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.wc-thumb40 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.wc-thumb44 b {
  position: absolute;
  top: -1px;
  right: -1px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}

.wc-item__b {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.wc-page .wc-item__t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wc-item__t b {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-item__t span {
  color: var(--muted);
  font-size: 12.5px;
}

.wc-page .wc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.wc-chip {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--tint-08);
  border-radius: 999px;
  background: var(--tint-02);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.wc-chip--dash {
  border-style: dashed;
  font-weight: 600;
}

.wc-chip[aria-pressed="true"],
.wc-opt[aria-pressed="true"] {
  border-color: var(--cyan);
  background: color-mix(in oklab, #9adbe6 8%, transparent);
}

.wc-page .wc-item__a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.wc-qty {
  display: flex;
  align-items: center;
  height: 32px;
  border: 1px solid var(--tint-14);
  border-radius: 999px;
}

.wc-qty button {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.wc-qty button[aria-disabled="true"] {
  color: var(--muted-2);
  cursor: default;
}

.wc-qty span {
  min-width: 22px;
  font-size: 13.5px;
  font-weight: 800;
  text-align: center;
}

.wc-page .wc-item__p {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.wc-item__p b {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.wc-item__p span {
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.wc-part {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--tint-06);
}

.wc-part--8 { gap: 8px; }

.wc-part--flat {
  padding-top: 0;
  border-top: 0;
}

.wc-page .wc-cap,
.wc-cap label,
.wc-f label,
.wc-gift label {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.wc-later li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.wc-later b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-later b + span {
  font-size: 13px;
  font-weight: 700;
}

.wc-page .wc-pairs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}

.wc-pairs li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-02);
}

.wc-pairs p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.wc-pairs b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-pairs b + span {
  color: var(--muted);
  font-size: 12px;
}

.wc-add {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--pill-bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.wc-add.is-on {
  background: oklch(0.8 0.14 155);
  cursor: default;
}

.wc-promo {
  display: flex;
  gap: 8px;
}

.wc-promo .wc-pill { height: 46px; }

#wc-promo {
  flex: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wc-in {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--wc-bd);
  border-radius: 14px;
  outline: none;
  background: var(--tint-03);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  transition: border-color .2s;
}

.wc-in::placeholder { color: var(--muted-2); }
.wc-in:focus { border-color: rgba(154, 219, 230, .7); }
.wc-in.is-ok { border-color: rgba(154, 219, 230, .45); }
.wc-in.is-bad { border-color: var(--wc-co); }

.wc-page .wc-err {
  color: var(--wc-co);
  font-size: 12px;
  font-weight: 700;
}

.wc-page .wc-okt {
  color: var(--wc-gr);
  font-size: 12px;
  font-weight: 700;
}

.wc-page .wc-promo-on {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed color-mix(in oklab, oklch(0.8 0.14 155) 50%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 10%, transparent);
}

.wc-promo-on code {
  color: var(--wc-gr);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 800;
}

.wc-promo-on span {
  color: var(--text-3);
  font-size: 13px;
}

.wc-promo-on button { margin-left: auto; }

/* Options: delivery, address, payment */
.wc-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 8px;
}

.wc-opts--col {
  display: flex;
  flex-direction: column;
}

.wc-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1.5px solid var(--tint-08);
  border-radius: 18px;
  background: var(--tint-02);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.wc-radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--wc-bd2);
  border-radius: 50%;
  transition: border-color .2s;
}

[aria-pressed="true"] > .wc-radio {
  border-color: var(--cyan);
  background: radial-gradient(circle, #9adbe6 0 42%, transparent 47%);
}

.wc-opt__b {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wc-opt__b--2 { gap: 2px; }

.wc-opt__t {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.wc-opt__b--a .wc-opt__t { align-items: center; }

.wc-opt b {
  font-size: 14px;
  font-weight: 700;
}

.wc-opt__t em {
  margin-left: auto;
  font-size: 13.5px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.wc-opt__t .is-gr { color: var(--wc-gr); }

.wc-opt__b > span:not(.wc-opt__t) {
  color: var(--muted);
  font-size: 12.5px;
}

.wc-opt__b--a > span:not(.wc-opt__t) { line-height: 1.45; }

.wc-opt__b > span.wc-opt__d {
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 700;
}

.wc-tag {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--tint-06);
  color: var(--text-3);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}

.wc-na {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-02);
}

.wc-f {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wc-f--6 { grid-column: span 6; }
.wc-f--2,
.wc-f--2c { grid-column: span 3; }
.wc-f--2c { grid-column: span 6; }
.wc-page[data-w640] .wc-f--2,
.wc-page[data-w640] .wc-f--2c { grid-column: span 2; }
.wc-f--span { grid-column: span 2; }
.wc-f--mono .wc-in { font-family: ui-monospace, Menlo, monospace; }
#wc-cn { letter-spacing: .06em; }
#wc-vat { font-family: ui-monospace, Menlo, monospace; }

.wc-page .wc-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(154, 219, 230, .25);
  border-radius: 18px;
  background: rgba(154, 219, 230, .06);
}

.wc-pick > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--cyan);
  color: var(--ink);
}

.wc-pick > span:last-child,
.wc-check > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wc-pick b,
.wc-check b {
  font-size: 14px;
  font-weight: 700;
}

.wc-pick b + span,
.wc-check b + span {
  color: var(--muted);
  font-size: 12.5px;
}

.wc-page .wc-note {
  color: var(--text-3);
  font-size: 13px;
}

.wc-part--10 { gap: 10px; }

.wc-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wc-check > span:last-child { flex: 1; }

.wc-ck {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--wc-bd2);
  border-radius: 7px;
  color: var(--ink);
  transition: background .2s;
}

.wc-check[aria-pressed="true"] .wc-ck {
  border-color: transparent;
  background: var(--cyan);
}

.wc-check--sm {
  grid-column: span 2;
  gap: 10px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
}

.wc-check--line {
  padding-top: 14px;
  border-top: 1px solid var(--tint-06);
}

.wc-terms.is-bad .wc-ck { border-color: var(--wc-co); }

.wc-gift {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 34px;
}

.wc-page .wc-gift p { display: flex; }

.wc-gift p span {
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
}

.wc-in.wc-ta {
  height: auto;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

/* Payment */
.wc-page .wc-bad {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 12%, transparent);
  font-size: 13.5px;
}

.wc-bad > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wc-co);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.wc-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 30px;
  border-radius: 7px;
  background: var(--tint-08);
  color: var(--text);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .02em;
}

.wc-logo--visa {
  background: #1a1f71;
  color: #fff;
}

.wc-logo--mc {
  background: linear-gradient(135deg, #d9452b, #f2a93b);
  color: #fff;
}

.wc-logo--amex {
  background: #0d6e8a;
  color: #fff;
}

.wc-logo--pp {
  background: #ffc439;
  color: #11131a;
}

.wc-logo--ap {
  background: #000;
  color: #fff;
}

.wc-logo--inv { color: var(--accent-fg); }

.wc-box {
  padding: 16px;
  border: 1px solid var(--tint-07);
  border-radius: 20px;
  background: var(--tint-02);
}

.wc-cardf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.wc-page[data-w760] .wc-cardf { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }

.wc-cc {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2a2f3d, #4a5163);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
  color: #fff;
  transition: background .4s;
  aspect-ratio: 1.586;
}

.wc-cc--visa { background: linear-gradient(135deg, #1a1f71, #3b4bd1); }
.wc-cc--mc { background: linear-gradient(135deg, #2b2b2b, #eb6a1b); }
.wc-cc--amex { background: linear-gradient(135deg, #0d6e8a, #2fa8c6); }

.wc-cc__sheen {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}

.wc-cc__top,
.wc-cc__num,
.wc-cc__ft { position: relative; }

.wc-cc__top {
  display: flex;
  align-items: center;
}

.wc-cc__chip {
  width: 38px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #e9d8a6, #b9975b);
}

.wc-cc__top b {
  margin-left: auto;
  font-size: 15px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .02em;
}

.wc-cc__num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 17px;
  letter-spacing: .12em;
  white-space: nowrap;
}

.wc-cc__ft {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  font-size: 11px;
}

.wc-cc__ft > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wc-cc__ft > span:first-child { flex: 1; }

.wc-cc__ft span span {
  font-size: 9px;
  letter-spacing: .12em;
  opacity: .6;
}

.wc-cc__ft b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.wc-cc__ft > span:last-child b { font-family: ui-monospace, Menlo, monospace; }

.wc-cardf__g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wc-inv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
}

.wc-page .wc-inv__n {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12.5px;
}

/* Review */
.wc-rv {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--tint-06);
  border-radius: 18px;
  background: var(--tint-02);
}

.wc-rv > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--tint-06);
  color: var(--accent-fg);
}

.wc-page .wc-rv p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wc-rv p > span:first-child {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.wc-rv b {
  font-size: 14.5px;
  font-weight: 700;
}

.wc-rv b + span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.wc-terms {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wc-page .wc-terms .wc-err {
  margin-top: -6px;
  padding-left: 34px;
}

.wc-terms__r {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 4px;
}

.wc-page .wc-terms__r p {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

.wc-tl {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font: inherit;
  cursor: pointer;
}

.wc-tl:hover { text-decoration: underline; }

/* Order placed */
.wc-done {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
  padding: 30px 28px;
  border-color: var(--wc-bd1);
  border-radius: 28px;
  background: radial-gradient(110% 80% at 0% 0%, color-mix(in oklab, oklch(0.8 0.14 155) 18%, transparent), transparent 60%), var(--surface-card);
}

.wc-done__hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.wc-done__ok {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  box-shadow: 0 0 0 10px color-mix(in oklab, oklch(0.8 0.14 155) 16%, transparent);
  color: var(--ink);
}

.wc-done__hd > div {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wc-page .wc-k--gr { color: var(--wc-gr); }
.wc-k code { font-family: ui-monospace, Menlo, monospace; }

.wc-page .wc-done h2 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  outline: none;
}

.wc-page .wc-done h2 + p {
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.5;
}

.wc-page .wc-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.wc-track li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.wc-track li > span:first-child {
  height: 4px;
  border-radius: 999px;
  background: var(--tint-08);
}

.wc-track b {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-track b span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tint-18);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}

.wc-track b + span {
  padding-left: 25px;
  color: var(--muted);
  font-size: 12px;
}

.wc-track .is-on > span:first-child,
.wc-track .is-on b span { background: oklch(0.8 0.14 155); }

.wc-page .wc-done__a {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wc-done__r { margin-left: auto; }

/* Action bar */
.wc-bar {
  position: sticky;
  bottom: 12px;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--wc-bd);
  border-radius: 22px;
  background: color-mix(in oklab, var(--card-from) 92%, transparent);
  box-shadow: 0 18px 40px var(--shade-45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.wc-page .wc-bar__s {
  display: flex;
  flex: 1 1 120px;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.wc-bar__s span,
.wc-bar__t span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.wc-bar__s b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-page .wc-bar__t {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 4px;
  line-height: 1.1;
}

.wc-bar__t span { font-size: 10.5px; }

.wc-bar__t b {
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}

.wc-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  box-shadow: 0 12px 28px rgba(242, 243, 246, .14);
  color: var(--pill-fg);
  font: inherit;
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.wc-go.is-off {
  background: #5d616d;
  box-shadow: none;
  color: #11131a;
}

.wc-go .lg-spin {
  width: 16px;
  height: 16px;
  border-width: 2.5px;
}

/* Summary */
.wc-sum {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.wc-page[data-two] .wc-sum {
  position: sticky;
  top: 12px;
}

.wc-page:not([data-two]) .wc-sum:not(.is-open) { display: none; }

.wc-sum__c {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

.wc-page .wc-sum__h {
  display: flex;
  align-items: baseline;
}

.wc-sum__h b {
  font-size: 16px;
  font-weight: 700;
}

.wc-sum__h span {
  margin-left: auto;
  color: var(--muted);
  font-size: 12.5px;
}

.wc-sum__l {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wc-sum__l li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wc-sum__l p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.wc-sum__l p b,
.wc-sum__l p span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-sum__l p b {
  font-size: 13px;
  font-weight: 700;
}

.wc-sum__l p span {
  color: var(--muted);
  font-size: 11.5px;
}

.wc-sum__l li > span:last-child {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.wc-free {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--tint-03);
}

.wc-page .wc-free p {
  font-size: 12.5px;
  font-weight: 700;
}

.wc-free > span {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-08);
}

.wc-free > span span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--cyan);
  transition: width .4s;
}

.wc-free.is-gr > span span { background: oklch(0.8 0.14 155); }

.wc-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--tint-06);
  font-size: 13.5px;
}

.wc-lines div {
  display: flex;
  gap: 10px;
}

.wc-lines dt { color: var(--text-3); }

.wc-lines dd {
  margin: 0 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
}

.wc-lines .is-gr { color: var(--wc-gr); }

.wc-page .wc-total {
  display: flex;
  align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid var(--wc-bd);
}

.wc-total span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
}

.wc-total b {
  margin-left: auto;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.wc-page .wc-vat {
  margin-top: -8px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.wc-sum__p {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}

.wc-page .wc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wc-badges span {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--tint-06);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
}

.wc-page .wc-sum__n {
  display: flex;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.wc-sum__n svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.wc-demo {
  overflow: hidden;
  border: 1px dashed var(--tint-14);
  border-radius: 20px;
}

.lg-demo__t.wc-demo__t {
  width: 100%;
  color: var(--text-3);
  font-family: inherit;
  cursor: pointer;
}

.wc-page .wc-demo__l {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px 10px;
}

.wc-demo__l button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.wc-demo__l button:hover { background: var(--tint-04); }

.wc-demo__l b { font-weight: 700; }

.wc-demo__l span {
  margin-left: auto;
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  white-space: nowrap;
}

/* ==========================================================================
   22zz58. Wizard property listing: types, address and map pin, rooms,
   photo slots, pricing and availability calendar, review, live preview.
   Cards, inputs, stepper and action bar are the checkout's (wc-*).
   ========================================================================== */
.wc-page.pl-page { --pl-bd: rgba(255, 255, 255, .1); }
[data-theme="light"] .wc-page.pl-page { --pl-bd: rgba(20, 30, 50, .14); }
.wc-page.pl-page[data-two] .wc-grid { grid-template-columns: minmax(0, 1fr) 340px; }

.pl-saved {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.pl-saved::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.pl-saved.is-gr,
.pl-c--gr { color: var(--wc-gr); }
.pl-c--cy { color: var(--accent-fg); }
.pl-c--am { color: var(--amt); }
.pl-c--co { color: var(--wc-co); }
.pl-bg--gr { background: oklch(0.8 0.14 155); }
.pl-bg--cy { background: var(--cyan); }
.pl-bg--co { background: var(--wc-co); }

.wc-page .pl-steps {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.pl-steps .wc-steps__r { gap: 8px; }

.pl-steps .wc-steps__d {
  width: 24px;
  height: 24px;
  font-size: 11.5px;
}

.pl-steps b { font-size: 13px; }
.pl-page:not([data-w900]) .pl-steps b { display: none; }
.pl-sec18 { gap: 18px; }
.wc-page .pl-up8 { margin-top: -8px; }
.wc-page .pl-note.pl-up8 { line-height: normal; }
.wc-link.pl-mu { color: var(--muted); }
.wc-page .pl-up10 { margin-top: -10px; }

.wc-page .pl-cap {
  display: flex;
  align-items: baseline;
  line-height: normal;
}

.pl-cap > :first-child {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.pl-cap > :first-child + span {
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
}

.pl-cap > b {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 800;
}

.pl-cap .is-am { color: var(--amt); }
.pl-cap .is-gr { color: var(--wc-gr); }

.pl-grp,
.pl-grp6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pl-grp6 { gap: 6px; }

/* Basics */
.pl-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.pl-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--pl-bd);
  border-radius: 18px;
  background: var(--tint-02);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.pl-types.is-bad .pl-type { border-color: color-mix(in oklab, oklch(0.72 0.14 35) 60%, transparent); }

.pl-type > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--tint-06);
  color: var(--text-2);
  transition: background .2s;
}

.pl-type > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pl-type b {
  font-size: 14px;
  font-weight: 700;
}

.pl-type b + span {
  color: var(--muted);
  font-size: 11.5px;
}

.pl-types .pl-type[aria-pressed="true"],
.pl-chip[aria-pressed="true"] {
  border-color: var(--cyan);
  background: color-mix(in oklab, #9adbe6 10%, transparent);
}

.pl-type[aria-pressed="true"] > span:first-child {
  background: var(--cyan);
  color: var(--ink);
}

.wc-in.pl-title {
  font-size: 16px;
  font-weight: 700;
}

.wc-in.pl-desc {
  font-size: 14.5px;
  line-height: 1.55;
}

.pl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pl-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--pl-bd);
  border-radius: 999px;
  background: var(--tint-02);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.pl-chip span {
  display: none;
  color: var(--accent-fg);
}

.pl-chip[aria-pressed="true"] span { display: inline; }

/* Location */
.pl-addr { position: relative; }

.pl-addr__in {
  position: relative;
  display: flex;
}

.pl-addr__in svg {
  position: absolute;
  top: 15px;
  left: 15px;
  color: var(--muted);
}

.pl-addr__in .wc-in { padding-left: 42px; }

.pl-sugs {
  position: absolute;
  top: 76px;
  right: 0;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--tint-14);
  border-radius: 16px;
  background: var(--card-from);
  box-shadow: 0 18px 40px var(--shade-45);
}

.pl-sugs button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pl-sugs button:hover,
.pl-sugs button:focus-visible { background: var(--tint-05); }

.pl-sugs svg {
  flex-shrink: 0;
  color: var(--muted);
}

.pl-sugs button > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pl-sugs b {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-sugs b + span {
  color: var(--muted);
  font-size: 12px;
}

.wc-page .pl-sugs p {
  padding: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* The map is drawn dark in both themes, like a dark map style. */
.pl-map {
  position: relative;
  height: 260px;
  overflow: hidden;
  border: 1px solid var(--tint-08);
  border-radius: 20px;
  outline: none;
  background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(255, 255, 255, .05) 38px 40px), repeating-linear-gradient(90deg, transparent 0 58px, rgba(255, 255, 255, .05) 58px 60px),
    linear-gradient(115deg, transparent 46%, rgba(154, 219, 230, .16) 46% 49%, transparent 49%), linear-gradient(20deg, transparent 62%, rgba(255, 255, 255, .07) 62% 64%, transparent 64%),
    radial-gradient(70% 60% at 30% 70%, rgba(120, 180, 140, .14), transparent 70%), #141821;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.pl-map:focus-visible { box-shadow: 0 0 0 2px var(--cyan); }

.pl-map__fuzz {
  position: absolute;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border: 1px dashed rgba(154, 219, 230, .4);
  border-radius: 50%;
  background: rgba(154, 219, 230, .12);
  pointer-events: none;
}

.pl-map__fuzz.is-off { display: none; }

.pl-map__pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5));
  pointer-events: none;
}

.pl-map__pin > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 50% 0;
  background: #9adbe6;
  transform: rotate(-45deg);
}

.pl-map__pin > span span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #11131a;
  transform: rotate(45deg);
}

.pl-map__c,
.pl-map__h {
  position: absolute;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #c9ccd6;
  font-size: 11.5px;
}

.pl-map__c {
  bottom: 12px;
  left: 12px;
  font-family: ui-monospace, Menlo, monospace;
  text-decoration: none;
  cursor: pointer;
}

.pl-map__c:hover {
  color: #eef0f5;
  text-decoration: none;
}

.pl-map__h {
  top: 12px;
  right: 12px;
  font-weight: 700;
  pointer-events: none;
}

.pl-rows {
  display: flex;
  flex-direction: column;
}

.pl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-top: 1px solid var(--tint-06);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pl-row > span:first-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.pl-row b {
  font-size: 14px;
  font-weight: 700;
}

.pl-row b + span {
  color: var(--muted);
  font-size: 12.5px;
}

.pl-tgl {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: #3a3f4d;
  transition: background .2s;
}

[data-theme="light"] .pl-tgl { background: #c3c7d1; }

.pl-tgl span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.pl-tgl.is-on,
[data-theme="light"] .pl-tgl.is-on { background: var(--cyan); }
.pl-tgl.is-on span { left: 20px; }

.pl-nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.pl-nums--140 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.pl-unit {
  position: relative;
  display: flex;
}

.pl-unit .wc-in { padding-right: 52px; }

.pl-unit > span {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  transform: translateY(-50%);
}

/* Space */
.pl-rooms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pl-rooms li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px auto 36px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-02);
}

.pl-page[data-w700] .pl-rooms li { grid-template-columns: minmax(0, 1fr) 100px auto 36px; }

.pl-rooms .wc-in { height: 40px; }
.wc-in.pl-rn { font-weight: 700; }

.pl-unit--s .wc-in {
  padding-right: 36px;
  text-align: right;
}

.pl-unit.pl-unit--s > span {
  right: 12px;
  font-size: 12px;
  font-weight: 400;
}

.pl-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border-radius: 14px;
  background: var(--tint-04);
}

.pl-seg button {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.pl-seg button[aria-pressed="true"] {
  background: var(--pill-bg);
  color: var(--pill-fg);
}

.pl-seg--s {
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
}

.pl-seg--s button {
  flex: 1;
  height: 32px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 800;
}

.pl-x {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.pl-x:hover { background: var(--tint-06); }

.wc-pill.pl-add {
  align-self: flex-start;
  border-style: dashed;
}

/* Photos */
.wc-sh.pl-sh b {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
}

.pl-prog {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pl-prog > span {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-08);
}

.pl-prog > span span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .4s;
}

.wc-page .pl-prog p {
  color: var(--text-3);
  font-size: 12.5px;
}

.wc-page .pl-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 88px;
  gap: 8px;
}

.pl-page[data-w900] .pl-photos { grid-auto-rows: 120px; }

.pl-ph {
  position: relative;
  overflow: hidden;
  border: 1.5px dashed var(--tint-14);
  border-radius: 16px;
  background: var(--tint-03);
  transition: border-color .2s, background .2s;
}

.pl-ph:first-child {
  grid-row: span 2;
  grid-column: span 2;
}

.pl-ph.is-on { border-style: solid; }

.pl-ph.is-drop {
  border-color: var(--cyan);
  background: rgba(154, 219, 230, .08);
}

.pl-ph label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pl-ph label:focus-visible,
.pl-ph:focus-within { outline: 2px solid var(--cyan); }

.pl-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pl-ph__l {
  padding: 30px 10px 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.pl-ph__size {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.pl-ph__t {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .65);
  color: #eef0f5;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
  pointer-events: none;
}

.pl-ph__t.is-cover {
  background: #9adbe6;
  color: #11131a;
}

.pl-ph__x {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 19, 26, .75);
  color: #fff;
  cursor: pointer;
}

.pl-ph__up {
  position: absolute;
  right: 8px;
  bottom: 8px;
  color: var(--muted-2);
  pointer-events: none;
}

.wc-page .pl-note {
  display: flex;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.pl-note svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.pl-demo-ph { align-self: flex-start; }

/* Pricing */
.wc-page .pl-sug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(154, 219, 230, .25);
  border-radius: 16px;
  background: rgba(154, 219, 230, .07);
  font-size: 13px;
}

.pl-sug span { flex: 1 1 240px; }

.pl-sug button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #9adbe6;
  color: #11131a;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.pl-segs {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.pl-cal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-top: 14px;
  border-top: 1px solid var(--tint-06);
}

.pl-page[data-w760] .pl-cal { grid-template-columns: minmax(0, 1fr) 220px; }

.pl-cal__m,
.pl-cal__s {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wc-page .pl-cal__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pl-cal__h b {
  font-size: 15px;
  font-weight: 700;
}

.pl-cal__h span {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.pl-cal__h button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--tint-14);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.pl-cal__h [aria-disabled="true"] {
  cursor: default;
  opacity: .35;
}

.wc-page .pl-cal__w,
.pl-cal__g {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.pl-cal__w {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.pl-cal__g button {
  padding: 0;
  border: 1px solid var(--pl-bd);
  border-radius: 10px;
  background: var(--tint-03);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  aspect-ratio: 1;
}

.pl-cal__g .is-past {
  cursor: default;
  opacity: .3;
}

.pl-cal__g .is-today { border-color: var(--text); }

.pl-cal__g .is-bk {
  border-color: var(--cyan);
  background: rgba(154, 219, 230, .18);
  cursor: default;
}

.pl-cal__g .is-bl,
.pl-legend .is-bl span {
  border-color: color-mix(in oklab, oklch(0.72 0.14 35) 55%, transparent);
  background: color-mix(in oklab, oklch(0.72 0.14 35) 22%, transparent);
}

.pl-cal__g .is-bl { text-decoration: line-through; }

.wc-page .pl-cal__t {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}

.wc-page .pl-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-3);
  font-size: 12.5px;
}

.pl-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pl-legend span {
  width: 14px;
  height: 14px;
  border: 1px solid var(--tint-14);
  border-radius: 4px;
  background: var(--tint-05);
}

.pl-legend .is-bk span {
  border-color: var(--cyan);
  background: rgba(154, 219, 230, .18);
}

.wc-page .pl-cal__n {
  font-size: 13px;
  font-weight: 700;
}

.pl-rules {
  padding-top: 14px;
  border-top: 1px solid var(--tint-06);
}

/* Review */
.pl-full {
  overflow: hidden;
  border: 1px solid var(--pl-bd);
  border-radius: 22px;
  background: var(--card-to);
}

.pl-mosaic {
  display: grid;
  grid-template-rows: 150px 150px;
  grid-template-columns: 2fr 1fr;
  gap: 4px;
}

.pl-mos {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--tint-04);
}

.pl-mos--big { grid-row: span 2; }
.pl-mos .pl-ph__l { padding: 10px; }

.pl-more {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(17, 19, 26, .75);
  color: #eef0f5;
  font-size: 12px;
  font-weight: 700;
}

.pl-full__b {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.pl-full__h {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

.wc-page .pl-full__h p:first-child {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pl-full__h p:first-child span {
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.pl-full__h p:first-child b {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.wc-page .pl-full__p {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.pl-full__p b {
  font-size: 22px;
  font-weight: 800;
}

.pl-full__p b span,
.pl-full__p > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.pl-full__p > span {
  font-size: 12.5px;
  font-weight: 400;
}

.wc-page .pl-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--text-3);
  font-size: 13px;
}

.pl-facts span {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pl-facts strong,
.pl-card__f strong { color: var(--text); }

.wc-page .pl-full__d {
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.55;
}

.wc-page .pl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pl-tags span {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--tint-06);
  font-size: 12px;
  font-weight: 700;
}

.wc-page .pl-tags--s { gap: 4px; }

.pl-tags--s span {
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.wc-page .pl-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}

.pl-checks li.is-ok,
.pl-checks button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--tint-02);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.pl-checks li.is-ok { color: var(--text); }

.pl-checks span[aria-hidden="true"] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}

.pl-checks .is-am span[aria-hidden="true"] { background: oklch(0.8 0.13 70); }
.pl-checks .is-co span[aria-hidden="true"] { background: var(--wc-co); }

.pl-checks b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-checks em {
  color: var(--accent-fg);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 800;
}

.wc-in.pl-date { width: 220px; }

/* Done */
.wc-done.pl-done { gap: 20px; }

.wc-page .pl-done h2 {
  font-size: 28px;
  line-height: 1.15;
}

.pl-link {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--tint-07);
  border-radius: 20px;
  background: var(--tint-03);
}

.pl-qr {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  width: 96px;
  height: 96px;
  padding: 9px;
  border-radius: 14px;
  background: #f2f3f6;
}

.pl-qr span { border-radius: 1px; }
.pl-qr .is-on { background: #11131a; }

.pl-link > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pl-url {
  overflow: hidden;
  color: var(--accent-fg);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13.5px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-url:hover { color: var(--accent-fg); }

.wc-page .pl-link__a {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wc-pill.pl-36 {
  height: 36px;
  font-size: 13px;
}

/* Live preview */
.pl-pv {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.pl-page[data-two] .pl-pv {
  position: sticky;
  top: 12px;
}

.pl-pv__c {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.wc-page .pl-pv__h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.pl-pv__h span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.pl-pv__h span:first-child::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(154, 219, 230, .18);
  content: "";
}

.pl-pv__h span + span {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.pl-card {
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--card-to);
}

.pl-card__ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tint-05), var(--tint-02));
  aspect-ratio: 4 / 3;
}

.pl-new,
.pl-heart {
  position: absolute;
  top: 10px;
  display: flex;
  align-items: center;
  background: rgba(17, 19, 26, .75);
  color: #eef0f5;
}

.pl-new {
  left: 10px;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.pl-new span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.pl-heart {
  right: 10px;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.pl-card__b {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}

.wc-page .pl-card__k {
  overflow: hidden;
  color: var(--accent-fg);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-page .pl-card__t {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.wc-page .pl-card__f {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-3);
  font-size: 12px;
}

.pl-card__f span { white-space: nowrap; }

.wc-page .pl-card__p {
  display: flex;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px solid var(--tint-06);
}

.pl-card__p b {
  font-size: 18px;
  font-weight: 800;
}

.pl-card__p span {
  color: var(--muted);
  font-size: 12.5px;
}

.pl-card__p span:last-child {
  margin-left: auto;
  font-size: 12px;
}

.pl-str {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.pl-str__h {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pl-ring {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.pl-ring svg {
  display: block;
  transform: rotate(-90deg);
}

.pl-ring circle {
  fill: none;
  stroke: var(--tint-08);
  stroke-width: 6;
}

.pl-ring circle + circle {
  stroke: currentColor;
  stroke-linecap: round;
  transition: stroke-dashoffset .5s;
}

.pl-ring b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.wc-page .pl-str__h p {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pl-str__h p b {
  font-size: 15px;
  font-weight: 700;
}

.pl-str__h p span {
  font-size: 12.5px;
  font-weight: 700;
}

.wc-page .pl-tips {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pl-tips button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--tint-02);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.pl-tips span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(154, 219, 230, .14);
  color: var(--accent-fg);
  font-size: 10.5px;
  font-weight: 900;
}

/* ==========================================================================
   22zz59. Wizard create deal: clients, packages, deliverables, team load,
   dates and timeline, budget lines and margin, proposal sheet, deal card.
   Cards, inputs, stepper and action bar are the checkout's (wc-*), chips
   and segments the property listing's (pl-*).
   ========================================================================== */
.wc-page.cd-page { --cd-bd16: rgba(255, 255, 255, .16); }
[data-theme="light"] .wc-page.cd-page { --cd-bd16: rgba(20, 30, 50, .2); }
.wc-page .cd-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cd-page .pl-cap > :first-child + span { font-size: 12px; }

.cd-page .pl-cap .cd-wv {
  color: var(--text-3);
  font-size: 13px;
}
.cd-page:not([data-w820]) .wc-steps b + span { display: none; }
.wc-page .pl-up6 { margin-top: -6px; }

.cd-sh__r {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
}

.cd-search .wc-in { -webkit-appearance: none; appearance: none; }

.cd-clients,
.cd-pkgs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.cd-tile,
.cd-pkg,
.cd-person,
.cd-loc {
  min-width: 0;
  border: 1.5px solid var(--pl-bd);
  background: var(--tint-02);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.cd-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
}

.cd-clients.is-bad .cd-tile:not(.cd-tile--new),
.cd-people.is-bad .cd-person { border-color: color-mix(in oklab, oklch(0.72 0.14 35) 50%, transparent); }

.cd-tile[aria-pressed="true"],
.cd-pkg[aria-pressed="true"],
.cd-person[aria-pressed="true"],
.cd-loc[aria-pressed="true"] {
  border-color: var(--cyan);
  background: color-mix(in oklab, #9adbe6 10%, transparent);
}

.cd-tile > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cd-tile b,
.cd-tile b + span,
.cd-loc b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-tile b {
  font-size: 14px;
  font-weight: 700;
}

.cd-tile b + span,
.cd-loc span {
  color: var(--muted);
  font-size: 12px;
}

.cd-tile--new {
  border-style: dashed;
  border-color: var(--cd-bd16);
  background: transparent;
}

.cd-tile--new[aria-pressed="true"] { background: color-mix(in oklab, #9adbe6 8%, transparent); }

.cd-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--pl-bd);
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
}

.cd-logo--new {
  background: var(--tint-06);
  color: var(--accent-fg);
  font-size: 20px;
  font-weight: 400;
}

.cd-logo--44 {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 14px;
}

.cd-nc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--tint-07);
  border-radius: 18px;
  background: var(--tint-02);
}

.wc-page .cd-span { grid-column: 1 / -1; }

.cd-hist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(154, 219, 230, .22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(154, 219, 230, .08), rgba(154, 219, 230, .02));
}

.wc-page .cd-hist p {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wc-page .cd-hist .cd-hist__c {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
}

.cd-hist__c > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cd-hist__c b {
  font-size: 14px;
  font-weight: 700;
}

.cd-hist__c b + span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-av {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
}

.cd-hist p:not(.cd-hist__c) span,
.cd-lab,
.cd-row--h,
.cd-mg__h span:first-child,
.cd-facts dt {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.cd-hist p:not(.cd-hist__c) b {
  font-size: 16px;
  font-weight: 800;
}

/* Scope */
.cd-pkg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
}

.cd-pkg__h {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cd-pkg__h b:first-child {
  font-size: 14px;
  font-weight: 700;
}

.cd-pkg__h b + b {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 800;
}

.cd-pkg__h + span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.cd-pkg em {
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.cd-delivs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.cd-deliv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-02);
}

.wc-page .cd-deliv p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cd-deliv b {
  font-size: 13px;
  font-weight: 700;
}

.cd-deliv b + span {
  color: var(--muted);
  font-size: 11.5px;
}

.cd-step {
  display: flex;
  align-items: center;
  height: 32px;
  border: 1px solid var(--tint-14);
  border-radius: 999px;
}

.cd-step button {
  width: 28px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.cd-step span {
  min-width: 22px;
  font-size: 13.5px;
  font-weight: 800;
  text-align: center;
}

.cd-files,
.cd-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cd-file {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 6px 0 10px;
  border-radius: 12px;
  background: var(--tint-05);
  font-size: 12.5px;
  font-weight: 700;
}

.cd-file__x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #5b6276;
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
}

.cd-file__x--pdf { background: #b2482c; }

.cd-file > span:not(.cd-file__x) {
  color: var(--muted);
  font-weight: 600;
}

.cd-file button {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.wc-pill.cd-attach {
  height: 34px;
  border-style: dashed;
  font-size: 12.5px;
}

/* Team & dates */
.cd-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}

.cd-person {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
}

.cd-person__h {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.cd-face {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.cd-person__h > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cd-person__h b {
  font-size: 14px;
  font-weight: 700;
}

.cd-person__h b + span {
  color: var(--muted);
  font-size: 12px;
}

.cd-person[aria-pressed="true"] .wc-ck,
.cd-nx[aria-pressed="true"] .wc-ck {
  border-color: transparent;
  background: var(--cyan);
}

.cd-nx[aria-pressed="true"] .wc-ck { background: oklch(0.8 0.14 155); }

.cd-load {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.cd-load > span:first-child {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-08);
}

.cd-load > span:first-child span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.cd-load > span:last-child {
  display: flex;
  color: var(--muted);
  font-size: 11.5px;
}

.cd-load b { font-weight: 800; }
.cd-load b + span { margin-left: auto; }
.pl-bg--am { background: oklch(0.8 0.13 70); }
.pl-bg--mu { background: var(--muted); }
.pl-c--mu { color: var(--muted); }

.cd-dates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.wc-in[type="date"] { color-scheme: dark; }
[data-theme="light"] .wc-in[type="date"] { color-scheme: light; }

.cd-days {
  display: flex;
  align-items: center;
  height: 46px;
  border: 1.5px solid var(--wc-bd);
  border-radius: 14px;
  background: var(--tint-03);
}

.cd-days button {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.cd-days span {
  flex: 1;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.wc-page .cd-tl {
  display: flex;
  height: 46px;
  overflow: hidden;
  border: 1px solid var(--tint-07);
  border-radius: 14px;
  background: var(--tint-03);
}

.cd-tl > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  padding: 0 10px;
  border-right: 1px solid rgba(11, 12, 17, .5);
}

.cd-tl b,
.cd-tl b + span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-tl b {
  font-size: 11.5px;
  font-weight: 800;
}

.cd-tl b + span {
  font-size: 10.5px;
  opacity: .75;
}

.cd-tl--cy { background: color-mix(in oklab, #9adbe6 22%, transparent); }
.cd-tl--am { background: color-mix(in oklab, oklch(0.8 0.13 70) 30%, transparent); }
.cd-tl--vi { background: color-mix(in oklab, oklch(0.78 0.11 300) 26%, transparent); }
.cd-tl--gr { background: color-mix(in oklab, oklch(0.8 0.14 155) 26%, transparent); }

.wc-page .cd-warn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, oklch(0.8 0.13 70) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 12%, transparent);
  font-size: 13px;
}

.wc-page .cd-warn--cy {
  border-color: color-mix(in oklab, #9adbe6 45%, transparent);
  background: color-mix(in oklab, #9adbe6 12%, transparent);
}

.cd-warn > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
}

.cd-warn--cy > span:first-child { background: #9adbe6; }

.cd-warn > span + span {
  flex: 1;
  min-width: 0;
}

.cd-warn button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-fg);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.cd-locs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.cd-loc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 16px;
}

.cd-loc b {
  font-size: 13.5px;
  font-weight: 700;
}

/* Budget */
.cd-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wc-page .cd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px 84px 90px 32px;
  gap: 8px;
  align-items: center;
  padding: 8px 4px;
  border: 1px solid var(--tint-06);
  border-radius: 14px;
  background: var(--tint-02);
}

.cd-page[data-w760] .cd-row { grid-template-columns: minmax(0, 1fr) 64px 96px 86px 104px 36px; }
.cd-page:not([data-w760]) .cd-cost { display: none; }
/* Phones: the line name takes its own row above qty, price and amount. */
.cd-page:not([data-w520]) .cd-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 32px; }
.cd-page:not([data-w520]) .cd-row .cd-ln--t { grid-column: 1 / -1; }
.cd-page:not([data-w520]) .cd-row--h { display: none; }

.wc-page .cd-row--h {
  padding: 0 4px;
  border: 0;
  background: none;
}

.cd-row--h span:not(:first-child),
.cd-row > b { text-align: right; }

.wc-in.cd-ln {
  height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 13.5px;
  text-align: right;
}

.wc-in.cd-ln--t {
  font-weight: 700;
  text-align: left;
}

.wc-in.cd-cost { color: var(--text-3); }

.cd-row > b {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.cd-row .pl-x {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 13.33px;
}

.wc-page .cd-empty {
  padding: 18px;
  border: 1.5px dashed var(--tint-14);
  border-radius: 14px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.cd-qk {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--pl-bd);
  border-radius: 999px;
  background: var(--tint-03);
  color: var(--text-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.cd-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--tint-06);
}

.cd-unit .wc-in {
  height: 44px;
  padding: 0 34px 0 10px;
  border-radius: 12px;
  font-size: 13.5px;
}

.pl-unit.cd-unit > span {
  right: 12px;
  font-size: 12.5px;
}

.cd-mg {
  --c: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid color-mix(in oklab, var(--c) 35%, transparent);
  border-radius: 20px;
  background: color-mix(in oklab, var(--c) 8%, transparent);
}

.cd-mg--gr { --c: oklch(0.8 0.14 155); }
.cd-mg--am { --c: oklch(0.8 0.13 70); }
.cd-mg--co { --c: oklch(0.72 0.14 35); }

.wc-page .cd-mg__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.cd-mg__h b {
  color: var(--c);
  font-size: 28px;
  font-weight: 800;
}

.cd-mg__h strong {
  color: var(--c);
  font-size: 13px;
  font-weight: 700;
}

.cd-mg__h span:last-child {
  margin-left: auto;
  color: var(--text-3);
  font-size: 13px;
}

.cd-mg__bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--tint-08);
}

.cd-mg__bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  background: var(--c);
  transition: width .4s;
}

.cd-mg__bar i {
  position: absolute;
  top: -4px;
  left: 30%;
  width: 2px;
  height: 18px;
  background: var(--text);
  opacity: .4;
}

.wc-page .cd-mg__n {
  color: var(--muted);
  font-size: 11.5px;
}

.pl-grp.cd-plan {
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--tint-06);
}

.wc-page .cd-invs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cd-invs li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--tint-06);
  border-radius: 14px;
  background: var(--tint-02);
}

.cd-invs li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(154, 219, 230, .14);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 900;
}

.wc-page .cd-invs p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cd-invs p b {
  font-size: 13.5px;
  font-weight: 700;
}

.cd-invs p span {
  color: var(--muted);
  font-size: 12px;
}

.cd-invs li > b {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

/* Proposal */
.cd-stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.cd-stages button {
  height: 40px;
  overflow: hidden;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: var(--tint-04);
  color: var(--text-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.cd-stages [aria-pressed="true"] { color: #11131a; }
.cd-stages .cd-stg--mu[aria-pressed="true"] { background: #8a8f9e; }
.cd-stages .cd-stg--cy[aria-pressed="true"] { background: #9adbe6; }
.cd-stages .cd-stg--vi[aria-pressed="true"] { background: oklch(0.78 0.11 300); }
.cd-stages .cd-stg--am[aria-pressed="true"] { background: oklch(0.8 0.13 70); }
.cd-stages .cd-stg--gr[aria-pressed="true"] { background: oklch(0.8 0.14 155); }

.pl-cap strong {
  color: var(--text);
  font-size: 15px;
}

.wc-page .cd-prob {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cd-prob input {
  flex: 1;
  accent-color: #9adbe6;
}

.cd-prob b {
  min-width: 48px;
  font-size: 18px;
  font-weight: 800;
  text-align: right;
}

.cd-sheet {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 6px;
  background: #fbfaf7;
  box-shadow: 0 24px 56px rgba(0, 0, 0, .4);
  color: #11131a;
}

.cd-page[data-w760] .cd-sheet { grid-template-columns: 90px minmax(0, 1fr); }

.cd-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 0;
  background: #11131a;
  color: #fbfaf7;
}

.cd-spine > * {
  white-space: nowrap;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

.cd-spine > span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .32em;
}

.cd-spine b {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}

.cd-page[data-w760] .cd-spine b { font-size: 64px; }

.cd-spine b span {
  color: transparent;
  -webkit-text-stroke: 1.3px #fbfaf7;
}

.cd-spine code {
  color: #9adbe6;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
}

.cd-sheet__b {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 18px;
}

.cd-page[data-w760] .cd-sheet__b { padding: 26px 28px; }

.wc-page .cd-sheet__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.wc-page .cd-sheet__top p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #4b5263;
  font-size: 11.5px;
}

.wc-page .cd-sheet__top p:first-child {
  flex: 1 1 220px;
  gap: 3px;
  min-width: 0;
}

.wc-page .cd-sheet__top p:last-child { align-items: flex-end; }

.cd-sheet__top p:first-child span:first-child,
.cd-sheet__f p:first-child span {
  color: #6b7080;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .16em;
}

.cd-sheet__top b {
  color: #11131a;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.cd-sheet__top b + span { font-size: 12px; }

.wc-page .cd-sheet__n {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 12px 0;
  border-top: 1.5px solid #11131a;
  border-bottom: 1px solid rgba(17, 19, 26, .15);
}

.cd-sheet__n b {
  font-size: 18px;
  font-weight: 800;
}

.cd-sheet__n span {
  color: #4b5263;
  font-size: 12.5px;
  font-weight: 400;
}

.wc-page .cd-sheet__ph {
  display: flex;
  height: 26px;
  border: 1.2px solid #11131a;
}

.cd-sheet__ph span {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 6px;
  border-right: 1px solid rgba(17, 19, 26, .25);
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
}

.cd-ph--cy { background: #d9eef2; }
.cd-ph--am { background: #f3e3c3; }
.cd-ph--vi { background: #e6dcf3; }
.cd-ph--gr { background: #d8efe0; }

.cd-sheet__l li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(17, 19, 26, .1);
  font-size: 12.5px;
}

.cd-sheet__l b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-sheet__l span {
  color: #6b7080;
  white-space: nowrap;
}

.cd-sheet__l strong {
  min-width: 74px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.cd-sheet__f {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.wc-page .cd-sheet__f p:first-child {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: 3px;
  color: #4b5263;
  font-size: 11.5px;
  line-height: 1.5;
}

.wc-page .cd-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: #11131a;
  color: #fbfaf7;
}

.cd-total span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.cd-total b {
  font-size: 20px;
  font-weight: 800;
}

/* Deal created */
.wc-check.cd-nx {
  padding: 12px 14px;
  border: 1px solid var(--tint-08);
  border-radius: 16px;
  background: var(--tint-02);
}

.cd-nx:hover { border-color: rgba(154, 219, 230, .45); }

.cd-nx b {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
}

.cd-nx b + span {
  color: var(--muted);
  font-size: 12px;
}

/* Deal card */
.cd-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

.cd-card__h {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wc-page .cd-card__h p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cd-card__h b,
.cd-card__h p span,
.cd-facts dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-card__h b {
  font-size: 15px;
  font-weight: 700;
}

.cd-card__h p span {
  color: var(--muted);
  font-size: 12.5px;
}

.cd-stg {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.cd-stg.cd-stg--mu {
  background: rgba(138, 143, 158, .18);
  color: #8a8f9e;
}

.cd-stg.cd-stg--cy {
  background: rgba(154, 219, 230, .18);
  color: var(--accent-fg);
}

.cd-stg.cd-stg--vi {
  background: color-mix(in oklab, oklch(0.78 0.11 300) 18%, transparent);
  color: oklch(0.78 0.11 300);
}

.cd-stg.cd-stg--am {
  background: color-mix(in oklab, oklch(0.8 0.13 70) 18%, transparent);
  color: var(--amt);
}

.cd-stg.cd-stg--gr {
  background: color-mix(in oklab, oklch(0.8 0.14 155) 18%, transparent);
  color: var(--wc-gr);
}

.wc-page .cd-card__v {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cd-card__v b {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.cd-card__v span {
  color: var(--muted);
  font-size: 12.5px;
}

.cd-card__m {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wc-page .cd-card__m p {
  display: flex;
  font-size: 12px;
  font-weight: 700;
}

.cd-card__m p span { color: var(--muted); }
.cd-card__m p b { margin-left: auto; }

.cd-card__m > span {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-08);
}

.cd-card__m > span span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .4s;
}

.cd-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--tint-06);
}

.cd-facts div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cd-facts dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
}

.wc-page .cd-card__t {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--tint-06);
  color: var(--text-3);
  font-size: 12.5px;
}

.cd-stack {
  display: flex;
  flex-shrink: 0;
}

.cd-face28 {
  width: 28px;
  height: 28px;
  margin-left: -6px;
  border: 2px solid var(--card-from);
  border-radius: 50%;
  object-fit: cover;
}

.pl-tags--s.cd-chips { gap: 6px; }

.cd-chips span {
  height: 24px;
  padding: 0 9px;
  font-size: 11.5px;
}

/* ==========================================================================
   22zz60. Modal examples: overlay cards with mini previews, the guide,
   and the shared overlay shell — scrim, dialog, drawer, sheet, popover,
   lightbox, command palette and the toast with Undo
   ========================================================================== */
.mx-page {
  --mx-s: 440px;
  --mx-m: 520px;
  --mx-l: 680px;
  --mx-bd: rgba(255, 255, 255, .1);
}

.mx-page[data-size="S"] {
  --mx-s: 400px;
  --mx-m: 460px;
  --mx-l: 600px;
}

.mx-page[data-size="L"] {
  --mx-s: 480px;
  --mx-m: 600px;
  --mx-l: 780px;
}

[data-theme="light"] .mx-page { --mx-bd: rgba(20, 30, 50, .14); }
html.mx-lock { overflow: hidden; }

.mx-c--cy { --c: #9adbe6; color: var(--accent-fg); }
.mx-c--gr { --c: oklch(0.8 0.14 155); color: var(--wc-gr); }
.mx-c--am { --c: oklch(0.8 0.13 70); color: var(--amt); }
.mx-c--co { --c: oklch(0.72 0.14 35); color: var(--wc-co); }
.mx-c--vi { --c: oklch(0.78 0.11 300); color: oklch(0.78 0.11 300); }
.mx-c--fb { --c: #c9ccd6; color: var(--text-2); }
.mx-c--mu { --c: #8a8f9e; color: var(--muted); }
.mx-bg--cy { background: #9adbe6; }
.mx-bg--gr { background: oklch(0.8 0.14 155); }
.mx-bg--am { background: oklch(0.8 0.13 70); }
.mx-bg--co { background: oklch(0.72 0.14 35); }
.mx-dot--cy { --d: #9adbe6; }
.mx-dot--gr { --d: oklch(0.8 0.14 155); }
.mx-dot--am { --d: oklch(0.8 0.13 70); }
.mx-dot--co { --d: oklch(0.72 0.14 35); }
.mx-dot--fb { --d: #c9ccd6; }

/* Page */
.wc-hd.mx-hd .wc-hd__t { flex-basis: 320px; }

.wc-page .mx-lead {
  color: var(--muted);
  font-size: 14px;
}

.mx-lead strong { color: var(--text); }

.mx-lead kbd {
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--tint-08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
}

.mx-seg button {
  height: 34px;
  padding: 0 13px;
}

.wc-page .mx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.mx-filters button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--wc-bd);
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.mx-filters button[aria-pressed="true"] {
  border-color: var(--cyan);
  background: color-mix(in oklab, #9adbe6 12%, transparent);
  color: var(--text);
}

.mx-filters span {
  font-size: 11.5px;
  opacity: .65;
}

.wc-page .mx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.mx-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mx-g--confirm { --g: oklch(0.72 0.14 35); }
.mx-g--forms { --g: #9adbe6; }
.mx-g--media { --g: oklch(0.8 0.13 70); }
.mx-g--flows { --g: oklch(0.78 0.11 300); }
.mx-g--sheets { --g: oklch(0.8 0.14 155); }
.mx-g--feedback { --g: #c9ccd6; }

.mx-pv {
  position: relative;
  display: block;
  width: 100%;
  height: 150px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--tint-06);
  background: repeating-linear-gradient(180deg, transparent 0 16px, rgba(255, 255, 255, .025) 16px 17px), var(--tint-02);
  cursor: pointer;
}

.mx-pv__l::before,
.mx-pv__l::after {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 38%;
  height: 8px;
  border-radius: 4px;
  background: var(--tint-08);
  content: "";
}

.mx-pv__l::after {
  top: 30px;
  width: 24%;
  background: var(--tint-05);
}

.mx-pv__dim {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 11, .42);
}

.mx-pv__dim--pop,
.mx-pv__dim--toast { background: transparent; }
.mx-pv__dim--full { background: rgba(6, 7, 11, .7); }

.mx-pv__box {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--tint-18);
  border-radius: 12px;
  background: var(--card-from);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
}

.mx-pv__box span {
  width: 80%;
  height: 5px;
  border-radius: 3px;
  background: var(--tint-18);
}

.mx-pv__box span:first-child {
  width: 42%;
  height: 6px;
  background: var(--g);
}

.mx-pv__box span:nth-child(3) {
  width: 60%;
  background: var(--wc-bd);
}

.mx-pv__box span:last-child {
  align-self: flex-end;
  width: 34%;
  height: 12px;
  margin-top: auto;
  border-radius: 6px;
  background: var(--pill-bg);
}

.mx-pv__box.is-danger span:last-child { background: oklch(0.72 0.14 35); }

.mx-pv--center,
.mx-pv--centerL {
  top: 50%;
  left: 50%;
  width: 58%;
  height: 62%;
  transform: translate(-50%, -50%);
}

.mx-pv--centerL {
  width: 74%;
  height: 74%;
}

.mx-pv--right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  border-radius: 12px 0 0 12px;
}

.mx-pv--bottom {
  right: 10%;
  bottom: 0;
  left: 10%;
  height: 52%;
  border-radius: 14px 14px 0 0;
}

.mx-pv--top {
  top: 12%;
  left: 50%;
  width: 70%;
  height: 56%;
  transform: translateX(-50%);
}

.mx-pv--pop {
  top: 24%;
  left: 50%;
  width: 38%;
  height: 58%;
  border-radius: 10px;
}

.mx-pv--toast {
  bottom: 12%;
  left: 50%;
  width: 58%;
  height: 20%;
  border-radius: 999px;
  transform: translateX(-50%);
}

.mx-pv--toast span:first-child { width: 70%; }
.mx-pv--toast span:nth-child(3),
.mx-pv--toast span:last-child { display: none; }

.mx-pv--full {
  top: 8%;
  right: 5%;
  bottom: 8%;
  left: 5%;
  border-radius: 10px;
  background: #0b0c11;
}

.mx-card__b {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}

.wc-page .mx-card__g {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.mx-card__g > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g);
}

.mx-card__g code {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.wc-page .mx-card h2 {
  font-size: 15.5px;
  font-weight: 700;
}

.wc-page .mx-card h2 + p {
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.45;
}

.wc-page .mx-card__f {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.mx-card__f span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-pill.mx-open {
  height: 34px;
  border: 0;
  padding: 0 14px;
  font-size: 12.5px;
}

.mx-guide {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

.wc-page .mx-guide h2 {
  font-size: 17px;
  font-weight: 700;
}

.wc-page .mx-guide__l {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
}

.mx-guide__l li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--tint-06);
  border-radius: 18px;
  background: var(--tint-02);
}

.mx-guide__l b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
}

.mx-guide__l b::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--d);
  content: "";
}

.mx-guide__l b + span {
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.5;
}

.mx-guide__l span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.wc-page .mx-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--tint-06);
  color: var(--text-3);
  font-size: 12.5px;
}

.mx-rules li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mx-rules span {
  color: oklch(0.8 0.14 155);
  font-weight: 900;
}

/* Overlay shell */
@keyframes mx-in {
  from {
    opacity: 0;
    transform: scale(.96) translateY(6px);
  }

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

@keyframes mx-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mx-slide-r {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

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

@keyframes mx-slide-up {
  from {
    opacity: 0;
    transform: translate(-50%, 60px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@keyframes mx-pop {
  0% {
    opacity: 0;
    transform: scale(.5);
  }

  70% { transform: scale(1.08); }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mx-ring {
  from {
    opacity: .7;
    transform: scale(.85);
  }

  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

.mx-ov {
  position: fixed;
  inset: 0;
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 7, 11, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: mx-fade .18s ease;
}

.mx-ov--popover,
.mx-ov--drawer,
.mx-ov--sheet { padding: 0; }

.mx-ov--popover {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.mx-ov--lightbox {
  background: rgba(6, 7, 11, .92);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.mx-ov--palette {
  align-items: flex-start;
  padding: 12vh 16px 16px;
}

.mx-dlg,
.mx-pal,
.mx-drawer,
.mx-sheet,
.mx-pop {
  border: 1px solid var(--wc-bd);
  background: var(--card-from);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  color: var(--text);
}

.mx-dlg {
  position: relative;
  width: min(var(--mx-m), calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: 24px;
  animation: mx-in .22s cubic-bezier(.2, .8, .2, 1);
}

.mx-dlg--s { width: min(var(--mx-s), calc(100vw - 32px)); }
.mx-dlg--l { width: min(var(--mx-l), calc(100vw - 32px)); }
.mx-dlg--tour { width: min(400px, calc(100vw - 32px)); }

.mx-dh {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 0;
}

.mx-dh p,
.mx-tile-row p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mx-tile-row p { flex: 1; }

.mx-dh b,
.mx-tile-row b,
.mx-tour__b b {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}

.mx-dh b + span,
.mx-tile-row b + span,
.mx-tour__b span,
.mx-center > span {
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.5;
}

.mx-dlg strong { color: var(--text); }

.mx-x {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border: 1px solid var(--wc-bd);
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  cursor: pointer;
}

.mx-db {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 0;
}

.mx-db--14 { gap: 14px; }

.mx-db--tile {
  gap: 14px;
  padding: 22px 20px 0;
}

.mx-db--steps { padding-top: 14px; }

.mx-tile-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mx-tile {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
}

.mx-tile--co {
  background: color-mix(in oklab, oklch(0.72 0.14 35) 18%, transparent);
  color: oklch(0.72 0.14 35);
}

.mx-tile--am {
  background: color-mix(in oklab, oklch(0.8 0.13 70) 18%, transparent);
  color: oklch(0.8 0.13 70);
}

.mx-confirm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 62px;
}

.mx-confirm label {
  color: var(--text-3);
  font-size: 12.5px;
}

.mx-confirm strong,
.wc-in.mx-mono { font-family: ui-monospace, Menlo, monospace; }

.wc-in.mx-in {
  height: 44px;
  font-size: 14px;
}

.wc-in.mx-in--big {
  height: 52px;
  font-size: 17px;
  font-weight: 700;
}

.wc-in.mx-ta {
  height: auto;
  line-height: normal;
}

.wc-in[type="time"] { color-scheme: dark; }
[data-theme="light"] .wc-in[type="time"] { color-scheme: light; }

.mx-df {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
}

.mx-df__n {
  margin-right: auto;
  color: var(--muted);
  font-size: 12.5px;
}

.mx-df__n--lock {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--tint-14);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mx-btn:hover {
  color: var(--text);
  text-decoration: none;
}

.mx-btn--p,
.mx-btn--p:hover {
  border-color: transparent;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-weight: 800;
}

.mx-btn--d,
.mx-btn--d:hover {
  border-color: transparent;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-weight: 800;
}

.mx-btn--dt,
.mx-btn--dt:hover {
  border-color: transparent;
  color: var(--wc-co);
}

.mx-btn--g,
.mx-btn--g:hover {
  border-color: transparent;
  color: var(--accent-fg);
}

.mx-btn--first,
.mx-btn.first { margin-right: auto; }
.mx-btn.is-dim { opacity: .45; }
.mx-btn--d.is-dim { opacity: .4; }
.mx-btn--44 { height: 44px; }
.mx-btn--36 { height: 36px; }

.mx-btn--50 {
  width: 100%;
  height: 50px;
  margin-top: 6px;
}

.mx-btn--lb,
.mx-btn--lb:hover {
  height: 36px;
  border-color: rgba(255, 255, 255, .2);
  color: #eef0f5;
}

/* Session and success */
.mx-center {
  align-items: center;
  gap: 14px;
  padding: 26px 22px 4px;
  text-align: center;
}

.mx-center > span:last-child { max-width: 340px; }

.mx-db--succ {
  gap: 12px;
  padding: 28px 22px 6px;
}

.mx-big {
  font-size: 20px;
  font-weight: 700;
}

.mx-big--21 { font-size: 21px; }

.mx-ring {
  position: relative;
  width: 96px;
  height: 96px;
}

.mx-ring svg {
  display: block;
  transform: rotate(-90deg);
}

.mx-ring circle {
  fill: none;
  stroke: var(--tint-08);
  stroke-width: 7;
}

.mx-ring circle + circle {
  stroke: currentColor;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke .3s;
}

.mx-ring > span {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .1em;
}

.mx-ring b {
  color: var(--text);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.mx-ok {
  position: relative;
  width: 76px;
  height: 76px;
}

.mx-ok span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.mx-ok span:first-child {
  background: color-mix(in oklab, oklch(0.8 0.14 155) 35%, transparent);
  animation: mx-ring 1.6s ease-out infinite;
}

.mx-ok span:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  animation: mx-pop .45s ease;
}

/* Forms */
.mx-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1.5px solid var(--wc-bd);
  border-radius: 14px;
  background: var(--tint-03);
  cursor: text;
}

.mx-chips.is-ok { border-color: rgba(154, 219, 230, .45); }
.mx-chips.is-bad { border-color: var(--wc-co); }
.mx-chips:focus-within { border-color: rgba(154, 219, 230, .7); }

.mx-chips input {
  flex: 1;
  min-width: 160px;
  height: 32px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.mx-chips input::placeholder { color: var(--muted-2); }

.mx-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--tint-08);
  font-size: 12.5px;
  font-weight: 700;
}

.mx-chip > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
}

.mx-chip button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.mx-grp {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mx-grp--4 { gap: 4px; }
.mx-grp--10 { gap: 10px; }

.wc-page .mx-cap {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.wc-page .mx-note {
  color: var(--muted);
  font-size: 12.5px;
}

.mx-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mx-tp,
.mx-rate,
.mx-rev,
.mx-slots button {
  border: 1.5px solid var(--mx-bd);
  background: var(--tint-02);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.mx-tp {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.mx-tp span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--d);
}

.mx-tp[aria-pressed="true"],
.mx-rev[aria-pressed="true"],
.mx-slots [aria-pressed="true"] {
  border-color: var(--cyan);
  background: color-mix(in oklab, #9adbe6 10%, transparent);
}

.mx-when {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
}

.mx-cf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.mx-rates {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.mx-rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  border-radius: 16px;
}

.mx-rates .mx-rate { color: var(--text); }

.mx-rate b {
  color: var(--text-3);
  font-size: 22px;
  font-weight: 800;
}

.mx-rate span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.mx-rates .mx-rate[aria-pressed="true"] {
  border-color: var(--c);
  background: color-mix(in oklab, var(--c) 12%, transparent);
}

.mx-rate[aria-pressed="true"] b { color: var(--c); }

/* Lightbox */
.mx-lb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(1100px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 40px));
  color: #eef0f5;
  animation: mx-in .22s ease;
}

.mx-lb__h {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mx-lb__h p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mx-lb__h b {
  font-size: 15px;
  font-weight: 700;
}

.mx-lb__h b + span {
  color: #a7abb8;
  font-size: 12.5px;
}

.mx-lb__a {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.mx-x.mx-x--lb {
  margin-left: 0;
  border-color: rgba(255, 255, 255, .2);
  color: #eef0f5;
}

.mx-lb__s {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #0b0c11;
}

.mx-lb__p {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .35s;
}

/* The real size of the photo the slide shows */
.mx-lb__size {
  position: absolute;
  top: calc(50% + 34px);
  left: 50%;
  color: rgba(255, 255, 255, .8);
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.mx-lb__p.is-on { opacity: 1; }

.mx-lb__p span {
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
  font-weight: 700;
}

.mx-lb__n {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 19, 26, .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}

.mx-lb__n--p { left: 14px; }
.mx-lb__n--n { right: 14px; }

.mx-lb__t {
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.mx-lb__t button {
  flex-shrink: 0;
  width: 76px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  color: rgba(255, 255, 255, .7);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  opacity: .55;
}

.mx-lb__t [aria-pressed="true"] {
  border-color: #9adbe6;
  opacity: 1;
}

/* Upload and share */
.mx-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 16px;
  border: 1.5px dashed rgba(154, 219, 230, .45);
  border-radius: 18px;
  background: rgba(154, 219, 230, .05);
  cursor: pointer;
}

.mx-drop.is-drop {
  border-color: var(--cyan);
  background: rgba(154, 219, 230, .12);
}

.mx-drop > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(154, 219, 230, .16);
  color: var(--accent-fg);
}

.mx-drop b {
  font-size: 14.5px;
  font-weight: 700;
}

.mx-drop em {
  color: var(--accent-fg);
  font-style: normal;
}

.mx-drop b + span {
  color: var(--muted);
  font-size: 12px;
}

.wc-page .mx-ups {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mx-ups li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--tint-06);
  border-radius: 14px;
  background: var(--tint-03);
}

.wc-page .mx-ups p {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mx-ext {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #5b6276;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.mx-ups p > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.mx-ups b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx-ups b + span { font-size: 11.5px; }

.mx-ups button {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.mx-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tint-08);
}

.mx-bar span {
  display: block;
  height: 100%;
  transition: width .4s;
}

.wc-page .mx-link {
  display: flex;
  gap: 8px;
}

.mx-link > span {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 44px;
  overflow: hidden;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--tint-05);
  color: var(--accent-fg);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-segs.mx-segs { gap: 16px; }

.mx-people li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--tint-06);
}

.mx-face,
.mx-av {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.mx-av {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.wc-page .mx-people p {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.mx-people b {
  font-size: 13.5px;
  font-weight: 700;
}

.mx-people b + span {
  color: var(--muted);
  font-size: 12px;
}

.mx-people em {
  color: var(--text-3);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
}

/* Multi-step and tour */
.wc-page .mx-prog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.mx-prog li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.mx-prog span {
  height: 4px;
  border-radius: 999px;
  background: var(--tint-08);
  transition: background .3s;
}

.mx-prog .is-cur { color: var(--text); }
.mx-prog .is-cur span { background: var(--cyan); }
.mx-prog .is-done span { background: oklch(0.8 0.14 155); }

.mx-revs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mx-rev {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  text-align: left;
}

.mx-rev .wc-radio {
  width: 18px;
  height: 18px;
}

.mx-rev > span:last-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
}

.mx-rev b {
  font-size: 14px;
  font-weight: 700;
}

.mx-rev b + span {
  color: var(--muted);
  font-size: 12px;
}

.mx-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}

.mx-slots button {
  height: 42px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
}

.mx-slots .is-busy {
  color: var(--muted);
  text-decoration: line-through;
  cursor: not-allowed;
}

.mx-sum {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--tint-07);
  border-radius: 16px;
  background: var(--tint-03);
}

.mx-sum b {
  font-size: 15px;
  font-weight: 700;
}

.mx-sum b + span {
  color: var(--text-3);
  font-size: 13px;
}

.mx-tour__h {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  background: radial-gradient(80% 90% at 30% 20%, rgba(154, 219, 230, .3), transparent 60%), radial-gradient(70% 80% at 90% 90%, rgba(201, 154, 78, .24), transparent 60%), #151821;
}

.mx-tour__h > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #9adbe6;
  color: #11131a;
  font-size: 26px;
  font-weight: 900;
  animation: mx-pop .35s ease;
}

.mx-tour__h button {
  position: absolute;
  top: 12px;
  right: 12px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 19, 26, .55);
  color: #eef0f5;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.mx-tour__b {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 0;
}

.mx-tour__f {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 18px;
}

.mx-tour__f .mx-btn.first {
  margin-right: 0;
  margin-left: auto;
}

.mx-dots {
  display: flex;
  gap: 5px;
}

.mx-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--tint-18);
  transition: width .3s, background .3s;
}

.mx-dots .is-done { background: var(--cyan); }

.mx-dots .is-cur {
  width: 22px;
  background: var(--cyan);
}

/* Command palette */
.mx-pal {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  overflow: hidden;
  border-color: var(--tint-14);
  border-radius: 22px;
  animation: mx-in .18s ease;
}

.mx-pal__s {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--tint-08);
  color: var(--muted);
}

.mx-pal__s input {
  flex: 1;
  min-width: 0;
  height: 58px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.mx-pal__s input::placeholder { color: var(--muted-2); }

.mx-pal__s kbd,
.mx-pop kbd {
  font-family: inherit;
}

.mx-pal__s kbd {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--tint-08);
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 800;
}

.mx-pal__l {
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 8px;
}

.wc-page .mx-pal__g {
  padding: 10px 10px 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.mx-po {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}

.mx-po:hover {
  color: var(--text);
  text-decoration: none;
}

.mx-po.is-on { background: var(--tint-07); }

.mx-po > span:first-child {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--tint-06);
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 900;
}

.mx-po.is-act > span:first-child { color: var(--wc-gr); }

.mx-po > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mx-po b,
.mx-po b + span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx-po b {
  font-size: 14px;
  font-weight: 700;
}

.mx-po b + span {
  color: var(--muted);
  font-size: 12px;
}

.mx-po em {
  display: none;
  color: var(--muted);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 800;
}

.mx-po.is-on em { display: block; }

.wc-page .mx-pal__e {
  padding: 30px 10px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}

.wc-page .mx-pal__f {
  display: flex;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--tint-08);
  color: var(--muted);
  font-size: 11.5px;
}

.mx-pal__f span:last-child { margin-left: auto; }

/* Drawer, sheet, popover */
.mx-drawer {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  width: min(460px, calc(100vw - 24px));
  overflow: hidden;
  border-radius: 24px;
  animation: mx-slide-r .28s cubic-bezier(.2, .8, .2, 1);
}

.mx-drawer__h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--tint-06);
}

.mx-drawer__h p,
.mx-sheet__h p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mx-drawer__h b {
  font-size: 17px;
  font-weight: 700;
}

.mx-drawer__h b + span,
.mx-sheet__h b + span {
  color: var(--muted);
  font-size: 12.5px;
}

.mx-drawer__t { padding: 10px 20px 0; }

.wc-page .mx-drawer__b {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 16px 20px;
}

.mx-drawer__b li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--tint-06);
  border-radius: 16px;
  background: var(--tint-02);
}

.wc-page .mx-drawer__b p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mx-drawer__b p span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
}

.mx-drawer__b b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx-drawer__b em {
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.mx-drawer__f {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--tint-06);
}

.mx-drawer__f .mx-btn { flex: 1; }

.mx-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  box-sizing: border-box;
  width: min(520px, 100vw);
  padding: 10px 12px 22px;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
  transform: translateX(-50%);
  animation: mx-slide-up .28s cubic-bezier(.2, .8, .2, 1);
}

.mx-sheet__g {
  display: block;
  width: 44px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--tint-18);
}

.mx-sheet__h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 12px;
}

.mx-sheet__h > span {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: oklch(0.82 0.06 210);
}

.mx-sheet__h b {
  font-size: 15px;
  font-weight: 700;
}

.mx-sheet__l button,
.mx-pop button {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mx-sheet__l button {
  gap: 14px;
  padding: 14px 12px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
}

.mx-sheet__l button:hover { background: var(--tint-04); }
.mx-sheet__l .is-co,
.mx-pop .is-co { color: var(--wc-co); }

.mx-pop {
  position: fixed;
  width: 240px;
  box-sizing: border-box;
  padding: 6px;
  border-color: var(--tint-14);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
  animation: mx-in .14s ease;
  transform-origin: top left;
}

.mx-pop button {
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
}

.mx-pop button:hover,
.mx-pop button:focus-visible { background: var(--tint-05); }
.mx-pop button span { flex: 1; }

.mx-pop kbd {
  color: var(--muted);
  font-size: 11.5px;
}

.mx-pop__sep {
  display: block;
  height: 1px;
  margin: 5px 6px;
  background: var(--tint-08);
}

/* Toast */
.mx-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 18px;
  border-radius: 999px;
  background: #eef0f5;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 200%);
  transition: transform .3s, opacity .3s, visibility .3s;
}

.mx-toast.is-on {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

.mx-toast__m {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mx-toast__i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
}

.mx-toast button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #11131a;
  color: #eef0f5;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

/* ==========================================================================
   22zz61. Cards · Basic: the page tokens and the classes generated from
   the handoff by _dev/cards_basic_convert.py (kb1 … and kbh1 … hover).
   The stage sets its own --b-/--w-/--t- values for the dark and light
   card themes; outside it they follow the shell theme.
   ========================================================================== */
.cb-page {
  --t-eef0f5: var(--text);
  --t-a7abb8: var(--text-3);
  --t-8a8f9e: var(--muted);
  --t-c9ccd6: var(--text-2);
  --t-9adbe6: var(--accent-fg);
  --b-f2f3f6: var(--pill-bg);
  --pillink: var(--pill-fg);
  --b-1b1f2a: var(--card-from);
  --b-151821: var(--card-to);
  --w02: var(--tint-02);
  --w03: var(--tint-03);
  --w04: var(--tint-04);
  --w05: var(--tint-05);
  --w06: var(--tint-06);
  --w07: var(--tint-07);
  --w08: var(--tint-08);
  --w10: rgba(255, 255, 255, .12);
  --w14: var(--tint-18);
  min-width: 0;
}

[data-theme="light"] .cb-page { --w10: rgba(20, 30, 50, .16); }
/* Section grids fill the full width: auto-fit folds the empty tracks that
   auto-fill keeps on wide screens, so the cards share the row. */
.cb-page .kb88 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cb-page .kb130 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cb-page .kb169 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cb-page .kb192 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cb-page .kb249 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.cb-page .kb344 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cb-page .kb451 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* The magazine stages (02b, 03b) are a night panel only in the dark theme. */
[data-theme="light"] .cb-page .kb192 { background: var(--card-to); }

.cb-page h2 { margin: 0; }

/* The rotated due stamp pokes 1px past a 320px card; pull it in on phones. */
@media (max-width: 400px) {
  .cb-page .kb350 { right: 4px; }
}

@keyframes cbShim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes soShim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Image slots: the studio's photos go here (16:10, 4:5, 1:1, 3:4). */
.cb-ph {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: linear-gradient(135deg, rgba(154, 219, 230, .16), rgba(201, 154, 78, .12)), #232734;
  color: rgba(238, 240, 245, .55);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* The real size of the photo that goes in the slot, sized to the slot */
.cb-ph__size {
  font-size: 20px;
  white-space: nowrap;
}

.cb-ph__size--s { font-size: 14px; }
.cb-ph__size--xs { font-size: 10px; }

.cb-img { object-fit: cover; }
/* A photo fills its slot (the slot box is absolutely placed); the crop keeps
   the top of the frame, where the faces and horizons are. */
.cb-photo { width: 100%; height: 100%; object-position: top; }
.cb-photo.nv-photo--hero { object-position: 50% 40%; }

.kb1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kb2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kb3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kb4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kb5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kb6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kb8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.kb10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.kb11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kb12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.kb13 {
  font-size: 11.5px;
  opacity: .65;
}

.kb14 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.kb15 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kb16 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kb17 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kb18 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kb19 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb20 {
  overflow-x: auto;
  border-radius: 24px;
}

.kb21 {
  position: relative;
  width: 860px;
  height: 480px;
  border-radius: 24px;
  overflow: hidden;
}

.kb22 {
  position: absolute;
  inset: 14px;
  border: 1.5px solid rgba(154,219,230,.55);
  border-radius: 12px;
  pointer-events: none;
}

.kb23 {
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(154,219,230,.22);
  border-radius: 6px;
  pointer-events: none;
}

.kb24 {
  position: absolute;
  top: 15px;
  left: 88px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb25 {
  position: absolute;
  bottom: 15px;
  left: 88px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb26 {
  position: absolute;
  top: 15px;
  left: 223px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb27 {
  position: absolute;
  bottom: 15px;
  left: 223px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb28 {
  position: absolute;
  top: 15px;
  left: 358px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb29 {
  position: absolute;
  bottom: 15px;
  left: 358px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb30 {
  position: absolute;
  top: 15px;
  left: 493px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb31 {
  position: absolute;
  bottom: 15px;
  left: 493px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb32 {
  position: absolute;
  top: 15px;
  left: 628px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb33 {
  position: absolute;
  bottom: 15px;
  left: 628px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb34 {
  position: absolute;
  top: 15px;
  left: 763px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb35 {
  position: absolute;
  bottom: 15px;
  left: 763px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb36 {
  position: absolute;
  left: 17px;
  top: 74px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb37 {
  position: absolute;
  right: 17px;
  top: 74px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb38 {
  position: absolute;
  left: 17px;
  top: 182px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb39 {
  position: absolute;
  right: 17px;
  top: 182px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb40 {
  position: absolute;
  left: 17px;
  top: 290px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb41 {
  position: absolute;
  right: 17px;
  top: 290px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb42 {
  position: absolute;
  left: 17px;
  top: 398px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb43 {
  position: absolute;
  right: 17px;
  top: 398px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(154,219,230,.6);
  font-family: ui-monospace,Menlo,monospace;
}

.kb44 {
  position: absolute;
  left: 110px;
  top: 110px;
}

.kb45 {
  width: 380px;
  box-sizing: border-box;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  color: var(--t-eef0f5,#eef0f5);
}

.kb46 {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  outline: 1.5px dashed #9adbe6;
  outline-offset: 3px;
  background: rgba(154,219,230,.06);
}

.kb47 {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(154,219,230,.16);
  color: #9adbe6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.kb48 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.kb49 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
}

.kb50 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb51 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-a7abb8,#a7abb8);
  font-weight: 900;
}

.kb52 {
  height: 56px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 10px;
  outline: 1.5px dashed #c9a96a;
  outline-offset: 3px;
  background: rgba(201,169,106,.06);
}

.kb53 {
  height: 42px;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
}

.kb54 {
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kb55 {
  display: block;
  width: 62%;
  height: 100%;
  background: #9adbe6;
  border-radius: 999px;
}

.kb56 {
  height: 49px;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.07));
  border-radius: 0 0 10px 10px;
  outline: 1.5px dashed oklch(0.8 0.14 155);
  outline-offset: 3px;
  background: rgba(120,200,150,.06);
}

.kb57 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.kb58 {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kb59 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kb60 {
  position: absolute;
  left: 280px;
  top: 76px;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  color: #ff6b9a;
  font-size: 11px;
  font-weight: 900;
  font-family: ui-monospace,Menlo,monospace;
  display: flex;
  align-items: center;
}

.kb61 {
  position: absolute;
  left: 50px;
  top: 206.5px;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  color: #ff6b9a;
  font-size: 11px;
  font-weight: 900;
  font-family: ui-monospace,Menlo,monospace;
  display: flex;
  align-items: center;
}

.kb62 {
  position: absolute;
  left: 115px;
  top: 211px;
  font-size: 9.5px;
  font-weight: 900;
  color: #ff6b9a;
  font-family: ui-monospace,Menlo,monospace;
}

.kb63 {
  position: absolute;
  left: 286px;
  top: 166px;
  font-size: 9.5px;
  font-weight: 900;
  color: #ff6b9a;
  font-family: ui-monospace,Menlo,monospace;
}

.kb64 {
  position: absolute;
  left: 286px;
  top: 236px;
  font-size: 9.5px;
  font-weight: 900;
  color: #ff6b9a;
  font-family: ui-monospace,Menlo,monospace;
}

.kb65 {
  position: absolute;
  left: 519px;
  top: 119px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid #9adbe6;
  color: #9adbe6;
  font-size: 12.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace,Menlo,monospace;
}

.kb66 {
  position: absolute;
  left: 519px;
  top: 169px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid #c9a96a;
  color: #c9a96a;
  font-size: 12.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace,Menlo,monospace;
}

.kb67 {
  position: absolute;
  left: 519px;
  top: 219px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid oklch(0.8 0.14 155);
  color: oklch(0.8 0.14 155);
  font-size: 12.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace,Menlo,monospace;
}

.kb68 {
  position: absolute;
  left: 519px;
  top: 269px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid #ff6b9a;
  color: #ff6b9a;
  font-size: 12.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace,Menlo,monospace;
}

.kb69 {
  position: absolute;
  left: 57px;
  top: 57px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid #ff6b9a;
  color: #ff6b9a;
  font-size: 12.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace,Menlo,monospace;
}

.kb70 {
  position: absolute;
  left: 234px;
  top: 340px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  color: var(--t-eef0f5,#eef0f5);
  font-size: 12.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace,Menlo,monospace;
}

.kb71 {
  position: absolute;
  left: 564px;
  top: 98px;
  width: 258px;
  border: 1px solid rgba(154,219,230,.4);
  border-radius: 8px;
  overflow: hidden;
}

.kb72 {
  display: grid;
  grid-template-columns: 24px 1fr;
  padding: 6px 10px;
  font-size: 9px;
  letter-spacing: .14em;
  font-weight: 900;
  color: rgba(154,219,230,.8);
  border-bottom: 1px solid rgba(154,219,230,.3);
}

.kb73 {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(154,219,230,.14);
}

.kb74 {
  font-size: 11px;
  font-weight: 900;
  color: #9adbe6;
  font-family: ui-monospace,Menlo,monospace;
}

.kb75 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.kb76 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-eef0f5,#eef0f5);
}

.kb77 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
  overflow-wrap: anywhere;
}

.kb78 {
  font-size: 11px;
  font-weight: 900;
  color: #c9a96a;
  font-family: ui-monospace,Menlo,monospace;
}

.kb79 {
  font-size: 11px;
  font-weight: 900;
  color: oklch(0.8 0.14 155);
  font-family: ui-monospace,Menlo,monospace;
}

.kb80 {
  font-size: 11px;
  font-weight: 900;
  color: #ff6b9a;
  font-family: ui-monospace,Menlo,monospace;
}

.kb81 {
  font-size: 11px;
  font-weight: 900;
  color: var(--t-eef0f5,#eef0f5);
  font-family: ui-monospace,Menlo,monospace;
}

.kb82 {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 290px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  border-top: 1px solid rgba(154,219,230,.5);
  border-left: 1px solid rgba(154,219,230,.5);
  font-size: 9.5px;
  color: var(--t-a7abb8,#a7abb8);
  font-family: ui-monospace,Menlo,monospace;
}

.kb83 {
  padding: 7px 9px;
  border-right: 1px solid rgba(154,219,230,.5);
  border-bottom: 1px solid rgba(154,219,230,.3);
  color: var(--t-eef0f5,#eef0f5);
  font-weight: 900;
  letter-spacing: .06em;
}

.kb84 {
  padding: 5px 9px;
  border-right: 1px solid rgba(154,219,230,.3);
  border-bottom: 1px solid rgba(154,219,230,.3);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kb85 {
  font-size: 8px;
  color: rgba(154,219,230,.7);
  letter-spacing: .12em;
}

.kb86 {
  color: var(--t-eef0f5,#eef0f5);
  font-weight: 800;
}

.kb87 {
  position: absolute;
  left: 40px;
  bottom: 30px;
  font-size: 10px;
  color: rgba(154,219,230,.7);
  font-family: ui-monospace,Menlo,monospace;
  letter-spacing: .08em;
}

.kb88 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  gap: 18px;
  align-items: start;
}

.kb89 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kb90 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.kb91 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb92 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kb93 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kb94 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
}

.kb95 {
  font-size: 16px;
  font-weight: 700;
}

.kb96 {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
}

.kb97 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb98 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
}

.kb99 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.kb100 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.kb101 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--t-a7abb8,#a7abb8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kb102 {
  position: absolute;
  right: 14px;
  top: 54px;
  z-index: 5;
  width: 190px;
  padding: 6px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.kb103 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.kb104 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb105 {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kb106 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.kb107 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
}

.kb108 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: oklch(0.8 0.14 155);
  border-color: color-mix(in oklab, oklch(0.8 0.14 155) 45%, transparent);
}

.kb109 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kb110 {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb111 {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.kb112 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.kb113 {
  display: flex;
  font-size: 12px;
  font-weight: 700;
}

.kb114 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb115 {
  margin-left: auto;
}

.kb116 {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .4s,background .3s;
}

.kb117 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb118 {
  display: flex;
}

.kb119 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: oklch(0.82 0.08 30);
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kb120 {
  margin-left: -7px;
}

.kb121 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: oklch(0.82 0.08 300);
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kb122 {
  background: linear-gradient(140deg,#eef0f4,#d4d9e1 55%,#a8e6ef 140%);
  color: #11131a;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.kb123 {
  position: absolute;
  right: -50px;
  top: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(154,219,230,.8),transparent 70%);
}

.kb124 {
  position: relative;
  font-size: 10.5px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #4b5263;
}

.kb125 {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.kb126 {
  position: relative;
  font-size: 12.5px;
  color: #3a4150;
}

.kb127 {
  position: relative;
  display: flex;
  gap: 8px;
}

.kb128 {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: #11131a;
  color: #eef0f5;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.kb129 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,19,26,.2);
  background: rgba(255,255,255,.5);
  color: #11131a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.kb130 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
  gap: 24px;
  align-items: start;
}

.kb131 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kb132 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #6b7080;
}

.kb133 {
  padding: 20px 0 18px;
  border-top: 3px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--t-eef0f5,#eef0f5);
}

.kb134 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.kb135 {
  font-size: 64px;
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--w14,rgba(238,240,245,.35));
}

.kb136 {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb137 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.kb138 {
  padding-left: 14px;
  border-left: 1px solid var(--w14,rgba(238,240,245,.35));
  font-size: 15px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
  font-style: italic;
}

.kb139 {
  margin-left: auto;
  font-size: 22px;
  letter-spacing: .12em;
  color: var(--t-eef0f5,#eef0f5);
}

.kb140 {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--t-eef0f5,#eef0f5);
}

.kb141 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  font-size: 17px;
  font-weight: 700;
  color: var(--t-eef0f5,#eef0f5);
}

.kb142 {
  font-size: 10.5px;
  color: #6b7080;
  font-family: ui-monospace,Menlo,monospace;
}

.kb143 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  font-size: 14px;
  font-weight: 600;
  color: var(--t-eef0f5,#eef0f5);
}

.kb144 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  font-size: 14px;
  font-weight: 600;
  color: oklch(0.72 0.14 35);
}

.kb145 {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .18em;
  color: oklch(0.8 0.13 70);
}

.kb146 {
  font-size: 14px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
}

.kb147 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kb148 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kb149 {
  font-size: 24px;
}

.kb150 {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.kb151 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.kb152 {
  font-size: 72px;
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.05em;
}

.kb153 {
  font-size: 22px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb154 {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: right;
}

.kb155 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 4px;
}

.kb156 {
  height: 4px;
  background: var(--t-eef0f5,#eef0f5);
}

.kb157 {
  font-size: 11px;
  font-weight: 800;
  color: var(--t-eef0f5,#eef0f5);
}

.kb158 {
  height: 4px;
  background: oklch(0.8 0.13 70);
}

.kb159 {
  height: 4px;
  background: var(--w10,rgba(255,255,255,.14));
}

.kb160 {
  font-size: 11px;
  font-weight: 800;
  color: #6b7080;
}

.kb161 {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background: #eef0f4;
  color: #11131a;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
  box-sizing: border-box;
}

.kb162 {
  position: absolute;
  right: -14px;
  bottom: -34px;
  font-size: 220px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(17,19,26,.16);
}

.kb163 {
  position: relative;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}

.kb164 {
  position: relative;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}

.kb165 {
  position: relative;
  font-size: 13px;
  color: #3a4150;
}

.kb166 {
  position: relative;
  margin-top: auto;
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 12px;
  border-top: 2px solid #11131a;
}

.kb167 {
  font-size: 17px;
  font-weight: 800;
}

.kb168 {
  font-size: 13px;
  font-weight: 700;
  color: #4b5263;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.kb169 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  gap: 18px;
  align-items: start;
}

.kb170 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.kb171 {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg,var(--w05,rgba(255,255,255,.05)),var(--w02,rgba(255,255,255,.02)));
}

.kb172 {
  position: absolute;
  inset: 0;
}

.kb173 {
  position: absolute;
  left: 12px;
  top: 12px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(17,19,26,.75);
  color: #eef0f5;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.kb174 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--t-9adbe6,#9adbe6);
}

.kb175 {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg,var(--w06,rgba(255,255,255,.06)),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: #ffffff;
}

.kb176 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 40%,rgba(11,12,17,.88));
  pointer-events: none;
}

.kb177 {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.kb178 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #9adbe6;
}

.kb179 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.kb180 {
  font-size: 12.5px;
  color: #c9ccd6;
}

.kb181 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  gap: 14px;
}

.kb182 {
  position: relative;
  width: 112px;
  height: 112px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--w05,rgba(255,255,255,.05));
}

.kb183 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding-right: 6px;
}

.kb184 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.kb185 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kb186 {
  display: flex;
  align-items: baseline;
}

.kb187 {
  font-size: 15px;
  font-weight: 700;
}

.kb188 {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb189 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.kb190 {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--w05,rgba(255,255,255,.05));
}

.kb191 {
  position: absolute;
  inset: 0;
  background: rgba(11,12,17,.6);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.kb192 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
  gap: 24px;
  align-items: start;
  padding: 28px;
  border-radius: 28px;
  background: #0b0c11;
}

.kb193 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--t-eef0f5,#eef0f5);
}

.kb194 {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg,#232838,#151821);
  aspect-ratio: 16/10;
}

.kb195 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 10px;
  border-top: 2px solid var(--t-eef0f5,#eef0f5);
}

.kb196 {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb197 {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.kb198 {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: #151821;
  color: #fff;
}

.kb199 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(11,12,17,.2),transparent 30%,transparent 50%,rgba(11,12,17,.9));
  pointer-events: none;
}

.kb200 {
  position: absolute;
  left: 14px;
  top: 16px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .24em;
  pointer-events: none;
}

.kb201 {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.kb202 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .95;
}

.kb203 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kb204 {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 14px;
  align-items: start;
  padding-top: 12px;
  border-top: 2px solid var(--t-eef0f5,#eef0f5);
  color: var(--t-eef0f5,#eef0f5);
}

.kb205 {
  font-size: 56px;
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--w14,rgba(238,240,245,.4));
}

.kb206 {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg,#232838,#151821);
  aspect-ratio: 1;
  width: 100%;
}

.kb207 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.kb208 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--t-eef0f5,#eef0f5);
}

.kb209 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  aspect-ratio: 4/3;
}

.kb210 {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg,#232838,#151821);
  grid-row: span 2;
}

.kb211 {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg,#232838,#151821);
}

.kb212 {
  position: relative;
  display: block;
  overflow: hidden;
  background: #232838;
}

.kb213 {
  position: absolute;
  inset: 0;
  background: rgba(17,20,28,.94);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  pointer-events: none;
}

.kb214 {
  display: flex;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kb215 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.kb216 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  align-items: center;
  text-align: center;
}

.kb217 {
  position: relative;
  width: 76px;
  height: 76px;
}

.kb218 {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: oklch(0.82 0.08 80);
}

.kb219 {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  border: 3px solid var(--b-1b1f2a,#1b1f2a);
}

.kb220 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kb221 {
  font-size: 17px;
  font-weight: 700;
}

.kb222 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kb223 {
  display: flex;
  flex-direction: column;
}

.kb224 {
  font-size: 16px;
}

.kb225 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb226 {
  display: flex;
  gap: 8px;
  width: 100%;
}

.kb227 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
}

.kb228 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  font-weight: 800;
  flex: 1;
}

.kb229 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  gap: 4px;
  padding: 10px;
}

.kb230 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
}

.kb231 {
  position: relative;
}

.kb232 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kb233 {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
}

.kb234 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kb235 {
  font-size: 13.5px;
  font-weight: 700;
}

.kb236 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb237 {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.kb238 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kb239 {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb240 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kb241 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.kb242 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kb243 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kb244 {
  font-size: 13px;
  font-weight: 700;
}

.kb245 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb246 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kb247 {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--w05,rgba(255,255,255,.06));
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.kb248 {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 14%, transparent);
  color: oklch(0.8 0.14 155);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kb249 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(290px,1fr));
  gap: 28px;
  align-items: start;
}

.kb250 {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--t-eef0f5,#eef0f5);
}

.kb251 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--t-eef0f5,#eef0f5);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
}

.kb252 {
  margin-left: auto;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb253 {
  position: relative;
  margin-top: 12px;
}

.kb254 {
  position: relative;
  display: block;
  overflow: hidden;
  background: oklch(0.82 0.08 80);
  width: 100%;
  aspect-ratio: 4/5;
}

.kb255 {
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -22px;
  font-size: 84px;
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .8;
  color: #ffffff;
  mix-blend-mode: difference;
  pointer-events: none;
}

.kb256 {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ffffff;
  color: #11131a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-12deg);
  box-shadow: 0 10px 20px rgba(0,0,0,.4);
  pointer-events: none;
}

.kb257 {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kb258 {
  font-size: 22px;
  font-weight: 800;
}

.kb259 {
  position: absolute;
  left: 10px;
  top: 12px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .24em;
  color: #fff;
  pointer-events: none;
}

.kb260 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 30px;
  padding-bottom: 10px;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.kb261 {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -.02em;
}

.kb262 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .14em;
  color: oklch(0.8 0.14 155);
}

.kb263 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in oklab, oklch(0.8 0.14 155) 20%, transparent);
}

.kb264 {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  font-style: italic;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kb265 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kb266 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kb267 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .9;
}

.kb268 {
  font-size: 9.5px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb269 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 12px;
  border-left: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kb270 {
  display: flex;
  align-items: center;
  margin-top: 16px;
  border-top: 2px solid var(--t-eef0f5,#eef0f5);
  border-bottom: 2px solid var(--t-eef0f5,#eef0f5);
}

.kb271 {
  flex: 1;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kb272 {
  font-size: 20px;
}

.kb273 {
  padding: 12px 0 12px 14px;
  border-left: 1px solid var(--w14,rgba(255,255,255,.2));
  font-size: 13px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
}

.kb274 {
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
}

.kb275 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.kb276 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb277 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}

.kb278 {
  display: flex;
  height: 6px;
  margin: 10px 0 4px;
}

.kb279 {
  flex: 1;
  background: oklch(0.8 0.14 155);
  margin-right: 2px;
}

.kb280 {
  flex: 1;
  background: oklch(0.8 0.13 70);
  margin-right: 2px;
}

.kb281 {
  flex: 1;
  background: oklch(0.72 0.14 35);
  margin-right: 2px;
}

.kb282 {
  flex: 1;
  background: #3a3f4d;
  margin-right: 2px;
}

.kb283 {
  display: flex;
  gap: 12px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  padding-bottom: 4px;
}

.kb284 {
  color: oklch(0.8 0.14 155);
}

.kb285 {
  color: oklch(0.8 0.13 70);
}

.kb286 {
  color: oklch(0.72 0.14 35);
}

.kb287 {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  opacity: 1;
}

.kb288 {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
}

.kb289 {
  position: absolute;
  inset: 0;
  background: oklch(0.82 0.08 30);
  filter: grayscale(0);
}

.kb290 {
  position: absolute;
  left: -2px;
  top: -8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--t-eef0f5,#eef0f5);
  pointer-events: none;
}

.kb291 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.kb292 {
  font-size: 12px;
  font-style: italic;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kb293 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.kb294 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  color: oklch(0.8 0.14 155);
}

.kb295 {
  width: 60px;
  height: 3px;
  background: oklch(0.8 0.14 155);
}

.kb296 {
  position: absolute;
  inset: 0;
  background: oklch(0.82 0.08 300);
  filter: grayscale(0);
}

.kb297 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  color: oklch(0.8 0.13 70);
}

.kb298 {
  width: 30px;
  height: 3px;
  background: oklch(0.8 0.13 70);
}

.kb299 {
  position: absolute;
  inset: 0;
  background: oklch(0.82 0.08 120);
  filter: grayscale(0);
}

.kb300 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  color: oklch(0.72 0.14 35);
}

.kb301 {
  width: 48px;
  height: 3px;
  background: oklch(0.72 0.14 35);
}

.kb302 {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  opacity: 0.55;
}

.kb303 {
  position: absolute;
  inset: 0;
  background: oklch(0.82 0.08 330);
  filter: grayscale(1);
}

.kb304 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #6b7080;
}

.kb305 {
  width: 8px;
  height: 3px;
  background: #6b7080;
}

.kb306 {
  padding-top: 10px;
  font-size: 12.5px;
  font-weight: 800;
}

.kb307 {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.kb308 {
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg,#232838,#151821);
  position: absolute;
  inset: 0;
}

.kb309 {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(11,12,17,.92) 35%,rgba(11,12,17,.2));
  color: #fff;
  pointer-events: none;
}

.kb310 {
  position: absolute;
  left: 0;
  bottom: -14px;
  font-size: 120px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.4px #ffffff;
  pointer-events: none;
}

.kb311 {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 22px;
  padding: 0 8px;
  background: #ffffff;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .14em;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.kb312 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0 8px;
}

.kb313 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.03em;
}

.kb314 {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kb315 {
  font-size: 64px;
  font-weight: 800;
  line-height: .6;
  color: #9adbe6;
}

.kb316 {
  font-size: 17px;
  line-height: 1.4;
  font-style: italic;
  letter-spacing: -.01em;
}

.kb317 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb318 {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--t-eef0f5,#eef0f5);
}

.kb319 {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
}

.kb320 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.kb321 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-eef0f5,#eef0f5);
  white-space: nowrap;
}

.kb322 {
  font-size: 13px;
  font-weight: 800;
  color: #9adbe6;
  white-space: nowrap;
}

.kb323 {
  display: flex;
  align-items: center;
  padding-top: 10px;
}

.kb324 {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 800;
}

.kb325 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.kb326 {
  height: 5px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kb327 {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .3s;
}

.kb328 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.kb329 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}

.kb330 {
  transition: color .2s;
}

.kb331 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  gap: 6px;
}

.kb332 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.kb333 {
  display: grid;
  grid-template-columns: 48px 4px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}

.kb334 {
  font-size: 12.5px;
  font-weight: 800;
}

.kb335 {
  height: 34px;
  border-radius: 3px;
}

.kb336 {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb337 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.kb338 {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--w04,rgba(255,255,255,.05));
}

.kb339 {
  height: 28px;
  padding: 0 11px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kb340 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.kb341 {
  font-size: 12.5px;
  font-weight: 700;
  color: oklch(0.8 0.14 155);
}

.kb342 {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 64px;
}

.kb343 {
  flex: 1;
  border-radius: 5px;
  transition: height .4s;
}

.kb344 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 28px;
  align-items: start;
}

.kb345 {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: 12px;
  padding-bottom: 12px;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.kb346 {
  font-size: 112px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .76;
}

.kb347 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 6px;
  flex: 1;
}

.kb348 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--w14,rgba(238,240,245,.5));
}

.kb349 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.kb350 {
  position: absolute;
  right: 0;
  top: 4px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid oklch(0.72 0.14 35);
  color: oklch(0.72 0.14 35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(10deg);
}

.kb351 {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kb352 {
  font-size: 20px;
  font-weight: 800;
}

.kb353 {
  display: flex;
  height: 10px;
  margin: 12px 0 2px;
}

.kb354 {
  flex: 1;
  margin-right: 3px;
  background: var(--t-eef0f5,#eef0f5);
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.kb355 {
  flex: 1;
  margin-right: 3px;
  background: transparent;
  border: 1.5px solid var(--w14,rgba(238,240,245,.35));
}

.kb356 {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
}

.kb357 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: oklch(0.8 0.14 155);
}

.kb358 {
  font-size: 15.5px;
  font-weight: 500;
  color: #6b7080;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.kb359 {
  font-size: 11.5px;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb360 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #6b7080;
}

.kb361 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--w14,rgba(238,240,245,.45));
}

.kb362 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--t-eef0f5,#eef0f5);
}

.kb363 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.8 0.13 70);
}

.kb364 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-a7abb8,#a7abb8);
}

.kb365 {
  display: flex;
  align-items: center;
  margin-top: 12px;
  border-top: 2px solid var(--t-eef0f5,#eef0f5);
  border-bottom: 2px solid var(--t-eef0f5,#eef0f5);
}

.kb366 {
  flex: 1;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 800;
}

.kb367 {
  padding: 11px 0 11px 14px;
  border-left: 1px solid var(--w14,rgba(255,255,255,.2));
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
}

.kb368 {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 12px;
  padding-bottom: 12px;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.kb369 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
}

.kb370 {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: .9;
}

.kb371 {
  position: relative;
  display: flex;
  height: 22px;
  margin: 12px 0 4px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.kb372 {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 9.090909090909092%;
  width: 2.272727272727273%;
  min-width: 3px;
  background: oklch(0.8 0.14 155);
}

.kb373 {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 27.27272727272727%;
  width: 9.090909090909092%;
  min-width: 3px;
  background: #9adbe6;
}

.kb374 {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 13.636363636363635%;
  min-width: 3px;
  background: oklch(0.78 0.11 300);
}

.kb375 {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 72.72727272727273%;
  width: 9.090909090909092%;
  min-width: 3px;
  background: oklch(0.8 0.13 70);
}

.kb376 {
  position: absolute;
  left: 23.454545454545457%;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: #e2412f;
}

.kb377 {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: #6b7080;
  font-family: ui-monospace,Menlo,monospace;
  padding-bottom: 4px;
}

.kb378 {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  opacity: 0.45;
}

.kb379 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kb380 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--t-eef0f5,#eef0f5);
}

.kb381 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 12px;
  border-left: 3px solid oklch(0.8 0.14 155);
}

.kb382 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .16em;
  color: oklch(0.8 0.14 155);
}

.kb383 {
  font-size: 12px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.kb384 {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  opacity: 1;
}

.kb385 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: #9adbe6;
}

.kb386 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 12px;
  border-left: 3px solid #9adbe6;
}

.kb387 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .16em;
  color: #9adbe6;
}

.kb388 {
  margin-top: 4px;
  align-self: flex-start;
  padding: 4px 8px;
  background: #9adbe6;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kb389 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 12px;
  border-left: 3px solid oklch(0.78 0.11 300);
}

.kb390 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .16em;
  color: oklch(0.78 0.11 300);
}

.kb391 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 12px;
  border-left: 3px solid oklch(0.8 0.13 70);
}

.kb392 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .16em;
  color: oklch(0.8 0.13 70);
}

.kb393 {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kb394 {
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  color: #6b7080;
  padding-bottom: 6px;
  margin-bottom: -9px;
  border-bottom: none;
}

.kb395 {
  font-size: 18px;
  font-weight: 800;
  font-style: normal;
  color: var(--t-eef0f5,#eef0f5);
  padding-bottom: 6px;
  margin-bottom: -9px;
  border-bottom: 3px solid var(--t-eef0f5,#eef0f5);
}

.kb396 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.kb397 {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 10px;
}

.kb398 {
  font-size: 88px;
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .8;
}

.kb399 {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--w14,rgba(238,240,245,.5));
}

.kb400 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-bottom: 12px;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.kb401 {
  padding: 4px 8px;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.kb402 {
  font-size: 12.5px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.kb403 {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 130px;
  margin-top: 16px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--t-eef0f5,#eef0f5);
}

.kb404 {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.kb405 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  border-top: 1.5px dashed var(--w14,rgba(238,240,245,.35));
}

.kb406 {
  position: relative;
  width: 100%;
  height: 40%;
  background: transparent;
  border: 1.5px solid var(--w14,rgba(238,240,245,.5));
  border-bottom: none;
}

.kb407 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  border-top: 1.5px dashed var(--w14,rgba(238,240,245,.35));
}

.kb408 {
  position: relative;
  width: 100%;
  height: 55%;
  background: transparent;
  border: 1.5px solid var(--w14,rgba(238,240,245,.5));
  border-bottom: none;
}

.kb409 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  border-top: 1.5px dashed var(--w14,rgba(238,240,245,.35));
}

.kb410 {
  position: relative;
  width: 100%;
  height: 48%;
  background: transparent;
  border: 1.5px solid var(--w14,rgba(238,240,245,.5));
  border-bottom: none;
}

.kb411 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  border-top: 1.5px dashed var(--w14,rgba(238,240,245,.35));
}

.kb412 {
  position: relative;
  width: 100%;
  height: 70%;
  background: transparent;
  border: 1.5px solid var(--w14,rgba(238,240,245,.5));
  border-bottom: none;
}

.kb413 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  border-top: 1.5px dashed var(--w14,rgba(238,240,245,.35));
}

.kb414 {
  position: relative;
  width: 100%;
  height: 62%;
  background: transparent;
  border: 1.5px solid var(--w14,rgba(238,240,245,.5));
  border-bottom: none;
}

.kb415 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 66%;
  border-top: 1.5px dashed var(--w14,rgba(238,240,245,.35));
}

.kb416 {
  position: relative;
  width: 100%;
  height: 85%;
  background: var(--t-eef0f5,#eef0f5);
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  border-bottom: none;
}

.kb417 {
  position: absolute;
  left: 50%;
  top: -1%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  font-family: ui-monospace,Menlo,monospace;
}

.kb418 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  border-top: 1.5px dashed var(--w14,rgba(238,240,245,.35));
}

.kb419 {
  position: relative;
  width: 100%;
  height: 74%;
  background: transparent;
  border: 1.5px solid var(--w14,rgba(238,240,245,.5));
  border-bottom: none;
}

.kb420 {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  font-size: 10px;
  color: #6b7080;
  font-family: ui-monospace,Menlo,monospace;
}

.kb421 {
  color: var(--t-eef0f5,#eef0f5);
  font-weight: 900;
}

.kb422 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--t-eef0f5,#eef0f5);
}

.kb423 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: oklch(0.8 0.13 70);
}

.kb424 {
  margin-top: 10px;
  font-size: 10.5px;
  color: #6b7080;
  font-family: ui-monospace,Menlo,monospace;
}

.kb425 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  cursor: pointer;
  transition: transform .2s,border-color .2s,box-shadow .2s;
}

.kb426 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.kb427 {
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: all .2s;
}

.kb428 {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb429 {
  font-size: 24px;
  font-weight: 800;
}

.kb430 {
  font-size: 13px;
  font-weight: 600;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb431 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.kb432 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kb433 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: 200% 100%;
  animation: cbShim 1.2s linear infinite;
}

.kb434 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kb435 {
  height: 10px;
  width: 60%;
  border-radius: 5px;
  background-size: 200% 100%;
  animation: cbShim 1.2s linear infinite;
}

.kb436 {
  height: 8px;
  width: 40%;
  border-radius: 4px;
  background-size: 200% 100%;
  animation: cbShim 1.2s linear infinite;
}

.kb437 {
  height: 8px;
  border-radius: 4px;
  background-size: 200% 100%;
  animation: cbShim 1.2s linear infinite;
}

.kb438 {
  height: 8px;
  width: 80%;
  border-radius: 4px;
  background-size: 200% 100%;
  animation: cbShim 1.2s linear infinite;
}

.kb439 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: oklch(0.82 0.08 120);
  color: #11131a;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kb440 {
  font-size: 14px;
  font-weight: 700;
}

.kb441 {
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
}

.kb442 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  height: 32px;
  font-size: 12.5px;
}

.kb443 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  align-items: center;
  text-align: center;
  border-style: dashed;
  border-color: var(--w10,rgba(255,255,255,.16));
}

.kb444 {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--w05,rgba(255,255,255,.06));
  color: var(--t-a7abb8,#a7abb8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb445 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kb446 {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 18%, transparent);
  color: oklch(0.72 0.14 35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 900;
}

.kb447 {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 18%, transparent);
  color: oklch(0.8 0.14 155);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.kb448 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  opacity: .5;
  cursor: not-allowed;
  position: relative;
}

.kb449 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kb450 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  cursor: not-allowed;
}

.kb451 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  gap: 28px;
  align-items: start;
}

.kb452 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--t-eef0f5,#eef0f5);
  min-height: 330px;
  transform: translateY(-6px);
}

.kb453 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--t-eef0f5,#eef0f5);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  color: var(--t-eef0f5,#eef0f5);
}

.kb454 {
  padding: 2px 6px;
  background: var(--t-eef0f5,#eef0f5);
  color: var(--b-1b1f2a,#0b0c11);
}

.kb455 {
  margin-left: auto;
  opacity: .6;
}

.kb456 {
  position: relative;
  display: block;
  align-self: flex-start;
}

.kb457 {
  display: block;
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .78;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--t-eef0f5,#eef0f5);
}

.kb458 {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .78;
  color: var(--t-eef0f5,#eef0f5);
  clip-path: inset(0 46% 0 0);
}

.kb459 {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 3px solid var(--t-eef0f5,#eef0f5);
  font-size: 14px;
  font-weight: 800;
}

.kb460 {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.kb461 {
  margin-left: auto;
  font-size: 24px;
  transform: translateX(6px);
}

.kb462 {
  position: absolute;
  right: 18px;
  bottom: 52px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.6));
}

.kb463 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 330px;
  padding: 14px;
  background: #eef0f5;
  color: #11131a;
  box-shadow: 12px 12px 0 #9adbe6;
}

.kb464 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 8px;
  border-bottom: 1px solid #11131a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #11131a;
}

.kb465 {
  padding: 2px 6px;
  background: #11131a;
  color: #eef0f5;
}

.kb466 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.kb467 {
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .78;
  color: #11131a;
}

.kb468 {
  font-size: 13px;
  font-weight: 700;
  padding-bottom: 8px;
}

.kb469 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.kb470 {
  font-size: 12.5px;
  font-style: italic;
  color: #4b5263;
}

.kb471 {
  position: absolute;
  right: 12px;
  top: 44px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-12deg);
}

.kb472 {
  font-size: 22px;
  font-weight: 900;
}

.kb473 {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .14em;
}

.kb474 {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 3px solid #11131a;
  font-size: 14px;
  font-weight: 800;
}

.kb475 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #4b5263;
}

.kb476 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--t-eef0f5,#eef0f5);
  min-height: 330px;
}

.kb477 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 8px;
  border-bottom: 1px solid oklch(0.8 0.13 70);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  color: oklch(0.8 0.13 70);
}

.kb478 {
  padding: 2px 6px;
  background: oklch(0.8 0.13 70);
  color: var(--b-1b1f2a,#0b0c11);
}

.kb479 {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.kb480 {
  height: 76px;
  width: 38%;
  background: linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.05) 75%);
  background-size: 200% 100%;
  animation: soShim 1.3s linear infinite;
}

.kb481 {
  height: 52px;
  width: 22%;
  background: linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.05) 75%);
  background-size: 200% 100%;
  animation: soShim 1.3s linear infinite;
}

.kb482 {
  height: 14px;
  background: linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.05) 75%);
  background-size: 200% 100%;
  animation: soShim 1.3s linear infinite;
}

.kb483 {
  height: 14px;
  width: 82%;
  background: linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.05) 75%);
  background-size: 200% 100%;
  animation: soShim 1.3s linear infinite;
}

.kb484 {
  height: 14px;
  width: 56%;
  background: linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.05) 75%);
  background-size: 200% 100%;
  animation: soShim 1.3s linear infinite;
}

.kb485 {
  display: flex;
  height: 6px;
  gap: 3px;
}

.kb486 {
  flex: 1;
  background: oklch(0.8 0.13 70);
}

.kb487 {
  flex: 1;
  background: var(--w07,rgba(255,255,255,.08));
}

.kb488 {
  font-size: 11px;
  color: oklch(0.8 0.13 70);
  font-family: ui-monospace,Menlo,monospace;
}

.kb489 {
  position: relative;
  height: 110px;
}

.kb490 {
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .78;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.5));
}

.kb491 {
  position: absolute;
  left: 96px;
  top: 4px;
  width: 120px;
  height: 80px;
  border: 1.5px dashed var(--w14,rgba(238,240,245,.5));
  transform: rotate(6deg);
}

.kb492 {
  position: absolute;
  left: 150px;
  top: 30px;
  font-size: 12px;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
  transform: rotate(6deg);
}

.kb493 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.kb494 {
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.kb495 {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 3px solid var(--t-eef0f5,#eef0f5);
  border-bottom: 3px solid var(--t-eef0f5,#eef0f5);
  font-size: 14px;
  font-weight: 800;
}

.kb496 {
  margin-left: auto;
  font-size: 24px;
}

.kb497 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 8px;
  border-bottom: 1px solid oklch(0.72 0.14 35);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  color: oklch(0.72 0.14 35);
}

.kb498 {
  padding: 2px 6px;
  background: oklch(0.72 0.14 35);
  color: var(--b-1b1f2a,#0b0c11);
}

.kb499 {
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .78;
  color: oklch(0.72 0.14 35);
}

.kb500 {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  background: var(--b-151821,#0b0c11);
  transform: rotate(-6deg);
}

.kb501 {
  color: oklch(0.72 0.14 35);
  font-style: normal;
}

.kb502 {
  height: 3px;
  background: var(--w07,rgba(255,255,255,.08));
}

.kb503 {
  display: block;
  width: 20%;
  height: 100%;
  background: oklch(0.72 0.14 35);
}

.kb504 {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 3px solid oklch(0.72 0.14 35);
  font-size: 14px;
  font-weight: 800;
}

.kb505 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
  text-decoration: underline;
}

.kb506 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--t-eef0f5,#eef0f5);
  min-height: 330px;
  opacity: .45;
}

.kb507 {
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .78;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.6));
}

.kb508 {
  position: absolute;
  left: -4px;
  right: -4px;
  top: 46%;
  height: 2px;
  background: var(--t-eef0f5,#eef0f5);
}

.kb509 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.kb510 {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 4px 8px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.kb511 {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 3px dotted var(--t-eef0f5,#eef0f5);
  font-size: 14px;
  font-weight: 800;
}

.kb512 {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kb513 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kb514 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kb515 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.8 0.14 155);
}

.kb516 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kb517 {
  color: oklch(0.8 0.14 155);
  font-weight: 900;
}

.kb518 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kb519 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.72 0.14 35);
}

.kb520 {
  color: oklch(0.72 0.14 35);
  font-weight: 900;
}

.kbh1:hover {
  background: rgba(255,255,255,.05);
}

.kbh2:hover {
  background: rgba(255,255,255,.04);
}

.kbh3:hover {
  transform: translateY(-3px);
  border-color: rgba(154,219,230,.55);
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
}

/* ==========================================================================
   22zz62. Cards · Advanced: classes generated from the handoff by
   _dev/cards_advanced_convert.py (kx1 … and kxf1 focus). The page reuses
   the .cb-page tokens and .cb-ph image slots of Cards · Basic.
   ========================================================================== */
/* Kanban cards: a long press starts a touch drag, not a text selection. */
.cx-page [draggable="true"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Section grids fill the full width: auto-fit folds the empty tracks that
   auto-fill keeps on wide screens, so two or three cards share the row. */
.cx-page .kx20 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.cx-page .kx62 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.cx-page .kx159 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }

/* The tilted MOVING tag hangs 10px past its card; on phones keep it on screen. */
@media (max-width: 600px) {
  .cx-page .kx352 { right: -2px; }
}

/* -- generated: start -- */
.kx1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kx2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kx3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kx4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kx5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kx6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.kx10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.kx11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kx12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.kx13 {
  font-size: 11.5px;
  opacity: .65;
}

.kx14 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.kx15 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kx16 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kx17 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kx18 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kx19 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx20 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap: 18px;
  align-items: start;
}

.kx21 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kx22 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.kx23 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kx24 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kx25 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kx26 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
}

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

.kx28 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kx29 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 16%, transparent);
  color: oklch(0.8 0.14 155);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.kx30 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.kx31 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx32 {
  position: relative;
  height: 70px;
}

.kx33 {
  display: block;
}

.kx34 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--w14,rgba(255,255,255,.25));
}

.kx35 {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.25);
}

.kx36 {
  position: absolute;
  inset: 0;
  display: flex;
}

.kx37 {
  flex: 1;
  height: 100%;
}

.kx38 {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx39 {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--w04,rgba(255,255,255,.05));
  flex-shrink: 0;
}

.kx40 {
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kx41 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kx42 {
  position: relative;
  width: 112px;
  height: 112px;
  flex-shrink: 0;
}

.kx43 {
  transform: rotate(-90deg);
}

.kx44 {
  transition: stroke-dashoffset .6s,stroke .3s;
}

.kx45 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.kx46 {
  font-size: 24px;
  font-weight: 800;
}

.kx47 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-top: 4px;
}

.kx48 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kx49 {
  font-size: 20px;
  font-weight: 800;
}

.kx50 {
  font-size: 12.5px;
  font-weight: 700;
}

.kx51 {
  font-size: 12px;
  color: var(--t-a7abb8,#a7abb8);
}

.kx52 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.kx53 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.kx54 {
  font-size: 13px;
  font-weight: 800;
}

.kx55 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kx56 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kx57 {
  display: flex;
  font-size: 12px;
  font-weight: 700;
}

.kx58 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx59 {
  margin-left: auto;
}

.kx60 {
  height: 12px;
  border-radius: 999px;
  background: var(--w05,rgba(255,255,255,.06));
  overflow: hidden;
}

.kx61 {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .5s;
}

.kx62 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(320px,100%),1fr));
  gap: 28px;
  align-items: start;
}

.kx63 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #6b7080;
}

.kx64 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--t-eef0f5,#eef0f5);
}

.kx65 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--t-eef0f5,#eef0f5);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
}

.kx66 {
  padding: 2px 6px;
  background: var(--t-eef0f5,#eef0f5);
  color: var(--b-1b1f2a,#0b0c11);
}

.kx67 {
  margin-left: auto;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx68 {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.kx69 {
  font-size: 22px;
  font-weight: 700;
  padding-bottom: 14px;
}

.kx70 {
  font-size: 120px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .74;
}

.kx71 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 6px;
}

.kx72 {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.kx73 {
  padding: 3px 7px;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  align-self: flex-start;
}

.kx74 {
  position: absolute;
  right: 0;
  top: -2px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #eef0f5;
  color: #11131a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-10deg);
  pointer-events: none;
}

.kx75 {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kx76 {
  font-size: 18px;
  font-weight: 800;
}

.kx77 {
  padding-bottom: 10px;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
  font-size: 13px;
  font-style: italic;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kx78 {
  position: relative;
  height: 120px;
  margin-top: 4px;
}

.kx79 {
  position: absolute;
  left: 65.5%;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--t-eef0f5,#eef0f5);
}

.kx80 {
  position: absolute;
  left: 65.5%;
  top: 41px;
  width: 14px;
  height: 14px;
  margin: -7px;
  background: var(--t-eef0f5,#eef0f5);
  border: 3px solid var(--b-1b1f2a,#0b0c11);
  outline: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.kx81 {
  position: absolute;
  left: calc(65.5% + 12px);
  top: 4px;
  display: flex;
  flex-direction: column;
  padding: 6px 9px;
  background: #eef0f5;
  color: #11131a;
  line-height: 1.1;
}

.kx82 {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.kx83 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.kx84 {
  font-size: 9.5px;
  font-weight: 800;
  color: #2f8a55;
}

.kx85 {
  position: absolute;
  right: 0;
  top: 49px;
  font-size: 9.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.kx86 {
  position: absolute;
  right: -4px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
}

.kx87 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--t-8a8f9e,#8a8f9e);
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
  padding-top: 6px;
}

.kx88 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--t-eef0f5,#eef0f5);
}

.kx89 {
  padding-left: 8px;
  border-left: 1px solid var(--w07,rgba(255,255,255,.1));
}

.kx90 {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.kx91 {
  position: relative;
  width: 200px;
  height: 200px;
}

.kx92 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: .85;
}

.kx93 {
  font-size: 68px;
  font-weight: 800;
  letter-spacing: -.07em;
}

.kx94 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-top: 8px;
}

.kx95 {
  position: absolute;
  right: -6px;
  top: 6px;
  padding: 3px 7px;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kx96 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.kx97 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.04em;
}

.kx98 {
  font-size: 13px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.kx99 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.kx100 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kx101 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: oklch(0.8 0.14 155);
}

.kx102 {
  font-size: 9px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx103 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 10px;
  border-left: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kx104 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--t-eef0f5,#eef0f5);
}

.kx105 {
  display: flex;
  gap: 14px;
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.kx106 {
  color: oklch(0.8 0.13 70);
}

.kx107 {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 6px;
}

.kx108 {
  font-size: 120px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .74;
  color: oklch(0.8 0.14 155);
}

.kx109 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
}

.kx110 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px oklch(0.8 0.14 155);
}

.kx111 {
  font-size: 12px;
  font-weight: 800;
}

.kx112 {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--t-eef0f5,#eef0f5);
}

.kx113 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 4px;
  height: 100%;
}

.kx114 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #6b7080;
  white-space: nowrap;
}

.kx115 {
  height: 77px;
  background: var(--w07,rgba(238,240,245,.12));
}

.kx116 {
  height: 105px;
  background: var(--w07,rgba(238,240,245,.12));
}

.kx117 {
  height: 88px;
  background: var(--w07,rgba(238,240,245,.12));
}

.kx118 {
  height: 82px;
  background: var(--w07,rgba(238,240,245,.12));
}

.kx119 {
  flex: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 4px;
  height: 100%;
}

.kx120 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--t-c9ccd6,#c9ccd6);
  white-space: nowrap;
}

.kx121 {
  height: 98px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  border-bottom: none;
}

.kx122 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--t-eef0f5,#eef0f5);
  white-space: nowrap;
}

.kx123 {
  height: 110px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx124 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 109px;
  border-top: 1px dashed rgba(201,169,106,.7);
}

.kx125 {
  position: absolute;
  left: 0;
  bottom: 113px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #c9a96a;
}

.kx126 {
  display: flex;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #6b7080;
}

.kx127 {
  flex: 1;
  color: #6b7080;
}

.kx128 {
  flex: 1.6;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kx129 {
  flex: 1.6;
  color: var(--t-eef0f5,#eef0f5);
}

.kx130 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  padding-top: 10px;
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kx131 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kx132 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.kx133 {
  color: oklch(0.8 0.14 155);
}

.kx134 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kx135 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.kx136 {
  font-size: 12.5px;
  font-weight: 800;
  color: oklch(0.8 0.14 155);
}

.kx137 {
  position: relative;
  height: 140px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-top: 28px;
}

.kx138 {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  cursor: default;
}

.kx139 {
  width: 100%;
  border-radius: 7px 7px 3px 3px;
  transition: height .4s,background .2s;
}

.kx140 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-size: 11px;
  font-weight: 800;
  align-items: center;
  white-space: nowrap;
}

.kx141 {
  display: flex;
  gap: 6px;
}

.kx142 {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx143 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.kx144 {
  position: relative;
  width: 132px;
  height: 132px;
  flex-shrink: 0;
}

.kx145 {
  cursor: pointer;
  transition: opacity .2s;
}

.kx146 {
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: var(--b-151821,#151821);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  pointer-events: none;
}

.kx147 {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: center;
  max-width: 70px;
}

.kx148 {
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kx149 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 9px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}

.kx150 {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}

.kx151 {
  flex: 1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kx152 {
  font-weight: 800;
}

.kx153 {
  font-size: 13px;
  font-weight: 700;
  min-height: 18px;
}

.kx154 {
  display: grid;
  grid-template-columns: 52px repeat(7,minmax(0,1fr));
  gap: 4px;
  align-items: center;
}

.kx155 {
  text-align: center;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx156 {
  border-radius: 6px;
  outline-offset: 1px;
  font-size: 11px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kx157 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx158 {
  width: 18px;
  height: 8px;
  border-radius: 2px;
}

.kx159 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(330px,100%),1fr));
  gap: 28px;
  align-items: start;
}

.kx160 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kx161 {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: #6b7080;
  padding-bottom: 6px;
  margin-bottom: -9px;
  border-bottom: none;
}

.kx162 {
  font-size: 20px;
  font-weight: 800;
  font-style: normal;
  color: var(--t-eef0f5,#eef0f5);
  padding-bottom: 6px;
  margin-bottom: -9px;
  border-bottom: 3px solid var(--t-eef0f5,#eef0f5);
}

.kx163 {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.kx164 {
  font-size: 22px;
  font-weight: 700;
  padding-bottom: 12px;
}

.kx165 {
  font-size: 110px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .74;
}

.kx166 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 4px;
}

.kx167 {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.kx168 {
  padding: 3px 7px;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  align-self: flex-start;
}

.kx169 {
  position: absolute;
  right: 0;
  top: 0;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #eef0f5;
  color: #11131a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-10deg);
  pointer-events: none;
}

.kx170 {
  font-size: 8.5px;
  font-weight: 900;
}

.kx171 {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 170px;
  padding-top: 46px;
  border-bottom: 2px solid var(--t-eef0f5,#eef0f5);
}

.kx172 {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.kx173 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 43%;
  border-top: 2px dashed var(--w14,rgba(238,240,245,.4));
}

.kx174 {
  position: relative;
  width: 100%;
  height: 50%;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.55)) 0 1.5px,transparent 1.5px 6px);
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  border-bottom: none;
}

.kx175 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(50% + 4px);
  font-size: 10px;
  font-weight: 900;
  color: oklch(0.8 0.14 155);
  font-family: ui-monospace,Menlo,monospace;
}

.kx176 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 57%;
  border-top: 2px dashed var(--w14,rgba(238,240,245,.4));
}

.kx177 {
  position: relative;
  width: 100%;
  height: 69%;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.55)) 0 1.5px,transparent 1.5px 6px);
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  border-bottom: none;
}

.kx178 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(69% + 4px);
  font-size: 10px;
  font-weight: 900;
  color: oklch(0.8 0.14 155);
  font-family: ui-monospace,Menlo,monospace;
}

.kx179 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 62%;
  border-top: 2px dashed var(--w14,rgba(238,240,245,.4));
}

.kx180 {
  position: relative;
  width: 100%;
  height: 57%;
  border: 1.5px solid var(--w14,rgba(238,240,245,.45));
  border-bottom: none;
}

.kx181 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(57% + 4px);
  font-size: 10px;
  font-weight: 900;
  color: oklch(0.72 0.14 35);
  font-family: ui-monospace,Menlo,monospace;
}

.kx182 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 71%;
  border-top: 2px dashed var(--w14,rgba(238,240,245,.4));
}

.kx183 {
  position: relative;
  width: 100%;
  height: 86%;
  background: var(--t-eef0f5,#eef0f5);
}

.kx184 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(86% + 4px);
  font-size: 0px;
  font-weight: 900;
  color: oklch(0.8 0.14 155);
  font-family: ui-monospace,Menlo,monospace;
}

.kx185 {
  position: absolute;
  left: 50%;
  bottom: calc(86% + 10px);
  transform: translateX(-50%);
  padding: 6px 9px;
  background: #eef0f5;
  color: #11131a;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  box-shadow: 6px 6px 0 #9adbe6;
}

.kx186 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.kx187 {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--t-eef0f5,#eef0f5);
  pointer-events: none;
}

.kx188 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64%;
  border-top: 2px dashed var(--w14,rgba(238,240,245,.4));
}

.kx189 {
  position: relative;
  width: 100%;
  height: 74%;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.55)) 0 1.5px,transparent 1.5px 6px);
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  border-bottom: none;
}

.kx190 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(74% + 4px);
  font-size: 10px;
  font-weight: 900;
  color: oklch(0.8 0.14 155);
  font-family: ui-monospace,Menlo,monospace;
}

.kx191 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 79%;
  border-top: 2px dashed var(--w14,rgba(238,240,245,.4));
}

.kx192 {
  position: relative;
  width: 100%;
  height: 93%;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.55)) 0 1.5px,transparent 1.5px 6px);
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  border-bottom: none;
}

.kx193 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(93% + 4px);
  font-size: 10px;
  font-weight: 900;
  color: oklch(0.8 0.14 155);
  font-family: ui-monospace,Menlo,monospace;
}

.kx194 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 29%;
  border-top: 2px dashed var(--w14,rgba(238,240,245,.4));
}

.kx195 {
  position: relative;
  width: 100%;
  height: 20%;
  border: 1.5px solid var(--w14,rgba(238,240,245,.45));
  border-bottom: none;
}

.kx196 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(20% + 4px);
  font-size: 10px;
  font-weight: 900;
  color: oklch(0.72 0.14 35);
  font-family: ui-monospace,Menlo,monospace;
}

.kx197 {
  display: flex;
  gap: 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kx198 {
  flex: 1;
  text-align: center;
  color: #6b7080;
}

.kx199 {
  flex: 1;
  text-align: center;
  color: var(--t-eef0f5,#eef0f5);
}

.kx200 {
  font-size: 10px;
  color: #6b7080;
  font-family: ui-monospace,Menlo,monospace;
}

.kx201 {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 4px;
  padding-bottom: 46px;
}

.kx202 {
  overflow: visible;
}

.kx203 {
  position: absolute;
  left: 50%;
  top: 110px;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .85;
  pointer-events: none;
}

.kx204 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -.07em;
}

.kx205 {
  font-size: 22px;
}

.kx206 {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-top: 6px;
}

.kx207 {
  position: absolute;
  left: calc(50% - 46px);
  top: 216px;
  padding: 5px 8px;
  background: #eef0f5;
  color: #11131a;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  box-shadow: 5px 5px 0 #9adbe6;
  pointer-events: none;
}

.kx208 {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kx209 {
  font-size: 16px;
  font-weight: 800;
}

.kx210 {
  display: flex;
  flex-direction: column;
}

.kx211 {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
}

.kx212 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.45));
}

.kx213 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.kx214 {
  font-size: 14.5px;
  font-weight: 600;
}

.kx215 {
  font-size: 11px;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx216 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.kx217 {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  background: #eef0f5;
  color: #11131a;
  margin: 2px 0;
}

.kx218 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
}

.kx219 {
  font-size: 14.5px;
  font-weight: 800;
}

.kx220 {
  font-size: 11px;
  font-style: italic;
  color: #4b5263;
}

.kx221 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.kx222 {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.kx223 {
  font-size: 110px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .74;
  color: oklch(0.72 0.14 35);
}

.kx224 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 4px;
}

.kx225 {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px oklch(0.72 0.14 35);
}

.kx226 {
  padding: 3px 7px;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  align-self: flex-start;
}

.kx227 {
  position: absolute;
  right: 0;
  bottom: 2px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kx228 {
  font-size: 16px;
  font-weight: 700;
}

.kx229 {
  font-size: 11.5px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.kx230 {
  display: grid;
  grid-template-columns: 62px repeat(7,minmax(0,1fr)) 34px;
  gap: 3px;
  align-items: center;
}

.kx231 {
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  color: #6b7080;
}

.kx232 {
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  color: var(--t-eef0f5,#eef0f5);
}

.kx233 {
  text-align: right;
  font-size: 9.5px;
  font-weight: 900;
  color: #6b7080;
}

.kx234 {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.kx235 {
  font-size: 13px;
  font-weight: 700;
}

.kx236 {
  font-size: 9.5px;
  font-style: italic;
  color: #6b7080;
}

.kx237 {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--w14,rgba(238,240,245,.7));
  color: #11131a;
}

.kx238 {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: repeating-linear-gradient(135deg,var(--w10,rgba(238,240,245,.35)) 0 1.5px,transparent 1.5px 6px);
  border: 1px solid var(--w14,rgba(238,240,245,.5));
}

.kx239 {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #3a3f4d;
  background: transparent;
}

.kx240 {
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  color: var(--t-eef0f5,#eef0f5);
  font-family: ui-monospace,Menlo,monospace;
}

.kx241 {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: #eef0f5;
  color: #11131a;
}

.kx242 {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--w10,rgba(238,240,245,.22));
  color: var(--t-a7abb8,#a7abb8);
}

.kx243 {
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  color: oklch(0.72 0.14 35);
  font-family: ui-monospace,Menlo,monospace;
}

.kx244 {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: #eef0f5;
  color: #11131a;
  outline: 3px solid oklch(0.72 0.14 35);
  outline-offset: 1px;
  z-index: 1;
}

.kx245 {
  position: absolute;
  right: -8px;
  top: -10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx246 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #6b7080;
  padding-top: 4px;
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kx247 {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  padding-top: 4px;
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-a7abb8,#a7abb8);
  font-family: ui-monospace,Menlo,monospace;
}

.kx248 {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  padding-top: 4px;
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
  color: oklch(0.72 0.14 35);
  font-family: ui-monospace,Menlo,monospace;
}

.kx249 {
  text-align: right;
  font-size: 11px;
  font-weight: 900;
  padding-top: 4px;
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
  font-family: ui-monospace,Menlo,monospace;
}

.kx250 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.kx251 {
  width: 14px;
  height: 10px;
  border: 1px solid var(--w10,rgba(238,240,245,.3));
}

.kx252 {
  width: 14px;
  height: 10px;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.4)) 0 1.5px,transparent 1.5px 5px);
  border: 1px solid var(--w14,rgba(238,240,245,.5));
}

.kx253 {
  width: 14px;
  height: 10px;
  background: var(--w14,rgba(238,240,245,.7));
}

.kx254 {
  width: 14px;
  height: 10px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx255 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.kx256 {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg,var(--w05,rgba(255,255,255,.05)),var(--w02,rgba(255,255,255,.02)));
}

.kx257 {
  position: absolute;
  inset: 0;
}

.kx258 {
  position: absolute;
  left: 12px;
  top: 12px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(17,19,26,.78);
  color: #eef0f5;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.kx259 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.kx260 {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(17,19,26,.78);
  font-size: 16px;
  cursor: pointer;
}

.kx261 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kx262 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kx263 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx264 {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kx265 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx266 {
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kx267 {
  display: block;
  width: 69%;
  height: 100%;
  background: #9adbe6;
  border-radius: 999px;
}

.kx268 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kx269 {
  display: flex;
}

.kx270 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx271 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 16%, transparent);
  color: oklch(0.72 0.14 35);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.kx272 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
}

.kx273 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  gap: 8px;
}

.kx274 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px dashed var(--w14,rgba(255,255,255,.25));
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}

.kx275 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.035));
  cursor: grab;
  transition: border-color .15s;
}

.kx276 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kx277 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.kx278 {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
}

.kx279 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx280 {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.kx281 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx282 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #11131a;
  font-size: 8px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx283 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
}

.kx284 {
  position: relative;
  display: flex;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--w03,rgba(255,255,255,.03));
}

.kx285 {
  border: none;
  border-right: 1px solid var(--b-151821,#151821);
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  padding: 0 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kx286 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e2412f;
  pointer-events: none;
}

.kx287 {
  color: #e2412f;
  font-weight: 800;
}

.kx288 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.kx289 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kx290 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kx291 {
  font-size: 14px;
  font-weight: 700;
}

.kx292 {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx293 {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.kx294 {
  position: relative;
}

.kx295 {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg,#232838,#151821);
  aspect-ratio: 16/11;
}

.kx296 {
  position: absolute;
  left: 10px;
  top: 12px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .24em;
  color: #fff;
  pointer-events: none;
}

.kx297 {
  position: absolute;
  left: -4px;
  bottom: -30px;
  display: flex;
  flex-direction: column;
  line-height: .78;
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
}

.kx298 {
  font-size: 88px;
  font-weight: 800;
  letter-spacing: -.08em;
}

.kx299 {
  font-size: 88px;
  font-weight: 800;
  letter-spacing: -.08em;
  color: transparent;
  -webkit-text-stroke: 1.5px #fff;
}

.kx300 {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #eef0f5;
  color: #11131a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-10deg);
  box-shadow: 0 10px 20px rgba(0,0,0,.4);
  pointer-events: none;
}

.kx301 {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 7px;
  background: oklch(0.78 0.11 300);
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .14em;
  pointer-events: none;
}

.kx302 {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 36px;
  padding-bottom: 10px;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.kx303 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx304 {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -.02em;
}

.kx305 {
  margin-left: auto;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .78;
}

.kx306 {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.kx307 {
  font-size: 13px;
  font-style: italic;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kx308 {
  display: grid;
  grid-template-columns: repeat(26,1fr);
  gap: 2px;
  height: 22px;
}

.kx309 {
  background: var(--t-eef0f5,#eef0f5);
}

.kx310 {
  background: oklch(0.72 0.14 35);
}

.kx311 {
  border: 1px solid var(--w10,rgba(238,240,245,.3));
}

.kx312 {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx313 {
  color: oklch(0.72 0.14 35);
}

.kx314 {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kx315 {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
}

.kx316 {
  font-size: 13px;
  font-weight: 900;
  color: oklch(0.72 0.14 35);
}

.kx317 {
  font-size: 13.5px;
  font-weight: 700;
}

.kx318 {
  font-weight: 400;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx319 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  color: oklch(0.72 0.14 35);
}

.kx320 {
  width: 30px;
  height: 30px;
  background: oklch(0.82 0.08 80);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx321 {
  width: 30px;
  height: 30px;
  background: oklch(0.82 0.08 30);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx322 {
  width: 30px;
  height: 30px;
  background: oklch(0.82 0.08 330);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx323 {
  width: 30px;
  height: 30px;
  background: oklch(0.82 0.08 250);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx324 {
  width: 30px;
  height: 30px;
  background: oklch(0.82 0.08 300);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx325 {
  font-size: 11px;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-left: 6px;
}

.kx326 {
  display: flex;
  align-items: center;
  border-top: 2px solid var(--t-eef0f5,#eef0f5);
  border-bottom: 2px solid var(--t-eef0f5,#eef0f5);
}

.kx327 {
  flex: 1;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 800;
}

.kx328 {
  font-size: 20px;
}

.kx329 {
  padding: 11px 0 11px 14px;
  border-left: 1px solid var(--w14,rgba(255,255,255,.2));
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--t-a7abb8,#a7abb8);
}

.kx330 {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.kx331 {
  display: flex;
  gap: 3px;
}

.kx332 {
  width: 14px;
  height: 14px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx333 {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--w14,rgba(238,240,245,.5));
}

.kx334 {
  font-size: 12.5px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.kx335 {
  display: flex;
  gap: 14px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #6b7080;
}

.kx336 {
  color: var(--t-eef0f5,#eef0f5);
  border-bottom: 2px solid var(--t-eef0f5,#eef0f5);
  padding-bottom: 3px;
}

.kx337 {
  position: relative;
  display: grid;
  grid-template-columns: 22px 40px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
}

.kx338 {
  font-size: 15px;
  letter-spacing: -3px;
  color: #6b7080;
}

.kx339 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.45));
}

.kx340 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kx341 {
  display: flex;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .16em;
}

.kx342 {
  color: oklch(0.78 0.11 300);
}

.kx343 {
  color: #6b7080;
}

.kx344 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.kx345 {
  font-size: 11.5px;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx346 {
  position: relative;
  display: grid;
  grid-template-columns: 22px 40px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 12px;
  background: #eef0f5;
  color: #11131a;
  border: 1px solid var(--w14,rgba(255,255,255,.2));
  transform: rotate(-1.6deg) translateX(10px);
  box-shadow: 10px 10px 0 #9adbe6;
  z-index: 2;
}

.kx347 {
  font-size: 15px;
  letter-spacing: -3px;
  color: #4b5263;
}

.kx348 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: #11131a;
}

.kx349 {
  color: #4b5263;
}

.kx350 {
  color: #b2482c;
}

.kx351 {
  font-size: 11.5px;
  font-style: italic;
  color: #4b5263;
}

.kx352 {
  position: absolute;
  right: -10px;
  top: -12px;
  padding: 3px 7px;
  background: #11131a;
  color: #9adbe6;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.kx353 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
}

.kx354 {
  width: 10px;
  height: 10px;
  border: 2px solid #9adbe6;
  border-radius: 50%;
}

.kx355 {
  flex: 1;
  height: 3px;
  background: #9adbe6;
}

.kx356 {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #9adbe6;
}

.kx357 {
  flex: 1;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 800;
}

.kx358 {
  padding: 3px 7px;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  align-self: flex-start;
}

.kx359 {
  position: relative;
  padding-top: 40px;
}

.kx360 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30px;
}

.kx361 {
  position: absolute;
  left: 0.0%;
  top: 0px;
  white-space: nowrap;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-eef0f5,#eef0f5);
}

.kx362 {
  position: absolute;
  left: 43.8%;
  top: 16px;
  white-space: nowrap;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-eef0f5,#eef0f5);
}

.kx363 {
  position: absolute;
  left: 53.1%;
  top: 0px;
  white-space: nowrap;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-eef0f5,#eef0f5);
}

.kx364 {
  position: absolute;
  right: 0;
  top: 16px;
  white-space: nowrap;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #6b7080;
}

.kx365 {
  position: relative;
  display: flex;
  height: 48px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.kx366 {
  width: 43.8%;
  background: var(--t-eef0f5,#eef0f5);
  color: var(--b-151821,#11131a);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
}

.kx367 {
  width: 9.4%;
  background: var(--t-eef0f5,#eef0f5);
  color: var(--b-151821,#11131a);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
}

.kx368 {
  width: 37.5%;
  background: linear-gradient(90deg,var(--t-eef0f5,#eef0f5) 0 33%,transparent 33%),repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.45)) 0 1.5px,transparent 1.5px 6px);
  color: var(--b-151821,#11131a);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
}

.kx369 {
  width: 9.4%;
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
}

.kx370 {
  position: absolute;
  left: 65.6%;
  top: -14px;
  bottom: -14px;
  width: 3px;
  background: #e2412f;
}

.kx371 {
  position: relative;
  height: 22px;
}

.kx372 {
  position: absolute;
  left: 0.0%;
  top: 4px;
  font-size: 9.5px;
  color: #6b7080;
  font-weight: 600;
  font-family: ui-monospace,Menlo,monospace;
}

.kx373 {
  position: absolute;
  left: 21.9%;
  top: 4px;
  font-size: 9.5px;
  color: #6b7080;
  font-weight: 600;
  font-family: ui-monospace,Menlo,monospace;
}

.kx374 {
  position: absolute;
  left: 43.8%;
  top: 4px;
  font-size: 9.5px;
  color: #6b7080;
  font-weight: 600;
  font-family: ui-monospace,Menlo,monospace;
}

.kx375 {
  position: absolute;
  left: calc(65.6% + 7px);
  top: 4px;
  font-size: 9.5px;
  color: #e2412f;
  font-weight: 900;
  font-family: ui-monospace,Menlo,monospace;
}

.kx376 {
  position: absolute;
  left: 87.5%;
  top: 4px;
  font-size: 9.5px;
  color: #6b7080;
  font-weight: 600;
  font-family: ui-monospace,Menlo,monospace;
}

.kx377 {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  opacity: 0.5;
}

.kx378 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: oklch(0.8 0.14 155);
}

.kx379 {
  font-size: 15px;
  font-weight: 600;
  text-decoration: line-through;
}

.kx380 {
  width: 22px;
  height: 22px;
  background: oklch(0.82 0.08 80);
  color: #11131a;
  font-size: 7px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx381 {
  width: 22px;
  height: 22px;
  background: oklch(0.82 0.08 300);
  color: #11131a;
  font-size: 7px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx382 {
  width: 22px;
  height: 22px;
  background: oklch(0.82 0.08 30);
  color: #11131a;
  font-size: 7px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx383 {
  width: 22px;
  height: 22px;
  background: oklch(0.82 0.08 120);
  color: #11131a;
  font-size: 7px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx384 {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: #eef0f5;
  color: #11131a;
  box-shadow: 8px 8px 0 oklch(0.78 0.11 300);
  opacity: 1;
}

.kx385 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
}

.kx386 {
  font-size: 15px;
  font-weight: 800;
}

.kx387 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.kx388 {
  flex: 1;
  height: 4px;
  background: rgba(17,19,26,.15);
}

.kx389 {
  display: block;
  width: 33%;
  height: 100%;
  background: #11131a;
}

.kx390 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kx391 {
  width: 22px;
  height: 22px;
  background: oklch(0.82 0.08 330);
  color: #11131a;
  font-size: 7px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx392 {
  width: 22px;
  height: 22px;
  background: oklch(0.82 0.08 250);
  color: #11131a;
  font-size: 7px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx393 {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  opacity: 1;
}

.kx394 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.5));
}

.kx395 {
  font-size: 15px;
  font-weight: 600;
}

.kx396 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12.5px;
  font-weight: 700;
}

.kx397 {
  margin-left: auto;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 16%, transparent);
  color: oklch(0.72 0.14 35);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 5px;
}

.kx398 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.kx399 {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx400 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.kx401 {
  display: flex;
  font-size: 11.5px;
  font-weight: 700;
}

.kx402 {
  margin-left: auto;
  color: oklch(0.72 0.14 35);
}

.kx403 {
  height: 6px;
  border-radius: 999px;
  background: repeating-linear-gradient(135deg,color-mix(in oklab, oklch(0.72 0.14 35) 35%, transparent) 0 5px,transparent 5px 10px);
}

.kx404 {
  font-size: 12px;
  color: var(--t-a7abb8,#a7abb8);
  min-height: 16px;
}

.kx405 {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kx406 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
}

.kx407 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  flex: 1;
}

.kx408 {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--w05,rgba(255,255,255,.06));
}

.kx409 {
  border-right: 2px solid var(--b-151821,#151821);
  transition: background .3s;
}

.kx410 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  background: var(--w02,rgba(255,255,255,.02));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.kx411 {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx412 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kx413 {
  font-size: 11.5px;
}

.kx414 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.kx415 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.kx416 {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(154,219,230,.22),transparent 70%);
  pointer-events: none;
}

.kx417 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kx418 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 16%, transparent);
  color: #9adbe6;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.kx419 {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.kx420 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.kx421 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kx422 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx423 {
  display: flex;
  align-items: center;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kx424 {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}

.kx425 {
  min-width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
}

.kx426 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kx427 {
  display: block;
  width: 81%;
  height: 100%;
  background: oklch(0.8 0.13 70);
  border-radius: 999px;
}

.kx428 {
  position: relative;
  font-size: 12px;
  color: var(--t-a7abb8,#a7abb8);
}

.kx429 {
  position: relative;
  padding: 14px 14px 18px;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w10,transparent);
  box-shadow: 10px 10px 0 oklch(0.72 0.14 35);
  margin-right: 10px;
}

.kx430 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 8px;
  background: radial-gradient(circle at 6px -2px,transparent 6px,#eef0f5 6.5px) 6px 0/12px 8px repeat-x;
}

.kx431 {
  display: flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .16em;
}

.kx432 {
  margin-left: auto;
  font-family: ui-monospace,Menlo,monospace;
}

.kx433 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 14px;
}

.kx434 {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 10px;
}

.kx435 {
  font-size: 88px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .76;
}

.kx436 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .8;
  padding-bottom: 2px;
  color: transparent;
  -webkit-text-stroke: 1.4px #11131a;
}

.kx437 {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1.5px solid #11131a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kx438 {
  position: absolute;
  right: -14px;
  top: 46px;
  padding: 6px 12px;
  border: 3px solid #b2482c;
  border-radius: 6px;
  color: #b2482c;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .12em;
  transform: rotate(12deg);
  background: rgba(238,240,245,.85);
  line-height: 1.05;
  text-align: center;
  pointer-events: none;
}

.kx439 {
  font-size: 10px;
}

.kx440 {
  margin-top: 6px;
  font-size: 13px;
  font-style: italic;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kx441 {
  display: flex;
  flex-direction: column;
  border-top: 3px double var(--t-eef0f5,#eef0f5);
}

.kx442 {
  display: grid;
  grid-template-columns: 56px 14px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
}

.kx443 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx444 {
  width: 10px;
  height: 10px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx445 {
  font-size: 13px;
  font-weight: 600;
  color: var(--t-eef0f5,#eef0f5);
}

.kx446 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.72 0.14 35);
}

.kx447 {
  width: 10px;
  height: 10px;
  border: 2px solid oklch(0.72 0.14 35);
}

.kx448 {
  font-size: 13px;
  font-weight: 800;
  color: oklch(0.72 0.14 35);
}

.kx449 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: oklch(0.72 0.14 35);
}

.kx450 {
  flex: 1;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 800;
  color: oklch(0.72 0.14 35);
}

.kx451 {
  padding: 11px 0 11px 14px;
  border-left: 1px solid var(--w14,rgba(255,255,255,.2));
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
  white-space: nowrap;
}

.kx452 {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.kx453 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.kx454 {
  font-size: 12px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.kx455 {
  font-size: 22px;
  font-weight: 800;
}

.kx456 {
  position: relative;
  padding-top: 18px;
}

.kx457 {
  display: flex;
  height: 30px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.kx458 {
  width: 30%;
  background: var(--t-eef0f5,#eef0f5);
  color: var(--b-151821,#11131a);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

.kx459 {
  width: 40%;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.5)) 0 1.5px,transparent 1.5px 6px);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

.kx460 {
  width: 30%;
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

.kx461 {
  position: absolute;
  left: 0%;
  top: 0;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.kx462 {
  position: absolute;
  left: 30%;
  top: 0;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.kx463 {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.kx464 {
  position: absolute;
  left: 62%;
  top: 12px;
  bottom: -8px;
  width: 3px;
  background: #e2412f;
}

.kx465 {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  opacity: 1;
}

.kx466 {
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.kx467 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.kx468 {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: #eef0f5;
  color: #11131a;
  box-shadow: 8px 8px 0 oklch(0.8 0.13 70);
  opacity: 1;
}

.kx469 {
  font-size: 15.5px;
  font-weight: 800;
}

.kx470 {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  opacity: 0.55;
}

.kx471 {
  font-size: 15.5px;
  font-weight: 700;
}

.kx472 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 4px;
}

.kx473 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx474 {
  padding: 2px 6px;
  background: #9adbe6;
  color: #11131a;
  font-size: 9px;
  letter-spacing: .12em;
}

.kx475 {
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: .9;
}

.kx476 {
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.kx477 {
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .74;
}

.kx478 {
  font-size: 13px;
  font-style: italic;
  color: var(--t-c9ccd6,#c9ccd6);
  text-align: right;
}

.kx479 {
  display: flex;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

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

.kx481 {
  aspect-ratio: 1;
  background: oklch(0.82 0.08 80);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx482 {
  aspect-ratio: 1;
  background: oklch(0.82 0.08 30);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx483 {
  aspect-ratio: 1;
  background: oklch(0.82 0.08 300);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx484 {
  aspect-ratio: 1;
  background: oklch(0.82 0.08 120);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx485 {
  aspect-ratio: 1;
  background: oklch(0.82 0.08 330);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx486 {
  aspect-ratio: 1;
  background: oklch(0.82 0.08 250);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx487 {
  aspect-ratio: 1;
  border: 1.5px dashed var(--w14,rgba(238,240,245,.45));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx488 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.kx489 {
  display: flex;
  align-items: baseline;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.kx490 {
  margin-left: auto;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: oklch(0.8 0.13 70);
}

.kx491 {
  display: flex;
  height: 22px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.kx492 {
  width: 55%;
  background: var(--t-eef0f5,#eef0f5);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: center;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--b-151821,#11131a);
}

.kx493 {
  width: 20%;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.55)) 0 1.5px,transparent 1.5px 6px);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: center;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.kx494 {
  width: 6%;
  background: repeating-linear-gradient(90deg,var(--w14,rgba(238,240,245,.55)) 0 1px,transparent 1px 4px);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: center;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.kx495 {
  display: flex;
  font-size: 11px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.kx496 {
  margin-left: auto;
  color: oklch(0.8 0.13 70);
  font-style: normal;
  font-weight: 800;
}

.kx497 {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kx498 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx499 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.kx500 {
  font-size: 13px;
  line-height: 1.4;
}

.kx501 {
  color: var(--t-a7abb8,#a7abb8);
}

.kx502 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--w04,rgba(255,255,255,.05));
  align-self: flex-start;
  max-width: 100%;
}

.kx503 {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx504 {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kx505 {
  padding-left: 10px;
  border-left: 2px solid var(--w14,rgba(255,255,255,.2));
  font-size: 12.5px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.kx506 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx507 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx508 {
  margin-left: auto;
  font-size: 13px;
  color: oklch(0.8 0.13 70);
  letter-spacing: 1px;
}

.kx509 {
  font-size: 14px;
  line-height: 1.5;
}

.kx510 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kx511 {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.kx512 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: oklch(0.82 0.08 80);
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx513 {
  font-size: 12.5px;
  line-height: 1.45;
}

.kx514 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx515 {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.kx516 {
  padding: 0 13px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 38px;
}

.kx517 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.kx518 {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.kx519 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  gap: 6px;
}

.kx520 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
}

.kx521 {
  font-size: 15px;
  font-weight: 700;
}

.kx522 {
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx523 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kx524 {
  padding: 8px 2px 2px;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx525 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s;
}

.kx526 {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx527 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kx528 {
  font-size: 13px;
  line-height: 1.35;
}

.kx529 {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: #9adbe6;
  flex-shrink: 0;
}

.kx530 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.kx531 {
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .76;
}

.kx532 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 6px;
}

.kx533 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx534 {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kx535 {
  font-size: 17px;
  font-weight: 800;
  font-style: normal;
  color: var(--t-eef0f5,#eef0f5);
  padding-bottom: 6px;
  margin-bottom: -9px;
  border-bottom: 3px solid var(--t-eef0f5,#eef0f5);
}

.kx536 {
  font-size: 9px;
  font-style: normal;
  margin-left: 2px;
}

.kx537 {
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  color: #6b7080;
  padding-bottom: 6px;
  margin-bottom: -9px;
  border-bottom: none;
}

.kx538 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  color: #9adbe6;
}

.kx539 {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
}

.kx540 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.kx541 {
  font-size: 15px;
  line-height: 1.35;
}

.kx542 {
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.kx543 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  height: 110px;
}

.kx544 {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg,#232838,#151821);
  grid-row: span 2;
}

.kx545 {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg,#232838,#151821);
}

.kx546 {
  background: #eef0f5;
  color: #11131a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.kx547 {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}

.kx548 {
  width: 30px;
  height: 30px;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx549 {
  font-style: normal;
  color: var(--t-eef0f5,#eef0f5);
}

.kx550 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.kx551 {
  font-size: 15px;
}

.kx552 {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kx553 {
  flex: 1;
  padding: 5px 0;
  text-align: center;
  color: #6b7080;
  text-decoration: line-through;
  border: 1px solid var(--w10,rgba(238,240,245,.2));
}

.kx554 {
  flex: 1;
  padding: 5px 0;
  text-align: center;
  background: var(--t-eef0f5,#eef0f5);
  color: var(--b-151821,#11131a);
}

.kx555 {
  flex: 1;
  padding: 5px 0;
  text-align: center;
  border: 1px dashed var(--w10,rgba(238,240,245,.35));
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx556 {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg,#232838,#151821);
  aspect-ratio: 16/10;
}

.kx557 {
  position: absolute;
  left: 60%;
  top: 46%;
  width: 72px;
  height: 48px;
  margin: -24px -36px;
  border: 2px dashed #ffffff;
  pointer-events: none;
}

.kx558 {
  position: absolute;
  left: calc(60% + 30px);
  top: calc(46% - 40px);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 #9adbe6;
  pointer-events: none;
}

.kx559 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 4px;
}

.kx560 {
  font-size: 110px;
  font-weight: 800;
  line-height: .55;
  color: #9adbe6;
  margin-top: 22px;
}

.kx561 {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.03em;
  font-weight: 500;
}

.kx562 {
  font-style: italic;
  font-weight: 700;
  color: #9adbe6;
}

.kx563 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.kx564 {
  width: 34px;
  height: 34px;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kx565 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kx566 {
  margin-left: auto;
  font-size: 15px;
  letter-spacing: 2px;
  color: #c9a96a;
}

.kx567 {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 10px;
  padding: 12px;
  background: #eef0f5;
  color: #11131a;
  box-shadow: 8px 8px 0 #9adbe6;
  margin-right: 8px;
}

.kx568 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kx569 {
  font-size: 15px;
  line-height: 1.4;
}

.kx570 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #4b5263;
}

.kx571 {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid var(--t-eef0f5,#eef0f5);
  padding: 8px 0;
  margin-top: 4px;
}

.kx572 {
  flex: 1;
  font-size: 16px;
  font-style: italic;
  color: #6b7080;
}

.kx573 {
  padding: 4px 9px;
  border: 1.5px solid var(--w14,rgba(238,240,245,.45));
  font-size: 12px;
  font-weight: 700;
}

.kx574 {
  padding: 3px 7px;
  background: #9adbe6;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  align-self: flex-start;
}

.kx575 {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  gap: 3px;
}

.kx576 {
  width: 10px;
  height: 30px;
  background: oklch(0.8 0.14 155);
}

.kx577 {
  width: 10px;
  height: 30px;
  background: #9adbe6;
}

.kx578 {
  width: 10px;
  height: 30px;
  background: oklch(0.72 0.14 35);
}

.kx579 {
  width: 10px;
  height: 30px;
  background: var(--w10,rgba(238,240,245,.2));
}

.kx580 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 0px;
}

.kx581 {
  flex: 1;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kx582 {
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kx583 {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  opacity: 1;
}

.kx584 {
  font-size: 34px;
  font-weight: 800;
  line-height: .9;
  color: oklch(0.8 0.14 155);
}

.kx585 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.kx586 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.kx587 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-eef0f5,#eef0f5);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 2px;
}

.kx588 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.kx589 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.kx590 {
  width: 10px;
  height: 10px;
  background: #9adbe6;
}

.kx591 {
  font-size: 34px;
  font-weight: 800;
  line-height: .9;
  color: #9adbe6;
}

.kx592 {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
  background: #eef0f5;
  color: #11131a;
  box-shadow: 8px 8px 0 oklch(0.72 0.14 35);
  margin-right: 8px;
  opacity: 1;
}

.kx593 {
  font-size: 34px;
  font-weight: 800;
  line-height: .9;
  color: #b2482c;
}

.kx594 {
  font-size: 12px;
  font-weight: 800;
  color: #b2482c;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 2px;
}

.kx595 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #4b5263;
  white-space: nowrap;
}

.kx596 {
  width: 10px;
  height: 10px;
  background: #b2482c;
}

.kx597 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 6px;
}

.kx598 {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.kx599 {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  opacity: 0.5;
}

.kx600 {
  font-size: 34px;
  font-weight: 800;
  line-height: .9;
  color: oklch(0.78 0.11 300);
}

.kx601 {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}

.kx602 {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  background: #000;
}

.kx603 {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(17,19,26,.6);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.kx604 {
  position: absolute;
  right: 12px;
  bottom: 14px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(17,19,26,.7);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  font-family: ui-monospace,Menlo,monospace;
  pointer-events: none;
}

.kx605 {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.1));
  cursor: pointer;
}

.kx606 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: #9adbe6;
}

.kx607 {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: var(--t-eef0f5,#eef0f5);
  opacity: .5;
  pointer-events: none;
}

.kx608 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 9px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}

.kx609 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
}

.kx610 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kx611 {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

.kx612 {
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kx613 {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 52px;
}

.kx614 {
  flex: 1;
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s;
}

.kx615 {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx616 {
  position: relative;
  display: block;
  height: 120px;
  background: linear-gradient(135deg,#1e2a3a,#151821);
}

.kx617 {
  position: absolute;
  left: 12px;
  bottom: 12px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(17,19,26,.78);
  color: #eef0f5;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.kx618 {
  display: flex;
  gap: 4px;
}

.kx619 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  cursor: pointer;
}

.kx620 {
  font-size: 11px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx621 {
  font-size: 18px;
}

.kx622 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.kx623 {
  font-size: 30px;
  font-weight: 800;
}

.kx624 {
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
}

.kx625 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
}

.kx626 {
  padding: 8px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.035));
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kx627 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx628 {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg,#1c2433,#2b4660 18%,#c9a96a 26%,#eef0f5 50%,#c9a96a 74%,#2b4660 82%,#1c2433);
}

.kx629 {
  position: absolute;
  top: -3px;
  bottom: -3px;
  border-radius: 999px;
  border: 1.5px solid oklch(0.8 0.13 70);
}

.kx630 {
  color: oklch(0.8 0.13 70);
  font-weight: 800;
}

.kx631 {
  position: relative;
  background: #000;
  padding: 16px 0;
}

.kx632 {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg,#232838,#151821);
  aspect-ratio: 2.39/1;
}

.kx633 {
  position: absolute;
  left: 8px;
  top: 3px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #e2412f;
  font-family: ui-monospace,Menlo,monospace;
  pointer-events: none;
}

.kx634 {
  position: absolute;
  right: 8px;
  top: 3px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
  pointer-events: none;
}

.kx635 {
  position: absolute;
  left: 8px;
  bottom: 2px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #eef0f5;
  font-family: ui-monospace,Menlo,monospace;
  pointer-events: none;
}

.kx636 {
  position: absolute;
  right: 8px;
  bottom: 2px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
  pointer-events: none;
}

.kx637 {
  width: 58px;
  height: 58px;
  background: #eef0f5;
  color: #11131a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 6px 6px 0 #9adbe6;
}

.kx638 {
  font-size: 76px;
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .76;
}

.kx639 {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -.03em;
  padding-bottom: 4px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.kx640 {
  position: relative;
  display: flex;
  height: 34px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.kx641 {
  width: 22.916666666666664%;
  background: var(--t-eef0f5,#eef0f5);
  color: var(--b-151821,#11131a);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 3px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

.kx642 {
  width: 25%;
  background: linear-gradient(90deg,var(--t-eef0f5,#eef0f5) 0 50%,transparent 50%);
  color: var(--b-151821,#11131a);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 3px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

.kx643 {
  width: 27.083333333333332%;
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 3px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

.kx644 {
  width: 25%;
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 3px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

.kx645 {
  position: absolute;
  left: 35.4%;
  top: -8px;
  bottom: -8px;
  width: 3px;
  background: #e2412f;
}

.kx646 {
  display: grid;
  grid-template-columns: 36px 44px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  opacity: 0.5;
}

.kx647 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: oklch(0.8 0.14 155);
}

.kx648 {
  font-size: 11px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.kx649 {
  display: grid;
  grid-template-columns: 36px 44px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: #eef0f5;
  color: #11131a;
  box-shadow: 8px 8px 0 #9adbe6;
  margin-right: 8px;
  opacity: 1;
}

.kx650 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
}

.kx651 {
  font-size: 11px;
  font-weight: 700;
  color: #4b5263;
  font-family: ui-monospace,Menlo,monospace;
}

.kx652 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #b2482c;
}

.kx653 {
  display: grid;
  grid-template-columns: 36px 44px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
  opacity: 1;
}

.kx654 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.5));
}

.kx655 {
  font-size: 12.5px;
  font-style: italic;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kx656 {
  position: absolute;
  right: 0;
  top: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.kx657 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle,var(--t-eef0f5,#eef0f5) 0 1px,transparent 1px 4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx658 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--b-1b1f2a,#0b0c11);
  border: 2px solid var(--t-eef0f5,#eef0f5);
}

.kx659 {
  position: relative;
  padding-top: 20px;
}

.kx660 {
  position: absolute;
  left: 21.7%;
  top: 0;
  padding: 2px 6px;
  background: #c9a96a;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
}

.kx661 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 84px;
}

.kx662 {
  flex: 1;
  height: 10.2px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx663 {
  flex: 1;
  height: 17px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx664 {
  flex: 1;
  height: 27.2px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx665 {
  flex: 1;
  height: 37.4px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx666 {
  flex: 1;
  height: 23.8px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx667 {
  flex: 1;
  height: 47.6px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx668 {
  flex: 1;
  height: 57.8px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx669 {
  flex: 1;
  height: 34px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx670 {
  flex: 1;
  height: 20.4px;
  background: var(--t-eef0f5,#eef0f5);
  outline: 2px solid #c9a96a;
  outline-offset: 1px;
}

.kx671 {
  flex: 1;
  height: 44.199999999999996px;
  background: var(--t-eef0f5,#eef0f5);
  outline: 2px solid #c9a96a;
  outline-offset: 1px;
}

.kx672 {
  flex: 1;
  height: 64.6px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx673 {
  flex: 1;
  height: 51px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx674 {
  flex: 1;
  height: 30.599999999999998px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx675 {
  flex: 1;
  height: 61.199999999999996px;
  background: var(--t-eef0f5,#eef0f5);
}

.kx676 {
  flex: 1;
  height: 74.8px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx677 {
  flex: 1;
  height: 54.4px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx678 {
  flex: 1;
  height: 34px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx679 {
  flex: 1;
  height: 23.8px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx680 {
  flex: 1;
  height: 47.6px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx681 {
  flex: 1;
  height: 68px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx682 {
  flex: 1;
  height: 57.8px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx683 {
  flex: 1;
  height: 37.4px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx684 {
  flex: 1;
  height: 27.2px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx685 {
  flex: 1;
  height: 51px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx686 {
  flex: 1;
  height: 40.8px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx687 {
  flex: 1;
  height: 17px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx688 {
  flex: 1;
  height: 44.199999999999996px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx689 {
  flex: 1;
  height: 20.4px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx690 {
  flex: 1;
  height: 30.599999999999998px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx691 {
  flex: 1;
  height: 13.6px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx692 {
  flex: 1;
  height: 10.2px;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.kx693 {
  position: absolute;
  left: 39.0%;
  top: -6px;
  bottom: -6px;
  width: 3px;
  background: #e2412f;
}

.kx694 {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx695 {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kx696 {
  font-size: 40px;
  font-weight: 800;
  line-height: .6;
  color: #9adbe6;
}

.kx697 {
  font-size: 16px;
  line-height: 1.4;
  font-style: italic;
}

.kx698 {
  padding: 11px 12px;
  border-left: 1px solid var(--w14,rgba(255,255,255,.2));
  font-size: 12.5px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kx699 {
  padding: 11px 12px;
  border-left: 1px solid var(--w14,rgba(255,255,255,.2));
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t-a7abb8,#a7abb8);
}

.kx700 {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg,#232838,#151821);
  aspect-ratio: 16/9;
}

.kx701 {
  position: absolute;
  left: 18%;
  top: 22%;
  width: 14px;
  height: 14px;
  margin: -7px;
  background: var(--t-eef0f5,#eef0f5);
  border: 3px solid var(--b-1b1f2a,#0b0c11);
  pointer-events: none;
}

.kx702 {
  position: absolute;
  left: calc(18% + 12px);
  top: calc(22% - 10px);
  padding: 3px 7px;
  background: #eef0f5;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  pointer-events: none;
}

.kx703 {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eef0f5;
  color: #11131a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-10deg);
  box-shadow: 0 8px 16px rgba(0,0,0,.4);
  pointer-events: none;
}

.kx704 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kx705 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
}

.kx706 {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.kx707 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.kx708 {
  font-size: 10px;
  font-weight: 600;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kx709 {
  margin-left: auto;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  padding: 1px 4px;
  background: oklch(0.8 0.13 70);
  color: #11131a;
}

.kx710 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.kx711 {
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.kx712 {
  font-size: 10.5px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.kx713 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  border-left: 1px solid var(--w10,rgba(255,255,255,.14));
}

.kx714 {
  margin-left: auto;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  padding: 1px 4px;
  background: oklch(0.72 0.14 35);
  color: #11131a;
}

.kx715 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  background: #eef0f5;
  color: #11131a;
}

.kx716 {
  font-size: 10px;
  font-weight: 600;
  color: #4b5263;
}

.kx717 {
  margin-left: auto;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  padding: 1px 4px;
  background: #11131a;
  color: #7fd9a6;
}

.kx718 {
  font-size: 10px;
  color: #4b5263;
  font-family: ui-monospace,Menlo,monospace;
}

.kx719 {
  font-size: 10.5px;
  font-style: italic;
  color: #4b5263;
}

.kx720 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(24,1fr);
  gap: 1px;
  height: 28px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.kx721 {
  background: repeating-linear-gradient(135deg,#c9a96a 0 2px,transparent 2px 5px);
}

.kx722 {
  background: repeating-linear-gradient(135deg,rgba(201,169,106,.5) 0 2px,transparent 2px 5px);
}

.kx723 {
  position: absolute;
  left: 37.5%;
  width: 20.8%;
  top: -10px;
  height: 6px;
  border: 1.5px solid #9adbe6;
  border-bottom: none;
}

.kx724 {
  position: absolute;
  left: 37.5%;
  top: -24px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #9adbe6;
  white-space: nowrap;
}

.kx725 {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

.kx726 {
  color: #c9a96a;
}

.kx727 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kx728 {
  border-radius: 24px;
  padding: 20px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kx729 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kx730 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kx731 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kx732 {
  font-weight: 900;
}

.kxf1:focus {
  border-color: rgba(154,219,230,.7);
}
/* -- generated: end -- */

/* ==========================================================================
   22zz63. Cards · Statistics: classes generated from the handoff by
   _dev/cards_statistics_convert.py (ks1 …). The page reuses the
   .cb-page tokens of Cards · Basic; the accent inks for small text
   (--ink-gn/-co/-gd/-am) come from the stage.
   ========================================================================== */
/* Section grids fill the full width: auto-fit folds the empty tracks that
   auto-fill keeps on wide screens, so the cards share the row. */
.cs-page .ks94 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.cs-page .ks114 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.cs-page .ks245 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.cs-page .ks273 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.cs-page .ks370 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.cs-page .ks385 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Phones: the 200 px "649" steps down, the goal strip's TODAY label hangs
   from the right edge, and the two thinnest segment labels hide (each bar
   has a legend with the same numbers). */
@media (max-width: 400px) {
  .cs-page .ks49 { font-size: 150px; }
  .cs-page .ks286 { left: auto; right: 0; }
  .cs-page .ks225,
  .cs-page .ks501 { font-size: 0; }
}

/* -- generated cs: start -- */
.ks1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ks2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.ks3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.ks4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ks5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ks6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ks8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.ks10 {
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.ks11 {
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ks12 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.ks13 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.ks14 {
  font-size: 11.5px;
  opacity: .65;
}

.ks15 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.ks16 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ks17 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.ks18 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ks19 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.ks20 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks21 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(100%,1fr));
  gap: 18px;
  align-items: start;
}

.ks22 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  grid-column: 1/-1;
}

.ks23 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.ks24 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks25 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ks26 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ks27 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  overflow: hidden;
  padding: 0;
  gap: 0;
  display: grid;
}

.ks28 {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.ks29 {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .95;
}

.ks30 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ks31 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ks32 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks33 {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
  max-width: 360px;
}

.ks34 {
  position: relative;
  min-height: 200px;
  border-left: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ks35 {
  position: absolute;
  inset: 0;
}

.ks36 {
  position: absolute;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ks37 {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.25);
}

.ks38 {
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
}

.ks39 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--t-eef0f5,#eef0f5);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .22em;
}

.ks40 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks41 {
  margin-left: auto;
}

.ks42 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 4px double var(--t-eef0f5,#eef0f5);
}

.ks43 {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}

.ks44 {
  margin-left: auto;
  font-size: 12px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.ks45 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
}

.ks46 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 26px 22px 0;
}

.ks47 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  line-height: .72;
}

.ks48 {
  font-size: 30px;
  font-weight: 700;
  padding-bottom: 22px;
}

.ks49 {
  font-size: 200px;
  font-weight: 800;
  letter-spacing: -.1em;
}

.ks50 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
}

.ks51 {
  font-size: 76px;
  font-weight: 800;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--w14,rgba(238,240,245,.6));
}

.ks52 {
  position: absolute;
  right: 26px;
  top: 22px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-10deg);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  pointer-events: none;
}

.ks53 {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ks54 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.ks55 {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
  margin-top: 2px;
}

.ks56 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ks57 {
  padding: 5px 9px;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.ks58 {
  font-size: 13px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.ks59 {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 500;
  max-width: 460px;
}

.ks60 {
  float: left;
  font-size: 64px;
  font-weight: 800;
  line-height: .8;
  margin: 6px 10px 0 0;
  color: var(--t-9adbe6,#9adbe6);
}

.ks61 {
  font-style: italic;
  color: var(--t-9adbe6,#9adbe6);
}

.ks62 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--w10,rgba(255,255,255,.18));
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.18));
}

.ks63 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0 10px 0;
}

.ks64 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.ks65 {
  font-size: 8.5px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks66 {
  font-size: 9.5px;
  font-weight: 900;
  color: var(--ink-gn,oklch(0.8 0.14 155));
  white-space: nowrap;
}

.ks67 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0 10px 10px;
  border-left: 1px solid var(--w10,rgba(255,255,255,.18));
}

.ks68 {
  font-size: 9.5px;
  font-weight: 900;
  color: var(--ink-am,oklch(0.8 0.13 70));
  white-space: nowrap;
}

.ks69 {
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--t-eef0f5,#eef0f5);
}

.ks70 {
  flex: 1;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 800;
}

.ks71 {
  padding: 11px 0 11px 14px;
  border-left: 1px solid var(--w14,rgba(255,255,255,.2));
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
  white-space: nowrap;
}

.ks72 {
  position: relative;
  border-left: 1px solid var(--w10,rgba(255,255,255,.18));
  padding: 22px 0 34px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ks73 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .14em;
}

.ks74 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ks75 {
  width: 18px;
  height: 3px;
  background: var(--t-eef0f5,#eef0f5);
}

.ks76 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks77 {
  width: 18px;
  border-top: 2px dashed var(--w14,rgba(238,240,245,.5));
}

.ks78 {
  position: relative;
  height: 230px;
}

.ks79 {
  position: absolute;
  left: -2px;
  top: 157px;
  font-size: 8.5px;
  font-weight: 900;
  color: #6b7080;
}

.ks80 {
  position: absolute;
  left: -2px;
  top: 85px;
  font-size: 8.5px;
  font-weight: 900;
  color: #6b7080;
}

.ks81 {
  position: absolute;
  left: -2px;
  top: 13px;
  font-size: 8.5px;
  font-weight: 900;
  color: #6b7080;
}

.ks82 {
  position: absolute;
  left: 63.6%;
  top: 93px;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--t-eef0f5,#eef0f5);
  border: 3px solid var(--b-1b1f2a,#0b0c11);
  outline: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks83 {
  position: absolute;
  left: 63.6%;
  top: 43px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  line-height: 1.15;
  white-space: nowrap;
}

.ks84 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .1em;
}

.ks85 {
  font-size: 10px;
  font-style: italic;
}

.ks86 {
  position: absolute;
  left: 27.3%;
  top: 129px;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--t-eef0f5,#eef0f5);
  border: 3px solid var(--b-1b1f2a,#0b0c11);
  outline: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks87 {
  position: absolute;
  left: 27.3%;
  top: 79px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  line-height: 1.15;
  white-space: nowrap;
}

.ks88 {
  position: absolute;
  left: 100.0%;
  top: 29px;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -14px;
  background: var(--t-eef0f5,#eef0f5);
  border: 3px solid var(--b-1b1f2a,#0b0c11);
  outline: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks89 {
  position: absolute;
  left: 100.0%;
  top: 45px;
  transform: translateX(-100%);
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
  background: #9adbe6;
  color: #11131a;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: 5px 5px 0 var(--t-eef0f5,#eef0f5);
}

.ks90 {
  position: absolute;
  left: 72.7%;
  right: 0;
  bottom: -6px;
  height: 8px;
  border: 1.5px solid oklch(0.8 0.14 155);
  border-top: none;
}

.ks91 {
  position: absolute;
  right: 0;
  bottom: -22px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--ink-gn,oklch(0.8 0.14 155));
  white-space: nowrap;
}

.ks92 {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #6b7080;
  margin-top: 16px;
}

.ks93 {
  color: var(--t-eef0f5,#eef0f5);
}

.ks94 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(240px,100%),1fr));
  gap: 18px;
  align-items: start;
}

.ks95 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ks96 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.ks97 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.ks98 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks99 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ks100 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  flex: 1;
}

.ks101 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  overflow: hidden;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.ks102 {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 18%, transparent);
  color: oklch(0.8 0.13 70);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ks103 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ks104 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.ks105 {
  font-size: 11.5px;
  font-weight: 700;
}

.ks106 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ks107 {
  flex: 1;
  min-width: 60px;
}

.ks108 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ks109 {
  font-size: 12px;
  font-weight: 800;
}

.ks110 {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ks111 {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
}

.ks112 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  transition: width .5s;
}

.ks113 {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--t-eef0f5,#eef0f5);
}

.ks114 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(250px,100%),1fr));
  gap: 24px;
  align-items: start;
}

.ks115 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ks116 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #6b7080;
}

.ks117 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--t-eef0f5,#eef0f5);
}

.ks118 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--t-eef0f5,#eef0f5);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .18em;
}

.ks119 {
  padding: 1px 5px;
  background: var(--t-eef0f5,#eef0f5);
  color: var(--b-1b1f2a,#0b0c11);
}

.ks120 {
  margin-left: auto;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks121 {
  position: absolute;
  right: 6px;
  top: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-10deg);
  pointer-events: none;
}

.ks122 {
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ks123 {
  font-size: 17px;
  font-weight: 800;
}

.ks124 {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 4px;
}

.ks125 {
  font-size: 22px;
  font-weight: 700;
  padding-top: 6px;
}

.ks126 {
  font-size: 104px;
  font-weight: 800;
  letter-spacing: -.09em;
  line-height: .78;
}

.ks127 {
  margin-top: -6px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.ks128 {
  padding-top: 8px;
  border-top: 3px double var(--t-eef0f5,#eef0f5);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.45;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ks129 {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 4px;
}

.ks130 {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .8;
}

.ks131 {
  font-size: 104px;
  font-weight: 800;
  letter-spacing: -.09em;
}

.ks132 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 4px;
  line-height: .85;
}

.ks133 {
  font-size: 13px;
  font-weight: 900;
  color: oklch(0.8 0.14 155);
}

.ks134 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.06em;
  color: oklch(0.8 0.14 155);
}

.ks135 {
  font-size: 16px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px oklch(0.8 0.14 155);
}

.ks136 {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}

.ks137 {
  flex: 1;
  height: 57.14285714285714%;
  border: 1.5px solid var(--w14,rgba(238,240,245,.45));
  border-bottom: none;
}

.ks138 {
  flex: 1;
  height: 64.28571428571429%;
  border: 1.5px solid var(--w14,rgba(238,240,245,.45));
  border-bottom: none;
}

.ks139 {
  flex: 1;
  height: 78.57142857142857%;
  border: 1.5px solid var(--w14,rgba(238,240,245,.45));
  border-bottom: none;
}

.ks140 {
  flex: 1;
  height: 71.42857142857143%;
  border: 1.5px solid var(--w14,rgba(238,240,245,.45));
  border-bottom: none;
}

.ks141 {
  flex: 1;
  height: 100%;
  background: var(--t-eef0f5,#eef0f5);
}

.ks142 {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #6b7080;
}

.ks143 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.ks144 {
  position: relative;
  width: 72px;
  height: 72px;
  background: #eef0f5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 8px 8px 0 oklch(0.8 0.13 70);
  flex-shrink: 0;
}

.ks145 {
  position: absolute;
  right: -12px;
  top: -10px;
  padding: 2px 5px;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.ks146 {
  display: flex;
  align-items: flex-end;
  line-height: .78;
}

.ks147 {
  font-size: 76px;
  font-weight: 800;
  letter-spacing: -.08em;
}

.ks148 {
  font-size: 28px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
  padding-bottom: 4px;
}

.ks149 {
  display: flex;
  height: 8px;
  margin-top: 4px;
}

.ks150 {
  width: 28%;
  background: var(--t-eef0f5,#eef0f5);
  margin-right: 2px;
}

.ks151 {
  width: 42%;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.6)) 0 1.5px,transparent 1.5px 5px);
  margin-right: 2px;
}

.ks152 {
  width: 30%;
  background: var(--w10,rgba(238,240,245,.2));
  margin-right: 2px;
}

.ks153 {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks154 {
  padding-top: 8px;
  border-top: 3px double var(--t-eef0f5,#eef0f5);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-co,oklch(0.72 0.14 35));
}

.ks155 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 4px;
  line-height: .78;
}

.ks156 {
  font-size: 22px;
  font-weight: 700;
  padding-bottom: 12px;
}

.ks157 {
  font-size: 96px;
  font-weight: 800;
  letter-spacing: -.09em;
}

.ks158 {
  font-size: 40px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
  padding-bottom: 4px;
}

.ks159 {
  position: relative;
  height: 70px;
  margin-top: 4px;
}

.ks160 {
  position: absolute;
  left: 0%;
  top: 64px;
  width: 10px;
  height: 10px;
  margin: -5px;
  background: var(--t-eef0f5,#eef0f5);
  border: 2px solid var(--b-1b1f2a,#0b0c11);
  outline: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks161 {
  position: absolute;
  left: 14px;
  top: 38px;
  padding: 2px 5px;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  font-family: ui-monospace,Menlo,monospace;
}

.ks162 {
  position: absolute;
  left: calc(100% - 5px);
  top: 6px;
  width: 10px;
  height: 10px;
  margin: -5px;
  background: var(--t-eef0f5,#eef0f5);
  border: 2px solid var(--b-1b1f2a,#0b0c11);
  outline: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks163 {
  position: absolute;
  right: 0;
  top: -20px;
  padding: 2px 5px;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  font-family: ui-monospace,Menlo,monospace;
}

.ks164 {
  position: absolute;
  right: 0;
  bottom: 18px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks165 {
  padding-top: 8px;
  border-top: 3px double var(--t-eef0f5,#eef0f5);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-gn,oklch(0.8 0.14 155));
}

.ks166 {
  font-size: 44px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
  padding-bottom: 4px;
}

.ks167 {
  position: relative;
  padding-top: 24px;
}

.ks168 {
  display: grid;
  grid-template-columns: repeat(20,1fr);
  gap: 2px;
  height: 24px;
}

.ks169 {
  background: var(--t-eef0f5,#eef0f5);
}

.ks170 {
  background: linear-gradient(90deg,var(--t-eef0f5,#eef0f5) 40%,transparent 40%);
  border: 1px solid var(--w14,rgba(238,240,245,.4));
}

.ks171 {
  border: 1px solid var(--w10,rgba(238,240,245,.35));
}

.ks172 {
  position: absolute;
  left: 64%;
  top: 10px;
  bottom: -6px;
  width: 2px;
  background: #c9a96a;
}

.ks173 {
  position: absolute;
  left: calc(64% + 4px);
  top: -12px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--ink-gd,#c9a96a);
  white-space: nowrap;
}

.ks174 {
  position: absolute;
  left: 70%;
  top: 0px;
  bottom: -6px;
  width: 2px;
  background: oklch(0.8 0.14 155);
}

.ks175 {
  position: absolute;
  left: calc(70% + 4px);
  top: 0px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--ink-gn,oklch(0.8 0.14 155));
  white-space: nowrap;
}

.ks176 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  overflow: hidden;
  padding: 0;
  gap: 0;
  flex-direction: row;
  flex-wrap: wrap;
}

.ks177 {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s;
}

.ks178 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ks179 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.ks180 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks181 {
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.ks182 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ks183 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ks184 {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--t-eef0f5,#eef0f5);
}

.ks185 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--t-eef0f5,#eef0f5);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
}

.ks186 {
  padding: 2px 6px;
  background: var(--t-eef0f5,#eef0f5);
  color: var(--b-1b1f2a,#0b0c11);
}

.ks187 {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
}

.ks188 {
  position: relative;
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 14px;
}

.ks189 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.4));
}

.ks190 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .18em;
}

.ks191 {
  display: flex;
  align-items: flex-end;
  line-height: .8;
}

.ks192 {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -.08em;
}

.ks193 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.04em;
  padding-bottom: 2px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.ks194 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.ks195 {
  padding: 2px 6px;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
}

.ks196 {
  font-size: 12px;
  font-style: italic;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ks197 {
  position: relative;
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 14px;
  border-left: 1px solid var(--w10,rgba(255,255,255,.18));
}

.ks198 {
  padding: 2px 6px;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
}

.ks199 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
  padding-top: 14px;
}

.ks200 {
  position: relative;
  flex: 2 1 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  box-shadow: 10px 10px 0 #9adbe6;
  margin: 0 18px 18px 0;
}

.ks201 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .18em;
}

.ks202 {
  padding: 1px 5px;
  background: #11131a;
  color: #eef0f5;
}

.ks203 {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  line-height: .76;
}

.ks204 {
  font-size: 120px;
  font-weight: 800;
  letter-spacing: -.09em;
}

.ks205 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -.06em;
  padding-bottom: 4px;
  color: transparent;
  -webkit-text-stroke: 1.5px #11131a;
}

.ks206 {
  padding: 2px 6px;
  background: #11131a;
  color: #7fd9a6;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
  flex-shrink: 0;
}

.ks207 {
  font-size: 13px;
  font-style: italic;
  color: #3a4150;
}

.ks208 {
  margin-top: 4px;
}

.ks209 {
  position: absolute;
  right: -14px;
  top: -14px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-10deg);
  pointer-events: none;
}

.ks210 {
  font-size: 18px;
  font-weight: 800;
}

.ks211 {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  padding-right: 8px;
}

.ks212 {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: flex-end;
  padding: 12px 0;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ks213 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ks214 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .18em;
}

.ks215 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.06em;
}

.ks216 {
  font-size: 20px;
  font-weight: 800;
  padding-bottom: 2px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.ks217 {
  width: 14px;
  height: 14px;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ks218 {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-co,oklch(0.72 0.14 35));
}

.ks219 {
  display: flex;
  align-items: flex-end;
  line-height: .8;
  color: oklch(0.72 0.14 35);
}

.ks220 {
  font-size: 20px;
  font-weight: 800;
  padding-bottom: 2px;
  color: transparent;
  -webkit-text-stroke: 1.5px oklch(0.72 0.14 35);
}

.ks221 {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: flex-end;
  padding: 12px 0;
}

.ks222 {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-gn,oklch(0.8 0.14 155));
}

.ks223 {
  position: relative;
  display: flex;
  height: 34px;
  margin-top: 14px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks224 {
  width: 29.0%;
  background: oklch(0.8 0.14 155);
  border-right: 1.5px solid var(--b-151821,#0b0c11);
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 900;
  color: #11131a;
  white-space: nowrap;
  overflow: hidden;
}

.ks225 {
  width: 9.7%;
  background: oklch(0.8 0.13 70);
  border-right: 1.5px solid var(--b-151821,#0b0c11);
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 900;
  color: #11131a;
  white-space: nowrap;
  overflow: hidden;
}

.ks226 {
  width: 3.2%;
  background: oklch(0.72 0.14 35);
  border-right: 1.5px solid var(--b-151821,#0b0c11);
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 900;
  color: #11131a;
  white-space: nowrap;
  overflow: hidden;
}

.ks227 {
  width: 58.1%;
  background: repeating-linear-gradient(135deg,var(--w10,rgba(238,240,245,.35)) 0 1.5px,transparent 1.5px 6px);
  border-right: 1.5px solid var(--b-151821,#0b0c11);
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 900;
  color: var(--t-eef0f5,#eef0f5);
  white-space: nowrap;
  overflow: hidden;
}

.ks228 {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 3px double var(--t-eef0f5,#eef0f5);
  margin-top: 10px;
  border-top: 1px solid var(--w10,rgba(255,255,255,.18));
}

.ks229 {
  position: relative;
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}

.ks230 {
  width: 12px;
  height: 12px;
  background: oklch(0.8 0.14 155);
}

.ks231 {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .8;
}

.ks232 {
  font-size: 12px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.ks233 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ks234 {
  padding: 2px 6px;
  border: 1px solid var(--w10,rgba(238,240,245,.3));
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ks235 {
  position: relative;
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-left: 1px solid var(--w10,rgba(255,255,255,.18));
}

.ks236 {
  width: 12px;
  height: 12px;
  background: oklch(0.8 0.13 70);
}

.ks237 {
  position: relative;
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-left: 1px solid var(--w10,rgba(255,255,255,.18));
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  box-shadow: 8px 8px 0 oklch(0.72 0.14 35);
  margin: -4px 10px 10px 0;
  z-index: 1;
}

.ks238 {
  width: 12px;
  height: 12px;
  background: #b2482c;
}

.ks239 {
  margin-left: auto;
  padding: 1px 5px;
  background: #b2482c;
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ks240 {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .8;
  color: #b2482c;
}

.ks241 {
  font-size: 12px;
  font-style: italic;
  color: #4b5263;
}

.ks242 {
  padding: 2px 6px;
  border: 1px solid rgba(17,19,26,.3);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ks243 {
  width: 12px;
  height: 12px;
  background: #6b7080;
}

.ks244 {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.5));
}

.ks245 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap: 18px;
  align-items: start;
}

.ks246 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.ks247 {
  position: relative;
  padding-top: 18px;
}

.ks248 {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.ks249 {
  position: relative;
  display: block;
  height: 12px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
}

.ks250 {
  font-size: 12.5px;
  font-weight: 700;
}

.ks251 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ks252 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ks253 {
  font-size: 11px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks254 {
  font-size: 24px;
  font-weight: 800;
}

.ks255 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 10px;
  border-left: 1px solid var(--w07,rgba(255,255,255,.08));
}

.ks256 {
  font-size: 24px;
  font-weight: 800;
  color: var(--t-a7abb8,#a7abb8);
}

.ks257 {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--w04,rgba(255,255,255,.05));
  flex-shrink: 0;
}

.ks258 {
  height: 24px;
  padding: 0 9px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ks259 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.ks260 {
  width: 16px;
  font-weight: 900;
}

.ks261 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks262 {
  font-weight: 800;
}

.ks263 {
  height: 5px;
  margin-left: 24px;
  border-radius: 999px;
  background: var(--w05,rgba(255,255,255,.06));
  overflow: hidden;
}

.ks264 {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .5s;
}

.ks265 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ks266 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ks267 {
  display: flex;
  font-size: 12.5px;
  font-weight: 700;
}

.ks268 {
  color: var(--t-a7abb8,#a7abb8);
}

.ks269 {
  margin-left: auto;
  font-weight: 800;
}

.ks270 {
  height: 12px;
  border-radius: 999px;
  background: var(--w05,rgba(255,255,255,.06));
  overflow: hidden;
}

.ks271 {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.ks272 {
  font-size: 12.5px;
  font-weight: 700;
  color: oklch(0.8 0.14 155);
}

.ks273 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(290px,100%),1fr));
  gap: 24px;
  align-items: start;
}

.ks274 {
  position: absolute;
  right: 6px;
  top: 26px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-10deg);
  pointer-events: none;
}

.ks275 {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.ks276 {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  line-height: .76;
  margin-top: 4px;
}

.ks277 {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 12px;
}

.ks278 {
  font-size: 100px;
  font-weight: 800;
  letter-spacing: -.09em;
}

.ks279 {
  position: relative;
  padding: 26px 0 18px;
}

.ks280 {
  display: grid;
  grid-template-columns: repeat(31,1fr);
  gap: 1px;
  height: 30px;
}

.ks281 {
  background: var(--t-eef0f5,#eef0f5);
  margin-right: 2px;
}

.ks282 {
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.6)) 0 1.5px,transparent 1.5px 4px);
}

.ks283 {
  border: 1px solid var(--w10,rgba(238,240,245,.25));
}

.ks284 {
  border: 1px solid var(--w10,rgba(238,240,245,.25));
  margin-right: 2px;
}

.ks285 {
  position: absolute;
  left: 54.8%;
  top: 14px;
  bottom: 10px;
  width: 3px;
  background: oklch(0.8 0.13 70);
}

.ks286 {
  position: absolute;
  left: calc(54.8% + 6px);
  top: 0;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--ink-am,oklch(0.8 0.13 70));
  white-space: nowrap;
}

.ks287 {
  position: absolute;
  left: 81%;
  bottom: 0;
  transform: translateX(-100%);
  padding-right: 4px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
}

.ks288 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.ks289 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: oklch(0.8 0.14 155);
}

.ks290 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 10px;
  border-left: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ks291 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--t-eef0f5,#eef0f5);
}

.ks292 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 8px;
  margin-top: 4px;
}

.ks293 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ks294 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .16em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks295 {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.ks296 {
  font-size: 30px;
  font-weight: 300;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
  padding-bottom: 4px;
}

.ks297 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.ks298 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .16em;
}

.ks299 {
  font-size: 76px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .78;
}

.ks300 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 3px double var(--t-eef0f5,#eef0f5);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ks301 {
  padding: 4px 8px;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.ks302 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.ks303 {
  font-size: 16px;
}

.ks304 {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) 46px;
  gap: 8px;
  align-items: center;
}

.ks305 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks306 {
  position: relative;
  height: 16px;
}

.ks307 {
  position: absolute;
  left: 0;
  top: 2px;
  height: 5px;
  width: 70.22900763358778%;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.ks308 {
  position: absolute;
  left: 0;
  top: 9px;
  height: 6px;
  width: 74.80916030534351%;
  background: var(--t-eef0f5,#eef0f5);
}

.ks309 {
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  color: oklch(0.8 0.14 155);
}

.ks310 {
  position: absolute;
  left: 0;
  top: 2px;
  height: 5px;
  width: 87.78625954198473%;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.ks311 {
  position: absolute;
  left: 0;
  top: 9px;
  height: 6px;
  width: 91.6030534351145%;
  background: var(--t-eef0f5,#eef0f5);
}

.ks312 {
  position: absolute;
  left: 0;
  top: 2px;
  height: 5px;
  width: 94.65648854961832%;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.ks313 {
  position: absolute;
  left: 0;
  top: 9px;
  height: 6px;
  width: 100%;
  background: var(--t-eef0f5,#eef0f5);
}

.ks314 {
  position: absolute;
  left: 0;
  top: 2px;
  height: 5px;
  width: 96.94656488549617%;
  border: 1px solid var(--w14,rgba(238,240,245,.45));
}

.ks315 {
  position: absolute;
  left: 0;
  top: 9px;
  height: 6px;
  width: 97.70992366412213%;
  background: var(--t-eef0f5,#eef0f5);
}

.ks316 {
  display: flex;
  gap: 14px;
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.ks317 {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ks318 {
  font-size: 16px;
  font-weight: 800;
  border-bottom: 3px solid var(--t-eef0f5,#eef0f5);
  padding-bottom: 4px;
  margin-bottom: -7px;
}

.ks319 {
  font-size: 13px;
  font-style: italic;
  color: #6b7080;
}

.ks320 {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks321 {
  position: relative;
  padding: 14px;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  box-shadow: 8px 8px 0 #9adbe6;
  margin: 4px 8px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ks322 {
  position: absolute;
  right: -12px;
  top: -14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-10deg);
  pointer-events: none;
}

.ks323 {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
}

.ks324 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}

.ks325 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .8;
}

.ks326 {
  font-size: 22px;
}

.ks327 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 2px;
}

.ks328 {
  font-size: 15px;
  font-weight: 800;
}

.ks329 {
  font-size: 11px;
  font-weight: 800;
  color: #2f8a55;
}

.ks330 {
  height: 8px;
  background: rgba(17,19,26,.12);
}

.ks331 {
  display: block;
  width: 100%;
  height: 100%;
  background: #11131a;
}

.ks332 {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
}

.ks333 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.45));
}

.ks334 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ks335 {
  font-size: 14px;
  font-weight: 700;
}

.ks336 {
  font-weight: 400;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 11.5px;
}

.ks337 {
  height: 4px;
  background: var(--w07,rgba(238,240,245,.12));
}

.ks338 {
  display: block;
  height: 100%;
  width: 63.23319027181687%;
  background: var(--t-eef0f5,#eef0f5);
}

.ks339 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.ks340 {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-gn,oklch(0.8 0.14 155));
  white-space: nowrap;
}

.ks341 {
  display: block;
  height: 100%;
  width: 42.06008583690986%;
  background: var(--t-eef0f5,#eef0f5);
}

.ks342 {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-co,oklch(0.72 0.14 35));
  white-space: nowrap;
}

.ks343 {
  display: block;
  height: 100%;
  width: 31.616595135908437%;
  background: var(--t-eef0f5,#eef0f5);
}

.ks344 {
  display: block;
  height: 100%;
  width: 17.167381974248926%;
  background: var(--t-eef0f5,#eef0f5);
}

.ks345 {
  font-size: 10px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.ks346 {
  position: absolute;
  right: 6px;
  top: 26px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-10deg);
  pointer-events: none;
}

.ks347 {
  font-size: 92px;
  font-weight: 800;
  letter-spacing: -.09em;
  line-height: .76;
}

.ks348 {
  font-size: 32px;
}

.ks349 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 4px;
}

.ks350 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.ks351 {
  position: relative;
  height: 96px;
  margin-top: 20px;
  border-bottom: 2px solid var(--t-eef0f5,#eef0f5);
}

.ks352 {
  position: absolute;
  left: 0%;
  bottom: 0;
  width: calc(12.5% - 3px);
  height: 8.88888888888889px;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.4)) 0 1.5px,transparent 1.5px 5px);
  border: 1px solid var(--w14,rgba(238,240,245,.45));
  border-bottom: none;
}

.ks353 {
  position: absolute;
  left: 12.5%;
  bottom: 0;
  width: calc(12.5% - 3px);
  height: 17.77777777777778px;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.4)) 0 1.5px,transparent 1.5px 5px);
  border: 1px solid var(--w14,rgba(238,240,245,.45));
  border-bottom: none;
}

.ks354 {
  position: absolute;
  left: 25%;
  bottom: 0;
  width: calc(12.5% - 3px);
  height: 35.55555555555556px;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.4)) 0 1.5px,transparent 1.5px 5px);
  border: 1px solid var(--w14,rgba(238,240,245,.45));
  border-bottom: none;
}

.ks355 {
  position: absolute;
  left: 37.5%;
  bottom: 0;
  width: calc(12.5% - 3px);
  height: 62.22222222222222px;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.4)) 0 1.5px,transparent 1.5px 5px);
  border: 1px solid var(--w14,rgba(238,240,245,.45));
  border-bottom: none;
}

.ks356 {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(12.5% - 3px);
  height: 80px;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.4)) 0 1.5px,transparent 1.5px 5px);
  border: 1px solid var(--w14,rgba(238,240,245,.45));
  border-bottom: none;
}

.ks357 {
  position: absolute;
  left: 62.5%;
  bottom: 0;
  width: calc(12.5% - 3px);
  height: 53.33333333333333px;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.4)) 0 1.5px,transparent 1.5px 5px);
  border: 1px solid var(--w14,rgba(238,240,245,.45));
  border-bottom: none;
}

.ks358 {
  position: absolute;
  left: 75%;
  bottom: 0;
  width: calc(12.5% - 3px);
  height: 26.666666666666664px;
  background: var(--t-eef0f5,#eef0f5);
}

.ks359 {
  position: absolute;
  left: 87.5%;
  bottom: 0;
  width: calc(12.5% - 3px);
  height: 8.88888888888889px;
  background: var(--t-eef0f5,#eef0f5);
}

.ks360 {
  position: absolute;
  left: 55.00000000000001%;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: #c9a96a;
}

.ks361 {
  position: absolute;
  left: calc(55.00000000000001% - 4px);
  top: -20px;
  transform: translateX(-100%);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--ink-gd,#c9a96a);
  white-space: nowrap;
}

.ks362 {
  position: absolute;
  left: 77.5%;
  top: -14px;
  bottom: -6px;
  width: 3px;
  background: #9adbe6;
}

.ks363 {
  position: absolute;
  left: calc(77.5% + 6px);
  top: -20px;
  padding: 2px 5px;
  background: #9adbe6;
  color: #11131a;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
}

.ks364 {
  position: relative;
  height: 12px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks365 {
  position: absolute;
  left: 0;
}

.ks366 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.ks367 {
  position: absolute;
  right: 0;
}

.ks368 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: oklch(0.8 0.14 155);
}

.ks369 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--t-eef0f5,#eef0f5);
}

.ks370 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(280px,100%),1fr));
  gap: 18px;
  align-items: start;
}

.ks371 {
  font-size: 13px;
  font-weight: 700;
  min-height: 18px;
}

.ks372 {
  display: flex;
  height: 22px;
  border-radius: 8px;
  overflow: hidden;
}

.ks373 {
  border-right: 2px solid var(--b-151821,#151821);
  transition: opacity .2s;
  cursor: default;
}

.ks374 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.ks375 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.ks376 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.ks377 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.ks378 {
  min-width: 40px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 800;
  transition: width .5s,background .2s;
}

.ks379 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
  white-space: nowrap;
}

.ks380 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.ks381 {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 90px;
}

.ks382 {
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  transition: background .2s,height .4s;
}

.ks383 {
  display: flex;
  gap: 5px;
}

.ks384 {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks385 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(320px,100%),1fr));
  gap: 24px;
  align-items: start;
}

.ks386 {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.ks387 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.ks388 {
  font-size: 100px;
  font-weight: 800;
  letter-spacing: -.09em;
  line-height: .76;
}

.ks389 {
  font-size: 36px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.ks390 {
  font-size: 18px;
  font-weight: 700;
}

.ks391 {
  position: relative;
  padding-top: 22px;
}

.ks392 {
  display: flex;
  height: 46px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks393 {
  position: relative;
  width: 28%;
  background: var(--t-eef0f5,#eef0f5);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 900;
  color: var(--b-151821,#11131a);
}

.ks394 {
  position: relative;
  width: 24%;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.65)) 0 1.5px,transparent 1.5px 5px);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 900;
}

.ks395 {
  position: relative;
  width: 18%;
  background: radial-gradient(circle,var(--w14,rgba(238,240,245,.75)) 1px,transparent 1.5px) 0 0/5px 5px;
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 900;
}

.ks396 {
  position: relative;
  width: 16%;
  background: repeating-linear-gradient(0deg,var(--w14,rgba(238,240,245,.6)) 0 1px,transparent 1px 4px);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 900;
}

.ks397 {
  position: relative;
  width: 14%;
  background: transparent;
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 900;
}

.ks398 {
  position: absolute;
  left: 0;
  top: 0;
  width: 28%;
  height: 14px;
  border: 1.5px solid #9adbe6;
  border-bottom: none;
}

.ks399 {
  position: absolute;
  left: calc(28% + 6px);
  top: 0;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #9adbe6;
  white-space: nowrap;
}

.ks400 {
  position: absolute;
  left: 0;
  right: 22%;
  bottom: -12px;
  height: 6px;
  border: 1.5px solid var(--w14,rgba(238,240,245,.5));
  border-top: none;
}

.ks401 {
  position: absolute;
  right: 22%;
  bottom: -24px;
  transform: translateX(50%);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.ks402 {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

.ks403 {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  box-shadow: 6px 6px 0 #9adbe6;
  margin-right: 6px;
}

.ks404 {
  width: 20px;
  height: 16px;
  background: #11131a;
  border: 1.5px solid #11131a;
}

.ks405 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ks406 {
  font-size: 14px;
  font-weight: 800;
}

.ks407 {
  font-size: 11px;
  font-style: italic;
  color: #4b5263;
}

.ks408 {
  font-size: 10px;
  font-weight: 900;
  color: #2f8a55;
  white-space: nowrap;
}

.ks409 {
  font-size: 20px;
  font-weight: 800;
  min-width: 40px;
  text-align: right;
}

.ks410 {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
}

.ks411 {
  width: 20px;
  height: 16px;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.65)) 0 1.5px,transparent 1.5px 5px);
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks412 {
  font-size: 14px;
  font-weight: 600;
}

.ks413 {
  font-size: 11px;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks414 {
  font-size: 10px;
  font-weight: 900;
  color: var(--ink-co,oklch(0.72 0.14 35));
  white-space: nowrap;
}

.ks415 {
  font-size: 16px;
  font-weight: 800;
  min-width: 40px;
  text-align: right;
}

.ks416 {
  width: 20px;
  height: 16px;
  background: radial-gradient(circle,var(--w14,rgba(238,240,245,.75)) 1px,transparent 1.5px) 0 0/5px 5px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks417 {
  font-size: 10px;
  font-weight: 900;
  color: var(--ink-gn,oklch(0.8 0.14 155));
  white-space: nowrap;
}

.ks418 {
  width: 20px;
  height: 16px;
  background: repeating-linear-gradient(0deg,var(--w14,rgba(238,240,245,.6)) 0 1px,transparent 1px 4px);
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks419 {
  font-size: 10px;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.ks420 {
  width: 20px;
  height: 16px;
  background: transparent;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks421 {
  font-size: 40px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.ks422 {
  font-size: 13px;
  font-style: italic;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ks423 {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
}

.ks424 {
  display: flex;
  justify-content: center;
}

.ks425 {
  position: relative;
  width: 100%;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks426 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
}

.ks427 {
  font-size: 11px;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks428 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  height: 28px;
}

.ks429 {
  border-top: 1px dashed var(--w10,rgba(238,240,245,.3));
}

.ks430 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--ink-co,oklch(0.72 0.14 35));
  white-space: nowrap;
}

.ks431 {
  font-weight: 600;
  letter-spacing: 0;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks432 {
  position: relative;
  width: 45.83333333333333%;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1.5px solid oklch(0.72 0.14 35);
  background: repeating-linear-gradient(135deg,color-mix(in oklab, oklch(0.72 0.14 35) 14%, transparent) 0 2px,transparent 2px 7px);
}

.ks433 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-a7abb8,#a7abb8);
  white-space: nowrap;
}

.ks434 {
  position: relative;
  width: 22.916666666666664%;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks435 {
  position: relative;
  width: 12.5%;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  box-shadow: 8px 8px 0 oklch(0.8 0.14 155);
}

.ks436 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
}

.ks437 {
  font-size: 11px;
  font-style: italic;
  color: #4b5263;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks438 {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 150px;
  border-bottom: 2px solid var(--t-eef0f5,#eef0f5);
  padding-top: 30px;
}

.ks439 {
  position: relative;
  flex: 1;
  height: 44.44444444444444%;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  border-bottom: none;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.65)) 0 1.5px,transparent 1.5px 5px);
}

.ks440 {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.6));
}

.ks441 {
  position: relative;
  flex: 1;
  height: 77.77777777777779%;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  border-bottom: none;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.65)) 0 1.5px,transparent 1.5px 5px);
}

.ks442 {
  position: relative;
  flex: 1;
  height: 100%;
  background: var(--t-eef0f5,#eef0f5);
}

.ks443 {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 800;
}

.ks444 {
  position: relative;
  flex: 1;
  height: 55.55555555555556%;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  border-bottom: none;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.65)) 0 1.5px,transparent 1.5px 5px);
}

.ks445 {
  position: relative;
  flex: 1;
  height: 22.22222222222222%;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  border-bottom: none;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.65)) 0 1.5px,transparent 1.5px 5px);
}

.ks446 {
  position: absolute;
  left: 52%;
  top: 10px;
  bottom: -6px;
  width: 2px;
  background: #c9a96a;
}

.ks447 {
  position: absolute;
  left: calc(52% + 5px);
  top: 10px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--ink-gd,#c9a96a);
  white-space: nowrap;
}

.ks448 {
  flex: 1;
  text-align: center;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks449 {
  flex: 1;
  text-align: center;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--t-eef0f5,#eef0f5);
}

.ks450 {
  display: flex;
  gap: 5px;
  padding-top: 6px;
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ks451 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.ks452 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--t-a7abb8,#a7abb8);
}

.ks453 {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #6b7080;
}

.ks454 {
  font-size: 12.5px;
  font-weight: 800;
}

.ks455 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
}

.ks456 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  min-height: 16px;
}

.ks457 {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 3px;
}

.ks458 {
  aspect-ratio: 1;
  border-radius: 3px;
  outline-offset: 1px;
}

.ks459 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks460 {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.ks461 {
  margin-left: auto;
  color: oklch(0.72 0.14 35);
}

.ks462 {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 34px;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
}

.ks463 {
  height: 8px;
  border-radius: 999px;
  background: var(--w05,rgba(255,255,255,.06));
  overflow: hidden;
}

.ks464 {
  text-align: right;
  font-weight: 800;
}

.ks465 {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ks466 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border-radius: 999px;
  background: var(--w04,rgba(255,255,255,.05));
}

.ks467 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: all .3s;
}

.ks468 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks469 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
}

.ks470 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.ks471 {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ks472 {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks473 {
  font-size: 12px;
  color: var(--t-a7abb8,#a7abb8);
}

.ks474 {
  font-size: 110px;
  font-weight: 800;
  letter-spacing: -.09em;
  line-height: .74;
}

.ks475 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.ks476 {
  display: grid;
  grid-template-columns: 18px repeat(12,1fr);
  gap: 2px;
  align-items: center;
  margin-top: 4px;
}

.ks477 {
  font-size: 8px;
  font-weight: 900;
  color: #6b7080;
}

.ks478 {
  aspect-ratio: 1;
  border: 1px solid var(--w10,rgba(238,240,245,.2));
}

.ks479 {
  aspect-ratio: 1;
  background: var(--w14,rgba(238,240,245,.55));
}

.ks480 {
  aspect-ratio: 1;
  background: var(--w14,rgba(238,240,245,.55));
  box-shadow: 0 -4px 0 -2px oklch(0.8 0.14 155);
}

.ks481 {
  aspect-ratio: 1;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.5)) 0 1px,transparent 1px 3px);
  box-shadow: 0 -4px 0 -2px oklch(0.8 0.14 155);
}

.ks482 {
  aspect-ratio: 1;
  background: var(--t-eef0f5,#eef0f5);
  box-shadow: 0 -4px 0 -2px oklch(0.8 0.14 155);
}

.ks483 {
  aspect-ratio: 1;
  border: 1px solid var(--w10,rgba(238,240,245,.2));
  box-shadow: 0 -4px 0 -2px oklch(0.8 0.14 155);
}

.ks484 {
  aspect-ratio: 1;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.5)) 0 1px,transparent 1px 3px);
}

.ks485 {
  aspect-ratio: 1;
  background: var(--t-eef0f5,#eef0f5);
}

.ks486 {
  aspect-ratio: 1;
  background: oklch(0.72 0.14 35);
}

.ks487 {
  position: absolute;
  left: calc(18px + 3 * (100% - 18px) / 12);
  right: 0;
  top: 4px;
  height: 6px;
  border: 1.5px solid oklch(0.8 0.14 155);
  border-top: none;
}

.ks488 {
  position: absolute;
  right: 0;
  top: -2px;
  transform: translateY(-100%);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--ink-gn,oklch(0.8 0.14 155));
  white-space: nowrap;
}

.ks489 {
  position: absolute;
  left: calc(18px + 1.2 * (100% - 18px) / 12);
  top: 4px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--ink-co,oklch(0.72 0.14 35));
  white-space: nowrap;
}

.ks490 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.ks491 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: oklch(0.72 0.14 35);
}

.ks492 {
  font-size: 110px;
  font-weight: 800;
  letter-spacing: -.09em;
}

.ks493 {
  font-size: 34px;
  font-weight: 800;
  padding-bottom: 8px;
}

.ks494 {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -.07em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.ks495 {
  font-size: 22px;
  font-weight: 800;
  padding-bottom: 6px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.ks496 {
  padding: 3px 7px;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}

.ks497 {
  position: relative;
  display: flex;
  height: 40px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
  margin-top: 4px;
}

.ks498 {
  width: 38%;
  background: var(--t-eef0f5,#eef0f5);
  color: var(--b-151821,#11131a);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 900;
  overflow: hidden;
  white-space: nowrap;
}

.ks499 {
  width: 41%;
  background: var(--w14,rgba(238,240,245,.55));
  color: #11131a;
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 900;
  overflow: hidden;
  white-space: nowrap;
}

.ks500 {
  width: 16%;
  background: repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.55)) 0 1.5px,transparent 1.5px 5px);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 900;
  overflow: hidden;
  white-space: nowrap;
}

.ks501 {
  width: 5%;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 5px 4px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 900;
  overflow: hidden;
  white-space: nowrap;
}

.ks502 {
  position: absolute;
  left: 79%;
  top: -12px;
  bottom: -12px;
  width: 2px;
  background: #9adbe6;
}

.ks503 {
  position: absolute;
  left: calc(79% - 4px);
  top: -24px;
  transform: translateX(-100%);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #9adbe6;
  white-space: nowrap;
}

.ks504 {
  display: grid;
  grid-template-columns: 62px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
}

.ks505 {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
}

.ks506 {
  font-size: 11.5px;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks507 {
  font-size: 16px;
  font-weight: 800;
  color: var(--t-eef0f5,#eef0f5);
}

.ks508 {
  font-size: 16px;
  font-weight: 800;
  color: oklch(0.72 0.14 35);
}

.ks509 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.ks510 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  background: #11131a;
  border: 2px solid var(--w14,#eef0f5);
  border-radius: 18px;
}

.ks511 {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid oklch(0.72 0.14 35);
  opacity: .35;
}

.ks512 {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
  box-shadow: 0 0 16px oklch(0.8 0.13 70);
}

.ks513 {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid oklch(0.8 0.14 155);
  opacity: .35;
}

.ks514 {
  font-size: 38px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.ks515 {
  padding: 3px 7px;
  background: oklch(0.8 0.13 70);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  align-self: flex-start;
  white-space: nowrap;
}

.ks516 {
  display: flex;
  flex-direction: column;
  border-top: 3px double var(--t-eef0f5,#eef0f5);
}

.ks517 {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) 46px;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.1));
}

.ks518 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.ks519 {
  position: relative;
  height: 8px;
  border: 1px solid var(--w10,rgba(238,240,245,.3));
}

.ks520 {
  display: block;
  height: 100%;
  width: 78.33333333333333%;
  background: repeating-linear-gradient(135deg,var(--t-eef0f5,#eef0f5) 0 1.5px,transparent 1.5px 4px);
}

.ks521 {
  position: absolute;
  left: 83.33333333333334%;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--t-eef0f5,#eef0f5);
}

.ks522 {
  font-size: 10.5px;
  font-style: italic;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks523 {
  font-size: 17px;
  font-weight: 800;
  text-align: right;
  color: oklch(0.8 0.13 70);
}

.ks524 {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) 46px;
  gap: 10px;
  align-items: center;
  padding: 9px;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  box-shadow: 6px 6px 0 oklch(0.72 0.14 35);
  margin: 4px 6px 4px 0;
}

.ks525 {
  position: relative;
  height: 8px;
  background: rgba(17,19,26,.12);
}

.ks526 {
  display: block;
  height: 100%;
  width: 90%;
  background: #b2482c;
}

.ks527 {
  position: absolute;
  left: 83.33333333333334%;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: #11131a;
}

.ks528 {
  font-size: 10.5px;
  font-style: italic;
  color: #4b5263;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks529 {
  font-size: 17px;
  font-weight: 800;
  text-align: right;
  color: #b2482c;
}

.ks530 {
  display: block;
  height: 100%;
  width: 59.166666666666664%;
  background: var(--t-eef0f5,#eef0f5);
}

.ks531 {
  font-size: 17px;
  font-weight: 800;
  text-align: right;
  color: oklch(0.8 0.14 155);
}

.ks532 {
  display: block;
  height: 100%;
  width: 51.66666666666667%;
  background: var(--t-eef0f5,#eef0f5);
}

.ks533 {
  padding-top: 8px;
  border-top: 3px double var(--t-eef0f5,#eef0f5);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-am,oklch(0.8 0.13 70));
}

.ks534 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.ks535 {
  font-size: 130px;
  font-weight: 800;
  letter-spacing: -.09em;
  line-height: .72;
}

.ks536 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
}

.ks537 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--w14,rgba(238,240,245,.55));
}

.ks538 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ks539 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 0 8px 0;
}

.ks540 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.ks541 {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks542 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 0 8px 10px;
  border-left: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ks543 {
  position: relative;
  padding-top: 16px;
}

.ks544 {
  display: flex;
  height: 30px;
  border: 1.5px solid var(--t-eef0f5,#eef0f5);
}

.ks545 {
  width: 43.75%;
  background: var(--t-eef0f5,#eef0f5);
  color: var(--b-151821,#11131a);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 4px 3px;
  box-sizing: border-box;
  font-size: 9px;
  font-weight: 900;
  overflow: hidden;
  white-space: nowrap;
}

.ks546 {
  width: 9.375%;
  background: var(--t-eef0f5,#eef0f5);
  color: var(--b-151821,#11131a);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 4px 3px;
  box-sizing: border-box;
  font-size: 9px;
  font-weight: 900;
  overflow: hidden;
  white-space: nowrap;
}

.ks547 {
  width: 37.5%;
  background: linear-gradient(90deg,var(--t-eef0f5,#eef0f5) 0 33%,transparent 33%),repeating-linear-gradient(135deg,var(--w14,rgba(238,240,245,.5)) 0 1.5px,transparent 1.5px 5px);
  color: var(--b-151821,#11131a);
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 4px 3px;
  box-sizing: border-box;
  font-size: 9px;
  font-weight: 900;
  overflow: hidden;
  white-space: nowrap;
}

.ks548 {
  width: 9.375%;
  border-right: 1.5px solid var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: flex-end;
  padding: 0 4px 3px;
  box-sizing: border-box;
  font-size: 9px;
  font-weight: 900;
  overflow: hidden;
  white-space: nowrap;
}

.ks549 {
  position: absolute;
  left: 65.625%;
  top: 4px;
  bottom: -6px;
  width: 3px;
  background: #e2412f;
}

.ks550 {
  position: absolute;
  left: calc(65.625% + 6px);
  top: 0;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #e2412f;
  white-space: nowrap;
}

.ks551 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: oklch(0.8 0.13 70);
}

.ks552 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 10px;
}

.ks553 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  column-gap: 32px;
}

.ks554 {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 14px;
  background: #eef0f5;
  color: #11131a;
  outline: 1px solid var(--w14,transparent);
  box-shadow: 8px 8px 0 #9adbe6;
  margin: 8px 8px 8px 0;
}

.ks555 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .85;
}

.ks556 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ks557 {
  font-size: 19px;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.ks558 {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .14em;
  white-space: nowrap;
}

.ks559 {
  padding: 1px 5px;
  border: 1px solid rgba(17,19,26,.35);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  white-space: nowrap;
  color: #4b5263;
}

.ks560 {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.12));
}

.ks561 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--w14,rgba(238,240,245,.45));
}

.ks562 {
  padding: 1px 5px;
  border: 1px solid var(--w10,rgba(238,240,245,.35));
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  white-space: nowrap;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ks563 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  font-size: 12px;
  font-style: italic;
  color: var(--t-a7abb8,#a7abb8);
}

.ks564 {
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--t-eef0f5,#eef0f5);
}

.ks565 {
  border-radius: 24px;
  padding: 20px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ks566 {
  font-size: 15px;
  font-weight: 700;
}

.ks567 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap: 8px;
}

.ks568 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.ks569 {
  font-size: 13px;
  font-weight: 700;
}

.ks570 {
  font-size: 12px;
  color: var(--t-9adbe6,#9adbe6);
  font-weight: 800;
}
/* -- generated cs: end -- */

/* ==========================================================================
   22zz64. Cards · Analytics: classes generated from the handoff by
   _dev/cards_analytics_convert.py (ka1 …). The page reuses the .cb-page
   tokens of Cards · Basic; the stage sets the --ink-* small-text inks.
   ========================================================================== */
/* The two ✕ buttons set no size in the design: keep the browser's 13.33px
   rather than the shell's inherited 16px. */
.an-page .ka107,
.an-page .ka146 { font-size: 13.3333px; }

/* Phones: the waterfall's seven columns are ~31px wide — smaller value
   labels, and step names that hyphenate instead of running together. */
@media (max-width: 400px) {
  .an-page .ka63 { font-size: 9px; }
  .an-page .ka65 {
    font-size: 9px;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}

/* -- generated an: start -- */
.ka1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ka2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding-left: 10px;
}

.ka3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 300px;
  min-width: 0;
}

.ka4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ka5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ka6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ka8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.ka10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ka11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.ka12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.ka13 {
  font-size: 11.5px;
  opacity: .65;
}

.ka14 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.ka15 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ka16 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.ka17 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ka18 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.ka19 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka20 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: stretch;
}

.ka21 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ka22 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.ka23 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ka24 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ka25 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ka26 {
  flex: 1 1 auto;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
}

.ka27 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ka28 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  flex: 1;
}

.ka29 {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ka30 {
  width: 10px;
  height: 3px;
  border-radius: 2px;
}

.ka31 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.ka32 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.ka33 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka34 {
  position: relative;
  height: 200px;
}

.ka35 {
  display: block;
}

.ka36 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--w14,rgba(255,255,255,.25));
}

.ka37 {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--b-151821,#151821);
}

.ka38 {
  position: absolute;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.ka39 {
  position: absolute;
  inset: 0;
  display: flex;
}

.ka40 {
  flex: 1;
  cursor: pointer;
}

.ka41 {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka42 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  font-size: 11px;
}

.ka43 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.ka44 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka45 {
  position: relative;
  height: 180px;
}

.ka46 {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px;
  border-radius: 50%;
  border: 2px solid oklch(0.72 0.14 35);
  background: var(--b-151821,#151821);
  cursor: pointer;
  padding: 0;
}

.ka47 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka48 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ka49 {
  width: 16px;
  height: 3px;
  background: #9adbe6;
}

.ka50 {
  width: 16px;
  border-top: 2px dashed currentColor;
}

.ka51 {
  align-items: center;
  gap: 6px;
}

.ka52 {
  width: 16px;
  height: 2px;
  background: oklch(0.8 0.13 70);
}

.ka53 {
  color: oklch(0.72 0.14 35);
}

.ka54 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: stretch;
}

.ka55 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.ka56 {
  font-size: 15px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
}

.ka57 {
  font-size: 16px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka58 {
  font-size: 28px;
  font-weight: 800;
}

.ka59 {
  font-size: 12.5px;
  font-weight: 800;
  color: oklch(0.8 0.14 155);
}

.ka60 {
  display: flex;
  gap: 6px;
  height: 190px;
  align-items: stretch;
}

.ka61 {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.ka62 {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 5px;
  transition: all .4s;
}

.ka63 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ka64 {
  display: flex;
  gap: 6px;
}

.ka65 {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka66 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr) 56px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.ka67 {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ka68 {
  position: relative;
  height: 16px;
}

.ka69 {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--w14,rgba(255,255,255,.25));
}

.ka70 {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  transition: all .4s;
}

.ka71 {
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.ka72 {
  font-size: 13px;
  font-weight: 700;
  min-height: 18px;
}

.ka73 {
  display: grid;
  gap: 4px;
  height: 220px;
}

.ka74 {
  border: none;
  border-radius: 10px;
  color: #11131a;
  font-family: inherit;
  text-align: left;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity .2s;
  min-width: 0;
  overflow: hidden;
}

.ka75 {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ka76 {
  font-size: 20px;
  font-weight: 800;
}

.ka77 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ka78 {
  border: none;
  border-radius: 8px;
  color: #11131a;
  font-family: inherit;
  text-align: left;
  padding: 6px 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transition: opacity .2s;
  min-height: 0;
  overflow: hidden;
}

.ka79 {
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ka80 {
  font-size: 12px;
  font-weight: 800;
}

.ka81 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,100%),1fr));
  gap: 18px;
  align-items: stretch;
}

.ka82 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  grid-column: 1/-1;
}

.ka83 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ka84 {
  font-size: 12px;
  font-weight: 700;
  min-height: 16px;
  color: var(--t-a7abb8,#a7abb8);
}

.ka85 {
  display: grid;
  grid-template-columns: 56px 36px repeat(6,minmax(0,1fr));
  gap: 3px;
  align-items: center;
  font-size: 11px;
}

.ka86 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-weight: 800;
}

.ka87 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-weight: 800;
  text-align: center;
}

.ka88 {
  text-align: center;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka89 {
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  outline-offset: 1px;
}

.ka90 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}

.ka91 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.035));
}

.ka92 {
  font-size: 11px;
  font-weight: 700;
}

.ka93 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: stretch;
}

.ka94 {
  position: relative;
  height: 280px;
  margin: 6px 0 0 30px;
  border-left: 1px solid var(--w14,rgba(255,255,255,.2));
  border-bottom: 1px solid var(--w14,rgba(255,255,255,.2));
}

.ka95 {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--w14,rgba(255,255,255,.25));
}

.ka96 {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--w14,rgba(255,255,255,.25));
}

.ka97 {
  position: absolute;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  pointer-events: none;
  white-space: nowrap;
}

.ka98 {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: transform .2s;
}

.ka99 {
  position: absolute;
  left: -30px;
  top: -2px;
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka100 {
  position: absolute;
  left: -26px;
  bottom: -6px;
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka101 {
  position: absolute;
  right: 0;
  bottom: -18px;
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka102 {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka103 {
  height: 12px;
}

.ka104 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.ka105 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
}

.ka106 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ka107 {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: pointer;
}

.ka108 {
  display: grid;
  grid-template-columns: minmax(0,1fr) 110px;
  gap: 14px;
  align-items: center;
}

.ka109 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.ka110 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.035));
}

.ka111 {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--t-a7abb8,#a7abb8);
}

.ka112 {
  font-weight: 900;
}

.ka113 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ka114 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ka115 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
}

.ka116 {
  flex: 1 1 auto;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  align-items: center;
  text-align: center;
  border-style: dashed;
}

.ka117 {
  font-size: 14px;
  font-weight: 700;
}

.ka118 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  flex: 1 1 100%;
}

.ka119 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.ka120 {
  font-size: 12.5px;
  font-weight: 800;
}

.ka121 {
  position: relative;
  height: 170px;
}

.ka122 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e2412f;
}

.ka123 {
  position: absolute;
  right: 0;
  transform: translateY(-120%);
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-am,oklch(0.8 0.13 70));
}

.ka124 {
  color: #e2412f;
}

.ka125 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ka126 {
  display: grid;
  grid-template-columns: minmax(0,1fr) 70px;
  gap: 4px 10px;
  align-items: center;
}

.ka127 {
  font-size: 12.5px;
  font-weight: 700;
}

.ka128 {
  font-size: 12.5px;
  font-weight: 800;
  text-align: right;
}

.ka129 {
  grid-column: 1/-1;
  accent-color: #9adbe6;
}

.ka130 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.035));
}

.ka131 {
  font-size: 16px;
  font-weight: 800;
}

.ka132 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

.ka133 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.ka134 {
  border-radius: 24px;
  padding: 20px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ka135 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ka136 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ka137 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ka138 {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.ka139 {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(6,7,11,.45);
}

.ka140 {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 96;
  width: min(420px,calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  color: #eef0f5;
  overflow: hidden;
}

.ka141 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.ka142 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ka143 {
  font-size: 10.5px;
  letter-spacing: .14em;
  font-weight: 800;
  color: #9adbe6;
}

.ka144 {
  font-size: 18px;
  font-weight: 700;
}

.ka145 {
  font-size: 24px;
  font-weight: 800;
}

.ka146 {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: transparent;
  color: #a7abb8;
  cursor: pointer;
  flex-shrink: 0;
}

.ka147 {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
}

.ka148 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.ka149 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ka150 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ka151 {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ka152 {
  font-size: 11.5px;
  color: #8a8f9e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ka153 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ka154 {
  padding-top: 12px;
  font-size: 12px;
  color: #8a8f9e;
}

.ka155 {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.ka156 {
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  font-weight: 800;
  flex: 1;
  height: 38px;
  background: #f2f3f6;
  color: #11131a;
}

.ka157 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  color: #eef0f5;
  border-color: rgba(255,255,255,.14);
}
/* -- generated an: end -- */

/* ==========================================================================
   22zz65. Cards · Actions: classes generated from the handoff by
   _dev/cards_actions_convert.py (kc1 …). The page reuses the .cb-page
   tokens of Cards · Basic; the stage sets the --ink-* small-text inks.
   ========================================================================== */
/* The busy button's spinner. */
@keyframes acspin {
  to { transform: rotate(360deg); }
}

/* -- generated ac: start -- */
.kc1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kc2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding-left: 10px;
}

.kc3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 300px;
  min-width: 0;
}

.kc4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kc5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kc6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kc7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kc8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kc9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.kc10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kc11 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(140deg,#eef0f4,#d4d9e1 55%,#a8e6ef 140%);
  color: #11131a;
}

.kc12 {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
}

.kc13 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 200px;
}

.kc14 {
  font-size: 16px;
  font-weight: 800;
}

.kc15 {
  font-size: 12.5px;
  color: #3a4150;
}

.kc16 {
  flex: 1 1 200px;
  height: 10px;
  border-radius: 999px;
  background: rgba(17,19,26,.12);
  overflow: hidden;
}

.kc17 {
  display: block;
  height: 100%;
  background: #11131a;
  border-radius: 999px;
  transition: width .4s;
}

.kc18 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #11131a;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.kc19 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kc20 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.kc21 {
  font-size: 11.5px;
  opacity: .65;
}

.kc22 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.kc23 {
  flex-direction: column;
  gap: 14px;
}

.kc24 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kc25 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kc26 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kc27 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kc28 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.kc29 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kc30 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kc31 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.kc32 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc33 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kc34 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kc35 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 8%, var(--b-151821,#151821));
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  color: var(--t-eef0f5,#eef0f5);
}

.kc36 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kc37 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kc38 {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc39 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc40 {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kc41 {
  flex: 1 1 auto;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  transition: border-color .2s;
}

.kc42 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.kc43 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kc44 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kc45 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
}

.kc46 {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
}

.kc47 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kc48 {
  font-size: 11px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.kc49 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 4px;
}

.kc50 {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg,var(--w05,rgba(255,255,255,.06)),var(--w02,rgba(255,255,255,.02)));
}

.kc51 {
  position: absolute;
  inset: 0;
}

.kc52 {
  position: absolute;
  left: 5px;
  bottom: 4px;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  pointer-events: none;
}

.kc53 {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  padding: 4px 12px;
}

.kc54 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kc55 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc56 {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.kc57 {
  display: flex;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.45;
}

.kc58 {
  font-weight: 900;
}

.kc59 {
  padding: 10px 12px;
  border-radius: 4px 16px 16px 16px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 13.5px;
  line-height: 1.5;
}

.kc60 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kc61 {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border-radius: 999px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
}

.kc62 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
}

.kc63 {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.kc64 {
  font-size: 10.5px;
  font-weight: 700;
}

.kc65 {
  color: var(--t-9adbe6,#9adbe6);
  font-weight: 900;
}

.kc66 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kc67 {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kc68 {
  display: block;
  height: 100%;
  background: oklch(0.8 0.14 155);
  border-radius: 999px;
  transition: width .3s;
}

.kc69 {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--t-a7abb8,#a7abb8);
}

.kc70 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: none;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.kc71 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kc72 {
  flex: 1;
}

.kc73 {
  font-size: 11px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kc74 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kc75 {
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.kc76 {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-size: 13.5px;
  outline: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.kc77 {
  display: flex;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 12px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 12%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 45%, transparent);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-co,oklch(0.72 0.14 35));
}

.kc78 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}

.kc79 {
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.kc80 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: acspin .7s linear infinite;
}

.kc81 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  border-radius: 24px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.2));
  text-align: center;
}

.kc82 {
  font-size: 40px;
}

.kc83 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.kc84 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap: 10px;
}

.kc85 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kc86 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kc87 {
  font-size: 14px;
  font-weight: 800;
}

.kc88 {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.kcf1:focus {
  border-color: rgba(154,219,230,.7);
}
/* -- generated ac: end -- */

/* ==========================================================================
   22zz66. User interface · Accordion: classes generated from the handoff
   by _dev/ui_accordion_convert.py (ku1 …, kuh hover, kuf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* The loading panel's shimmer. */
@keyframes uaShim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Keyboard focus only: a mouse click shows no ring. */
.uacc-page button[data-acc]:focus-visible {
  outline: 2px solid #9adbe6;
  outline-offset: -2px;
}

/* The split divider drags on touch too, instead of scrolling the page. */
.uacc-page [data-split-handle] { touch-action: none; }

/* Phones: the rich header drops its "Open →" hint so the title has room
   (the whole header is one button; the hint is not a separate action). */
@media (max-width: 400px) {
  .uacc-page .ku40 { display: none !important; }
}

/* The search highlight shows only when there is a match. */
.uacc-page mark:empty { display: none; }

/* -- generated ua: start -- */
.ku1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ku2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding-left: 10px;
}

.ku3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 300px;
  min-width: 0;
}

.ku4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ku5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ku6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ku7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ku8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ku9 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
  width: fit-content;
}

.ku10 {
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ku11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.ku12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ku13 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-radius: 28px;
  transition: background .3s;
}

.ku14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ku15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.ku16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ku17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.ku18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ku19 {
  display: grid;
  gap: 16px;
  align-items: stretch;
}

.ku20 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ku21 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.ku22 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ku23 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.ku24 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ku25 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.ku26 {
  position: relative;
  flex: 1;
  min-height: 440px;
  overflow: hidden;
  background: radial-gradient(70% 60% at 50% 0%,rgba(154,219,230,.08),transparent 70%),repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  touch-action: none;
}

.ku27 {
  position: absolute;
  left: 28px;
  top: 16px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--t-a7abb8,#a7abb8);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.ku28 {
  position: absolute;
  right: 28px;
  top: 16px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(154,219,230,.16);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--t-9adbe6,#9adbe6);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.ku29 {
  position: absolute;
  top: 52px;
  left: 28px;
  right: 28px;
  pointer-events: none;
}

.ku30 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--t-eef0f5,#eef0f5);
}

.ku31 {
  overflow: hidden;
  transition: background .2s;
}

.ku32 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
}

.ku33 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
}

.ku34 {
  order: 1;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ku35 {
  order: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ku36 {
  font-weight: 700;
  line-height: 1.3;
}

.ku37 {
  background: color-mix(in oklab, #9adbe6 35%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.ku38 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ku39 {
  order: 1;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  align-items: center;
  white-space: nowrap;
}

.ku40 {
  order: 1;
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
  white-space: nowrap;
}

.ku41 {
  display: grid;
}

.ku42 {
  overflow: hidden;
}

.ku43 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
}

.ku44 {
  height: 10px;
  width: 80%;
  border-radius: 5px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)) 25%,var(--w10,rgba(255,255,255,.14)) 50%,var(--w05,rgba(255,255,255,.06)) 75%);
  background-size: 200% 100%;
  animation: uaShim 1.2s linear infinite;
}

.ku45 {
  height: 10px;
  width: 60%;
  border-radius: 5px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)) 25%,var(--w10,rgba(255,255,255,.14)) 50%,var(--w05,rgba(255,255,255,.06)) 75%);
  background-size: 200% 100%;
  animation: uaShim 1.2s linear infinite;
}

.ku46 {
  flex-direction: column;
  gap: 5px;
}

.ku47 {
  display: flex;
  gap: 8px;
}

.ku48 {
  color: var(--t-9adbe6,#9adbe6);
  font-weight: 900;
}

.ku49 {
  flex-direction: column;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  padding: 2px 12px;
}

.ku50 {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ku51 {
  flex: 1;
}

.ku52 {
  font-weight: 800;
  color: var(--t-eef0f5,#eef0f5);
}

.ku53 {
  flex-wrap: wrap;
  gap: 6px;
}

.ku54 {
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ku55 {
  color: var(--t-9adbe6,#9adbe6);
}

.ku56 {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 10px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 12%, transparent);
  color: var(--ink-co,oklch(0.72 0.14 35));
  font-weight: 700;
}

.ku57 {
  margin-left: auto;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.ku58 {
  position: absolute;
  top: 52px;
  left: 28px;
  right: 28px;
}

.ku59 {
  position: absolute;
  top: 44px;
  bottom: 12px;
  width: 2px;
  margin-left: -1px;
  background: var(--t-eef0f5,#eef0f5);
  box-shadow: 0 0 18px rgba(154,219,230,.6);
  pointer-events: none;
}

.ku60 {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px;
  border-radius: 50%;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  cursor: ew-resize;
}

.ku61 {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 18px;
  padding: 20px;
  background: radial-gradient(70% 60% at 50% 0%,rgba(154,219,230,.08),transparent 70%),repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.ku62 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ku63 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ku64 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
}

.ku65 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 4px;
  border-radius: 999px;
  border: none;
  background: #9adbe6;
  color: #11131a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.ku66 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ku67 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ku68 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ku69 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ku70 {
  font-size: 15px;
  font-weight: 700;
}

.ku71 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ku72 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  transition: all .2s;
}

.ku73 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ku74 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.ku75 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.ku76 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ku77 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ku78 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.ku79 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.ku80 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.ku81 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.ku82 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.ku83 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.ku84 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
  min-height: 20px;
}

.ku85 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ku86 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ku87 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ku88 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap: 18px;
  align-items: start;
}

.ku89 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}

.ku90 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ku91 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ku92 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
}

.ku93 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
}

.ku94 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: start;
}

.ku95 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 18px;
  align-items: start;
}

.ku96 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ku97 {
  position: relative;
  display: flex;
}

.ku98 {
  height: 42px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 14px 0 40px;
  border-radius: 14px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.ku99 {
  position: absolute;
  left: 14px;
  top: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ku100 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ku101 {
  font-size: 12.5px;
  font-weight: 700;
}

.ku102 {
  margin-left: auto;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ku103 {
  height: 38px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.ku104 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
  min-width: 0;
}

.ku105 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap: 8px;
}

.ku106 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.035));
}

.ku107 {
  min-width: 44px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--w14,rgba(255,255,255,.2));
  border-bottom-width: 3px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ku108 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.ku109 {
  font-family: ui-monospace,Menlo,monospace;
  color: var(--t-9adbe6,#9adbe6);
}

.ku110 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap: 14px;
}

.ku111 {
  border-radius: 22px;
  padding: 18px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ku112 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ku113 {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ku114 {
  font-weight: 900;
}

.kuh1:hover {
  background: rgba(154,219,230,.05);
}

.kuh2:hover {
  background: rgba(154,219,230,.05);
}

.kuh3:hover {
  background: rgba(154,219,230,.05);
}

.kuh4:hover {
  background: rgba(154,219,230,.05);
}

.kuh5:hover {
  background: rgba(154,219,230,.05);
}

.kuh6:hover {
  background: rgba(154,219,230,.05);
}

.kuh7:hover {
  background: rgba(154,219,230,.05);
}

.kuh8:hover {
  background: rgba(154,219,230,.05);
}

.kuh9:hover {
  background: rgba(154,219,230,.05);
}

.kuh10:hover {
  background: rgba(154,219,230,.05);
}

.kuh11:hover {
  background: rgba(154,219,230,.05);
}

.kuh12:hover {
  background: rgba(154,219,230,.05);
}

.kuf1:focus {
  outline: none;
}

.kuf2:focus {
  outline: none;
}

.kuf3:focus {
  outline: none;
}

.kuf4:focus {
  outline: none;
}

.kuf5:focus {
  outline: none;
}

.kuf6:focus {
  outline: none;
}

.kuf7:focus {
  outline: none;
}

.kuf8:focus {
  border-color: rgba(154,219,230,.7);
}

.kuf9:focus {
  outline: none;
}

.kuf10:focus {
  outline: none;
}

.kuf11:focus {
  outline: none;
}

.kuf12:focus {
  outline: none;
}

.kuf13:focus {
  outline: none;
}
/* -- generated ua: end -- */

/* ==========================================================================
   22zz67. User interface · Alerts: classes generated from the handoff by
   _dev/ui_alerts_convert.py (kl1 …, klh hover). The page reuses the
   .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* A new alert or toast slides in. */
@keyframes alIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ual-page * { animation: none !important; }
}

/* Phones: the roles table puts "when" under the role code. */
@media (max-width: 400px) {
  .ual-page .kl127 { grid-template-columns: 90px minmax(0, 1fr); }
  .ual-page .kl127 > :last-child { grid-column: 2; }
}

/* -- generated al: start -- */
.kl1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kl2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kl3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kl4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kl5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kl6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kl8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.kl10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kl11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kl12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kl13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.kl14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kl15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kl16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kl17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kl18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: stretch;
}

.kl20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kl21 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kl22 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.kl23 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.kl24 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kl25 {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  transition: background .2s,border-color .2s;
}

.kl26 {
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 900;
  line-height: 1;
}

.kl27 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kl28 {
  font-weight: 800;
  line-height: 1.3;
}

.kl29 {
  line-height: 1.5;
}

.kl30 {
  flex-direction: column;
  gap: 2px;
  padding-left: 2px;
}

.kl31 {
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.kl32 {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
}

.kl33 {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .25s linear;
}

.kl34 {
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.kl35 {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.kl36 {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kl37 {
  width: 28px;
  height: 28px;
  margin: -2px -4px 0 0;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  font-weight: 400;
}

.kl38 {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  transition: width .25s linear;
}

.kl39 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kl40 {
  height: 52px;
  border-radius: 14px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.kl41 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kl42 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 4px;
  border-radius: 999px;
  border: none;
  background: #9adbe6;
  color: #11131a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.kl43 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kl44 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl45 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kl46 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kl47 {
  font-size: 15px;
  font-weight: 700;
}

.kl48 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kl49 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  transition: all .2s;
}

.kl50 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kl51 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.kl52 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.kl53 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl54 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.kl55 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.kl56 {
  flex: 1;
}

.kl57 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kl58 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kl59 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.kl60 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.kl61 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.kl62 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kl63 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kl64 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kl65 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kl66 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  overflow-x: auto;
}

.kl67 {
  display: grid;
  grid-template-columns: 96px repeat(5,minmax(min(180px,100%),1fr));
  gap: 10px;
  align-items: center;
  min-width: 1040px;
}

.kl68 {
  font-size: 13px;
  font-weight: 800;
}

.kl69 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.kl70 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kl71 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.kl72 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kl73 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kl74 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kl75 {
  height: 52px;
  width: 100%;
  border-radius: 14px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.kl76 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kl77 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  overflow: hidden;
}

.kl78 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #11131a;
  color: #eef0f5;
  font-size: 12.5px;
  font-weight: 600;
}

.kl79 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
  box-shadow: 0 0 10px oklch(0.8 0.13 70);
}

.kl80 {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kl81 {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #a7abb8;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kl82 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kl83 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .24em;
}

.kl84 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl85 {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl86 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kl87 {
  align-self: flex-start;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px dashed var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.kl88 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: start;
}

.kl89 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kl90 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid oklch(0.72 0.14 35);
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.kl91 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}

.kl92 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 22%, transparent);
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kl93 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.kl94 {
  height: 40px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.kl95 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kl96 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kl97 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kl98 {
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kl99 {
  display: block;
  width: 69%;
  height: 100%;
  background: #9adbe6;
  border-radius: 999px;
}

.kl100 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-top: 6px;
}

.kl101 {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kl102 {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 6%, transparent);
  border-top: none;
}

.kl103 {
  font-family: ui-monospace,Menlo,monospace;
}

.kl104 {
  font-weight: 800;
}

.kl105 {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 6%, transparent);
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kl106 {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  background: transparent;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kl107 {
  font-weight: 800;
  color: var(--t-a7abb8,#a7abb8);
}

.kl108 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kl109 {
  position: relative;
  height: 300px;
  border-radius: 16px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  overflow: hidden;
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kl110 {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl111 {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

.kl112 {
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  border-radius: 14px;
  animation: alIn .25s ease;
}

.kl113 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl114 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl115 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 18px;
  align-items: start;
}

.kl116 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kl117 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}

.kl118 {
  font-size: 12.5px;
  font-weight: 800;
}

.kl119 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kl120 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kl121 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kl122 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.kl123 {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--w06,rgba(255,255,255,.08));
  font-weight: 800;
}

.kl124 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kl125 {
  animation: alIn .25s ease;
}

.kl126 {
  padding: 24px;
  border-radius: 14px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.22));
  text-align: center;
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl127 {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.kl128 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}

.kl129 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kl130 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.kl131 {
  font-size: 12px;
  line-height: 1.5;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl132 {
  display: flex;
  align-items: center;
}

.kl133 {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kl134 {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
}

.kl135 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  font-weight: 800;
}

.kl136 {
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 18%, transparent);
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
}

.kl137 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 14px;
}

.kl138 {
  border-radius: 24px;
  padding: 18px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kl139 {
  font-size: 15px;
  font-weight: 800;
}

.kl140 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kl141 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kl142 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kl143 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kl144 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kl145 {
  font-weight: 900;
}

.kl146 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.klh1:hover {
  background: rgba(127,127,127,.15);
}

.klh2:hover {
  background: rgba(127,127,127,.15);
}

.klh3:hover {
  background: rgba(127,127,127,.15);
}

.klh4:hover {
  background: rgba(127,127,127,.15);
}

.klh5:hover {
  background: rgba(127,127,127,.15);
}

.klh6:hover {
  background: rgba(127,127,127,.15);
}

.klh7:hover {
  background: rgba(127,127,127,.15);
}

.klh8:hover {
  background: rgba(127,127,127,.15);
}

.klh9:hover {
  background: rgba(127,127,127,.15);
}

.klh10:hover {
  background: rgba(127,127,127,.15);
}

.klh11:hover {
  background: rgba(127,127,127,.15);
}

.klh12:hover {
  background: rgba(127,127,127,.15);
}

.klh13:hover {
  background: rgba(127,127,127,.15);
}

.klh14:hover {
  background: rgba(127,127,127,.15);
}

.klh15:hover {
  background: rgba(127,127,127,.15);
}

.klh16:hover {
  background: rgba(127,127,127,.15);
}

.klh17:hover {
  background: rgba(127,127,127,.15);
}

.klh18:hover {
  background: rgba(127,127,127,.15);
}
/* -- generated al: end -- */

/* ==========================================================================
   22zz68. User interface · Badges: classes generated from the handoff by
   _dev/ui_badges_convert.py (kg1 …, kgh hover). The page reuses the
   .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* The live dot's pulse. */
@keyframes bxPulse {
  0% { transform: scale(.6); opacity: .6; }
  100% { transform: scale(2.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ubx-page * { animation: none !important; }
}

/* The remove ✕ is a span with role="button": show keyboard focus. */
.ubx-page [role="button"]:focus-visible {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

/* Phones: Default and Yours stack instead of squeezing side by side. */
@media (max-width: 400px) {
  .ubx-page .kg23 { grid-template-columns: minmax(0, 1fr); }
}

/* -- generated bx: start -- */
.kg1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kg2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kg3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kg4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kg5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kg6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kg7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kg8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kg9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.kg10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kg11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kg12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kg13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.kg14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kg15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kg16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kg17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kg18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kg19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: stretch;
}

.kg20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kg21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kg22 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.kg23 {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.kg24 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px 16px;
  border-right: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kg25 {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  vertical-align: middle;
  flex-shrink: 0;
}

.kg26 {
  position: relative;
  border-radius: 50%;
  flex-shrink: 0;
}

.kg27 {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  opacity: .45;
  animation: bxPulse 1.4s ease-out infinite;
}

.kg28 {
  line-height: 1;
}

.kg29 {
  padding: 0 4px;
  border-radius: 999px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.kg30 {
  margin-right: -3px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  opacity: .75;
  align-items: center;
  justify-content: center;
}

.kg31 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.kg32 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px 16px;
}

.kg33 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kg34 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kg35 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 4px;
  border-radius: 999px;
  border: none;
  background: #9adbe6;
  color: #11131a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.kg36 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kg37 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kg38 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kg39 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kg40 {
  font-size: 15px;
  font-weight: 700;
}

.kg41 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kg42 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  transition: all .2s;
}

.kg43 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kg44 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.kg45 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.kg46 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kg47 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.kg48 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.kg49 {
  flex: 1;
}

.kg50 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kg51 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kg52 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.kg53 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.kg54 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.kg55 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kg56 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kg57 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kg58 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kg59 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  overflow-x: auto;
}

.kg60 {
  display: grid;
  grid-template-columns: 90px repeat(5,minmax(min(120px,100%),1fr));
  gap: 14px 12px;
  align-items: center;
  min-width: 760px;
}

.kg61 {
  font-size: 13px;
  font-weight: 800;
}

.kg62 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kg63 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

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

.kg65 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kg66 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kg67 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kg68 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.kg69 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kg70 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.kg71 {
  position: relative;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kg72 {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--w05,rgba(255,255,255,.06));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.kg73 {
  position: absolute;
  right: -7px;
  top: -7px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--b-1b1f2a,#1b1f2a);
}

.kg74 {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--w05,rgba(255,255,255,.06));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.kg75 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 13px;
  font-weight: 700;
}

.kg76 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.kg77 {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: oklch(0.82 0.08 80);
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kg78 {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  border: 2.5px solid var(--b-1b1f2a,#1b1f2a);
}

.kg79 {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: oklch(0.82 0.08 30);
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kg80 {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
  border: 2.5px solid var(--b-1b1f2a,#1b1f2a);
}

.kg81 {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: oklch(0.82 0.08 120);
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kg82 {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: oklch(0.72 0.14 35);
  border: 2.5px solid var(--b-1b1f2a,#1b1f2a);
}

.kg83 {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: oklch(0.82 0.08 330);
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kg84 {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #6b7080;
  border: 2.5px solid var(--b-1b1f2a,#1b1f2a);
}

.kg85 {
  display: flex;
  gap: 6px;
}

.kg86 {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.kg87 {
  font-size: 12px;
  font-weight: 700;
}

.kg88 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kg89 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
}

.kg90 {
  font-size: 14px;
  font-weight: 700;
}

.kg91 {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kg92 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.kg93 {
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
  flex: 1;
}

.kg94 {
  font-size: 18px;
  font-weight: 800;
}

.kg95 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kg96 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  padding: 14px 16px 8px;
}

.kg97 {
  display: grid;
  grid-template-columns: 62px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13px;
}

.kg98 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
}

.kg99 {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kg100 {
  position: relative;
  display: block;
  height: 150px;
  background: linear-gradient(135deg,#2a3242,#151821);
}

.kg101 {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  gap: 6px;
}

.kg102 {
  position: absolute;
  right: 12px;
  bottom: 12px;
}

.kg103 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kg104 {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
}

.kg105 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kg106 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  padding: 0 2px 6px;
}

.kg107 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
}

.kg108 {
  width: 18px;
  text-align: center;
  color: var(--t-a7abb8,#a7abb8);
}

.kg109 {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-top: 8px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.kg110 {
  flex: 1;
  height: 34px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.kg111 {
  margin-top: 8px;
  align-self: flex-start;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.kg112 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kg113 {
  display: flex;
  flex-direction: column;
}

.kg114 {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13px;
}

.kg115 {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13.3333px;
  font-weight: 400;
}

.kg116 {
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kg117 {
  position: absolute;
  right: 0;
  top: 40px;
  z-index: 5;
  width: 180px;
  padding: 6px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kg118 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 9px;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  font-size: 13.3333px;
  font-weight: 400;
}

.kg119 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-9adbe6,#9adbe6);
}

.kg120 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kg121 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 6px 0 12px;
  border-radius: 999px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kg122 {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.kg123 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kg124 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.03));
  font-size: 13px;
}

.kg125 {
  flex: 1;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kg126 {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px dashed var(--w14,rgba(255,255,255,.25));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kg127 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kg128 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 6%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 26%, transparent);
}

.kg129 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kg130 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.kg131 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 6%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 26%, transparent);
}

.kg132 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
}

.kg133 {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kg134 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
  overflow-wrap: anywhere;
}

.kg135 {
  display: flex;
  align-items: center;
}

.kg136 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kg137 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  font-weight: 800;
}

.kg138 {
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 18%, transparent);
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
}

.kg139 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 14px;
}

.kg140 {
  border-radius: 24px;
  padding: 18px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kg141 {
  font-size: 15px;
  font-weight: 800;
}

.kg142 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kg143 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kg144 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kg145 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kg146 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kg147 {
  font-weight: 900;
}

.kg148 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kgh1:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh2:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh3:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh4:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh5:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh6:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh7:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh8:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh9:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh10:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh11:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh12:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh13:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh14:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh15:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh16:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh17:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh18:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh19:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh20:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh21:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh22:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh23:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh24:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh25:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh26:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh27:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh28:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh29:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh30:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgh31:hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.kgf1:focus {
  border-color: rgba(154,219,230,.7);
}
/* -- generated bx: end -- */

/* ==========================================================================
   22zz69. User interface · Buttons: classes generated from the handoff by
   _dev/ui_buttons_convert.py (kn1 …, knh hover, kna pressed). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* The loading spinner. */
@keyframes btSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ubt-page * { animation-duration: 2.4s !important; }
}

/* Keyboard focus only: a mouse click shows no ring. */
.ubt-page button[data-bt]:focus { outline: none; }
.ubt-page button[data-bt]:focus-visible {
  outline: 2px solid #9adbe6;
  outline-offset: 2px;
}

/* -- generated bt: start -- */
.kn1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kn2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kn3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kn4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kn5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kn6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kn7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kn8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kn9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.kn10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kn11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kn12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kn13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.kn14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kn15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kn16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kn17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kn18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kn19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: stretch;
}

.kn20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kn21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kn22 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.kn23 {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(200px,100%),1fr));
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.kn24 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 34px 18px;
  border-right: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kn25 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-underline-offset: 3px;
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: filter .15s,transform .1s,background .2s,box-shadow .2s;
  user-select: none;
  touch-action: none;
}

.kn26 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.kn27 {
  position: relative;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: btSpin .7s linear infinite;
}

.kn28 {
  position: relative;
  line-height: 1;
}

.kn29 {
  position: relative;
}

.kn30 {
  position: relative;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.kn31 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 34px 18px;
  width: 100%;
  box-sizing: border-box;
}

.kn32 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kn33 {
  display: flex;
  justify-content: center;
  width: 100%;
}

.kn34 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kn35 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kn36 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 4px;
  border-radius: 999px;
  border: none;
  background: #9adbe6;
  color: #11131a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.kn37 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kn38 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kn39 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kn40 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kn41 {
  font-size: 15px;
  font-weight: 700;
}

.kn42 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kn43 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  transition: all .2s;
}

.kn44 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kn45 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.kn46 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.kn47 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kn48 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.kn49 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.kn50 {
  flex: 1;
}

.kn51 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kn52 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kn53 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.kn54 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.kn55 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.kn56 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kn57 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kn58 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kn59 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kn60 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  overflow-x: auto;
}

.kn61 {
  display: grid;
  grid-template-columns: 100px repeat(4,minmax(120px,auto)) 1fr;
  gap: 14px 16px;
  align-items: center;
  min-width: 700px;
}

.kn62 {
  font-size: 13px;
  font-weight: 800;
}

.kn63 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kn64 {
  display: grid;
  grid-template-columns: 100px repeat(6,minmax(110px,auto));
  gap: 14px 16px;
  align-items: center;
  min-width: 820px;
}

.kn65 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kn66 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.kn67 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.kn68 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kn69 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kn70 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kn71 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kn72 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.kn73 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kn74 {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
}

.kn75 {
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kn76 {
  position: relative;
  display: inline-flex;
  width: fit-content;
}

.kn77 {
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 999px 0 0 999px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kn78 {
  width: 1px;
  background: rgba(17,19,26,.2);
}

.kn79 {
  width: 38px;
  height: 40px;
  border: none;
  border-radius: 0 999px 999px 0;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  font-weight: 400;
}

.kn80 {
  position: absolute;
  left: 0;
  top: 46px;
  z-index: 6;
  width: 200px;
  padding: 6px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kn81 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.kn82 {
  width: 16px;
  text-align: center;
}

.kn83 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kn84 {
  font-size: 14px;
  font-weight: 700;
  flex: 1;
}

.kn85 {
  position: absolute;
  right: 0;
  top: 42px;
  z-index: 6;
  width: 200px;
  padding: 6px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kn86 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.kn87 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.kn88 {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.kn89 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kn90 {
  position: relative;
  height: 170px;
  border-radius: 22px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kn91 {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kn92 {
  position: absolute;
  right: 16px;
  bottom: 84px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.kn93 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 14px;
  border-radius: 999px;
  border: none;
  background: var(--b-1b1f2a,#1b1f2a);
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  white-space: nowrap;
}

.kn94 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--w06,rgba(255,255,255,.08));
  display: flex;
  align-items: center;
  justify-content: center;
}

.kn95 {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

.kn96 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kn97 {
  display: flex;
  gap: 4px;
}

.kn98 {
  flex: 1;
  height: 4px;
  border-radius: 999px;
}

.kn99 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border-radius: 20px;
  background: var(--w04,rgba(255,255,255,.05));
  border: 1px solid var(--w10,rgba(255,255,255,.12));
}

.kn100 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kn101 {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kn102 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kn103 {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: oklch(0.82 0.08 40);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kn104 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kn105 {
  font-size: 14px;
  font-weight: 700;
}

.kn106 {
  font-size: 12px;
  color: oklch(0.72 0.14 35);
  font-weight: 700;
}

.kn107 {
  display: flex;
  gap: 8px;
}

.kn108 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kn109 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kn110 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 6%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 26%, transparent);
}

.kn111 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kn112 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 6%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 26%, transparent);
}

.kn113 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px;
  border-radius: 14px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.kn114 {
  position: relative;
  display: inline-flex;
}

.kn115 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px;
  border: 1.5px dashed #c9a96a;
  border-radius: 10px;
  pointer-events: none;
}

.kn116 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kn117 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kn118 {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kn119 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
  overflow-wrap: anywhere;
}

.kn120 {
  display: flex;
  align-items: center;
}

.kn121 {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kn122 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  font-weight: 800;
}

.kn123 {
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 18%, transparent);
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
}

.kn124 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 14px;
}

.kn125 {
  border-radius: 24px;
  padding: 18px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kn126 {
  font-size: 15px;
  font-weight: 800;
  flex: 1;
}

.kn127 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kn128 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kn129 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kn130 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kn131 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kn132 {
  font-weight: 900;
}

.kn133 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.knh1:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh2:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh3:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh4:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh5:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh6:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh7:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh8:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh9:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.knh10:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh11:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.knh12:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh13:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh14:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh15:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh16:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh17:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh18:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh19:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh20:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh21:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh22:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh23:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh24:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh25:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh26:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh27:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh28:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh29:not(:disabled):hover {
  filter: brightness(1.08);
}

.knh30:not(:disabled):hover {
  filter: brightness(1.08);
}

.kna1:not(:disabled):active {
  transform: scale(.97);
}

.kna2:not(:disabled):active {
  transform: scale(.97);
}

.kna3:not(:disabled):active {
  transform: scale(.97);
}

.kna4:not(:disabled):active {
  transform: scale(.97);
}

.kna5:not(:disabled):active {
  transform: scale(.97);
}

.kna6:not(:disabled):active {
  transform: scale(.97);
}

.kna7:not(:disabled):active {
  transform: scale(.97);
}

.kna8:not(:disabled):active {
  transform: scale(.97);
}

.kna9:not(:disabled):active {
  transform: scale(.97);
}

.kna10:not(:disabled):active {
  transform: scale(.97);
}

.kna11:not(:disabled):active {
  transform: scale(.97);
}

.kna12:not(:disabled):active {
  transform: scale(.97);
}

.kna13:not(:disabled):active {
  transform: scale(.97);
}

.kna14:not(:disabled):active {
  transform: scale(.97);
}

.kna15:not(:disabled):active {
  transform: scale(.97);
}

.kna16:not(:disabled):active {
  transform: scale(.97);
}

.kna17:not(:disabled):active {
  transform: scale(.97);
}

.kna18:not(:disabled):active {
  transform: scale(.97);
}

.kna19:not(:disabled):active {
  transform: scale(.97);
}

.kna20:not(:disabled):active {
  transform: scale(.97);
}

.kna21:not(:disabled):active {
  transform: scale(.97);
}

.kna22:not(:disabled):active {
  transform: scale(.97);
}

.kna23:not(:disabled):active {
  transform: scale(.97);
}

.kna24:not(:disabled):active {
  transform: scale(.97);
}

.kna25:not(:disabled):active {
  transform: scale(.97);
}

.kna26:not(:disabled):active {
  transform: scale(.97);
}

.kna27:not(:disabled):active {
  transform: scale(.97);
}

.kna28:not(:disabled):active {
  transform: scale(.97);
}
/* -- generated bt: end -- */

/* ==========================================================================
   22zz70. User interface · Carousel: classes generated from the handoff by
   _dev/ui_carousel_convert.py (kr1 …, krh hover, krf focus). The page
   reuses the .cb-page tokens and .cb-ph image slots of Cards · Basic.
   ========================================================================== */
/* The loading skeleton's shimmer. */
@keyframes crShim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ucr-page * { animation: none !important; }
}

/* Slides are dragged, not their text or images. */
.ucr-page [aria-roledescription="carousel"] {
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

/* -- generated cr: start -- */
.kr1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kr2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kr3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kr4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kr5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kr6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kr7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kr8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kr9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.kr10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kr11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kr12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kr13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.kr14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kr15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kr16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kr17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kr18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kr19 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.kr20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 2 1 520px;
}

.kr21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kr22 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kr23 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.kr24 {
  flex: 1;
  padding: 24px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  display: flex;
  align-items: center;
}

.kr25 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  width: 100%;
  margin: 0 auto;
}

.kr26 {
  align-items: center;
  gap: 8px;
}

.kr27 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kr28 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kr29 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  font-weight: 400;
}

.kr30 {
  position: relative;
  overflow: hidden;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.kr31 {
  will-change: transform;
}

.kr32 {
  position: relative;
  grid-area: 1/1;
  overflow: hidden;
  transition: opacity .55s ease;
  min-width: 0;
  box-sizing: border-box;
}

.kr33 {
  position: absolute;
  inset: 0;
}

.kr34 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(11,12,17,.15),transparent 35%,transparent 50%,rgba(11,12,17,.88));
  pointer-events: none;
}

.kr35 {
  position: absolute;
  flex-direction: column;
  gap: 4px;
  color: #ffffff;
  pointer-events: none;
}

.kr36 {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .16em;
  color: #9adbe6;
}

.kr37 {
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.kr38 {
  font-size: 12.5px;
  color: #c9ccd6;
}

.kr39 {
  position: absolute;
  inset: 0;
  flex-direction: column;
  gap: 10px;
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
}

.kr40 {
  font-weight: 800;
  line-height: 1;
}

.kr41 {
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.kr42 {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
}

.kr43 {
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.kr44 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kr45 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kr46 {
  font-size: 13px;
  font-weight: 800;
}

.kr47 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  flex-direction: column;
  gap: 3px;
  background: linear-gradient(180deg,transparent,rgba(11,12,17,.9));
  color: #fff;
  pointer-events: none;
}

.kr48 {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kr49 {
  font-size: 11.5px;
  color: #c9ccd6;
}

.kr50 {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 4;
  gap: 4px;
  pointer-events: none;
}

.kr51 {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
}

.kr52 {
  display: block;
  height: 100%;
  background: #ffffff;
}

.kr53 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  z-index: 3;
  border: none;
  background: transparent;
  cursor: w-resize;
  font-size: 13.3333px;
  font-weight: 400;
}

.kr54 {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 65%;
  z-index: 3;
  border: none;
  background: transparent;
  cursor: e-resize;
  font-size: 13.3333px;
  font-weight: 400;
}

.kr55 {
  position: absolute;
  left: 12px;
  top: 50%;
  margin-top: -20px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(17,19,26,.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kr56 {
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -20px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(17,19,26,.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kr57 {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 4;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(17,19,26,.65);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  align-items: center;
  font-family: ui-monospace,Menlo,monospace;
  pointer-events: none;
}

.kr58 {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 4;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(17,19,26,.6);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  align-items: center;
  gap: 6px;
}

.kr59 {
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.kr60 {
  position: relative;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  transition: width .3s,background .3s;
  font-size: 13.3333px;
  font-weight: 400;
}

.kr61 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

.kr62 {
  height: 4px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kr63 {
  display: block;
  height: 100%;
  background: #9adbe6;
  border-radius: 999px;
  transition: width .4s;
}

.kr64 {
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.kr65 {
  position: relative;
  flex: 0 0 72px;
  height: 50px;
  padding: 0;
  border-radius: 10px;
  background: #232838;
  overflow: hidden;
  cursor: pointer;
  transition: opacity .2s,border-color .2s;
  font-size: 13.3333px;
  font-weight: 400;
}

.kr66 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kr67 {
  position: absolute;
  left: 5px;
  bottom: 3px;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}

.kr68 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kr69 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 4px;
  border-radius: 999px;
  border: none;
  background: #9adbe6;
  color: #11131a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.kr70 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kr71 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kr72 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1 1 300px;
}

.kr73 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kr74 {
  font-size: 15px;
  font-weight: 700;
}

.kr75 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kr76 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  transition: all .2s;
}

.kr77 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kr78 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.kr79 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.kr80 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kr81 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.kr82 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.kr83 {
  flex: 1;
}

.kr84 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kr85 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kr86 {
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 14%, transparent);
  font-size: 11.5px;
  font-weight: 700;
}

.kr87 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.kr88 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.kr89 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.kr90 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kr91 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kr92 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kr93 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kr94 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: start;
}

.kr95 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.kr96 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.kr97 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kr98 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kr99 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: start;
}

.kr100 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 18px;
  align-items: start;
}

.kr101 {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.kr102 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kr103 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 18px;
  align-items: start;
}

.kr104 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kr105 {
  display: block;
  aspect-ratio: 16/9;
  border-radius: 16px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)) 25%,var(--w10,rgba(255,255,255,.12)) 50%,var(--w05,rgba(255,255,255,.06)) 75%);
  background-size: 200% 100%;
  animation: crShim 1.3s linear infinite;
}

.kr106 {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.kr107 {
  width: 22px;
  height: 8px;
  border-radius: 999px;
  background: var(--w10,rgba(255,255,255,.14));
}

.kr108 {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
}

.kr109 {
  aspect-ratio: 16/9;
  border-radius: 16px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.22));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
}

.kr110 {
  font-size: 24px;
}

.kr111 {
  font-size: 14px;
  font-weight: 700;
}

.kr112 {
  aspect-ratio: 16/9;
  border-radius: 16px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 10%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 40%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
}

.kr113 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kr114 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kr115 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kr116 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kr117 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kr118 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kr119 {
  font-size: 13px;
  font-weight: 700;
}

.kr120 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kr121 {
  font-size: 12.5px;
  font-weight: 700;
}

.kr122 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
  overflow-wrap: anywhere;
}

.kr123 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.kr124 {
  color: var(--t-a7abb8,#a7abb8);
}

.kr125 {
  font-family: ui-monospace,Menlo,monospace;
  font-weight: 800;
}

.kr126 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 14px;
}

.kr127 {
  border-radius: 24px;
  padding: 18px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kr128 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kr129 {
  font-size: 15px;
  font-weight: 800;
}

.kr130 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kr131 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kr132 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kr133 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kr134 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kr135 {
  font-weight: 900;
}

.kr136 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kr137 {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(6,7,11,.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  box-sizing: border-box;
}

.kr138 {
  width: min(1100px,100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #eef0f5;
}

.kr139 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kr140 {
  font-size: 12.5px;
  color: #a7abb8;
}

.kr141 {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  font-weight: 400;
}

.krh1:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh2:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh3:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh4:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh5:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh6:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh7:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh8:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh9:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh10:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh11:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh12:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh13:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh14:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh15:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh16:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh17:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh18:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh19:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh20:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh21:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh22:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh23:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh24:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh25:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh26:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh27:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh28:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh29:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh30:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh31:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krh32:not(:disabled):hover {
  background: rgba(17,19,26,.8);
}

.krf1:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf2:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf3:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf4:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf5:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf6:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf7:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf8:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf9:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf10:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf11:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf12:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf13:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf14:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf15:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.krf16:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}
/* -- generated cr: end -- */

/* ==========================================================================
   22zz71. User interface · Collapse: classes generated from the handoff by
   _dev/ui_collapse_convert.py (kd1 …). The page reuses the .cb-page
   tokens of Cards · Basic.
   ========================================================================== */
/* The lazy panel's shimmer. */
@keyframes coShim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .uco-page * { animation: none !important; }
}

/* Phones: the demo side panel opens to 150 px so its content keeps room,
   and the Tabs comparison wraps its three tabs. */
@media (max-width: 400px) {
  .uco-page .kd99 > :first-child { max-width: 150px; }
  .uco-page .kd151 { flex-wrap: wrap; }
}

/* -- generated co: start -- */
.kd1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kd2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kd3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kd4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kd5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kd6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kd7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kd8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kd9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.kd10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kd11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kd12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kd13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.kd14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kd15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kd16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kd17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kd18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kd19 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.kd20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 2 1 520px;
}

.kd21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kd22 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kd23 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.kd24 {
  flex: 1;
  padding: 28px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.kd25 {
  max-width: 620px;
  margin: 0 auto;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kd26 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kd27 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.kd28 {
  font-size: 15px;
  font-weight: 700;
}

.kd29 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kd30 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.kd31 {
  display: inline-block;
}

.kd32 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kd33 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
}

.kd34 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
}

.kd35 {
  display: grid;
}

.kd36 {
  min-height: 0;
  overflow: hidden;
}

.kd37 {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kd38 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kd39 {
  height: 10px;
  width: 90%;
  border-radius: 5px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)) 25%,var(--w10,rgba(255,255,255,.12)) 50%,var(--w05,rgba(255,255,255,.06)) 75%);
  background-size: 200% 100%;
  animation: coShim 1.2s linear infinite;
}

.kd40 {
  height: 10px;
  width: 75%;
  border-radius: 5px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)) 25%,var(--w10,rgba(255,255,255,.12)) 50%,var(--w05,rgba(255,255,255,.06)) 75%);
  background-size: 200% 100%;
  animation: coShim 1.2s linear infinite;
}

.kd41 {
  height: 10px;
  width: 82%;
  border-radius: 5px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)) 25%,var(--w10,rgba(255,255,255,.12)) 50%,var(--w05,rgba(255,255,255,.06)) 75%);
  background-size: 200% 100%;
  animation: coShim 1.2s linear infinite;
}

.kd42 {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
}

.kd43 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap: 10px;
}

.kd44 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.kd45 {
  height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  min-width: 0;
}

.kd46 {
  padding-top: 14px;
}

.kd47 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  width: fit-content;
  white-space: nowrap;
}

.kd48 {
  padding-top: 12px;
}

.kd49 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  width: fit-content;
  white-space: nowrap;
}

.kd50 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kd51 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 4px;
  border-radius: 999px;
  border: none;
  background: #9adbe6;
  color: #11131a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.kd52 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kd53 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kd54 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1 1 300px;
}

.kd55 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kd56 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kd57 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  transition: all .2s;
}

.kd58 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kd59 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.kd60 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.kd61 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kd62 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.kd63 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.kd64 {
  flex: 1;
}

.kd65 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kd66 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kd67 {
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 14%, transparent);
  font-size: 11.5px;
  font-weight: 700;
}

.kd68 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.kd69 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.kd70 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.kd71 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kd72 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kd73 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kd74 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kd75 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.kd76 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.kd77 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.kd78 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kd79 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kd80 {
  position: relative;
}

.kd81 {
  overflow: hidden;
}

.kd82 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(180deg,transparent,var(--b-1b1f2a,#1b1f2a));
  pointer-events: none;
}

.kd83 {
  display: flex;
  flex-direction: column;
}

.kd84 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13px;
}

.kd85 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kd86 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 12px;
}

.kd87 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kd88 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
}

.kd89 {
  flex: 1;
  font-size: 13.5px;
  font-weight: 700;
}

.kd90 {
  font-size: 14px;
  font-weight: 800;
}

.kd91 {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  font-weight: 400;
}

.kd92 {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  padding: 4px 12px;
}

.kd93 {
  display: flex;
  padding: 8px 0;
  border-top: none;
  font-size: 12.5px;
}

.kd94 {
  color: var(--t-a7abb8,#a7abb8);
  flex: 1;
}

.kd95 {
  font-weight: 700;
}

.kd96 {
  display: flex;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.kd97 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap: 10px;
}

.kd98 {
  padding-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap: 10px;
}

.kd99 {
  display: flex;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kd100 {
  flex-shrink: 0;
  background: var(--w03,rgba(255,255,255,.03));
  border-right: 1px solid var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.kd101 {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  background: var(--w05,rgba(255,255,255,.06));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kd102 {
  width: 20px;
  text-align: center;
}

.kd103 {
  transition: opacity .15s;
}

.kd104 {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.kd105 {
  width: 20px;
  text-align: center;
  color: var(--t-a7abb8,#a7abb8);
}

.kd106 {
  transition: opacity .15s;
  flex: 1;
}

.kd107 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kd108 {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kd109 {
  font-size: 13px;
  font-weight: 700;
}

.kd110 {
  height: 26px;
  width: 70%;
  border-radius: 8px;
  background: var(--w05,rgba(255,255,255,.06));
}

.kd111 {
  height: 26px;
  width: 55%;
  border-radius: 8px;
  background: var(--w05,rgba(255,255,255,.06));
}

.kd112 {
  height: 26px;
  width: 80%;
  border-radius: 8px;
  background: var(--w05,rgba(255,255,255,.06));
}

.kd113 {
  height: 26px;
  width: 45%;
  border-radius: 8px;
  background: var(--w05,rgba(255,255,255,.06));
}

.kd114 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 0 10px;
  border: none;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kd115 {
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 18%, transparent);
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kd116 {
  margin-left: auto;
  font-size: 14px;
  color: var(--t-a7abb8,#a7abb8);
}

.kd117 {
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}

.kd118 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  font-size: 12.5px;
}

.kd119 {
  font-family: ui-monospace,Menlo,monospace;
}

.kd120 {
  font-weight: 800;
}

.kd121 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 18px;
  align-items: start;
}

.kd122 {
  height: 10px;
  width: 70%;
  border-radius: 5px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)) 25%,var(--w10,rgba(255,255,255,.12)) 50%,var(--w05,rgba(255,255,255,.06)) 75%);
  background-size: 200% 100%;
  animation: coShim 1.2s linear infinite;
}

.kd123 {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
}

.kd124 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.kd125 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kd126 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kd127 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  background: linear-gradient(180deg,transparent,var(--b-1b1f2a,#1b1f2a));
  pointer-events: none;
}

.kd128 {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kd129 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kd130 {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}

.kd131 {
  font-size: 13px;
  font-weight: 800;
}

.kd132 {
  color: var(--t-a7abb8,#a7abb8);
}

.kd133 {
  display: flex;
  flex-direction: column;
  padding: 0 0 10px 52px;
}

.kd134 {
  display: flex;
  font-size: 12px;
  padding: 3px 0;
}

.kd135 {
  flex: 1;
  color: var(--t-a7abb8,#a7abb8);
}

.kd136 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kd137 {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-a7abb8,#a7abb8);
}

.kd138 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
}

.kd139 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.kd140 {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.kd141 {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kd142 {
  width: 52px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 11.5px;
}

.kd143 {
  padding: 6px 0;
}

.kd144 {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 12.5px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kd145 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: start;
}

.kd146 {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kd147 {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
}

.kd148 {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kd149 {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 11px 14px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.kd150 {
  padding: 0 14px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
}

.kd151 {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
}

.kd152 {
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kd153 {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
  min-height: 40px;
}

.kd154 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kd155 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kd156 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kd157 {
  font-size: 12.5px;
  font-weight: 700;
}

.kd158 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
  overflow-wrap: anywhere;
}

.kd159 {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.kd160 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
}

.kd161 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.kd162 {
  font-family: ui-monospace,Menlo,monospace;
  font-weight: 800;
}

.kd163 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kd164 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kd165 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kd166 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kd167 {
  font-weight: 900;
}

.kd168 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* -- generated co: end -- */

/* ==========================================================================
   22zz72. User interface · Dropdowns: classes generated from the handoff by
   _dev/ui_dropdowns_convert.py (kp1 …, kph hover, kpf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* A panel opens with a short fade and slide. */
@keyframes ddIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .udd-page * { animation: none !important; }
}

/* Phones: a panel is never wider than the screen. */
@media (max-width: 600px) {
  .udd-page .kp33,
  .udd-page .kp48 { max-width: calc(100vw - 32px); }
}

/* -- generated dd: start -- */
.kp1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kp2 {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.kp3 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kp4 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kp5 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kp6 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kp7 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp8 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kp9 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp10 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.kp11 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kp12 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kp13 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kp14 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.kp15 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kp16 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kp17 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kp18 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kp19 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp20 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.kp21 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 2 1 520px;
}

.kp22 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kp23 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp24 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.kp25 {
  flex: 1;
  min-height: 380px;
  padding: 28px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kp26 {
  position: relative;
  display: inline-flex;
}

.kp27 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px 0 14px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  justify-content: space-between;
}

.kp28 {
  display: inline-block;
  transition: transform .15s;
  color: var(--t-a7abb8,#a7abb8);
}

.kp29 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  font-weight: 400;
}

.kp30 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px 0 4px;
  border-radius: 999px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.kp31 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: oklch(0.82 0.08 80);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kp32 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.kp33 {
  position: absolute;
  z-index: 60;
  padding: 6px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  box-sizing: border-box;
  animation: ddIn .14s ease;
}

.kp34 {
  padding: 8px 10px 4px;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp35 {
  height: 1px;
  margin: 5px 6px;
  background: var(--w07,rgba(255,255,255,.08));
}

.kp36 {
  position: relative;
}

.kp37 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  box-sizing: border-box;
}

.kp38 {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kp39 {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.kp40 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

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

.kp42 {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kp43 {
  font-size: 11px;
  font-family: ui-monospace,Menlo,monospace;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp44 {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  flex-shrink: 0;
}

.kp45 {
  position: absolute;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s;
}

.kp46 {
  color: var(--t-9adbe6,#9adbe6);
  font-weight: 900;
}

.kp47 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp48 {
  position: absolute;
  left: calc(100% + 4px);
  top: -6px;
  z-index: 2;
  width: 200px;
  padding: 6px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  box-sizing: border-box;
  animation: ddIn .14s ease;
}

.kp49 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.kp50 {
  width: 18px;
  text-align: center;
}

.kp51 {
  flex: 1;
}

.kp52 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp53 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp54 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kp55 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 4px;
  border-radius: 999px;
  border: none;
  background: #9adbe6;
  color: #11131a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.kp56 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kp57 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp58 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1 1 300px;
}

.kp59 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kp60 {
  font-size: 15px;
  font-weight: 700;
}

.kp61 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kp62 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  transition: all .2s;
}

.kp63 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kp64 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.kp65 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.kp66 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp67 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.kp68 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.kp69 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kp70 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kp71 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.kp72 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.kp73 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.kp74 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kp75 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kp76 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kp77 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kp78 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap: 20px;
  align-items: start;
}

.kp79 {
  padding: 6px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  box-sizing: border-box;
  animation: none;
  max-width: 300px;
}

.kp80 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kp81 {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.kp82 {
  font-weight: 800;
}

.kp83 {
  color: var(--t-a7abb8,#a7abb8);
}

.kp84 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: start;
}

.kp85 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.kp86 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.kp87 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kp88 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kp89 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kp90 {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
}

.kp91 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  font-weight: 400;
}

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

.kp93 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.kp94 {
  padding: 4px 4px 6px;
}

.kp95 {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.kp96 {
  padding: 12px 10px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp97 {
  display: flex;
  gap: 6px;
  padding: 8px 4px 2px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  margin-top: 4px;
}

.kp98 {
  flex: 1;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.kp99 {
  flex: 1;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.kp100 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 16%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kp101 {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.kp102 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kp103 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.kp104 {
  font-size: 13px;
  font-weight: 800;
}

.kp105 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.kp106 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: oklch(0.82 0.08 80);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kp107 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.kp108 {
  font-size: 13.5px;
  font-weight: 800;
}

.kp109 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kp110 {
  margin-left: auto;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 18%, transparent);
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
}

.kp111 {
  height: 1px;
  margin: 2px 6px 4px;
  background: var(--w07,rgba(255,255,255,.08));
}

.kp112 {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
  font-weight: 400;
}

.kp113 {
  position: absolute;
  right: -6px;
  top: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px var(--b-1b1f2a,#1b1f2a);
}

.kp114 {
  display: flex;
  align-items: center;
  padding: 8px 10px;
}

.kp115 {
  font-size: 14px;
  font-weight: 800;
}

.kp116 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kp117 {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  border-radius: 10px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kp118 {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kp119 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kp120 {
  font-size: 12.5px;
  line-height: 1.35;
}

.kp121 {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.kp122 {
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kp123 {
  display: flex;
  align-items: center;
}

.kp124 {
  font-size: 13.5px;
  font-weight: 800;
  flex: 1;
}

.kp125 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--w05,rgba(255,255,255,.06));
  color: var(--t-eef0f5,#eef0f5);
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kp126 {
  width: 28px;
  height: 28px;
  margin-left: 4px;
  border-radius: 50%;
  border: none;
  background: var(--w05,rgba(255,255,255,.06));
  color: var(--t-eef0f5,#eef0f5);
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kp127 {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 2px;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp128 {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 2px;
}

.kp129 {
  height: 32px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12.5px;
  outline-offset: -1px;
}

.kp130 {
  display: flex;
  gap: 6px;
}

.kp131 {
  flex: 1;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.kp132 {
  flex: 1;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.kp133 {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kp134 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kp135 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px 0 6px;
  border-radius: 10px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.kp136 {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.kp137 {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kp138 {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 6px;
}

.kp139 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
}

.kp140 {
  font-size: 11.5px;
  font-family: ui-monospace,Menlo,monospace;
  color: var(--t-a7abb8,#a7abb8);
}

.kp141 {
  display: flex;
}

.kp142 {
  margin-left: -6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kp143 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: none;
  border-radius: 10px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kp144 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kp145 {
  font-size: 13px;
  font-weight: 700;
}

.kp146 {
  flex: 1;
  max-width: 80px;
  height: 4px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kp147 {
  display: block;
  height: 100%;
}

.kp148 {
  font-size: 10.5px;
  font-weight: 800;
}

.kp149 {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kp150 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.kp151 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.kp152 {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #9adbe6;
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.kp153 {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kp154 {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kp155 {
  font-family: ui-monospace,Menlo,monospace;
}

.kp156 {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kp157 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.kp158 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .24em;
}

.kp159 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}

.kp160 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.kp161 {
  opacity: .6;
}

.kp162 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kp163 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kp164 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kp165 {
  min-width: 74px;
  display: flex;
  gap: 4px;
}

.kp166 {
  height: 22px;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--w06,rgba(255,255,255,.08));
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.kp167 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.kp168 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kp169 {
  font-size: 12.5px;
  font-weight: 700;
}

.kp170 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
  overflow-wrap: anywhere;
}

.kp171 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.kp172 {
  position: relative;
  height: 280px;
  border-radius: 24px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  overflow: hidden;
}

.kp173 {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kp174 {
  position: absolute;
  inset: 0;
  background: rgba(6,7,11,.5);
}

.kp175 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px 14px;
  border-radius: 20px 20px 0 0;
  background: var(--b-1b1f2a,#1b1f2a);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kp176 {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--w14,rgba(255,255,255,.22));
  margin: 0 auto 8px;
}

.kp177 {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--t-eef0f5,#eef0f5);
}

.kp178 {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}

.kp179 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 14px;
}

.kp180 {
  border-radius: 24px;
  padding: 18px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kp181 {
  font-size: 15px;
  font-weight: 800;
}

.kp182 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kp183 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kp184 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kp185 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kp186 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kp187 {
  font-weight: 900;
}

.kp188 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kph1:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kph2:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kph3:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kph4:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kph5:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kph6:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kph7:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kph8:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kph9:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kph10:not(:disabled):hover {
  background: rgba(127,127,127,.1);
}

.kph11:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kph12:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kph13:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kph14:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kpf1:focus {
  border-color: rgba(154,219,230,.6);
}

.kpf2:focus {
  border-color: rgba(154,219,230,.6);
}

.kpf3:focus {
  border-color: rgba(154,219,230,.6);
}
/* -- generated dd: end -- */

/* ==========================================================================
   22zz73. User interface · Footer: classes generated from the handoff by
   _dev/ui_footer_convert.py (kt1 …, kth hover, ktf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* The syncing spinner and the sticky bar's entrance. */
@keyframes ftSpin {
  to { transform: rotate(360deg); }
}

@keyframes ftUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .uft-page * { animation: none !important; }
}

/* Phones: the playground's explicit 3–5 column grid would squeeze each
   column under 40px, so link groups wrap two to a row and the brand and
   newsletter columns take the full width (overrides the inline grid). */
@media (max-width: 640px) {
  .uft-page .kt48 { grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)) !important; }
  .uft-page .kt49,
  .uft-page .kt57 { grid-column: 1 / -1; }
}

/* -- generated ft: start -- */
.kt1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kt2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kt3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kt4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kt5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kt6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kt8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.kt10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kt11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kt12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kt13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.kt14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kt15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kt16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kt17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kt18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt19 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.kt20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 2 1 560px;
}

.kt21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kt22 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt23 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.kt24 {
  padding: 18px;
}

.kt25 {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#141820);
}

.kt26 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: var(--w04,rgba(255,255,255,.05));
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kt27 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5f57;
}

.kt28 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #febc2e;
}

.kt29 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28c840;
}

.kt30 {
  margin-left: 8px;
  font-size: 10.5px;
  font-family: ui-monospace,Menlo,monospace;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt31 {
  position: relative;
  height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.kt32 {
  padding: 18px 18px 8px;
  flex: 1 0 auto;
}

.kt33 {
  display: block;
  height: 14px;
  width: 62%;
  border-radius: 5px;
  background: var(--w06,rgba(255,255,255,.05));
  margin-bottom: 9px;
}

.kt34 {
  display: block;
  height: 9px;
  width: 88%;
  border-radius: 5px;
  background: var(--w04,rgba(255,255,255,.05));
  margin-bottom: 9px;
}

.kt35 {
  display: block;
  height: 9px;
  width: 74%;
  border-radius: 5px;
  background: var(--w04,rgba(255,255,255,.05));
  margin-bottom: 9px;
}

.kt36 {
  display: block;
  height: 9px;
  width: 92%;
  border-radius: 5px;
  background: var(--w04,rgba(255,255,255,.05));
  margin-bottom: 18px;
}

.kt37 {
  display: block;
  height: 14px;
  width: 55%;
  border-radius: 5px;
  background: var(--w06,rgba(255,255,255,.05));
  margin-bottom: 9px;
}

.kt38 {
  display: block;
  height: 9px;
  width: 80%;
  border-radius: 5px;
  background: var(--w04,rgba(255,255,255,.05));
  margin-bottom: 9px;
}

.kt39 {
  display: block;
  height: 9px;
  width: 70%;
  border-radius: 5px;
  background: var(--w04,rgba(255,255,255,.05));
  margin-bottom: 9px;
}

.kt40 {
  display: block;
  height: 9px;
  width: 85%;
  border-radius: 5px;
  background: var(--w04,rgba(255,255,255,.05));
  margin-bottom: 18px;
}

.kt41 {
  bottom: 0;
  z-index: 2;
  transition: transform .3s ease;
  flex-shrink: 0;
}

.kt42 {
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
}

.kt43 {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(140deg,#eef0f4,#d4d9e1 55%,#a8e6ef 140%);
  color: #11131a;
}

.kt44 {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kt45 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.kt46 {
  font-size: 12.5px;
  color: #3a4150;
}

.kt47 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: #11131a;
  color: #eef0f5;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.kt48 {
  display: grid;
  gap: 22px 18px;
}

.kt49 {
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kt50 {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .3em;
}

.kt51 {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
  max-width: 260px;
}

.kt52 {
  gap: 6px;
}

.kt53 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--w05,rgba(255,255,255,.06));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.kt54 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kt55 {
  font-size: 13px;
  font-weight: 600;
  color: var(--t-c9ccd6,#c9ccd6);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}

.kt56 {
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 18%, transparent);
  font-size: 9.5px;
  font-weight: 900;
  align-items: center;
}

.kt57 {
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kt58 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.kt59 {
  display: flex;
  gap: 6px;
}

.kt60 {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
}

.kt61 {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.kt62 {
  font-size: 11.5px;
  font-weight: 700;
}

.kt63 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 14%, transparent);
  font-size: 12.5px;
  font-weight: 800;
}

.kt64 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt65 {
  color: var(--t-a7abb8,#a7abb8);
  text-decoration: none;
}

.kt66 {
  flex: 1;
}

.kt67 {
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.kt68 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kt69 {
  align-items: center;
  gap: 6px;
}

.kt70 {
  font-size: 12px;
}

.kt71 {
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
}

.kt72 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 16px 20px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt73 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .3em;
  color: var(--t-eef0f5,#eef0f5);
}

.kt74 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: 40px;
  padding: 8px 16px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  box-sizing: border-box;
}

.kt75 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
}

.kt76 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.kt77 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  font-weight: 400;
}

.kt78 {
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.kt79 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 12px;
  padding: 10px 10px 10px 16px;
  border-radius: 18px;
  background: color-mix(in oklab, var(--b-1b1f2a,#1b1f2a) 92%, transparent);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}

.kt80 {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}

.kt81 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kt82 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kt83 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kt84 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 4px;
  border-radius: 999px;
  border: none;
  background: #9adbe6;
  color: #11131a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.kt85 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kt86 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt87 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1 1 300px;
}

.kt88 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kt89 {
  font-size: 15px;
  font-weight: 700;
}

.kt90 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kt91 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  transition: all .2s;
}

.kt92 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kt93 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.kt94 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.kt95 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt96 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.kt97 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.kt98 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kt99 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kt100 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.kt101 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.kt102 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.kt103 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kt104 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kt105 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kt106 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kt107 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 18px;
  align-items: start;
}

.kt108 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.kt109 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.kt110 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kt111 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kt112 {
  position: relative;
  height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.kt113 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt114 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 16px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  font-size: 12.5px;
  box-sizing: border-box;
}

.kt115 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: ftSpin .7s linear infinite;
  color: var(--t-9adbe6,#9adbe6);
}

.kt116 {
  font-weight: 700;
}

.kt117 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt118 {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.kt119 {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kt120 {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kt121 {
  font-family: ui-monospace,Menlo,monospace;
}

.kt122 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--w03,rgba(255,255,255,.03));
  font-size: 12.5px;
}

.kt123 {
  color: var(--t-a7abb8,#a7abb8);
}

.kt124 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt125 {
  height: 28px;
  padding: 0 6px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
}

.kt126 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kt127 {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
}

.kt128 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 0;
  overflow: hidden;
}

.kt129 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kt130 {
  font-size: 14px;
  font-weight: 700;
}

.kt131 {
  height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.kt132 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  background: var(--w02,rgba(255,255,255,.02));
}

.kt133 {
  font-size: 12px;
  font-weight: 700;
}

.kt134 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.kt135 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kt136 {
  position: relative;
  height: 440px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.kt137 {
  position: relative;
  height: 460px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.kt138 {
  position: relative;
  height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.kt139 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.kt140 {
  position: relative;
  height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.kt141 {
  padding: 18px;
  flex: 1 0 auto;
}

.kt142 {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.kt143 {
  flex: 1;
  height: 4px;
  border-radius: 999px;
}

.kt144 {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0 10px 10px;
  padding: 10px 10px 10px 14px;
  border-radius: 18px;
  background: color-mix(in oklab, var(--b-1b1f2a,#1b1f2a) 92%, transparent);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  animation: ftUp .25s ease;
}

.kt145 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kt146 {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kt147 {
  padding: 18px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kt148 {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.kt149 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.8 0.13 70);
}

.kt150 {
  padding: 12px;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kt151 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border: none;
  border-radius: 10px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  font-weight: 400;
}

.kt152 {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kt153 {
  flex: 1;
  font-size: 13px;
  font-weight: 800;
}

.kt154 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.kt155 {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kt156 {
  flex: 1 1 200px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--t-a7abb8,#a7abb8);
}

.kt157 {
  color: var(--t-eef0f5,#eef0f5);
}

.kt158 {
  color: var(--t-9adbe6,#9adbe6);
}

.kt159 {
  position: sticky;
  bottom: 0;
  margin: 0 10px 10px;
  display: flex;
  justify-content: center;
}

.kt160 {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px dashed var(--w14,rgba(255,255,255,.22));
  background: var(--b-1b1f2a,#1b1f2a);
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.kt161 {
  display: grid;
  grid-template-columns: minmax(420px,1.6fr) minmax(min(260px,100%),1fr) minmax(200px,.62fr);
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 6px;
}

.kt162 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 420px;
}

.kt163 {
  flex: 1 0 auto;
}

.kt164 {
  padding: 18px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  display: grid;
  grid-template-columns: 1.4fr repeat(4,1fr);
  gap: 14px;
}

.kt165 {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3em;
}

.kt166 {
  font-size: 10.5px;
  color: var(--t-a7abb8,#a7abb8);
  line-height: 1.45;
}

.kt167 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kt168 {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kt169 {
  font-size: 11px;
  color: var(--t-a7abb8,#a7abb8);
}

.kt170 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
}

.kt171 {
  position: relative;
  height: 330px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.kt172 {
  padding: 16px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kt173 {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}

.kt174 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kt175 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

.kt176 {
  padding: 14px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kt177 {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3em;
  padding-bottom: 6px;
}

.kt178 {
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kt179 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.kt180 {
  flex: 1;
  text-align: left;
}

.kt181 {
  transition: transform .2s;
  color: var(--t-a7abb8,#a7abb8);
}

.kt182 {
  display: grid;
  transition: grid-template-rows .25s;
}

.kt183 {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kt184 {
  font-size: 12px;
  color: var(--t-a7abb8,#a7abb8);
}

.kt185 {
  height: 6px;
}

.kt186 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  padding-top: 8px;
}

.kt187 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kt188 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kt189 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kt190 {
  font-size: 12.5px;
  font-weight: 700;
}

.kt191 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
  overflow-wrap: anywhere;
}

.kt192 {
  display: flex;
  gap: 10px;
}

.kt193 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kt194 {
  font-size: 11px;
  font-weight: 900;
}

.kt195 {
  position: relative;
  height: 190px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#141820);
}

.kt196 {
  padding: 10px 10px 10px;
}

.kt197 {
  display: block;
  height: 12px;
  width: 70%;
  border-radius: 4px;
  background: oklch(0.72 0.14 35);
}

.kt198 {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 34px;
  border-radius: 10px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w14,rgba(255,255,255,.2));
}

.kt199 {
  padding: 10px 10px 56px;
}

.kt200 {
  display: block;
  height: 12px;
  width: 70%;
  border-radius: 4px;
  background: #9adbe6;
}

.kt201 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.kt202 {
  font-family: ui-monospace,Menlo,monospace;
  font-weight: 800;
}

.kt203 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kt204 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kt205 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kt206 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kt207 {
  font-weight: 900;
}

.kt208 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kth1:not(:disabled):hover {
  background: rgba(154,219,230,.18);
  color: #9adbe6;
}

.kth2:not(:disabled):hover {
  color: #9adbe6;
}

.kth3:not(:disabled):hover {
  color: #9adbe6;
}

.kth4:not(:disabled):hover {
  color: #9adbe6;
}

.kth5:not(:disabled):hover {
  color: #9adbe6;
}

.kth6:not(:disabled):hover {
  color: #9adbe6;
}

.kth7:not(:disabled):hover {
  background: rgba(154,219,230,.18);
  color: #9adbe6;
}

.kth8:not(:disabled):hover {
  color: #9adbe6;
}

.kth9:not(:disabled):hover {
  color: #9adbe6;
}

.kth10:not(:disabled):hover {
  background: rgba(154,219,230,.18);
  color: #9adbe6;
}

.kth11:not(:disabled):hover {
  color: #9adbe6;
}

.kth12:not(:disabled):hover {
  color: #9adbe6;
}

.kth13:not(:disabled):hover {
  color: #9adbe6;
}

.ktf1:focus {
  border-color: rgba(154,219,230,.6);
}

.ktf2:focus {
  border-color: rgba(154,219,230,.6);
}
/* -- generated ft: end -- */

/* ==========================================================================
   22zz74. User interface · List groups: classes generated from the handoff
   by _dev/ui_list_groups_convert.py (kq1 …, kqh hover, kqf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* Lists are native <ul>/<li>: no bullets, no browser indent. */
.ulg-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -- generated lg: start -- */
.kq1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kq2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kq3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kq4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kq5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kq6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kq7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kq8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kq9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.kq10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kq11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kq12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kq13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.kq14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kq15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kq16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kq17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kq18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kq19 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.kq20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 2 1 520px;
}

.kq21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kq22 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kq23 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.kq24 {
  flex: 1;
  padding: 24px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.kq25 {
  max-width: 560px;
  margin: 0 auto;
}

.kq26 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.kq27 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  outline: none;
  transition: background .15s;
  box-sizing: border-box;
  min-width: 0;
}

.kq28 {
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: grab;
  font-size: 13px;
  letter-spacing: -2px;
}

.kq29 {
  width: 18px;
  height: 18px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.kq30 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kq31 {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11.5px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kq32 {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
}

.kq33 {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 4px;
  box-sizing: border-box;
}

.kq34 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

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

.kq37 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9adbe6;
  flex-shrink: 0;
}

.kq38 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kq39 {
  height: 4px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
  margin-top: 4px;
  max-width: 220px;
}

.kq40 {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .3s;
}

.kq41 {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.kq42 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  align-items: center;
  white-space: nowrap;
}

.kq43 {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.kq44 {
  position: relative;
  width: 38px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.kq45 {
  position: absolute;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s;
}

.kq46 {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  font-weight: 400;
}

.kq47 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform .2s;
}

.kq48 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kq49 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 4px;
  border-radius: 999px;
  border: none;
  background: #9adbe6;
  color: #11131a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.kq50 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kq51 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kq52 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1 1 300px;
}

.kq53 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kq54 {
  font-size: 15px;
  font-weight: 700;
}

.kq55 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kq56 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  transition: all .2s;
}

.kq57 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kq58 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.kq59 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.kq60 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kq61 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.kq62 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.kq63 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.kq64 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kq65 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kq66 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kq67 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kq68 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 18px;
  align-items: start;
}

.kq69 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.kq70 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.kq71 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kq72 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kq73 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.kq74 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kq75 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}

.kq76 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.kq77 {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kq78 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kq79 {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

.kq80 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

.kq81 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  border-radius: 14px;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.kq82 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kq83 {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kq84 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kq85 {
  padding: 16px;
  border-radius: 14px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.22));
  text-align: center;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kq86 {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kq87 {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kq88 {
  display: grid;
  transition: grid-template-rows .25s cubic-bezier(.2,.8,.2,1);
}

.kq89 {
  min-height: 0;
  overflow: hidden;
}

.kq90 {
  padding: 0 14px 12px 60px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kq91 {
  display: flex;
  font-size: 12px;
}

.kq92 {
  flex: 1;
  color: var(--t-a7abb8,#a7abb8);
}

.kq93 {
  font-weight: 700;
}

.kq94 {
  height: 260px;
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kq95 {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  display: flex;
}

.kq96 {
  flex: 1;
}

.kq97 {
  align-self: flex-start;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kq98 {
  display: flex;
  align-items: center;
  padding: 0 4px;
}

.kq99 {
  font-size: 13px;
  font-weight: 800;
}

.kq100 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kq101 {
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.kq102 {
  padding: 22px 12px;
  border-radius: 14px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.22));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.kq103 {
  font-size: 13.5px;
  font-weight: 700;
}

.kq104 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kq105 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kq106 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap: 18px;
  align-items: start;
}

.kq107 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: none;
}

.kq108 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)) 25%,var(--w10,rgba(255,255,255,.12)) 50%,var(--w05,rgba(255,255,255,.06)) 75%);
  background-size: 200% 100%;
  animation: lgShim 1.2s linear infinite;
}

.kq109 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kq110 {
  height: 9px;
  width: 60%;
  border-radius: 5px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)) 25%,var(--w10,rgba(255,255,255,.12)) 50%,var(--w05,rgba(255,255,255,.06)) 75%);
  background-size: 200% 100%;
  animation: lgShim 1.2s linear infinite;
}

.kq111 {
  height: 8px;
  width: 40%;
  border-radius: 4px;
  background: var(--w05,rgba(255,255,255,.06));
}

.kq112 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kq113 {
  height: 9px;
  width: 72%;
  border-radius: 5px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)) 25%,var(--w10,rgba(255,255,255,.12)) 50%,var(--w05,rgba(255,255,255,.06)) 75%);
  background-size: 200% 100%;
  animation: lgShim 1.2s linear infinite;
}

.kq114 {
  height: 8px;
  width: 30%;
  border-radius: 4px;
  background: var(--w05,rgba(255,255,255,.06));
}

.kq115 {
  height: 9px;
  width: 50%;
  border-radius: 5px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)) 25%,var(--w10,rgba(255,255,255,.12)) 50%,var(--w05,rgba(255,255,255,.06)) 75%);
  background-size: 200% 100%;
  animation: lgShim 1.2s linear infinite;
}

.kq116 {
  height: 8px;
  width: 45%;
  border-radius: 4px;
  background: var(--w05,rgba(255,255,255,.06));
}

.kq117 {
  padding: 24px 12px;
  border-radius: 14px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.22));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.kq118 {
  font-size: 22px;
}

.kq119 {
  padding: 18px 12px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 10%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 40%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.kq120 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kq121 {
  outline: none;
  border-radius: 14px;
}

.kq122 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.kq123 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kq124 {
  font-size: 12.5px;
  font-weight: 700;
}

.kq125 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
  overflow-wrap: anywhere;
}

.kq126 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 14px;
}

.kq127 {
  border-radius: 24px;
  padding: 18px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kq128 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kq129 {
  font-size: 15px;
  font-weight: 800;
}

.kq130 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kq131 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kq132 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kq133 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kq134 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kq135 {
  font-weight: 900;
}

.kq136 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kqh1:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh2:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh3:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh4:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh5:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh6:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh7:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh8:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh9:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh10:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh11:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh12:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh13:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh14:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh15:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh16:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh17:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh18:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh19:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh20:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqh21:not(:disabled):hover {
  background: var(--hv1,transparent);
}

.kqf1:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf2:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf3:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf4:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf5:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf6:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf7:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf8:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf9:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf10:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf11:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf12:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf13:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf14:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf15:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf16:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf17:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf18:focus {
  border-color: rgba(154,219,230,.6);
}

.kqf19:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf20:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf21:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.kqf22:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.kqf23:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}
/* -- generated lg: end -- */

/* ==========================================================================
   22zz75. User interface · Modals: classes generated from the handoff by
   _dev/ui_modals_convert.py (kw1 …, kwh hover, kwf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* Backdrop fade and the panel entrances: scale, sheet up, drawer in. */
@keyframes moFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes moIn {
  from { opacity: 0; transform: scale(.96) translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes moUp {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: none; }
}

@keyframes moSide {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .umo-page * { animation: none !important; }
}

/* -- generated mo: start -- */
.kw1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kw2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kw3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kw4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kw5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kw6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kw7 {
  color: var(--t-9adbe6,#9adbe6);
  font-weight: 800;
}

.kw8 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kw9 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kw10 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.kw11 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kw12 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kw13 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kw14 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.kw15 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kw16 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kw17 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kw18 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kw19 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kw20 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.kw21 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 2 1 520px;
}

.kw22 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kw23 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kw24 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.kw25 {
  position: relative;
  flex: 1;
  min-height: 360px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  overflow: hidden;
  display: flex;
}

.kw26 {
  position: absolute;
  inset: 0;
}

.kw27 {
  position: relative;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kw28 {
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
}

.kw29 {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: color-mix(in oklab, #9adbe6 18%, transparent);
}

.kw30 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kw31 {
  height: 9px;
  width: 55%;
  border-radius: 4px;
  background: var(--w14,rgba(255,255,255,.22));
}

.kw32 {
  height: 7px;
  width: 75%;
  border-radius: 4px;
  background: var(--w07,rgba(255,255,255,.1));
}

.kw33 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
}

.kw34 {
  flex: 1;
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.kw35 {
  height: 8px;
  width: 80%;
  border-radius: 4px;
  background: var(--w05,rgba(255,255,255,.06));
}

.kw36 {
  height: 8px;
  width: 92%;
  border-radius: 4px;
  background: var(--w05,rgba(255,255,255,.06));
}

.kw37 {
  height: 8px;
  width: 60%;
  border-radius: 4px;
  background: var(--w05,rgba(255,255,255,.06));
}

.kw38 {
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kw39 {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kw40 {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #11131a;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kw41 {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kw42 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
}

.kw43 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kw44 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 4px;
  border-radius: 999px;
  border: none;
  background: #9adbe6;
  color: #11131a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.kw45 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #11131a;
  color: #9adbe6;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kw46 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1 1 300px;
}

.kw47 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kw48 {
  font-size: 15px;
  font-weight: 700;
}

.kw49 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kw50 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  transition: all .2s;
}

.kw51 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kw52 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.kw53 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.kw54 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kw55 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.kw56 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.kw57 {
  flex: 1;
}

.kw58 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kw59 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kw60 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.kw61 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.kw62 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.kw63 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kw64 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kw65 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kw66 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 24px;
  align-items: center;
}

.kw67 {
  position: relative;
  padding: 28px;
  border-radius: 18px;
  background: rgba(6,7,11,.6);
  outline: 1.5px dashed rgba(201,169,106,.6);
  outline-offset: -8px;
}

.kw68 {
  position: absolute;
  left: 14px;
  top: 10px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #c9a96a;
}

.kw69 {
  border-radius: 22px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  overflow: hidden;
}

.kw70 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 0;
  outline: 1.5px dashed rgba(154,219,230,.6);
  outline-offset: -3px;
}

.kw71 {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in oklab, #9adbe6 18%, transparent);
  color: #9adbe6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.kw72 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 12px;
}

.kw73 {
  font-size: 17px;
  font-weight: 700;
}

.kw74 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.kw75 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-a7abb8,#a7abb8);
  font-size: 12px;
}

.kw76 {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  outline: 1.5px dashed rgba(201,169,106,.6);
  outline-offset: -3px;
}

.kw77 {
  height: 38px;
  border-radius: 11px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
}

.kw78 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  outline: 1.5px dashed rgba(120,200,150,.6);
  outline-offset: -3px;
}

.kw79 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kw80 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kw81 {
  display: grid;
  grid-template-columns: 14px 110px 1fr;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.kw82 {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.kw83 {
  font-weight: 800;
}

.kw84 {
  color: var(--t-a7abb8,#a7abb8);
}

.kw85 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}

.kw86 {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  background: var(--w02,rgba(255,255,255,.02));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kw87 {
  position: relative;
  display: block;
  height: 110px;
  border-radius: 10px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  overflow: hidden;
}

.kw88 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 6px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w14,rgba(255,255,255,.22));
}

.kw89 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.kw90 {
  font-size: 15px;
  font-weight: 800;
}

.kw91 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kw92 {
  font-size: 12px;
  line-height: 1.45;
  color: var(--t-a7abb8,#a7abb8);
}

.kw93 {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kw94 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kw95 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.kw96 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.kw97 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kw98 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kw99 {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.kw100 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.kw101 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kw102 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(180px,100%),1fr));
  gap: 8px;
}

.kw103 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  background: var(--w02,rgba(255,255,255,.02));
  color: var(--t-eef0f5,#eef0f5);
  text-decoration: none;
}

.kw104 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kw105 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kw106 {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kw107 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kw108 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.kw109 {
  align-self: flex-start;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.kw110 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kw111 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kw112 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kw113 {
  font-size: 12.5px;
  font-weight: 700;
}

.kw114 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
  overflow-wrap: anywhere;
}

.kw115 {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
  line-height: 1.45;
}

.kw116 {
  font-weight: 900;
}

.kw117 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.kw118 {
  position: relative;
  height: 250px;
  border-radius: 24px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  overflow: hidden;
}

.kw119 {
  position: absolute;
  inset: 0;
  background: rgba(6,7,11,.55);
}

.kw120 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 14px 16px;
  border-radius: 22px 22px 0 0;
  background: var(--b-1b1f2a,#1b1f2a);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kw121 {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--w14,rgba(255,255,255,.22));
  margin: 0 auto 4px;
}

.kw122 {
  height: 40px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kw123 {
  height: 44px;
  border-radius: 999px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

.kw124 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 14px;
}

.kw125 {
  border-radius: 24px;
  padding: 18px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kw126 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kw127 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kw128 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kw129 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kw130 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kw131 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kw132 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kw133 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kw134 {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  box-sizing: border-box;
  animation: moFade .18s ease;
}

.kw135 {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  color: var(--t-eef0f5,#eef0f5);
  box-sizing: border-box;
}

.kw136 {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--w14,rgba(255,255,255,.22));
  margin: 10px auto 0;
  flex-shrink: 0;
}

.kw137 {
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 0;
  flex-shrink: 0;
}

.kw138 {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 17px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kw139 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kw140 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}

.kw141 {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.kw142 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  font-weight: 400;
}

.kw143 {
  flex: 1;
  min-height: 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kw144 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(180px,100%),1fr));
  gap: 10px;
}

.kw145 {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.kw146 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kw147 {
  font-size: 13.5px;
  font-weight: 800;
}

.kw148 {
  font-size: 13px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
}

.kw149 {
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
}

.kw150 {
  color: var(--t-9adbe6,#9adbe6);
}

.kw151 {
  font-size: 12px;
  font-weight: 700;
}

.kw152 {
  font-size: 13px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
}

.kw153 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kw154 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kw155 {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  flex-shrink: 0;
}

.kw156 {
  align-items: center;
  gap: 8px;
  margin-right: auto;
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  cursor: pointer;
}

.kw157 {
  accent-color: #9adbe6;
}

.kw158 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.kw159 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.kw160 {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: rgba(11,12,17,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.kw161 {
  width: min(360px,100%);
  padding: 18px;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w14,rgba(255,255,255,.2));
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: moIn .18s ease;
}

.kw162 {
  font-size: 16px;
  font-weight: 700;
}

.kw163 {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.kw164 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kw165 {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(6,7,11,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.kw166 {
  width: min(380px,100%);
  padding: 20px;
  border-radius: 20px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w14,rgba(255,255,255,.2));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: moIn .2s ease;
}

.kw167 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-end;
}

.kwh1:not(:disabled):hover {
  border-color: rgba(154,219,230,.5);
}

.kwh2:not(:disabled):hover {
  border-color: rgba(154,219,230,.5);
}

.kwf1:focus {
  border-color: rgba(154,219,230,.7);
}

.kwf2:focus {
  border-color: rgba(154,219,230,.7);
}

.kwf3:focus {
  border-color: rgba(154,219,230,.7);
}

.kwf4:focus {
  border-color: rgba(154,219,230,.7);
}

.kwf5:focus {
  border-color: rgba(154,219,230,.7);
}

.kwf6:focus {
  border-color: rgba(154,219,230,.7);
}
/* -- generated mo: end -- */

/* ==========================================================================
   22zz76. User interface · Navbar: classes generated from the handoff by
   _dev/ui_navbar_convert.py (kv1 …, kvh hover, kvf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* The App bar's search hint stays on one line and trails off when the box is narrow. */
.unv-page .kv119 > .kv70 {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Menus drop in. */
@keyframes nvIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .unv-page * { animation: none !important; transition: none !important; }
}

/* Phones: the variant bars keep their desktop layout and scroll sideways
   in their frame instead of being cut off. */
@media (max-width: 640px) {
  .unv-page .kv117,
  .unv-page .kv121,
  .unv-page .kv171 { overflow-x: auto; }
}

/* -- generated nv: start -- */
.kv1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kv2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kv3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kv4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kv5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kv6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kv8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.kv10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.kv11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kv12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kv13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
  transition: background .3s;
}

.kv14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kv15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kv16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kv17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kv18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.kv20 {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kv21 {
  position: relative;
  height: 460px;
  overflow-y: auto;
  border-radius: 22px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
}

.kv22 {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 20;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #9adbe6;
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  transform: translateY(-200%);
  transition: transform .2s;
}

.kv23 {
  position: sticky;
  top: 0;
  z-index: 10;
  transition: transform .28s ease,background .25s,color .25s,box-shadow .25s;
}

.kv24 {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  transition: height .2s;
}

.kv25 {
  color: inherit;
  text-decoration: none;
}

.kv26 {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.kv27 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #9adbe6;
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kv28 {
  font-size: 13px;
  letter-spacing: .28em;
  font-weight: 900;
}

.kv29 {
  order: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv30 {
  justify-self: stretch;
  position: relative;
  align-self: stretch;
  align-items: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.kv31 {
  height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .2s;
}

.kv32 {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
  border-radius: 2px;
  transition: transform .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1);
}

.kv33 {
  order: 3;
  justify-self: end;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.kv34 {
  height: 36px;
  padding: 0 10px 0 12px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 400;
}

.kv35 {
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kv36 {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv37 {
  position: absolute;
  right: 5px;
  top: 5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kv38 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 4px;
}

.kv39 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv40 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: oklch(0.82 0.08 80);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv41 {
  position: absolute;
  z-index: 6;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
  animation: nvIn .18s ease;
  right: 0;
  top: 48px;
  width: 220px;
  padding: 6px;
  color: var(--t-eef0f5,#eef0f5);
}

.kv42 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  margin-bottom: 4px;
}

.kv43 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kv44 {
  font-size: 13.5px;
  font-weight: 700;
}

.kv45 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv46 {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
}

.kv47 {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  font-size: 12.5px;
}

.kv48 {
  opacity: .5;
}

.kv49 {
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.kv50 {
  height: 44px;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 12px;
}

.kv51 {
  padding: 0 12px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.kv52 {
  position: relative;
  height: 260px;
  background: radial-gradient(60% 90% at 20% 30%,#3b6b86,transparent 60%),radial-gradient(60% 80% at 85% 70%,#a07a46,transparent 60%),#1d2533;
  overflow: hidden;
}

.kv53 {
  position: absolute;
  inset: 0;
}

.kv54 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(11,12,17,.45),transparent 40%,rgba(11,12,17,.65));
  pointer-events: none;
}

.kv55 {
  position: absolute;
  left: 22px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff;
  pointer-events: none;
}

.kv56 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  color: #9adbe6;
}

.kv57 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.kv58 {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  outline: none;
}

.kv59 {
  font-size: 15px;
  font-weight: 700;
  padding: 4px 2px;
}

.kv60 {
  font-size: 12px;
  font-weight: 600;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv61 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kv62 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv63 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.kv64 {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kv65 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv66 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.kv67 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
  white-space: nowrap;
}

.kv68 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.kv69 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv70 {
  flex: 1;
}

.kv71 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kv72 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
}

.kv73 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.kv74 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kv75 {
  display: flex;
  align-items: center;
}

.kv76 {
  font-size: 15px;
  font-weight: 700;
}

.kv77 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kv78 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.kv79 {
  flex: 1 1 auto;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kv80 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kv81 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  padding-bottom: 4px;
}

.kv82 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.kv83 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kv84 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kv85 {
  font-size: 12px;
  line-height: 1.5;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv86 {
  color: var(--t-eef0f5,#eef0f5);
}

.kv87 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kv88 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  padding: 42px 18px 42px;
  overflow-x: auto;
}

.kv89 {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  border-radius: 14px;
  height: 64px;
  gap: 18px;
  min-width: 860px;
  box-sizing: border-box;
}

.kv90 {
  outline: 1.5px dashed #9adbe6;
  outline-offset: 3px;
  border-radius: 10px;
  position: relative;
}

.kv91 {
  position: absolute;
  left: 0;
  top: -24px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #9adbe6;
  white-space: nowrap;
  font-family: ui-monospace,Menlo,monospace;
}

.kv92 {
  outline: 1.5px dashed oklch(0.8 0.13 70);
  outline-offset: 3px;
  border-radius: 10px;
  position: relative;
  display: flex;
  gap: 2px;
  padding: 0 2px;
}

.kv93 {
  position: absolute;
  left: 0;
  bottom: -26px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.8 0.13 70);
  white-space: nowrap;
  font-family: ui-monospace,Menlo,monospace;
}

.kv94 {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t-a7abb8,#a7abb8);
  position: relative;
}

.kv95 {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 800;
  position: relative;
}

.kv96 {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -14px;
  height: 2.5px;
  border-radius: 2px;
  background: #9adbe6;
}

.kv97 {
  outline: 1.5px dashed oklch(0.78 0.11 300);
  outline-offset: 3px;
  border-radius: 10px;
  position: relative;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv98 {
  position: absolute;
  left: 0;
  top: -24px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.78 0.11 300);
  white-space: nowrap;
  font-family: ui-monospace,Menlo,monospace;
}

.kv99 {
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--w07,rgba(255,255,255,.1));
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kv100 {
  outline: 1.5px dashed oklch(0.8 0.14 155);
  outline-offset: 3px;
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kv101 {
  position: absolute;
  left: 0;
  bottom: -26px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.8 0.14 155);
  white-space: nowrap;
  font-family: ui-monospace,Menlo,monospace;
}

.kv102 {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kv103 {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kv104 {
  outline: 1.5px dashed #ff6b9a;
  outline-offset: 3px;
  position: relative;
  border-radius: 50%;
}

.kv105 {
  position: absolute;
  right: 0;
  top: -24px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #ff6b9a;
  white-space: nowrap;
  font-family: ui-monospace,Menlo,monospace;
}

.kv106 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 8px;
}

.kv107 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kv108 {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.kv109 {
  font-size: 12.5px;
  font-weight: 700;
}

.kv110 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv111 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,520px),1fr));
  gap: 20px;
  align-items: start;
}

.kv112 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kv113 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.kv114 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kv115 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kv116 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kv117 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  overflow: hidden;
}

.kv118 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kv119 {
  flex: 1;
  max-width: 340px;
  margin-left: 12px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv120 {
  height: 70px;
}

.kv121 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  overflow: hidden;
  height: 170px;
  background: radial-gradient(60% 90% at 20% 30%,#3b6b86,transparent 60%),radial-gradient(60% 80% at 85% 70%,#a07a46,transparent 60%),#1d2533;
}

.kv122 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(11,12,17,.55),transparent 60%);
  pointer-events: none;
}

.kv123 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 64px;
  padding: 0 16px;
  color: #fff;
  pointer-events: none;
}

.kv124 {
  font-size: 14px;
  letter-spacing: .32em;
  font-weight: 900;
  margin-right: 14px;
}

.kv125 {
  height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 800;
  opacity: 1;
}

.kv126 {
  height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0.8;
}

.kv127 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kv128 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: none;
}

.kv129 {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv130 {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv131 {
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kv132 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.78 0.11 300) 18%, transparent);
  color: oklch(0.78 0.11 300);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.kv133 {
  display: flex;
}

.kv134 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: oklch(0.82 0.08 80);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv135 {
  margin-left: -8px;
}

.kv136 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: oklch(0.82 0.08 30);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv137 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: oklch(0.82 0.08 330);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv138 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  margin-left: 6px;
}

.kv139 {
  height: 44px;
  display: flex;
  gap: 4px;
  padding: 0 10px;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kv140 {
  padding: 0 12px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.kv141 {
  font-size: 11px;
  opacity: .6;
}

.kv142 {
  height: 50px;
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv143 {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kv144 {
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

.kv145 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.kv146 {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv147 {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .35;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv148 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
}

.kv149 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 36px;
}

.kv150 {
  height: 70px;
  padding: 14px 16px;
  display: flex;
  gap: 8px;
}

.kv151 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  font-size: 12px;
  border-style: dashed;
}

.kv152 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv153 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
}

.kv154 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 34px;
}

.kv155 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 14px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  background: #9adbe6;
  color: #11131a;
  border-bottom-color: transparent;
  animation: nvIn .18s ease;
}

.kv156 {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none;
  background: rgba(17,19,26,.1);
  color: #11131a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv157 {
  font-size: 15px;
  font-weight: 800;
}

.kv158 {
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kv159 {
  height: 70px;
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv160 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 64px;
  padding: 0 16px;
  background: linear-gradient(140deg,#eef0f4,#d4d9e1 55%,#a8e6ef 140%);
  color: #11131a;
}

.kv161 {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #11131a;
  color: #eef0f5;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kv162 {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

.kv163 {
  font-weight: 600;
  color: #4b5263;
}

.kv164 {
  width: 1px;
  height: 22px;
  background: rgba(17,19,26,.15);
  margin: 0 6px;
  flex-shrink: 0;
}

.kv165 {
  display: flex;
  gap: 2px;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.kv166 {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: none;
  color: #11131a;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.kv167 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: #11131a;
  color: #eef0f5;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.kv168 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv169 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,460px),1fr));
  gap: 20px;
  align-items: start;
}

.kv170 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  min-height: 430px;
  overflow: visible;
}

.kv171 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  border-radius: 20px 20px 0 0;
  color: var(--t-eef0f5,#eef0f5);
}

.kv172 {
  font-size: 13px;
  letter-spacing: .3em;
  font-weight: 900;
  margin-right: 10px;
}

.kv173 {
  height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t-a7abb8,#a7abb8);
}

.kv174 {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kv175 {
  display: flex;
  transition: transform .2s;
}

.kv176 {
  position: absolute;
  z-index: 6;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
  animation: nvIn .18s ease;
  left: 12px;
  right: 12px;
  top: 68px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap: 14px;
  color: var(--t-eef0f5,#eef0f5);
}

.kv177 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kv178 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  padding: 0 8px 4px;
}

.kv179 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv180 {
  position: relative;
  min-height: 170px;
  border-radius: 14px;
  border: none;
  overflow: hidden;
  background: radial-gradient(60% 90% at 30% 30%,#3b6b86,transparent 60%),#1d2533;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv181 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 40%,rgba(11,12,17,.85));
  pointer-events: none;
}

.kv182 {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
  pointer-events: none;
}

.kv183 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  color: #9adbe6;
}

.kv184 {
  font-size: 14px;
  font-weight: 700;
}

.kv185 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  border-radius: 20px 20px 0 0;
}

.kv186 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 8px 0 4px;
  border-radius: 999px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv187 {
  font-size: 13px;
  font-weight: 700;
}

.kv188 {
  position: absolute;
  z-index: 6;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
  animation: nvIn .18s ease;
  right: 12px;
  top: 68px;
  width: 270px;
  padding: 6px;
  color: var(--t-eef0f5,#eef0f5);
}

.kv189 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.kv190 {
  position: relative;
}

.kv191 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: oklch(0.82 0.08 80);
  color: #11131a;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv192 {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
}

.kv193 {
  height: 1px;
  margin: 2px 6px 6px;
  background: var(--w07,rgba(255,255,255,.08));
}

.kv194 {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.kv195 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.kv196 {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}

.kv197 {
  flex: 1 1 auto;
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kv198 {
  height: 1px;
  margin: 4px 6px;
  background: var(--w07,rgba(255,255,255,.08));
}

.kv199 {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: oklch(0.72 0.14 35);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.kv200 {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv201 {
  position: absolute;
  right: 4px;
  top: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kv202 {
  position: absolute;
  z-index: 6;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
  animation: nvIn .18s ease;
  right: 12px;
  top: 68px;
  width: min(360px,calc(100% - 24px));
  color: var(--t-eef0f5,#eef0f5);
  overflow: hidden;
}

.kv203 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
}

.kv204 {
  padding: 0 12px 8px;
}

.kv205 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kv206 {
  max-height: 250px;
  overflow-y: auto;
  padding: 0 6px 6px;
}

.kv207 {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 12px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv208 {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv209 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kv210 {
  font-size: 13px;
  line-height: 1.35;
}

.kv211 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv212 {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: #9adbe6;
  flex-shrink: 0;
}

.kv213 {
  padding: 26px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv214 {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 10px 0 5px;
  border-radius: 12px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv215 {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kv216 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.kv217 {
  font-size: 13px;
  font-weight: 800;
}

.kv218 {
  position: absolute;
  z-index: 6;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
  animation: nvIn .18s ease;
  left: 12px;
  top: 68px;
  width: 290px;
  padding: 6px;
  color: var(--t-eef0f5,#eef0f5);
}

.kv219 {
  display: block;
  padding: 8px 10px 6px;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv220 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv221 {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv222 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kv223 {
  font-size: 14px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kv224 {
  height: 1px;
  margin: 6px;
  background: var(--w07,rgba(255,255,255,.08));
}

.kv225 {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

.kv226 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 20px;
  align-items: stretch;
}

.kv227 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kv228 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kv229 {
  flex: 1;
  accent-color: #9adbe6;
}

.kv230 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  font-weight: 800;
  width: 54px;
  text-align: right;
}

.kv231 {
  overflow: visible;
  min-height: 250px;
}

.kv232 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  overflow: visible;
  max-width: 100%;
  transition: width .15s;
}

.kv233 {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  border-radius: 20px;
  gap: 6px;
}

.kv234 {
  width: 8px;
}

.kv235 {
  height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.kv236 {
  position: relative;
  flex-shrink: 0;
  display: inline;
}

.kv237 {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.kv238 {
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--w10,rgba(255,255,255,.14));
  font-size: 10.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kv239 {
  position: absolute;
  z-index: 6;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
  animation: nvIn .18s ease;
  left: 0;
  top: 44px;
  width: 180px;
  padding: 6px;
  color: var(--t-eef0f5,#eef0f5);
}

.kv240 {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
}

.kv241 {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv242 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.kv243 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
}

.kv244 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  overflow: visible;
}

.kv245 {
  display: flex;
  gap: 2px;
  margin-left: 8px;
  overflow: hidden;
  transition: max-width .3s,opacity .2s;
}

.kv246 {
  height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t-a7abb8,#a7abb8);
  white-space: nowrap;
}

.kv247 {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  transition: width .3s cubic-bezier(.2,.8,.2,1),border-color .2s;
}

.kv248 {
  width: 38px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv249 {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.kv250 {
  height: 20px;
  padding: 0 6px;
  margin-right: 8px;
  border-radius: 6px;
  background: var(--w07,rgba(255,255,255,.1));
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv251 {
  position: absolute;
  z-index: 6;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
  animation: nvIn .18s ease;
  left: 0;
  right: 0;
  top: 46px;
  padding: 6px;
}

.kv252 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv253 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv254 {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kv255 {
  display: block;
  padding: 10px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv256 {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kv257 {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #9adbe6;
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  box-shadow: 0 0 0 3px var(--b-151821,#151821),0 0 0 5px #9adbe6;
  transition: transform .25s;
}

.kv258 {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  border-radius: 20px 20px 0 0;
  gap: 6px;
}

.kv259 {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  outline-offset: 2px;
  white-space: nowrap;
}

.kv260 {
  height: 60px;
}

.kv261 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kv262 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
  align-self: center;
}

.kv263 {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  padding: 10px 0;
}

.kv264 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.kv265 {
  position: relative;
  width: 300px;
  height: 600px;
  border-radius: 44px;
  border: 9px solid #0b0c11;
  background: var(--b-151821,#151821);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  flex-shrink: 0;
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
}

.kv266 {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.kv267 {
  width: 70px;
  height: 20px;
  border-radius: 999px;
  background: #0b0c11;
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
}

.kv268 {
  letter-spacing: 1px;
}

.kv269 {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  flex-shrink: 0;
}

.kv270 {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv271 {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kv272 {
  font-size: 24px;
  font-weight: 700;
}

.kv273 {
  height: 54px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.035));
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 600;
}

.kv274 {
  position: absolute;
  inset: 34px 0 0 0;
  background: var(--b-1b1f2a,#1b1f2a);
  display: flex;
  flex-direction: column;
  animation: nvIn .22s ease;
  z-index: 5;
}

.kv275 {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kv276 {
  flex: 1;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kv277 {
  min-height: 52px;
  padding: 0 12px;
  border-radius: 14px;
  border: none;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kv278 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: oklch(0.72 0.14 35);
}

.kv279 {
  padding: 14px 16px 22px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  align-items: center;
  gap: 10px;
}

.kv280 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kv281 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 44px;
}

.kv282 {
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  flex-shrink: 0;
}

.kv283 {
  font-size: 17px;
  font-weight: 700;
}

.kv284 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: oklch(0.82 0.08 80);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kv285 {
  flex: 1;
  padding: 6px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.kv286 {
  height: 56px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.035));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 600;
}

.kv287 {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
}

.kv288 {
  height: 82px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  align-items: start;
  padding: 8px 6px 0;
  background: var(--b-1b1f2a,#1b1f2a);
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kv289 {
  position: relative;
  min-height: 48px;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv290 {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kv291 {
  font-size: 10.5px;
  font-weight: 800;
}

.kv292 {
  position: absolute;
  top: -8px;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: #9adbe6;
}

.kv293 {
  position: relative;
  width: 300px;
  height: 600px;
  border-radius: 44px;
  border: 9px solid #0b0c11;
  background: var(--b-151821,#151821);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  flex-shrink: 0;
  color: var(--t-eef0f5,#eef0f5);
}

.kv294 {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  z-index: 3;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .2s;
}

.kv295 {
  position: absolute;
  left: 6px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv296 {
  font-size: 16px;
  font-weight: 700;
  transition: opacity .2s,transform .2s;
}

.kv297 {
  position: absolute;
  right: 6px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv298 {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  bottom: 0;
  overflow-y: auto;
  padding: 58px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kv299 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  transition: opacity .15s;
}

.kv300 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-bottom: 6px;
}

.kv301 {
  min-height: 54px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.035));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  flex-shrink: 0;
}

.kv302 {
  font-size: 11.5px;
  font-weight: 800;
}

.kv303 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 20px;
  align-items: stretch;
}

.kv304 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kv305 {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
}

.kv306 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kv307 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kv308 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.kv309 {
  font-size: 12.5px;
  font-weight: 800;
}

.kv310 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap: 12px;
}

.kv311 {
  border-radius: 22px;
  padding: 18px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kv312 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kv313 {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kv314 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kv315 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kv316 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.8 0.14 155);
}

.kv317 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kv318 {
  color: oklch(0.8 0.14 155);
  font-weight: 900;
}

.kv319 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kv320 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.72 0.14 35);
}

.kv321 {
  color: oklch(0.72 0.14 35);
  font-weight: 900;
}

.kvh1:not(:disabled):hover {
  background: rgba(127,127,127,.14);
}

.kvh2:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kvh3:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kvh4:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kvh5:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kvh6:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kvh7:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kvf1:focus {
  transform: none;
  outline: 3px solid #eef0f5;
}
/* -- generated nv: end -- */

/* ==========================================================================
   22zz77. User interface · Offcanvas: classes generated from the handoff by
   _dev/ui_offcanvas_convert.py (ko1 …, koh hover, kof focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* Scrim fade, the slide from each side and the confirm's pop. */
@keyframes ocFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ocInR {
  from { transform: translateX(100%); }
  to { transform: none; }
}

@keyframes ocInL {
  from { transform: translateX(-100%); }
  to { transform: none; }
}

@keyframes ocInB {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes ocInT {
  from { transform: translateY(-100%); }
  to { transform: none; }
}

@keyframes ocPop {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .uoc-page * { animation: none !important; }
}

/* -- generated oc: start -- */
.ko1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ko2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.ko3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.ko4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ko5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ko6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ko8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.ko10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ko11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.ko12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ko13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
  transition: background .3s;
}

.ko14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ko15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.ko16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ko17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.ko18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.ko20 {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ko21 {
  position: relative;
  height: 460px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
}

.ko22 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.8,.2,1),margin .3s cubic-bezier(.2,.8,.2,1);
}

.ko23 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  flex-shrink: 0;
}

.ko24 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ko25 {
  padding: 0 15px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 36px;
}

.ko26 {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ko27 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ko28 {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ko29 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ko30 {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ko31 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko32 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
  white-space: nowrap;
}

.ko33 {
  position: absolute;
  inset: 0;
  background: rgba(6,7,11,.55);
  backdrop-filter: blur(2px);
  animation: ocFade .2s ease;
  z-index: 2;
}

.ko34 {
  position: absolute;
  z-index: 3;
  max-width: 100%;
  max-height: 100%;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.ko35 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.ko36 {
  width: 4px;
  height: 40px;
  border-radius: 999px;
  background: var(--w14,rgba(255,255,255,.25));
}

.ko37 {
  align-self: center;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--w14,rgba(255,255,255,.25));
  margin: 10px 0 0;
  flex-shrink: 0;
}

.ko38 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  flex-shrink: 0;
}

.ko39 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ko40 {
  font-size: 17px;
  font-weight: 700;
}

.ko41 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko42 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.ko43 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ko44 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.ko45 {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ko46 {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko47 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  flex-shrink: 0;
}

.ko48 {
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  border-color: rgba(17,19,26,.001);
  padding: 0 8px;
}

.ko49 {
  flex: 1;
}

.ko50 {
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
}

.ko51 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ko52 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko53 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.ko54 {
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
}

.ko55 {
  padding: 0 15px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 30px;
  font-size: 12px;
}

.ko56 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.ko57 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ko58 {
  display: flex;
  align-items: center;
}

.ko59 {
  font-size: 15px;
  font-weight: 700;
}

.ko60 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ko61 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.ko62 {
  flex: 1 1 auto;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ko63 {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko64 {
  display: flex;
  flex-direction: column;
}

.ko65 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  padding-bottom: 4px;
}

.ko66 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.ko67 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ko68 {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko69 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.ko70 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.ko71 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: stretch;
}

.ko72 {
  position: relative;
  min-height: 400px;
  border-radius: 22px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  overflow: hidden;
}

.ko73 {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: .45;
}

.ko74 {
  height: 44px;
  border-radius: 12px;
  background: var(--w05,rgba(255,255,255,.06));
}

.ko75 {
  position: absolute;
  inset: 0;
  background: rgba(6,7,11,.5);
  outline: 1.5px dashed #c9ccd6;
  outline-offset: -1px;
}

.ko76 {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--b-151821,#151821);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #c9ccd6;
  font-family: ui-monospace,Menlo,monospace;
  white-space: nowrap;
}

.ko77 {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 62%;
  background: var(--b-1b1f2a,#1b1f2a);
  border-left: 1px solid var(--w10,rgba(255,255,255,.14));
  border-radius: 22px 0 0 22px;
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 60px rgba(0,0,0,.45);
}

.ko78 {
  position: relative;
  height: 70px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  outline: 1.5px dashed #9adbe6;
  outline-offset: -1px;
}

.ko79 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ko80 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko81 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-a7abb8,#a7abb8);
}

.ko82 {
  position: absolute;
  left: 10px;
  bottom: -11px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--b-151821,#151821);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #9adbe6;
  font-family: ui-monospace,Menlo,monospace;
  white-space: nowrap;
}

.ko83 {
  position: relative;
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
  outline: 1.5px dashed oklch(0.8 0.13 70);
  outline-offset: -1px;
}

.ko84 {
  height: 38px;
  border-radius: 11px;
  background: var(--w04,rgba(255,255,255,.05));
}

.ko85 {
  position: absolute;
  right: 10px;
  top: 46%;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--b-151821,#151821);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  color: oklch(0.8 0.13 70);
  font-family: ui-monospace,Menlo,monospace;
  white-space: nowrap;
}

.ko86 {
  position: relative;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  outline: 1.5px dashed oklch(0.8 0.14 155);
  outline-offset: -1px;
}

.ko87 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w14,rgba(255,255,255,.22));
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.ko88 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.ko89 {
  position: absolute;
  left: 10px;
  top: -11px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--b-151821,#151821);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  color: oklch(0.8 0.14 155);
  font-family: ui-monospace,Menlo,monospace;
  white-space: nowrap;
}

.ko90 {
  position: absolute;
  left: -6px;
  top: 50%;
  width: 4px;
  height: 40px;
  margin-top: -20px;
  border-radius: 999px;
  background: #ff6b9a;
}

.ko91 {
  position: absolute;
  left: 4px;
  top: calc(50% + 26px);
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--b-151821,#151821);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #ff6b9a;
  font-family: ui-monospace,Menlo,monospace;
  white-space: nowrap;
}

.ko92 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 8px;
  align-content: start;
}

.ko93 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ko94 {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ko95 {
  font-size: 12.5px;
  font-weight: 700;
}

.ko96 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko97 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 16px;
  align-items: stretch;
}

.ko98 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ko99 {
  position: relative;
  height: 140px;
  border: none;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  background: var(--w02,rgba(255,255,255,.02));
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  font-size: 13.3333px;
  font-weight: 400;
}

.ko100 {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: .5;
}

.ko101 {
  height: 8px;
  width: 40%;
  border-radius: 4px;
  background: var(--w10,rgba(255,255,255,.14));
}

.ko102 {
  height: 8px;
  width: 65%;
  border-radius: 4px;
  background: var(--w07,rgba(255,255,255,.1));
}

.ko103 {
  height: 8px;
  width: 52%;
  border-radius: 4px;
  background: var(--w07,rgba(255,255,255,.1));
}

.ko104 {
  position: absolute;
  inset: 0;
  background: rgba(6,7,11,.38);
}

.ko105 {
  position: absolute;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w14,rgba(255,255,255,.2));
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  box-sizing: border-box;
}

.ko106 {
  width: 60%;
  height: 6px;
  border-radius: 3px;
}

.ko107 {
  width: 85%;
  height: 5px;
  border-radius: 3px;
  background: var(--w14,rgba(255,255,255,.2));
}

.ko108 {
  width: 70%;
  height: 5px;
  border-radius: 3px;
  background: var(--w10,rgba(255,255,255,.14));
}

.ko109 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
  flex: 1;
}

.ko110 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ko111 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ko112 {
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko113 {
  margin-left: auto;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko114 {
  font-size: 15.5px;
  font-weight: 700;
}

.ko115 {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--t-a7abb8,#a7abb8);
}

.ko116 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.ko117 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ko118 {
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.ko119 {
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 32px;
  padding: 0 13px;
  font-size: 12px;
}

.ko120 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ko121 {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  flex: 1;
}

.ko122 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ko123 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.ko124 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.ko125 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.ko126 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ko127 {
  font-size: 13.5px;
  font-weight: 700;
}

.ko128 {
  font-size: 12.5px;
  font-weight: 800;
  padding-top: 4px;
}

.ko129 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  padding-top: 6px;
}

.ko130 {
  position: fixed;
  inset: 0;
  z-index: 100;
  animation: ocFade .2s ease;
}

.ko131 {
  position: fixed;
  z-index: 101;
  max-width: 100vw;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  transition: transform .3s cubic-bezier(.2,.8,.2,1),filter .3s,height .25s;
  box-sizing: border-box;
}

.ko132 {
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 14px;
  cursor: ew-resize;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.ko133 {
  width: 4px;
  height: 48px;
  border-radius: 999px;
  background: #ff6b9a;
}

.ko134 {
  align-self: stretch;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  touch-action: none;
  flex-shrink: 0;
}

.ko135 {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: var(--w14,rgba(255,255,255,.3));
}

.ko136 {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  flex-shrink: 0;
}

.ko137 {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ko138 {
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ko139 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ko140 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ko141 {
  flex: 1 1 auto;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ko142 {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ko143 {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ko144 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ko145 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ko146 {
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ko147 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.ko148 {
  font-size: 11px;
  opacity: .6;
}

.ko149 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.ko150 {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ko151 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ko152 {
  display: flex;
}

.ko153 {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 800;
}

.ko154 {
  accent-color: #9adbe6;
}

.ko155 {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ko156 {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg,#2a3242,#151821);
  flex-shrink: 0;
}

.ko157 {
  position: absolute;
  inset: 0;
}

.ko158 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ko159 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.ko160 {
  display: flex;
  align-items: center;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ko161 {
  width: 30px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  font-weight: 400;
}

.ko162 {
  min-width: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.ko163 {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ko164 {
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
}

.ko165 {
  padding: 40px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.ko166 {
  height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ko167 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  font-size: 13px;
}

.ko168 {
  color: var(--t-a7abb8,#a7abb8);
}

.ko169 {
  margin-left: auto;
  font-weight: 700;
}

.ko170 {
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
  margin-top: 4px;
}

.ko171 {
  display: block;
  height: 100%;
  background: oklch(0.8 0.14 155);
  border-radius: 999px;
  transition: width .3s;
}

.ko172 {
  position: relative;
  display: block;
  aspect-ratio: 3/2;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg,#2a3242,#151821);
  flex-shrink: 0;
}

.ko173 {
  display: flex;
  gap: 10px;
}

.ko174 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ko175 {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.ko176 {
  font-size: 13px;
  font-weight: 700;
}

.ko177 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko178 {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--t-a7abb8,#a7abb8);
}

.ko179 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}

.ko180 {
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.ko181 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 14px;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.ko182 {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 800;
  color: oklch(0.72 0.14 35);
}

.ko183 {
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  outline: none;
}

.ko184 {
  resize: vertical;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
}

.ko185 {
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
}

.ko186 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font-size: 13.3333px;
  font-weight: 400;
}

.ko187 {
  font-size: 14px;
  font-weight: 800;
}

.ko188 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.ko189 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 10px;
  border-radius: 18px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.22));
  text-align: center;
}

.ko190 {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.ko191 {
  display: flex;
  gap: 6px;
}

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

.ko193 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  border-radius: 16px;
  border: none;
  background: var(--w03,rgba(255,255,255,.04));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ko194 {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #11131a;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ko195 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ko196 {
  flex: 1;
  font-size: 13.5px;
  font-weight: 700;
}

.ko197 {
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  font-size: 12px;
}

.ko198 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  flex-shrink: 0;
}

.ko199 {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.ko200 {
  padding: 0 15px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 42px;
}

.ko201 {
  font-size: 12.5px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ko202 {
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ko203 {
  position: fixed;
  z-index: 102;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(420px,100vw);
  border-radius: 24px 0 0 24px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: -30px 0 70px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  color: var(--t-eef0f5,#eef0f5);
  animation: ocInR .3s cubic-bezier(.2,.8,.2,1);
}

.ko204 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
}

.ko205 {
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
}

.ko206 {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ko207 {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ko208 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.ko209 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  flex: 1;
}

.ko210 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
}

.ko211 {
  height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
}

.ko212 {
  position: fixed;
  inset: 0;
  z-index: 103;
  background: rgba(6,7,11,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ocFade .15s ease;
}

.ko213 {
  width: min(400px,100%);
  border-radius: 22px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--t-eef0f5,#eef0f5);
  animation: ocPop .2s ease;
}

.ko214 {
  font-size: 18px;
  font-weight: 700;
}

.ko215 {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.ko216 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ko217 {
  height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: oklch(0.72 0.14 35);
  color: #11131a;
  font-weight: 800;
}

.ko218 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 12px;
}

.ko219 {
  border-radius: 22px;
  padding: 18px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ko220 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ko221 {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ko222 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.ko223 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ko224 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.8 0.14 155);
}

.ko225 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ko226 {
  color: oklch(0.8 0.14 155);
  font-weight: 900;
}

.ko227 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ko228 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.72 0.14 35);
}

.ko229 {
  color: oklch(0.72 0.14 35);
  font-weight: 900;
}

.koh1:not(:disabled):hover {
  border-color: rgba(154,219,230,.45);
}

.kof1:focus {
  border-color: rgba(154,219,230,.7);
}

.kof2:focus {
  border-color: rgba(154,219,230,.7);
}
/* -- generated oc: end -- */

/* ==========================================================================
   22zz78. User interface · Pagination & Breadcrumbs: classes generated from
   the handoff by _dev/ui_pagination_convert.py (kz1 …, kzh hover, kzf
   focus). The page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* The "…" menu drops in, the loader spins, skeleton rows pulse. */
@keyframes ppIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes ppSpin {
  to { transform: rotate(360deg); }
}

@keyframes ppPulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .upg-page * { animation: none !important; }
}

/* Phones: the invoice rows tighten their columns; on the narrowest
   screens the client's name gives way to its initials tile. */
@media (max-width: 480px) {
  .upg-page .kz25,
  .upg-page .kz28 { grid-template-columns: 96px minmax(0,1fr) auto auto; gap: 8px; padding: 0 10px; }
  .upg-page .kz32 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 360px) {
  .upg-page .kz32 { display: none; }
}

/* -- generated pp: start -- */
.kz1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kz2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kz3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kz4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kz5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kz6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kz7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kz8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kz9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.kz10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.kz11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kz12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kz13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
  transition: background .3s;
}

.kz14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kz15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kz16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kz17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kz18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kz19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.kz20 {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  outline: none;
}

.kz21 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  overflow: hidden;
}

.kz22 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kz23 {
  font-size: 15px;
  font-weight: 700;
}

.kz24 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kz25 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr) 90px 90px;
  gap: 10px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  min-height: 34px;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kz26 {
  text-align: right;
}

.kz27 {
  height: 300px;
  overflow-y: auto;
}

.kz28 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr) 90px 90px;
  gap: 10px;
  align-items: center;
  padding: 0 14px;
  min-height: 44px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13px;
}

.kz29 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  font-weight: 700;
}

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

.kz31 {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kz32 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.kz33 {
  text-align: right;
  font-weight: 800;
}

.kz34 {
  justify-self: end;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kz35 {
  height: 10px;
  border-radius: 5px;
  background: var(--w07,rgba(255,255,255,.08));
  animation: ppPulse 1s ease-in-out infinite;
}

.kz36 {
  height: 10px;
  width: 70%;
  border-radius: 5px;
  background: var(--w07,rgba(255,255,255,.08));
  animation: ppPulse 1s ease-in-out infinite;
}

.kz37 {
  padding: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: oklch(0.8 0.14 155);
}

.kz38 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kz39 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
  white-space: nowrap;
}

.kz40 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kz41 {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: var(--w04,rgba(255,255,255,.05));
}

.kz42 {
  height: 26px;
  padding: 0 8px;
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.kz43 {
  flex: 1;
}

.kz44 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.kz45 {
  font-family: inherit;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background .15s,color .15s,border-color .15s;
}

.kz46 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.kz47 {
  width: min(260px,100%);
  height: 4px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kz48 {
  display: block;
  height: 100%;
  background: #9adbe6;
  transition: width .4s;
}

.kz49 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.kz50 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--w14,rgba(255,255,255,.25));
  border-top-color: #9adbe6;
  animation: ppSpin .7s linear infinite;
}

.kz51 {
  width: 52px;
  height: 32px;
  padding: 0 8px;
  border-radius: 9px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  outline: none;
}

.kz52 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.kz53 {
  font-size: 12px;
  font-weight: 700;
}

.kz54 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kz55 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
}

.kz56 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.kz57 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kz58 {
  display: flex;
  align-items: center;
}

.kz59 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kz60 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.kz61 {
  flex: 1 1 auto;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kz62 {
  display: flex;
  flex-direction: column;
}

.kz63 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  padding-bottom: 4px;
}

.kz64 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.kz65 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kz66 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kz67 {
  font-size: 12px;
  line-height: 1.5;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kz68 {
  color: var(--t-eef0f5,#eef0f5);
}

.kz69 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap: 20px;
  align-items: start;
}

.kz70 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kz71 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.kz72 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kz73 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kz74 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kz75 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
}

.kz76 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
}

.kz77 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  font-weight: 400;
}

.kz78 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  padding: 20px;
  display: flex;
  justify-content: center;
}

.kz79 {
  width: min(300px,100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kz80 {
  height: 46px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.035));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
}

.kz81 {
  font-weight: 800;
}

.kz82 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kz83 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 20px;
  cursor: pointer;
  font-weight: 400;
}

.kz84 {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
}

.kz85 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-weight: 600;
}

.kz86 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 20px;
  cursor: pointer;
  font-weight: 400;
}

.kz87 {
  height: 4px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kz88 {
  display: block;
  height: 100%;
  background: #9adbe6;
  transition: width .3s;
}

.kz89 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kz90 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
}

.kz91 {
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #11131a;
  animation: ppIn .3s ease;
}

.kz92 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}

.kz93 {
  width: 180px;
  height: 4px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.kz94 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  height: 300px;
  overflow-y: auto;
}

.kz95 {
  padding: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.kz96 {
  font-size: 13px;
  font-weight: 800;
  color: oklch(0.8 0.14 155);
}

.kz97 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kz98 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kz99 {
  font-size: 13.5px;
  font-weight: 700;
}

.kz100 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  flex: 1;
}

.kz101 {
  display: flex;
  flex-direction: column;
  padding: 6px 14px;
}

.kz102 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kz103 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kz104 {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kz105 {
  color: var(--t-a7abb8,#a7abb8);
}

.kz106 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.kz107 {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
}

.kz108 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
}

.kz109 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kz110 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.kz111 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
}

.kz112 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kz113 {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.kz114 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kz115 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.035));
}

.kz116 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kz117 {
  font-size: 13.5px;
  font-weight: 700;
  flex: 1;
}

.kz118 {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kz119 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 240px;
}

.kz120 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kz121 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.kz122 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 13px;
  padding: 0 2px;
  font-weight: 700;
}

.kz123 {
  position: relative;
  display: flex;
  min-width: 0;
}

.kz124 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  min-width: 0;
}

.kz125 {
  flex-shrink: 0;
}

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

.kz127 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--t-eef0f5,#eef0f5);
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
}

.kz128 {
  padding: 0 9px;
  border-radius: 9px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.kz129 {
  position: absolute;
  z-index: 8;
  border-radius: 16px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 20px 46px rgba(0,0,0,.45);
  padding: 6px;
  animation: ppIn .16s ease;
  left: 0;
  top: calc(100% + 6px);
  min-width: 200px;
}

.kz130 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.kz131 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 11px;
  width: 14px;
}

.kz132 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kz133 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.kz134 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kz135 {
  flex: 1;
  accent-color: #9adbe6;
}

.kz136 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  font-weight: 800;
}

.kz137 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kz138 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.78 0.11 300) 18%, transparent);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kz139 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  padding: 14px 16px;
  min-height: 220px;
}

.kz140 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  font-family: ui-monospace,Menlo,monospace;
}

.kz141 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}

.kz142 {
  position: relative;
}

.kz143 {
  width: 22px;
  height: 32px;
  border-radius: 6px;
  border: none;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s;
}

.kz144 {
  position: absolute;
  z-index: 8;
  border-radius: 16px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 20px 46px rgba(0,0,0,.45);
  padding: 6px;
  animation: ppIn .16s ease;
  left: 0;
  top: 38px;
  min-width: 190px;
  font-family: 'Urbanist',sans-serif;
}

.kz145 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.kz146 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kz147 {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kz148 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  padding: 16px;
  display: flex;
  justify-content: center;
}

.kz149 {
  width: min(300px,100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kz150 {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 8px 0 2px;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.kz151 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.kz152 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.kz153 {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  border: none;
  background: var(--w03,rgba(255,255,255,.04));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.kz154 {
  margin-left: auto;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kz155 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kz156 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.kz157 {
  color: var(--t-8a8f9e,#8a8f9e);
  padding: 0 4px;
}

.kz158 {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: none;
  font-family: inherit;
  font-size: 13px;
}

.kz159 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kz160 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kz161 {
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
  flex: 1;
}

.kz162 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
}

.kz163 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 34px;
}

.kz164 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kz165 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kz166 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.kz167 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.kz168 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.kz169 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kz170 {
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kz171 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kz172 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kz173 {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  flex: 1;
}

.kz174 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kz175 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.kz176 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kz177 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.kz178 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kz179 {
  font-size: 12.5px;
  font-weight: 800;
  padding-top: 4px;
}

.kz180 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 12px;
}

.kz181 {
  border-radius: 20px;
  padding: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kz182 {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kz183 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kz184 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kz185 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kz186 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.8 0.14 155);
}

.kz187 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kz188 {
  color: oklch(0.8 0.14 155);
  font-weight: 900;
}

.kz189 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kz190 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  color: oklch(0.72 0.14 35);
}

.kz191 {
  color: oklch(0.72 0.14 35);
  font-weight: 900;
}

.kzh1:not(:disabled):hover {
  filter: brightness(1.15);
}

.kzh2:not(:disabled):hover {
  color: var(--t-eef0f5,#eef0f5);
}

.kzh3:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kzh4:not(:disabled):hover {
  color: var(--t-eef0f5,#eef0f5);
}

.kzh5:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.kzh6:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}
/* -- generated pp: end -- */

/* ==========================================================================
   22zz79. User interface · Progress: classes generated from the handoff by
   _dev/ui_progress_convert.py (ky1 …, kyh hover, kyf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* Spinners, the indeterminate chunk, moving stripes, pulsing skeletons,
   bouncing dots, the live step's halo, the menu entrance and the
   indeterminate ring and gauge. */
@keyframes prSpin {
  to { transform: rotate(360deg); }
}

@keyframes prIndet {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(290%); }
}

@keyframes prStripe {
  to { background-position: 22.6px 0, 0 0; }
}

@keyframes prPulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

@keyframes prDot {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(-6px); opacity: 1; }
}

@keyframes prLive {
  0% { box-shadow: 0 0 0 0 rgba(43,138,153,.55); }
  100% { box-shadow: 0 0 0 8px rgba(43,138,153,0); }
}

@keyframes prIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes prRingSpin {
  to { transform: rotate(270deg); }
}

@keyframes prHalf {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: -100; }
}

@media (prefers-reduced-motion: reduce) {
  .upr-page * { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* The gauge's svg sits inline in the prototype (the shell makes svg a
   block), which leaves the 4 px line gap the card is measured with. */
.upr-page .ky123 > svg {
  display: inline;
}

/* Phones: the top-page-bar demo drops its wordmark so all three links fit. */
@media (max-width: 400px) {
  .upr-page .ky196 { display: none; }
}

/* -- generated pr: start -- */
.ky1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ky2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.ky3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.ky4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ky5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ky6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ky7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ky8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ky9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.ky10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ky11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.ky12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ky13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
  transition: background .3s;
}

.ky14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ky15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.ky16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ky17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.ky18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ky19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.ky20 {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ky21 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  min-height: 300px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.ky22 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}

.ky23 {
  font-size: 16px;
  font-weight: 700;
}

.ky24 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.ky25 {
  position: relative;
  flex: 1;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.ky26 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--w14,rgba(255,255,255,.18));
  transition: width .4s;
}

.ky27 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
}

.ky28 {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--t-eef0f5,#eef0f5);
}

.ky29 {
  position: absolute;
  inset: 0;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  color: #11131a;
}

.ky30 {
  font-size: 13px;
  font-weight: 800;
  min-width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ky31 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ky32 {
  transform: rotate(-90deg);
  flex-shrink: 0;
}

.ky33 {
  transition: stroke-dashoffset .4s,stroke .3s;
}

.ky34 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ky35 {
  font-weight: 800;
}

.ky36 {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ky37 {
  position: relative;
}

.ky38 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ky39 {
  flex: 1;
  display: flex;
  gap: 4px;
}

.ky40 {
  flex: 1;
  border-radius: 4px;
  transition: background .3s;
}

.ky41 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  min-height: 18px;
  text-align: center;
}

.ky42 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  flex-wrap: wrap;
}

.ky43 {
  flex: 1;
  min-width: 140px;
  accent-color: #9adbe6;
}

.ky44 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 34px;
}

.ky45 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ky46 {
  flex: 1;
}

.ky47 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.ky48 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
}

.ky49 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.ky50 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ky51 {
  display: flex;
  align-items: center;
}

.ky52 {
  font-size: 15px;
  font-weight: 700;
}

.ky53 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ky54 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.ky55 {
  flex: 1 1 auto;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ky56 {
  display: flex;
  flex-direction: column;
}

.ky57 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  padding-bottom: 4px;
}

.ky58 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.ky59 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.ky60 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.ky61 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: stretch;
}

.ky62 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ky63 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.ky64 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ky65 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ky66 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ky67 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.ky68 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ky69 {
  font-size: 14px;
  font-weight: 700;
  flex: 1;
}

.ky70 {
  font-size: 14px;
  font-weight: 800;
}

.ky71 {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.ky72 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32.5%;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
  transition: width .4s,background .3s;
}

.ky73 {
  display: flex;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ky74 {
  margin-left: auto;
}

.ky75 {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  gap: 2px;
}

.ky76 {
  transition: opacity .2s;
}

.ky77 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.ky78 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--t-a7abb8,#a7abb8);
}

.ky79 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.ky80 {
  font-size: 24px;
  font-weight: 800;
}

.ky81 {
  position: relative;
  padding-top: 18px;
}

.ky82 {
  position: absolute;
  left: 55%;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.ky83 {
  position: relative;
  display: block;
  height: 12px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.ky84 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 81%;
  border-radius: 999px;
  background: oklch(0.8 0.14 155);
  transition: width .4s,background .3s;
}

.ky85 {
  position: absolute;
  left: 55%;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--t-eef0f5,#eef0f5);
}

.ky86 {
  font-size: 12.5px;
  font-weight: 800;
}

.ky87 {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.ky88 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  transition: width .4s,background .3s;
}

.ky89 {
  position: absolute;
  left: 80%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.ky90 {
  position: absolute;
  left: 95%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.ky91 {
  accent-color: #9adbe6;
}

.ky92 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ky93 {
  font-size: 12.5px;
  font-weight: 800;
  flex: 1;
}

.ky94 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 32px;
  font-size: 12px;
}

.ky95 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ky96 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  font-weight: 400;
}

.ky97 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ky98 {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ky99 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.ky100 {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  cursor: pointer;
}

.ky101 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--w14,rgba(255,255,255,.2));
  transition: width .3s;
}

.ky102 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
}

.ky103 {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

.ky104 {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ky105 {
  color: var(--t-9adbe6,#9adbe6);
}

.ky106 {
  color: var(--t-a7abb8,#a7abb8);
}

.ky107 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: stretch;
}

.ky108 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  align-items: center;
}

.ky109 {
  position: relative;
  display: flex;
}

.ky110 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.ky111 {
  font-size: 30px;
  font-weight: 800;
}

.ky112 {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ky113 {
  font-size: 13px;
  font-weight: 700;
}

.ky114 {
  display: flex;
  gap: 6px;
}

.ky115 {
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 40px;
  padding: 0;
}

.ky116 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  gap: 14px;
  flex: 1;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.ky117 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
}

.ky118 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: default;
}

.ky119 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ky120 {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

.ky121 {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--w04,rgba(255,255,255,.05));
}

.ky122 {
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.ky123 {
  position: relative;
  width: 220px;
  max-width: 100%;
}

.ky124 {
  transform-origin: 50px 50px;
  transition: transform .6s cubic-bezier(.3,1.4,.5,1);
}

.ky125 {
  font-size: 30px;
  font-weight: 800;
  margin-top: -6px;
}

.ky126 {
  font-size: 12.5px;
  font-weight: 700;
}

.ky127 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  padding: 10px;
}

.ky128 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
}

.ky129 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ky130 {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ky131 {
  width: 40px;
  text-align: right;
  font-size: 13px;
  font-weight: 800;
}

.ky132 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: stretch;
}

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

.ky134 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  min-width: 0;
}

.ky135 {
  position: absolute;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  top: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--w07,rgba(255,255,255,.08));
}

.ky136 {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: oklch(0.8 0.14 155);
  transition: width .4s;
}

.ky137 {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
}

.ky138 {
  font-size: 12.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.ky139 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ky140 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  flex: 1;
}

.ky141 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
}

.ky142 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 32px;
}

.ky143 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}

.ky144 {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto;
  gap: 12px;
}

.ky145 {
  position: relative;
  display: flex;
  justify-content: center;
}

.ky146 {
  position: absolute;
  top: 22px;
  bottom: -2px;
  width: 2px;
}

.ky147 {
  position: relative;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-sizing: border-box;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ky148 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 16px;
  min-width: 0;
}

.ky149 {
  font-size: 13.5px;
}

.ky150 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ky151 {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  padding-top: 2px;
}

.ky152 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.ky153 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ky154 {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ky155 {
  font-size: 11.5px;
}

.ky156 {
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ky157 {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.ky158 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  transition: width .2s;
}

.ky159 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ky160 {
  display: flex;
  font-size: 12.5px;
  font-weight: 700;
}

.ky161 {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.ky162 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
  transition: width .4s,background .3s;
}

.ky163 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in oklab, #9adbe6 16%, transparent);
  color: #9adbe6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ky164 {
  font-size: 14px;
  font-weight: 700;
}

.ky165 {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ky166 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.ky167 {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ky168 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--w10,rgba(255,255,255,.14));
  border-top-color: var(--t-9adbe6,#9adbe6);
  animation: prSpin .8s linear infinite;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

.ky169 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ky170 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--w14,rgba(255,255,255,.25));
}

.ky171 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ky172 {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.ky173 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.ky174 {
  font-size: 13px;
  font-weight: 800;
}

.ky175 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ky176 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.ky177 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}

.ky178 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}

.ky179 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 14px 8px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.ky180 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--w10,rgba(255,255,255,.14));
  border-top-color: var(--t-9adbe6,#9adbe6);
  animation: prSpin .8s linear infinite;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

.ky181 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: center;
}

.ky182 {
  display: flex;
  gap: 5px;
  height: 26px;
  align-items: center;
}

.ky183 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t-9adbe6,#9adbe6);
  animation: prDot 1s 0s ease-in-out infinite;
}

.ky184 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t-9adbe6,#9adbe6);
  animation: prDot 1s 0.15s ease-in-out infinite;
}

.ky185 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t-9adbe6,#9adbe6);
  animation: prDot 1s 0.3s ease-in-out infinite;
}

.ky186 {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
  margin: 11px 0;
}

.ky187 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
  animation: prIndet 1.3s ease-in-out infinite;
}

.ky188 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.ky189 {
  height: 8px;
  width: 70%;
  border-radius: 4px;
  background: var(--w10,rgba(255,255,255,.12));
  animation: prPulse 1.2s ease-in-out infinite;
}

.ky190 {
  height: 8px;
  width: 90%;
  border-radius: 4px;
  background: var(--w07,rgba(255,255,255,.09));
  animation: prPulse 1.2s ease-in-out infinite;
}

.ky191 {
  height: 8px;
  width: 50%;
  border-radius: 4px;
  background: var(--w07,rgba(255,255,255,.09));
  animation: prPulse 1.2s ease-in-out infinite;
}

.ky192 {
  font-size: 12px;
  line-height: 1.5;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ky193 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  overflow: hidden;
  height: 170px;
}

.ky194 {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  background: var(--t-9adbe6,#9adbe6);
  box-shadow: 0 0 10px var(--t-9adbe6,#9adbe6);
  transition: width .25s ease,opacity .4s .2s;
  z-index: 2;
}

.ky195 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
}

.ky196 {
  font-size: 12px;
  letter-spacing: .24em;
  font-weight: 900;
}

.ky197 {
  height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.ky198 {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity .2s;
}

.ky199 {
  font-size: 18px;
  font-weight: 700;
}

.ky200 {
  height: 8px;
  width: 70%;
  border-radius: 4px;
  background: var(--w07,rgba(255,255,255,.09));
}

.ky201 {
  height: 8px;
  width: 50%;
  border-radius: 4px;
  background: var(--w07,rgba(255,255,255,.09));
}

.ky202 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.ky203 {
  position: relative;
  overflow: hidden;
  width: 240px;
  height: 48px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .3s;
}

.ky204 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #9adbe6;
  transition: width .15s linear;
}

.ky205 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ky206 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: center;
}

.ky207 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ky208 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--w05,rgba(255,255,255,.06));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ky209 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--w10,rgba(255,255,255,.14));
  border-top-color: var(--t-9adbe6,#9adbe6);
  animation: prSpin .8s linear infinite;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

.ky210 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in oklab, #9adbe6 8%, transparent);
  border: 1px solid color-mix(in oklab, #9adbe6 28%, transparent);
  animation: prIn .3s ease;
}

.ky211 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.ky212 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  align-self: flex-start;
  font-size: 12px;
}

.ky213 {
  display: flex;
  gap: 8px;
}

.ky214 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: stretch;
}

.ky215 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ky216 {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  flex: 1;
}

.ky217 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ky218 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.ky219 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.ky220 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.ky221 {
  font-size: 13.5px;
  font-weight: 700;
}

.ky222 {
  font-size: 12.5px;
  font-weight: 800;
  padding-top: 4px;
}

.ky223 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 12px;
}

.ky224 {
  border-radius: 20px;
  padding: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ky225 {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ky226 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ky227 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.ky228 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ky229 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ky230 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ky231 {
  font-weight: 900;
}

.ky232 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kyh1:not(:disabled):hover {
  background: rgba(127,127,127,.08);
}
/* -- generated pr: end -- */

/* ==========================================================================
   22zz80. User interface · Spinners: classes generated from the handoff by
   _dev/ui_spinners_convert.py (kj1 …, kjh hover, kjf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* Ring and orbit turn, the arc grows and shrinks, dots and bars bounce,
   pulses spread, the logo breathes; reduced motion fades instead. */
@keyframes spRot {
  to { transform: rotate(360deg); }
}

@keyframes spDash {
  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

@keyframes spDot {
  0%, 80%, 100% { transform: scale(.55); opacity: .45; }
  40% { transform: scale(1); opacity: 1; }
}

@keyframes spPulse {
  0% { transform: scale(.15); opacity: .9; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes spBar {
  0%, 100% { transform: scaleY(.35); }
  50% { transform: scaleY(1); }
}

@keyframes spLogo {
  0%, 100% { transform: scale(.88); }
  50% { transform: scale(1); }
}

@keyframes spFade {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

@keyframes spIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

@keyframes spPop {
  0% { transform: scale(.4); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* -- generated sp: start -- */
.kj1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kj2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kj3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kj4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kj5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kj6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kj7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kj8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kj9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.kj10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.kj11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kj12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kj13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
  transition: background .3s;
}

.kj14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kj15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kj16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kj17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kj18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kj19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.kj20 {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kj21 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  min-height: 300px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.kj22 {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kj23 {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: spIn .18s ease;
}

.kj24 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kj25 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-sizing: border-box;
}

.kj26 {
  width: 100%;
  height: 100%;
}

.kj27 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.kj28 {
  border-radius: 50%;
  background: currentColor;
}

.kj29 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
}

.kj30 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.kj31 {
  height: 100%;
  border-radius: 999px;
  background: currentColor;
}

.kj32 {
  position: absolute;
  inset: 0;
}

.kj33 {
  position: absolute;
  left: 50%;
  top: 0;
  border-radius: 50%;
  background: currentColor;
}

.kj34 {
  position: absolute;
  left: 50%;
  bottom: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.kj35 {
  position: absolute;
  inset: 0;
  border-radius: 30%;
  box-sizing: border-box;
}

.kj36 {
  width: 62%;
  height: 62%;
  border-radius: 28%;
  background: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kj37 {
  font-weight: 900;
  line-height: 1;
}

.kj38 {
  font-size: 13.5px;
  font-weight: 700;
}

.kj39 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  animation: spIn .2s ease;
}

.kj40 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #11131a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.kj41 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 520px;
}

.kj42 {
  position: relative;
  height: 30px;
  border-radius: 10px;
  background: var(--w04,rgba(255,255,255,.05));
  overflow: hidden;
}

.kj43 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: color-mix(in oklab, var(--t-a7abb8,#a7abb8) 22%, transparent);
}

.kj44 {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: 6px;
  background: var(--t-9adbe6,#9adbe6);
  opacity: .9;
}

.kj45 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
}

.kj46 {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--t-eef0f5,#eef0f5);
}

.kj47 {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kj48 {
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

.kj49 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.kj50 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.kj51 {
  flex: 1 1 auto;
  height: 30px;
  padding: 0 9px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kj52 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 34px;
}

.kj53 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.kj54 {
  flex: 1;
}

.kj55 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kj56 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
}

.kj57 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.kj58 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.kj59 {
  display: flex;
  align-items: center;
}

.kj60 {
  font-size: 15px;
  font-weight: 700;
}

.kj61 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kj62 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
}

.kj63 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 4px 7px;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}

.kj64 {
  display: flex;
  flex-direction: column;
}

.kj65 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.kj66 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kj67 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kj68 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 6px 18px 12px;
  overflow-x: auto;
}

.kj69 {
  min-width: 640px;
  display: flex;
  flex-direction: column;
}

.kj70 {
  display: grid;
  grid-template-columns: 120px repeat(3,minmax(0,1fr));
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kj71 {
  display: grid;
  grid-template-columns: 120px repeat(3,minmax(0,1fr));
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kj72 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kj73 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kj74 {
  position: relative;
  height: 74px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  overflow: hidden;
}

.kj75 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kj76 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kj77 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.kj78 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kj79 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kj80 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kj81 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.kj82 {
  width: 160px;
  height: 44px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .25s;
}

.kj83 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, currentColor 22%, transparent);
  border-top-color: currentColor;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

.kj84 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: center;
  min-height: 16px;
}

.kj85 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.kj86 {
  position: relative;
  display: flex;
  align-items: center;
}

.kj87 {
  position: absolute;
  left: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kj88 {
  flex: 1;
  height: 44px;
  padding: 0 42px;
  border-radius: 14px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.kj89 {
  position: absolute;
  right: 14px;
}

.kj90 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--t-9adbe6,#9adbe6) 22%, transparent);
  border-top-color: var(--t-9adbe6,#9adbe6);
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

.kj91 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 120px;
}

.kj92 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.035));
  font-size: 13px;
  font-weight: 600;
  transition: opacity .2s;
}

.kj93 {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kj94 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kj95 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  padding: 10px;
}

.kj96 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 10px;
  border-radius: 12px;
}

.kj97 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kj98 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kj99 {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kj100 {
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kj101 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--t-9adbe6,#9adbe6) 22%, transparent);
  border-top-color: var(--t-9adbe6,#9adbe6);
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

.kj102 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.kj103 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kj104 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  flex: 1;
}

.kj105 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity .2s;
}

.kj106 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.kj107 {
  font-size: 12.5px;
  font-weight: 700;
}

.kj108 {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 60px;
}

.kj109 {
  flex: 1;
  border-radius: 5px;
  background: var(--w14,rgba(255,255,255,.2));
  transition: height .4s;
}

.kj110 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kj111 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spIn .15s ease;
}

.kj112 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  font-size: 13px;
  font-weight: 700;
}

.kj113 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  padding: 12px;
}

.kj114 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  height: 220px;
  overflow: hidden;
}

.kj115 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--b-151821,#151821);
  animation: spIn .2s ease;
}

.kj116 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .24em;
}

.kj117 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  animation: spIn .25s ease;
}

.kj118 {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #9adbe6;
}

.kj119 {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .24em;
}

.kj120 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: oklch(0.82 0.08 80);
}

.kj121 {
  font-size: 18px;
  font-weight: 700;
}

.kj122 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}

.kj123 {
  height: 56px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.kj124 {
  height: 46px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.035));
}

.kj125 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  font-size: 12px;
}

.kj126 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

.kj127 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 190px;
  justify-content: flex-end;
}

.kj128 {
  max-width: 78%;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.4;
  animation: spIn .2s ease;
}

.kj129 {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: spIn .2s ease;
}

.kj130 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kj131 {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--w05,rgba(255,255,255,.07));
}

.kj132 {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.kj133 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t-a7abb8,#a7abb8);
}

.kj134 {
  display: flex;
  gap: 6px;
}

.kj135 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 34px;
  flex: 1;
}

.kj136 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
}

.kj137 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  height: 240px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.kj138 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.kj139 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  display: flex;
  align-items: center;
  justify-content: center;
}

.kj140 {
  color: var(--t-9adbe6,#9adbe6);
}

.kj141 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  cursor: grab;
}

.kj142 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.kj143 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.kj144 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kj145 {
  font-size: 13px;
  font-weight: 700;
  flex: 1;
}

.kj146 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 150px;
  justify-content: flex-end;
  font-size: 12px;
  font-weight: 700;
}

.kj147 {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--t-9adbe6,#9adbe6) 22%, transparent);
  border-top-color: var(--t-9adbe6,#9adbe6);
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

.kj148 {
  position: relative;
  height: 22px;
  border-radius: 7px;
  background: var(--w04,rgba(255,255,255,.05));
  overflow: hidden;
}

.kj149 {
  position: absolute;
  top: 5px;
  bottom: 5px;
  border-radius: 5px;
  background: var(--t-9adbe6,#9adbe6);
}

.kj150 {
  position: absolute;
  top: 0;
  bottom: 0;
}

.kj151 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kj152 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 32px;
  font-size: 12px;
}

.kj153 {
  display: flex;
  gap: 10px;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kj154 {
  color: var(--t-a7abb8,#a7abb8);
}

.kj155 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kj156 {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kj157 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 5px solid color-mix(in oklab, var(--t-9adbe6,#9adbe6) 22%, transparent);
  border-top-color: var(--t-9adbe6,#9adbe6);
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
}

.kj158 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spPop .3s ease;
}

.kj159 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #11131a;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spPop .3s ease;
}

.kj160 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--w05,rgba(255,255,255,.06));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kj161 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  min-height: 18px;
}

.kj162 {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kj163 {
  transition: stroke-dasharray .45s ease,fill .3s .25s,stroke .3s;
}

.kj164 {
  position: relative;
}

.kj165 {
  transition: stroke-dashoffset .35s .45s ease;
}

.kj166 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kj167 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kj168 {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  flex: 1;
}

.kj169 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kj170 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.kj171 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kj172 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.kj173 {
  font-size: 12.5px;
  font-weight: 800;
  padding-top: 4px;
}

.kj174 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 12px;
}

.kj175 {
  border-radius: 20px;
  padding: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kj176 {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kj177 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kj178 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kj179 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kj180 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kj181 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kj182 {
  font-weight: 900;
}

.kj183 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kjf1:focus {
  border-color: rgba(154,219,230,.7);
}
/* -- generated sp: end -- */

/* ==========================================================================
   22zz81. User interface · Tabs & Pills: classes generated from the handoff
   by _dev/ui_tabs_pills_convert.py (kh1 …, khh hover, khf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* Menus and confirms drop in; lazy panels pulse while they load. */
@keyframes tpIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

@keyframes tpPulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .utp-page * { animation: none !important; transition: none !important; }
}

/* Narrow phones: the settings menu sits above its panel, and the four
   locked-tab demo tabs tighten so the row fits. */
@media (max-width: 360px) {
  .utp-page .kh81 { flex-direction: column; }
  .utp-page .kh82 { flex: 0 0 auto; width: auto; }
  .utp-page .kh161 { padding-left: 7px; padding-right: 7px; }
}

/* -- generated tp: start -- */
.kh1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kh2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kh3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kh4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kh5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kh6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kh7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kh8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kh9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.kh10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.kh11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kh12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kh13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
  transition: background .3s;
}

.kh14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kh15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kh16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kh17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kh18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kh19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.kh20 {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kh21 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  padding: 18px;
  display: flex;
  gap: 16px;
  min-height: 330px;
}

.kh22 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kh23 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.kh24 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.kh25 {
  position: relative;
  display: flex;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

.kh26 {
  position: absolute;
  z-index: 0;
  left: 0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1),height .3s;
}

.kh27 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s,background .2s;
}

.kh28 {
  height: 19px;
  min-width: 19px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
}

.kh29 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff9b7a;
}

.kh30 {
  width: 18px;
  height: 18px;
  margin-right: -4px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: .6;
}

.kh31 {
  position: relative;
  flex-shrink: 0;
  display: inline;
}

.kh32 {
  padding: 0 12px;
  border-radius: 10px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kh33 {
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--w10,rgba(255,255,255,.14));
  font-size: 10.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kh34 {
  position: absolute;
  z-index: 8;
  border-radius: 16px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 20px 46px rgba(0,0,0,.45);
  padding: 6px;
  animation: tpIn .16s ease;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
}

.kh35 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.kh36 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kh37 {
  border-radius: 10px;
  border: 1px dashed var(--w14,rgba(255,255,255,.25));
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}

.kh38 {
  flex: 1;
  min-width: 0;
  padding: 16px;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: tpIn .2s ease;
}

.kh39 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.kh40 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kh41 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.035));
}

.kh42 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kh43 {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kh44 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kh45 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.kh46 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kh47 {
  flex: 1;
}

.kh48 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kh49 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
}

.kh50 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.kh51 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.kh52 {
  display: flex;
  align-items: center;
}

.kh53 {
  font-size: 15px;
  font-weight: 700;
}

.kh54 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kh55 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.kh56 {
  flex: 1 1 auto;
  height: 30px;
  padding: 0 9px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kh57 {
  display: flex;
}

.kh58 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.kh59 {
  accent-color: #9adbe6;
}

.kh60 {
  display: flex;
  flex-direction: column;
}

.kh61 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.kh62 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kh63 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kh64 {
  font-size: 12px;
  line-height: 1.5;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kh65 {
  color: var(--t-eef0f5,#eef0f5);
}

.kh66 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kh67 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kh68 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 2px;
}

.kh69 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kh70 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.kh71 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kh72 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.kh73 {
  padding: 6px 14px 0;
}

.kh74 {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  overflow-x: auto;
  scrollbar-width: none;
}

.kh75 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 12px;
  border: none;
  margin-bottom: -1px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.kh76 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.kh77 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  animation: tpIn .2s ease;
}

.kh78 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.035));
}

.kh79 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kh80 {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.kh81 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: row;
  padding: 10px;
  gap: 14px;
  align-items: stretch;
}

.kh82 {
  width: 170px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kh83 {
  padding: 10px 10px 4px;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kh84 {
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: 0 10px 10px 0;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.kh85 {
  flex: 1;
  min-width: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--w02,rgba(255,255,255,.02));
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: tpIn .2s ease;
}

.kh86 {
  font-size: 17px;
  font-weight: 700;
}

.kh87 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.kh88 {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.035));
  font-size: 13px;
  font-weight: 600;
}

.kh89 {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 8px 8px 0;
  background: var(--w03,rgba(255,255,255,.035));
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  overflow-x: auto;
  scrollbar-width: none;
}

.kh90 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 6px 0 12px;
  border-radius: 12px 12px 0 0;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: grab;
  flex-shrink: 0;
  max-width: 180px;
  margin-bottom: -1px;
}

.kh91 {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-width: 0;
}

.kh92 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

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

.kh94 {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  font-weight: 400;
}

.kh95 {
  width: 32px;
  height: 32px;
  margin: 0 0 3px 4px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}

.kh96 {
  padding: 16px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kh97 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 13px;
  font-weight: 700;
}

.kh98 {
  font-size: 26px;
  font-weight: 800;
}

.kh99 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 6px 14px 14px;
}

.kh100 {
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
  padding-top: 6px;
}

.kh101 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
  align-items: center;
}

.kh102 {
  width: min(300px,100%);
  border-radius: 32px;
  border: 8px solid #0b0c11;
  background: var(--b-151821,#151821);
  overflow: hidden;
  padding: 14px 0 18px;
}

.kh103 {
  display: block;
  padding: 0 16px 10px;
  font-size: 18px;
  font-weight: 700;
}

.kh104 {
  display: flex;
  gap: 6px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.kh105 {
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.kh106 {
  padding: 14px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kh107 {
  height: 46px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.04));
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
}

.kh108 {
  height: 46px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.04));
}

.kh109 {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}

.kh110 {
  height: 12px;
  width: 40%;
  border-radius: 6px;
  background: var(--w10,rgba(255,255,255,.12));
  animation: tpPulse 1s ease-in-out infinite;
}

.kh111 {
  height: 40px;
  border-radius: 12px;
  background: var(--w05,rgba(255,255,255,.06));
  animation: tpPulse 1s ease-in-out infinite;
}

.kh112 {
  font-size: 15px;
  font-weight: 700;
  animation: tpIn .2s ease;
}

.kh113 {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.035));
  font-size: 13px;
  font-weight: 600;
  animation: tpIn .25s ease;
}

.kh114 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kh115 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kh116 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.kh117 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kh118 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kh119 {
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all .15s;
}

.kh120 {
  color: var(--t-9adbe6,#9adbe6);
  font-weight: 900;
}

.kh121 {
  font-size: 11px;
  opacity: .6;
}

.kh122 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kh123 {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
}

.kh124 {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.kh125 {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 9px;
  background: var(--b-f2f3f6,#f2f3f6);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}

.kh126 {
  position: relative;
  z-index: 1;
  flex: 1;
  height: 32px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color .2s;
}

.kh127 {
  display: grid;
  gap: 6px;
  transition: all .3s;
}

.kh128 {
  border-radius: 10px;
  transition: height .3s;
}

.kh129 {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 4px 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  animation: tpIn .2s ease;
}

.kh130 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  opacity: .7;
  font-weight: 400;
}

.kh131 {
  height: 30px;
  width: 110px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.25));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
}

.kh132 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.kh133 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.kh134 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}

.kh135 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px;
  border-radius: 16px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}

.kh136 {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kh137 {
  font-size: 11px;
  font-weight: 600;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kh138 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.kh139 {
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.kh140 {
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kh141 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kh142 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.035));
  font-size: 13px;
  animation: tpIn .2s ease;
}

.kh143 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  font-weight: 700;
}

.kh144 {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.kh145 {
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kh146 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  animation: tpIn .2s ease;
}

.kh147 {
  flex: 1;
  min-width: 160px;
  font-size: 13px;
  font-weight: 700;
}

.kh148 {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  color: #11131a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kh149 {
  padding-top: 12px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kh150 {
  resize: vertical;
  padding: 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  outline: none;
}

.kh151 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kh152 {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
}

.kh153 {
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kh154 {
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
}

.kh155 {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kh156 {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.kh157 {
  height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}

.kh158 {
  flex-shrink: 0;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--w03,rgba(255,255,255,.035));
  font-size: 12.5px;
  font-weight: 600;
}

.kh159 {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
}

.kh160 {
  position: relative;
  display: flex;
}

.kh161 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 12px;
  border: none;
  margin-bottom: -1px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  white-space: nowrap;
}

.kh162 {
  font-size: 11px;
}

.kh163 {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 5;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  animation: tpIn .15s ease;
}

.kh164 {
  padding-top: 14px;
  min-height: 90px;
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
}

.kh165 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kh166 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kh167 {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  flex: 1;
}

.kh168 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kh169 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.kh170 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kh171 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.kh172 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kh173 {
  font-size: 13.5px;
  font-weight: 700;
}

.kh174 {
  font-size: 12.5px;
  font-weight: 800;
  padding-top: 4px;
}

.kh175 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 12px;
}

.kh176 {
  border-radius: 20px;
  padding: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kh177 {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kh178 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kh179 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kh180 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kh181 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kh182 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kh183 {
  font-weight: 900;
}

.kh184 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.khh1:not(:disabled):hover {
  opacity: 1;
  background: rgba(127,127,127,.18);
}

.khh2:not(:disabled):hover {
  background: rgba(127,127,127,.12);
}

.khh3:not(:disabled):hover {
  background: rgba(127,127,127,.18);
}

.khh4:not(:disabled):hover {
  opacity: 1;
  background: rgba(127,127,127,.2);
}

.khf1:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf2:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf3:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf4:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf5:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf6:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf7:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf8:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf9:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf10:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf11:focus {
  border-color: rgba(154,219,230,.7);
  border-style: solid;
}

.khf12:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf13:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf14:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf15:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.khf16:focus {
  border-color: rgba(154,219,230,.7);
}

.khf17:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}
/* -- generated tp: end -- */

/* ==========================================================================
   22zz82. User interface · Toasts: classes generated from the handoff by
   _dev/ui_toasts_convert.py (kk1 …, kkh hover, kkf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* The loading spinner and the entrances: up from the bottom, down from the
   top, or a fade under reduced motion. */
@keyframes tsSpin {
  to { transform: rotate(360deg); }
}

@keyframes tsInB {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes tsInT {
  from { opacity: 0; transform: translateY(-16px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes tsFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The toaster never runs off a phone screen (16 px from each edge), and the
   fake app's address bar wraps its route buttons on phones. */
.uts-page .kk104 {
  max-width: calc(100vw - 32px);
}

@media (max-width: 560px) {
  .uts-page .kk86 .kk64 { flex-wrap: wrap; row-gap: 8px; }
}

/* -- generated ts: start -- */
.kk1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kk2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kk3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kk4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kk5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kk6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kk7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kk8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kk9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.kk10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.kk11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kk12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kk13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
  transition: background .3s;
}

.kk14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kk15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kk16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kk17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kk18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kk19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.kk20 {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kk21 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 300px;
  justify-content: center;
}

.kk22 {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  border-radius: 16px;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.kk23 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.kk24 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kk25 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.kk26 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
  border-top-color: currentColor;
  box-sizing: border-box;
}

.kk27 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kk28 {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
}

.kk29 {
  margin-left: 6px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  vertical-align: 1px;
}

.kk30 {
  font-size: 12.5px;
  line-height: 1.45;
}

.kk31 {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.kk32 {
  width: 44px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg,#3b6b86,#1d2533);
}

.kk33 {
  width: 44px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg,#a07a46,#1d2533);
}

.kk34 {
  width: 44px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg,#6b8f7a,#1d2533);
}

.kk35 {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.kk36 {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kk37 {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kk38 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  font-weight: 400;
}

.kk39 {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  opacity: .7;
  transition: width .1s linear;
}

.kk40 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.kk41 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
}

.kk42 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.kk43 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: center;
}

.kk44 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.kk45 {
  flex: 1;
}

.kk46 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.kk47 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
}

.kk48 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.kk49 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.kk50 {
  display: flex;
  align-items: center;
}

.kk51 {
  font-size: 15px;
  font-weight: 700;
}

.kk52 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kk53 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.kk54 {
  flex: 1 1 auto;
  height: 30px;
  padding: 0 9px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kk55 {
  position: relative;
  height: 96px;
  border-radius: 12px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 1fr 1fr;
  padding: 6px;
  gap: 6px;
}

.kk56 {
  display: flex;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 5px;
  font-size: 13.3333px;
  font-weight: 400;
}

.kk57 {
  width: 34px;
  height: 10px;
  border-radius: 4px;
}

.kk58 {
  display: flex;
  flex-direction: column;
}

.kk59 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.kk60 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.kk61 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.kk62 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 16px;
  align-items: stretch;
}

.kk63 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.kk64 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kk65 {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
}

.kk66 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kk67 {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}

.kk68 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.kk69 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  flex: 1;
}

.kk70 {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.kk71 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 32px;
  font-size: 12px;
}

.kk72 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: stretch;
}

.kk73 {
  font-size: 14px;
  font-weight: 700;
}

.kk74 {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.kk75 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.kk76 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 34px;
}

.kk77 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
}

.kk78 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.kk79 {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.kk80 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  align-self: flex-start;
}

.kk81 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kk82 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.kk83 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kk84 {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kk85 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  align-self: flex-start;
  margin-top: auto;
}

.kk86 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kk87 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kk88 {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.kk89 {
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
}

.kk90 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: stretch;
}

.kk91 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kk92 {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  flex: 1;
}

.kk93 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kk94 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.kk95 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kk96 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.kk97 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kk98 {
  font-size: 13.5px;
  font-weight: 700;
}

.kk99 {
  font-size: 12.5px;
  font-weight: 800;
  padding-top: 4px;
}

.kk100 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 12px;
}

.kk101 {
  border-radius: 20px;
  padding: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kk102 {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kk103 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kk104 {
  position: fixed;
  z-index: 200;
  display: flex;
}

.kk105 {
  width: 100%;
  display: flex;
  transition: transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;
}

.kk106 {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-a7abb8,#a7abb8);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kk107 {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.kk108 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kk109 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kk110 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kk111 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kk112 {
  font-weight: 900;
}

.kk113 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kkh1:not(:disabled):hover {
  background: rgba(127,127,127,.18);
}

.kkh2:not(:disabled):hover {
  background: rgba(127,127,127,.18);
}

.kkh3:not(:disabled):hover {
  background: rgba(127,127,127,.18);
}
/* -- generated ts: end -- */

/* ==========================================================================
   22zz83. User interface · Tooltips & Popovers: classes generated from the
   handoff by _dev/ui_tooltips_convert.py (km1 …, kmh hover, kmf focus).
   The page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* Tooltips rise in (or fade under reduced motion); the coach mark's ring pulses. */
@keyframes ttIn {
  from { opacity: 0; transform: var(--tt-from, translateY(3px)); }
  to { opacity: 1; }
}

@keyframes ttFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ttRing {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .utt-page * { animation: none !important; transition: none !important; }
}

/* A popover is never wider than the screen allows. */
.utt-page [role="dialog"] {
  max-width: calc(100vw - 32px);
}

/* -- generated tt: start -- */
.km1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.km2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.km3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.km4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.km5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.km6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.km7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.km8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.km9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.km10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.km11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.km12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.km13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
  transition: background .3s;
}

.km14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.km15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.km16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.km17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.km18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.km19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.km20 {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.km21 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  height: 300px;
  overflow: hidden;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w04,rgba(255,255,255,.04)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w04,rgba(255,255,255,.04)) 23px 24px),var(--b-151821,#151821);
}

.km22 {
  position: absolute;
  transform: translate(-50%,-50%);
  display: inline-flex;
}

.km23 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 40px;
  cursor: grab;
  touch-action: none;
}

.km24 {
  position: absolute;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  pointer-events: none;
}

.km25 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.km26 {
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 800;
  align-items: center;
  font-family: ui-monospace,Menlo,monospace;
}

.km27 {
  font-size: 11.5px;
  font-weight: 500;
  opacity: .75;
  white-space: normal;
}

.km28 {
  position: absolute;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
}

.km29 {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.km30 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.km31 {
  flex: 1;
}

.km32 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
}

.km33 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.km34 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.km35 {
  display: flex;
  align-items: center;
}

.km36 {
  font-size: 15px;
  font-weight: 700;
}

.km37 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.km38 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.km39 {
  height: 24px;
  border: none;
  border-radius: 6px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.km40 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.km41 {
  flex: 1 1 auto;
  height: 30px;
  padding: 0 9px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.km42 {
  display: flex;
  flex-direction: column;
}

.km43 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.km44 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.km45 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.km46 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.km47 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.km48 {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
}

.km49 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.km50 {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.05));
  align-self: flex-start;
}

.km51 {
  position: relative;
  display: inline-flex;
}

.km52 {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

.km53 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.km54 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 220px;
  max-width: 100%;
}

.km55 {
  position: relative;
  display: flex;
}

.km56 {
  flex: 1;
  min-width: 0;
  height: 36px;
  line-height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.035));
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}

.km57 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
  padding-top: 44px;
}

.km58 {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.km59 {
  width: 100%;
  border-radius: 7px 7px 3px 3px;
  transition: background .15s;
}

.km60 {
  display: flex;
  gap: 8px;
}

.km61 {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.km62 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid var(--b-1b1f2a,#1b1f2a);
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: default;
  padding: 0;
}

.km63 {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
}

.km64 {
  display: inline-flex;
  border-radius: 999px;
  outline: none;
}

.km65 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.km66 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.km67 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--t-8a8f9e,#8a8f9e);
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 900;
  cursor: help;
  padding: 0;
  line-height: 1;
}

.km68 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.km69 {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.km70 {
  position: fixed;
  inset: 0;
  z-index: 35;
  animation: ttFade .15s ease;
}

.km71 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
}

.km72 {
  position: absolute;
  z-index: 40;
  max-width: calc(100vw - 40px);
  border-radius: 16px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
  color: var(--t-eef0f5,#eef0f5);
  animation: ttIn .16s ease;
}

.km73 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
}

.km74 {
  font-size: 14px;
  font-weight: 800;
  flex: 1;
}

.km75 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.km76 {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.km77 {
  display: flex;
  gap: 6px;
}

.km78 {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-9adbe6,#9adbe6);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  outline: none;
}

.km79 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 36px;
  font-size: 12px;
}

.km80 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.km81 {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.km82 {
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--b-1b1f2a,#1b1f2a);
  transform: rotate(45deg);
}

.km83 {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  display: inline;
}

.km84 {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}

.km85 {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  border-radius: 16px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
  color: var(--t-eef0f5,#eef0f5);
  animation: ttIn .16s ease;
  padding: 12px;
}

.km86 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.km87 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.km88 {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.km89 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
}

.km90 {
  font-size: 14px;
  font-weight: 800;
}

.km91 {
  font-size: 12px;
  color: var(--t-a7abb8,#a7abb8);
}

.km92 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 32px;
  flex: 1;
  font-size: 12px;
}

.km93 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  flex: 1;
  font-size: 12px;
}

.km94 {
  height: 150px;
}

.km95 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px dashed var(--w14,rgba(255,255,255,.25));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}

.km96 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.km97 {
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  outline: none;
}

.km98 {
  font-size: 11.5px;
  font-weight: 700;
}

.km99 {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.km100 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  font-size: 12px;
}

.km101 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 32px;
  font-size: 12px;
}

.km102 {
  font-size: 13.5px;
  font-weight: 800;
  flex: 1;
}

.km103 {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: center;
}

.km104 {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 3px;
}

.km105 {
  height: 30px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
}

.km106 {
  height: 270px;
}

.km107 {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.km108 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.km109 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
}

.km110 {
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
}

.km111 {
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
}

.km112 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.km113 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  padding-bottom: 4px;
}

.km114 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.km115 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.km116 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.km117 {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  margin-top: 4px;
}

.km118 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 32px;
  font-size: 12px;
  flex: 1;
}

.km119 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.km120 {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.05));
  align-self: flex-start;
}

.km121 {
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  box-shadow: 0 0 0 2px var(--t-9adbe6,#9adbe6);
  animation: ttRing 1.4s ease-out infinite;
  pointer-events: none;
}

.km122 {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: default;
}

.km123 {
  position: absolute;
  z-index: 40;
  top: calc(100% + 12px);
  width: 240px;
  border-radius: 16px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: ttIn .2s ease;
}

.km124 {
  position: absolute;
  top: -5px;
  width: 11px;
  height: 11px;
  background: var(--b-f2f3f6,#f2f3f6);
  transform: rotate(45deg);
}

.km125 {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .14em;
  opacity: .6;
}

.km126 {
  font-size: 12.5px;
  line-height: 1.45;
  opacity: .75;
}

.km127 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

.km128 {
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  opacity: .6;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.km129 {
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(127,127,127,.35);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.km130 {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: var(--pillink,#11131a);
  color: var(--b-f2f3f6,#f2f3f6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.km131 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  font-size: 12px;
  align-self: flex-start;
}

.km132 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: stretch;
}

.km133 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.km134 {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  flex: 1;
}

.km135 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.km136 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.km137 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.km138 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.km139 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.km140 {
  font-size: 13.5px;
  font-weight: 700;
}

.km141 {
  font-size: 12.5px;
  font-weight: 800;
  padding-top: 4px;
}

.km142 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 12px;
}

.km143 {
  border-radius: 20px;
  padding: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.km144 {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.km145 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.km146 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.km147 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.km148 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.km149 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.km150 {
  font-weight: 900;
}

.km151 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kmh1:not(:disabled):hover {
  background: rgba(127,127,127,.1);
}

.kmf1:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.kmf2:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.kmf3:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.kmf4:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.kmf5:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.kmf6:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.kmf7:focus {
  border-color: rgba(154,219,230,.7);
}

.kmf8:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.kmf9:focus {
  border-color: rgba(154,219,230,.7);
}

.kmf10:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.kmf11:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.kmf12:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.kmf13:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.kmf14:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}
/* -- generated tt: end -- */

/* ==========================================================================
   22zz84. User interface · Typography: classes generated from the handoff by
   _dev/ui_typography_convert.py (kf1 …, kfh hover, kff focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* Phones and narrow tablets: the long-text sample sits above its controls
   instead of being squeezed beside a 240 px column. */
@media (max-width: 700px) {
  .uty-page .kf101 { grid-template-columns: minmax(0, 1fr); }
}

/* -- generated ty: start -- */
.kf1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.kf2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.kf3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.kf4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.kf5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.kf6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kf7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kf8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kf9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.kf10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.kf11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.kf12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kf13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
  transition: background .3s;
}

.kf14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kf15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.kf16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.kf17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.kf18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kf19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 16px;
  align-items: stretch;
}

.kf20 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.kf21 {
  position: absolute;
  right: -10px;
  top: -40px;
  font-size: 240px;
  letter-spacing: -.06em;
  line-height: 1;
  color: var(--w07,rgba(255,255,255,.08));
  pointer-events: none;
}

.kf22 {
  font-size: 56px;
  letter-spacing: -.03em;
  line-height: 1;
}

.kf23 {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
  max-width: 420px;
}

.kf24 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kf25 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 64px;
  padding: 8px 0;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kf26 {
  font-size: 22px;
  line-height: 1;
}

.kf27 {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kf28 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.kf29 {
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 15px;
  outline: none;
}

.kf30 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kf31 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.kf32 {
  width: 28px;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.kf33 {
  font-size: 22px;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.kf34 {
  font-size: 26px;
  line-height: 1.4;
  letter-spacing: .02em;
  word-break: break-all;
}

.kf35 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kf36 {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.kf37 {
  width: 70px;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kf38 {
  font-size: 17px;
  font-weight: 700;
}

.kf39 {
  font-size: 16px;
  font-weight: 700;
  font-family: ui-monospace,Menlo,monospace;
}

.kf40 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  line-height: 1.5;
}

.kf41 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
}

.kf42 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  overflow: hidden;
}

.kf43 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
  flex-wrap: wrap;
}

.kf44 {
  flex: 1;
  min-width: 160px;
  accent-color: #9adbe6;
}

.kf45 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  font-weight: 800;
  width: 70px;
}

.kf46 {
  display: grid;
  gap: 8px 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.kf47 {
  order: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}

.kf48 {
  font-size: 12.5px;
  font-weight: 800;
}

.kf49 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.kf50 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kf51 {
  order: 3;
  grid-column: 1/-1;
  min-width: 0;
  overflow-wrap: anywhere;
  transition: font-size .2s;
}

.kf52 {
  order: 2;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 28px;
  font-size: 11px;
}

.kf53 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 18px;
}

.kf54 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kf55 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  flex: 1;
}

.kf56 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.kf57 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
  border-radius: 4px;
  position: relative;
  align-self: flex-start;
}

.kf58 {
  position: absolute;
  right: 0;
  top: -9px;
  height: 17px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--t-9adbe6,#9adbe6);
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  align-items: center;
  font-family: ui-monospace,Menlo,monospace;
}

.kf59 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  border-radius: 4px;
  position: relative;
}

.kf60 {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  max-width: 640px;
  text-wrap: pretty;
  border-radius: 4px;
  position: relative;
}

.kf61 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap: 16px;
}

.kf62 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  border-radius: 4px;
  position: relative;
}

.kf63 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: 4px;
  position: relative;
}

.kf64 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t-9adbe6,#9adbe6);
  flex-shrink: 0;
  transform: translateY(-2px);
}

.kf65 {
  flex: 1;
}

.kf66 {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--t-9adbe6,#9adbe6);
  background: var(--w03,rgba(255,255,255,.03));
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 4px;
  position: relative;
}

.kf67 {
  font-size: 17px;
  line-height: 1.45;
  font-weight: 600;
  font-style: italic;
}

.kf68 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kf69 {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  position: relative;
}

.kf70 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr) auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13px;
  align-items: baseline;
}

.kf71 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  font-weight: 700;
}

.kf72 {
  color: var(--t-a7abb8,#a7abb8);
}

.kf73 {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.kf74 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  border-radius: 4px;
  position: relative;
  align-self: flex-start;
}

.kf75 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.kf76 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kf77 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.kf78 {
  flex: 1 1 auto;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.kf79 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.kf80 {
  border-top: 1.5px solid var(--t-eef0f5,#eef0f5);
  padding-top: 4px;
  margin-top: 2px;
  font-weight: 900;
}

.kf81 {
  font-size: 12px;
  color: var(--t-a7abb8,#a7abb8);
}

.kf82 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
}

.kf83 {
  width: 84px;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kf84 {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kf85 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.kf86 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

.kf87 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .9;
}

.kf88 {
  font-size: 22px;
  color: var(--t-a7abb8,#a7abb8);
}

.kf89 {
  font-size: 22px;
  color: oklch(0.8 0.13 70);
}

.kf90 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kf91 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.kf92 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 16px;
}

.kf93 {
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kf94 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
}

.kf95 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.kf96 {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.kf97 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kf98 {
  font-size: 15px;
  font-weight: 700;
}

.kf99 {
  font-size: 11px;
  font-family: ui-monospace,Menlo,monospace;
}

.kf100 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  font-family: ui-monospace,Menlo,monospace;
  white-space: nowrap;
}

.kf101 {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(240px,300px);
  gap: 16px;
  align-items: start;
}

.kf102 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.kf103 {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--t-a7abb8,#a7abb8);
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.kf104 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--w10,rgba(255,255,255,.14));
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.kf105 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kf106 {
  accent-color: #9adbe6;
}

.kf107 {
  font-size: 12px;
  line-height: 1.5;
  color: var(--t-8a8f9e,#8a8f9e);
}

.kf108 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.kf109 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kf110 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.kf111 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.kf112 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.kf113 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kf114 {
  font-size: 13.5px;
  font-weight: 700;
}

.kf115 {
  font-size: 12.5px;
  font-weight: 800;
  padding-top: 4px;
}

.kf116 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kf117 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.kf118 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.kf119 {
  font-weight: 900;
}

.kf120 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kff1:focus {
  border-color: rgba(154,219,230,.7);
}
/* -- generated ty: end -- */

/* ==========================================================================
   22zz85. Extended UI · Avatar: classes generated from the handoff by
   _dev/ext_avatar_convert.py (ke1 …, keh hover, kef focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* The three typing dots breathe in turn. */
@keyframes avDot {
  0%, 80%, 100% { transform: scale(.6); opacity: .45; }
  40% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .uav-page [class] { animation: none !important; transition: none !important; }
}

/* Phones: a stack of eight (40 + 7 × 30 px, +N and the add button) is wider
   than the card, so the row scrolls sideways instead of pushing the page. */
@media (max-width: 480px) {
  .uav-page .ke47 { overflow-x: auto; padding: 6px 4px; }
}

/* -- generated av: start -- */
.ke1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ke2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.ke3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.ke4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ke5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ke6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ke7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ke8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ke9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.ke10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ke11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.ke12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ke13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
}

.ke14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ke15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.ke16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ke17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.ke18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ke19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.ke20 {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ke21 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}

.ke22 {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  transition: margin .25s ease;
}

.ke23 {
  position: absolute;
}

.ke24 {
  position: relative;
  width: 100%;
  height: 100%;
  font-weight: 900;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ke25 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ke26 {
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
}

.ke27 {
  position: absolute;
  right: -4px;
  top: -4px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  color: #11131a;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
}

.ke28 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ke29 {
  font-size: 17px;
  font-weight: 800;
}

.ke30 {
  font-size: 12.5px;
  font-weight: 700;
}

.ke31 {
  height: 38px;
  width: 220px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  text-align: center;
  outline: none;
}

.ke32 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ke33 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.ke34 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ke35 {
  font-size: 15px;
  font-weight: 700;
}

.ke36 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.ke37 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ke38 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ke39 {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding: 8px 0;
}

.ke40 {
  width: 70px;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ke41 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ke42 {
  font-size: 10.5px;
  font-family: ui-monospace,Menlo,monospace;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ke43 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ke44 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
}

.ke45 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ke46 {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
}

.ke47 {
  display: flex;
  align-items: center;
  padding: 6px 0;
}

.ke48 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 0 0 2px var(--b-1b1f2a,#1b1f2a);
  font-size: 12px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  transition: margin .25s;
}

.ke49 {
  margin-left: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.3));
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.ke50 {
  font-size: 13px;
  font-weight: 800;
}

.ke51 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(120px,100%),1fr));
  gap: 8px;
}

.ke52 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.035));
}

.ke53 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ke54 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.ke55 {
  font-size: 13px;
  font-weight: 800;
  padding-bottom: 6px;
}

.ke56 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ke57 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ke58 {
  font-size: 13px;
  font-weight: 700;
}

.ke59 {
  font-size: 11.5px;
  font-weight: 700;
}

.ke60 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ke61 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 4px 0 3px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 12.5px;
  font-weight: 700;
}

.ke62 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  font-weight: 400;
}

.ke63 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ke64 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 6px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.ke65 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ke66 {
  display: flex;
  gap: 10px;
}

.ke67 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ke68 {
  font-size: 12.5px;
}

.ke69 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.ke70 {
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-a7abb8,#a7abb8);
}

.ke71 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ke72 {
  display: flex;
  gap: 4px;
  height: 30px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--w05,rgba(255,255,255,.07));
  align-items: center;
}

.ke73 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t-a7abb8,#a7abb8);
  animation: avDot 1.2s 0s ease-in-out infinite;
}

.ke74 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t-a7abb8,#a7abb8);
  animation: avDot 1.2s 0.16s ease-in-out infinite;
}

.ke75 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t-a7abb8,#a7abb8);
  animation: avDot 1.2s 0.32s ease-in-out infinite;
}

.ke76 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
}

.ke77 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  align-items: center;
  text-align: center;
}

.ke78 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ke79 {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  font-size: 13.3333px;
  font-weight: 400;
}

.ke80 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.ke81 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ke82 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.ke83 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.ke84 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.ke85 {
  font-size: 13.5px;
  font-weight: 700;
}

.ke86 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ke87 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ke88 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ke89 {
  font-weight: 900;
}

.ke90 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.keh1:not(:disabled):hover {
  background: rgba(127,127,127,.1);
}

.kef1:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 3px;
}
/* -- generated av: end -- */

/* ==========================================================================
   22zz86. Extended UI · BlockUI: classes generated from the handoff by
   _dev/ext_blockui_convert.py (ja1 …, jah hover, jaf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes buSpin { to { transform: rotate(360deg); } }
@keyframes buFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes buPop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
@keyframes buPulse { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1); } }

/* Compact density: tighter stage and cards. */
.ubu-page [data-dense="compact"] { gap: 22px; }
.ubu-page [data-dense="compact"] .bu-card { padding: 12px; border-radius: 18px; }

/* -- generated bu: start -- */
.ja1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ja2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.ja3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.ja4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ja5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ja6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ja7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ja8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ja9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.ja10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ja11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.ja12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ja13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
  transition: background .3s;
}

.ja14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ja15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.ja16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ja17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.ja18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ja19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.ja20 {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ja21 {
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  padding: 14px;
}

.ja22 {
  display: grid;
  gap: 12px;
}

.ja23 {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ja24 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ja25 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ja26 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.ja27 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ja28 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ja29 {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.ja30 {
  display: grid;
  grid-template-columns: minmax(0,94px) minmax(0,1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 0 4px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.ja31 {
  font-family: ui-monospace,Menlo,monospace;
  font-weight: 700;
}

.ja32 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.ja33 {
  text-align: right;
  font-weight: 800;
}

.ja34 {
  justify-self: end;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.ja35 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.ja36 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ja37 {
  position: relative;
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
}

.ja38 {
  display: inline-flex;
}

.ja39 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  min-width: 130px;
}

.ja40 {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: buFade .18s ease;
}

.ja41 {
  display: flex;
  align-items: center;
  border-radius: 16px;
  max-width: min(320px,90%);
  text-align: center;
  cursor: default;
  animation: buPop .2s ease;
}

.ja42 {
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.ja43 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: buPop .3s ease;
}

.ja44 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ja45 {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.ja46 {
  font-size: 12px;
  line-height: 1.4;
  opacity: .72;
}

.ja47 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 200px;
  max-width: 100%;
}

.ja48 {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
}

.ja49 {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .15s linear;
}

.ja50 {
  font-size: 12px;
  font-weight: 800;
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ja51 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.ja52 {
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ja53 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ja54 {
  font-size: 26px;
  font-weight: 800;
}

.ja55 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ja56 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
}

.ja57 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ja58 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.ja59 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ja60 {
  flex: 1;
}

.ja61 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
}

.ja62 {
  position: relative;
  height: 26px;
  border-radius: 9px;
  background: var(--w04,rgba(255,255,255,.05));
  overflow: hidden;
}

.ja63 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: color-mix(in oklab, var(--t-a7abb8,#a7abb8) 22%, transparent);
}

.ja64 {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: 5px;
  background: var(--t-9adbe6,#9adbe6);
}

.ja65 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
}

.ja66 {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--t-eef0f5,#eef0f5);
}

.ja67 {
  font-size: 12px;
  font-weight: 700;
}

.ja68 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ja69 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.ja70 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
}

.ja71 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.ja72 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ja73 {
  display: flex;
  align-items: center;
}

.ja74 {
  font-size: 15px;
  font-weight: 700;
}

.ja75 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ja76 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ja77 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  width: 64px;
}

.ja78 {
  flex: 1;
  accent-color: #9adbe6;
}

.ja79 {
  display: flex;
  flex-direction: column;
}

.ja80 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.ja81 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.ja82 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.ja83 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: stretch;
}

.ja84 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  position: relative;
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ja85 {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
}

.ja86 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ja87 {
  position: relative;
  border-radius: 16px;
}

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

.ja89 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  font-weight: 800;
  width: 140px;
}

.ja90 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(17,19,26,.2);
  border-top-color: #11131a;
  box-sizing: border-box;
}

.ja91 {
  position: relative;
  border-radius: 16px;
  padding: 12px;
  background: var(--w03,rgba(255,255,255,.03));
}

.ja92 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.ja93 {
  font-size: 12.5px;
  font-weight: 700;
}

.ja94 {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 44px;
}

.ja95 {
  flex: 1;
  border-radius: 4px;
  background: var(--w14,rgba(255,255,255,.2));
  transition: height .4s;
}

.ja96 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  height: 32px;
  font-size: 12px;
}

.ja97 {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.ja98 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 10px;
  background: var(--w03,rgba(255,255,255,.035));
}

.ja99 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ja100 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ja101 {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ja102 {
  font-size: 11.5px;
}

.ja103 {
  position: relative;
  border-radius: 16px;
  min-height: 150px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.22));
  display: flex;
  align-items: center;
  justify-content: center;
}

.ja104 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
}

.ja105 {
  font-size: 22px;
}

.ja106 {
  font-size: 13.5px;
  font-weight: 700;
}

.ja107 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 32px;
  font-size: 12px;
}

.ja108 {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.ja109 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  align-self: flex-start;
  margin-top: auto;
}

.ja110 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  font-weight: 700;
}

.ja111 {
  font-size: 22px;
  font-weight: 800;
}

.ja112 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.ja113 {
  position: relative;
  border-radius: 16px;
  min-height: 120px;
  padding: 12px;
  background: var(--w03,rgba(255,255,255,.03));
}

.ja114 {
  font-size: 16px;
  font-weight: 700;
}

.ja115 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ja116 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  font-size: 12px;
}

.ja117 {
  font-size: 14px;
  font-weight: 700;
}

.ja118 {
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 32px;
  font-size: 12px;
  align-self: flex-start;
}

.ja119 {
  position: relative;
  border-radius: 16px;
  min-height: 170px;
  padding: 12px;
  background: var(--w03,rgba(255,255,255,.03));
}

.ja120 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
  align-self: flex-start;
}

.ja121 {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 12px;
  z-index: 6;
  width: min(260px,90%);
  padding: 12px;
  border-radius: 14px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  box-shadow: 0 16px 36px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: buPop .2s ease;
}

.ja122 {
  font-size: 13px;
  font-weight: 800;
}

.ja123 {
  display: flex;
  gap: 6px;
}

.ja124 {
  flex: 1;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: var(--pillink,#11131a);
  color: var(--b-f2f3f6,#f2f3f6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ja125 {
  flex: 1;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(127,127,127,.35);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ja126 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  font-size: 12px;
  align-self: flex-start;
}

.ja127 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: stretch;
}

.ja128 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ja129 {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  flex: 1;
}

.ja130 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ja131 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.ja132 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.ja133 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.ja134 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ja135 {
  font-size: 12.5px;
  font-weight: 800;
  padding-top: 4px;
}

.ja136 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 12px;
}

.ja137 {
  border-radius: 20px;
  padding: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ja138 {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ja139 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ja140 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.ja141 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ja142 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ja143 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ja144 {
  font-weight: 900;
}

.ja145 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jaf1:focus {
  border-color: rgba(154,219,230,.7);
}
/* -- generated bu: end -- */

/* ==========================================================================
   22zz87. Extended UI · Drag & Drop: classes generated from the handoff by
   _dev/ext_drag_drop_convert.py (jb1 …, jbh hover, jbf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes dndIn { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: none; } }
@keyframes dndSpin { to { transform: rotate(360deg); } }

/* Phones: five day columns of 20 px clip the times, so the calendar keeps
   readable columns and scrolls sideways. */
@media (max-width: 480px) {
  .udd-page .jb98 { grid-template-columns: 36px repeat(5, minmax(72px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
}

/* Patterns: the wide card takes its own row and the cards under it share the
   full width (a grid kept an empty sixth track beside the five cards). */
.udd-page .jb54 {
  display: flex;
  flex-wrap: wrap;
}

.udd-page .jb54 > * {
  flex: 1 1 290px;
  min-width: 0;
}

.udd-page .jb54 > .jb55 { flex-basis: 100%; }

/* While something is dragged, text is not selected anywhere on the page. */
.is-dragging, .is-dragging * { user-select: none; }

/* -- generated dnd: start -- */
.jb1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jb2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jb3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jb4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jb5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jb6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jb7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jb8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jb9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.jb10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jb11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jb12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jb13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
  transition: background .3s;
}

.jb14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jb15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jb16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jb17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jb18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jb19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.jb20 {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jb21 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jb22 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jb23 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.jb24 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jb25 {
  height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  margin: -4px;
}

.jb26 {
  border-radius: 14px;
  border: 1.5px dashed var(--t-9adbe6,#9adbe6);
  background: color-mix(in oklab, #9adbe6 8%, transparent);
  box-sizing: border-box;
  animation: dndIn .15s ease;
}

.jb27 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 6px;
  border-radius: 14px;
  box-sizing: border-box;
  user-select: none;
  outline: none;
  transition: background .15s,border-color .15s,opacity .15s;
}

.jb28 {
  position: absolute;
  left: 8px;
  right: 8px;
  top: -5px;
  height: 3px;
  border-radius: 2px;
  background: var(--t-9adbe6,#9adbe6);
}

.jb29 {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -5px;
  height: 3px;
  border-radius: 2px;
  background: var(--t-9adbe6,#9adbe6);
}

.jb30 {
  width: 28px;
  height: 36px;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
}

.jb31 {
  width: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.jb32 {
  width: 4px;
  height: 26px;
  border-radius: 2px;
  flex-shrink: 0;
}

.jb33 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.jb34 {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jb35 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jb36 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  align-items: center;
}

.jb37 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jb38 {
  font-size: 12.5px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
}

.jb39 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.jb40 {
  flex: 1;
}

.jb41 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.jb42 {
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
}

.jb43 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.jb44 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jb45 {
  display: flex;
  align-items: center;
}

.jb46 {
  font-size: 15px;
  font-weight: 700;
}

.jb47 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jb48 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jb49 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jb50 {
  display: flex;
  flex-direction: column;
}

.jb51 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.jb52 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.jb53 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jb54 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 16px;
  align-items: stretch;
}

.jb55 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  grid-column: 1/-1;
}

.jb56 {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
}

.jb57 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jb58 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap: 10px;
}

.jb59 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 220px;
  padding: 10px;
  border-radius: 16px;
  transition: background .15s,border-color .15s;
}

.jb60 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px 4px;
}

.jb61 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.jb62 {
  font-size: 12.5px;
  font-weight: 800;
  flex: 1;
}

.jb63 {
  font-size: 11.5px;
  font-weight: 800;
}

.jb64 {
  height: 62px;
  border-radius: 14px;
  border: 1.5px dashed var(--t-9adbe6,#9adbe6);
  background: color-mix(in oklab, #9adbe6 8%, transparent);
  box-sizing: border-box;
  animation: dndIn .15s ease;
}

.jb65 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.jb66 {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.jb67 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jb68 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #11131a;
  font-size: 8px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jb69 {
  margin-top: auto;
  font-size: 11px;
  font-weight: 800;
}

.jb70 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.jb71 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 6px;
}

.jb72 {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1.5px dashed var(--t-9adbe6,#9adbe6);
  background: color-mix(in oklab, #9adbe6 8%, transparent);
}

.jb73 {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  display: flex;
  align-items: flex-end;
  padding: 6px;
  box-sizing: border-box;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.jb74 {
  position: absolute;
  left: 6px;
  top: 6px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #9adbe6;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  align-items: center;
  text-shadow: none;
}

.jb75 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jb76 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 14px;
  transition: all .15s;
}

.jb77 {
  font-size: 22px;
}

.jb78 {
  font-size: 12px;
  font-weight: 800;
}

.jb79 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jb80 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jb81 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.jb82 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.jb83 {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jb84 {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jb85 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jb86 {
  padding: 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jb87 {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.jb88 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 140px;
  border-radius: 18px;
  text-align: center;
  padding: 14px;
  cursor: pointer;
  transition: all .15s;
}

.jb89 {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.jb90 {
  font-size: 26px;
}

.jb91 {
  font-size: 14px;
  font-weight: 800;
}

.jb92 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.035));
}

.jb93 {
  font-size: 11px;
  font-weight: 700;
}

.jb94 {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jb95 {
  height: 4px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.jb96 {
  display: block;
  height: 100%;
  transition: width .2s;
}

.jb97 {
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
  align-self: flex-start;
}

.jb98 {
  display: grid;
  grid-template-columns: 36px repeat(5,minmax(0,1fr));
  gap: 0 4px;
}

.jb99 {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  padding-bottom: 6px;
}

.jb100 {
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
  transform: translateY(-6px);
}

.jb101 {
  position: relative;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.03));
  overflow: hidden;
}

.jb102 {
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  box-sizing: border-box;
}

.jb103 {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 8px;
  padding: 4px 6px;
  box-sizing: border-box;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.jb104 {
  display: block;
  font-weight: 600;
  opacity: .75;
}

.jb105 {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 8px;
  box-sizing: border-box;
  pointer-events: none;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 800;
}

.jb106 {
  font-size: 12px;
  font-weight: 700;
}

.jb107 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jb108 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding-right: 8px;
  border-radius: 10px;
  box-sizing: border-box;
}

.jb109 {
  position: absolute;
  right: 6px;
  top: -3px;
  height: 3px;
  border-radius: 2px;
  background: var(--t-9adbe6,#9adbe6);
}

.jb110 {
  position: absolute;
  right: 6px;
  bottom: -3px;
  height: 3px;
  border-radius: 2px;
  background: var(--t-9adbe6,#9adbe6);
}

.jb111 {
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: grab;
  touch-action: none;
}

.jb112 {
  font-size: 14px;
}

.jb113 {
  font-size: 13px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jb114 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: stretch;
}

.jb115 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 40px;
}

.jb116 {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 12.5px;
  font-weight: 700;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.jb117 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.jb118 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.jb119 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
  padding: 10px;
  border-radius: 16px;
  transition: all .15s;
}

.jb120 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
}

.jb121 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.jb122 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.1));
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.jb123 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.jb124 {
  height: 44px;
  border-radius: 14px;
  border: 1.5px dashed var(--t-9adbe6,#9adbe6);
  background: color-mix(in oklab, #9adbe6 8%, transparent);
  box-sizing: border-box;
  animation: dndIn .15s ease;
}

.jb125 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 10px 0 4px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.035));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  box-sizing: border-box;
}

.jb126 {
  width: 26px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: grab;
  touch-action: none;
}

.jb127 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  width: 16px;
}

.jb128 {
  font-size: 13px;
  font-weight: 700;
}

.jb129 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.jb130 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--w14,rgba(255,255,255,.2));
  border-top-color: var(--t-9adbe6,#9adbe6);
  animation: dndSpin .8s linear infinite;
  box-sizing: border-box;
}

.jb131 {
  font-size: 12.5px;
  font-weight: 700;
  flex: 1;
}

.jb132 {
  padding: 0 13px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 30px;
  font-size: 12px;
}

.jb133 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px 0 12px;
  border-radius: 12px;
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  transition: background .3s;
}

.jb134 {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jb135 {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jb136 {
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--b-1b1f2a,#1b1f2a);
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  padding: 0 6px;
}

.jb137 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: stretch;
}

.jb138 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jb139 {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  flex: 1;
}

.jb140 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jb141 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.jb142 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jb143 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.jb144 {
  font-size: 13.5px;
  font-weight: 700;
}

.jb145 {
  font-size: 12.5px;
  font-weight: 800;
  padding-top: 4px;
}

.jb146 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 12px;
}

.jb147 {
  border-radius: 20px;
  padding: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jb148 {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jb149 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jb150 {
  position: fixed;
  z-index: 600;
  pointer-events: none;
  border-radius: 14px;
  box-shadow: 0 22px 46px rgba(0,0,0,.45);
  padding: 8px 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--t-eef0f5,#eef0f5);
}

.jb151 {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
}

.jb152 {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jb153 {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .7;
}

.jb154 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
}

.jb155 {
  position: absolute;
  right: -8px;
  top: -8px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #9adbe6;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--b-151821,#151821);
}

.jb156 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jb157 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jb158 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jb159 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jb160 {
  font-weight: 900;
}

.jb161 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jb162 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.jbh1:not(:disabled):hover {
  background: rgba(127,127,127,.14);
}

.jbf1:focus {
  box-shadow: 0 0 0 2px var(--t-9adbe6,#9adbe6);
}
/* -- generated dnd: end -- */

/* ==========================================================================
   22zz88. Extended UI · Media Player: classes generated from the handoff by
   _dev/ext_media_player_convert.py (jc1 …, jch hover, jcf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes mpSpin { to { transform: rotate(360deg); } }
@keyframes mpPop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes mpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpLive { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes mpDisc { to { transform: rotate(360deg); } }

/* Phones: the full control bar (≈ 460 px) is wider than the player, so it
   keeps play, mute, time, captions, settings and full screen. Volume stays
   on ↑ ↓ and Mute, ±10 s on J / L and the seek bar, speed in ⚙. */
@media (max-width: 560px) {
  .ump-page [data-mp] input[type="range"],
  .ump-page [data-mp] [aria-label="Back 10 seconds"],
  .ump-page [data-mp] [aria-label="Forward 10 seconds"],
  .ump-page [data-mp] [aria-label="Playback speed"],
  .ump-page [data-mp] [aria-label="Picture in picture"] { display: none; }
}

/* The narrowest players (review in its card at 320 px) also leave Mute to M. */
@media (max-width: 360px) {
  .ump-page [data-mp] [aria-label="Mute"],
  .ump-page [data-mp] [aria-label="Unmute"] { display: none; }
}

/* An empty poster says the poster's real size */
.mp-size {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(255, 255, 255, .8);
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* -- generated mp: start -- */
.jc1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jc2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jc3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jc4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jc5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jc6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jc7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jc8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jc9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.jc10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jc11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jc12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jc13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
  transition: background .3s;
}

.jc14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jc15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jc16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jc17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jc18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jc19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.jc20 {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jc21 {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  outline: none;
  color: #fff;
  user-select: none;
}

.jc22 {
  position: absolute;
  left: 0;
  right: 0;
  transition: background .8s ease;
  cursor: pointer;
  overflow: hidden;
}

.jc23 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.jc24 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jc25 {
  position: absolute;
  inset: 0;
  background: rgba(127,127,127,.08);
}

.jc26 {
  position: absolute;
  left: 12px;
  top: 32px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  font-size: 10.5px;
  font-weight: 800;
  align-items: center;
  pointer-events: none;
  white-space: nowrap;
}

.jc27 {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .16em;
  opacity: .8;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.jc28 {
  position: absolute;
  right: 12px;
  top: 10px;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: rgba(0,0,0,.45);
  font-size: 10.5px;
  font-weight: 900;
  align-items: center;
  pointer-events: none;
}

.jc29 {
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  pointer-events: none;
  animation: mpPop .2s ease;
}

.jc30 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

.jc31 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  animation: mpSpin .8s linear infinite;
  box-sizing: border-box;
}

.jc32 {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%,-50%);
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  pointer-events: none;
  animation: mpPop .2s ease;
}

.jc33 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,.72);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

.jc34 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 10px 8px;
  background: linear-gradient(180deg,transparent,rgba(0,0,0,.75));
  transition: opacity .25s;
}

.jc35 {
  position: relative;
  height: 18px;
  cursor: pointer;
  touch-action: none;
  margin: 0 4px;
}

.jc36 {
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}

.jc37 {
  position: absolute;
  left: 0;
  top: 7px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
}

.jc38 {
  position: absolute;
  top: 5px;
  height: 8px;
  border-radius: 3px;
  background: rgba(201,169,106,.55);
}

.jc39 {
  position: absolute;
  left: 0;
  top: 7px;
  height: 4px;
  border-radius: 999px;
  background: #9adbe6;
}

.jc40 {
  position: absolute;
  top: 5px;
  width: 2px;
  height: 8px;
  background: rgba(255,255,255,.8);
  pointer-events: none;
}

.jc41 {
  position: absolute;
  top: -2px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50% 50% 50% 2px;
  border: 2px solid #000;
  box-sizing: border-box;
  transform: rotate(-45deg);
}

.jc42 {
  position: absolute;
  top: 3px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.jc43 {
  position: absolute;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

.jc44 {
  width: 112px;
  height: 63px;
  border-radius: 7px;
  border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
  display: flex;
  align-items: flex-end;
  padding: 4px;
  box-sizing: border-box;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .1em;
}

.jc45 {
  height: 20px;
  padding: 0 6px;
  border-radius: 5px;
  background: rgba(0,0,0,.8);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.jc46 {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
}

.jc47 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}

.jc48 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jc49 {
  width: 70px;
  accent-color: #9adbe6;
}

.jc50 {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0 8px;
  white-space: nowrap;
}

.jc51 {
  flex: 1;
}

.jc52 {
  height: 34px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  padding: 0 8px;
  font-size: 12px;
}

.jc53 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
}

.jc54 {
  height: 18px;
  padding: 0 4px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
}

.jc55 {
  position: relative;
  display: inline-flex;
}

.jc56 {
  position: absolute;
  right: 0;
  bottom: 42px;
  width: 210px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(20,22,30,.94);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
  animation: mpPop .15s ease;
}

.jc57 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  opacity: .6;
  padding: 2px 4px;
}

.jc58 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 3px;
}

.jc59 {
  height: 26px;
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.jc60 {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 3px;
}

.jc61 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3px;
}

.jc62 {
  height: 26px;
  border: none;
  border-radius: 7px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.jc63 {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  animation: mpFade .15s;
}

.jc64 {
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px 16px;
  font-size: 12.5px;
}

.jc65 {
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: rgba(255,255,255,.14);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-self: end;
}

.jc66 {
  display: flex;
  align-items: center;
}

.jc67 {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 4;
  animation: mpFade .2s;
}

.jc68 {
  font-size: 15px;
  font-weight: 800;
}

.jc69 {
  display: flex;
  gap: 8px;
}

.jc70 {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.jc71 {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: #11131a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.jc72 {
  position: absolute;
  inset: 0;
  background: #0b0c11;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 4;
  text-align: center;
  padding: 14px;
}

.jc73 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,155,122,.2);
  color: #ff9b7a;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jc74 {
  font-size: 14px;
  font-weight: 800;
}

.jc75 {
  font-size: 12px;
  opacity: .7;
}

.jc76 {
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.jc77 {
  position: relative;
  height: 340px;
  border-radius: 20px;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
  overflow: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jc78 {
  font-size: 15px;
  font-weight: 700;
}

.jc79 {
  height: 40px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jc80 {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 260px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  border-radius: 14px;
  animation: mpPop .25s ease;
}

.jc81 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.jc82 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jc83 {
  color: var(--t-eef0f5,#eef0f5);
}

.jc84 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 14%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.jc85 {
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-size: 12px;
}

.jc86 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.jc87 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jc88 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jc89 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jc90 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jc91 {
  display: flex;
  flex-direction: column;
}

.jc92 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.jc93 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.jc94 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jc95 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 16px;
  align-items: start;
}

.jc96 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.jc97 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jc98 {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
}

.jc99 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jc100 {
  display: flex;
  gap: 6px;
}

.jc101 {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.jc102 {
  padding: 0 13px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 38px;
}

.jc103 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.jc104 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
}

.jc105 {
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: none;
  color: #11131a;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  flex-shrink: 0;
}

.jc106 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jc107 {
  font-size: 12px;
}

.jc108 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.jc109 {
  font-size: 13px;
  line-height: 1.4;
}

.jc110 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  flex-shrink: 0;
}

.jc111 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jc112 {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.jc113 {
  flex: 1;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jc114 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.jc115 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
}

.jc116 {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.jc117 {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 30% 40%,#3b6b86,transparent 60%),radial-gradient(60% 80% at 80% 70%,#a07a46,transparent 60%),#1d2533;
}

.jc118 {
  position: absolute;
  right: 12px;
  top: 10px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
}

.jc119 {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 30% 40%,#5a6b5a,transparent 60%),radial-gradient(60% 80% at 80% 70%,#b0844a,transparent 60%),#2a2620;
  filter: saturate(1.1);
}

.jc120 {
  position: absolute;
  left: 12px;
  top: 10px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
}

.jc121 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,.6);
}

.jc122 {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: #fff;
  color: #11131a;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}

.jc123 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: stretch;
}

.jc124 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jc125 {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg,#a07a46,#3b6b86);
  flex-shrink: 0;
}

.jc126 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.jc127 {
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jc128 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jc129 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  font-weight: 400;
}

.jc130 {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 54px;
  cursor: pointer;
  touch-action: none;
  flex: 1;
  min-width: 0;
}

.jc131 {
  flex: 1;
  border-radius: 2px;
  transition: background .1s;
}

.jc132 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: ui-monospace,Menlo,monospace;
}

.jc133 {
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 34px;
  padding: 0;
}

.jc134 {
  width: 90px;
  accent-color: #9adbe6;
}

.jc135 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-start;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 18px 18px 18px 6px;
  background: var(--w05,rgba(255,255,255,.07));
}

.jc136 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 280px;
  max-width: 100%;
}

.jc137 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: oklch(0.82 0.08 210);
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jc138 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #9adbe6;
  color: #11131a;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  font-weight: 400;
}

.jc139 {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  cursor: pointer;
  touch-action: none;
  flex: 1;
  min-width: 0;
}

.jc140 {
  font-size: 11px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
  font-variant-numeric: tabular-nums;
}

.jc141 {
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: none;
  background: var(--w07,rgba(255,255,255,.1));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.jc142 {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jc143 {
  font-size: 13px;
  line-height: 1.5;
  max-width: 300px;
  color: var(--t-a7abb8,#a7abb8);
}

.jc144 {
  transition: color .15s;
}

.jc145 {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  flex-shrink: 0;
}

.jc146 {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jc147 {
  position: relative;
  height: 16px;
  cursor: pointer;
  touch-action: none;
}

.jc148 {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 4px;
  border-radius: 999px;
  background: var(--w10,rgba(255,255,255,.14));
}

.jc149 {
  position: absolute;
  left: 0;
  top: 6px;
  height: 4px;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
}

.jc150 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.jc151 {
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 36px;
  padding: 0;
}

.jc152 {
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 36px;
  padding: 0;
}

.jc153 {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-size: 15px;
  cursor: pointer;
  font-weight: 400;
}

.jc154 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jc155 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 8px;
  border-radius: 10px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.jc156 {
  width: 16px;
  font-size: 11px;
}

.jc157 {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jc158 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jc159 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.jc160 {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 16px;
  overflow: hidden;
  transition: background .8s;
  cursor: pointer;
  outline: none;
}

.jc161 {
  position: absolute;
  left: 10px;
  top: 10px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  align-items: center;
}

.jc162 {
  position: absolute;
  right: 10px;
  bottom: 12px;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.jc163 {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: #9adbe6;
}

.jc164 {
  font-size: 14px;
  font-weight: 700;
}

.jc165 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 8px;
  border-radius: 9px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.jc166 {
  width: 44px;
  height: 26px;
  border-radius: 5px;
}

.jc167 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
}

.jc168 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  align-items: center;
}

.jc169 {
  position: relative;
  width: 200px;
  aspect-ratio: 9/16;
  border-radius: 22px;
  overflow: hidden;
  transition: background .5s;
  cursor: pointer;
  user-select: none;
}

.jc170 {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  display: flex;
  gap: 3px;
}

.jc171 {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
}

.jc172 {
  display: block;
  height: 100%;
  background: #fff;
}

.jc173 {
  position: absolute;
  left: 10px;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
}

.jc174 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #9adbe6;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jc175 {
  position: absolute;
  right: 8px;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  font-weight: 400;
}

.jc176 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

.jc177 {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.jc178 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.jc179 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jc180 {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
}

.jc181 {
  position: absolute;
  right: 6px;
  bottom: 8px;
  height: 20px;
  padding: 0 6px;
  border-radius: 5px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.jc182 {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  transition: width .1s linear;
}

.jc183 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jc184 {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jc185 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jc186 {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
}

.jc187 {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  gap: 6px;
}

.jc188 {
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 5px;
}

.jc189 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.jc190 {
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  align-items: center;
}

.jc191 {
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.jc192 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.4);
}

.jc193 {
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: #11131a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.jc194 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jc195 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jc196 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.jc197 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jc198 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.jc199 {
  font-size: 13.5px;
  font-weight: 700;
}

.jc200 {
  font-size: 12.5px;
  font-weight: 800;
  padding-top: 4px;
}

.jc201 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jc202 {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
}

.jc203 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 12px;
}

.jc204 {
  border-radius: 20px;
  padding: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jc205 {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jc206 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jc207 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jc208 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jc209 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jc210 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jc211 {
  font-weight: 900;
}

.jc212 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jc213 {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 300;
  width: 300px;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
  animation: mpPop .25s ease;
}

.jc214 {
  position: absolute;
  right: -10px;
  top: -10px;
  z-index: 8;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}

.jcf1:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jcf2:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jcf3:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jcf4:focus {
  border-color: rgba(154,219,230,.7);
}

.jcf5:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jcf6:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jcf7:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jcf8:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}
/* -- generated mp: end -- */

/* ==========================================================================
   22zz89. Extended UI · Perfect Scrollbar: classes generated from the handoff
   by _dev/ext_perfect_scrollbar_convert.py (jd1 …, jdh hover, jdf focus).
   The page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes psIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes psSpin { to { transform: rotate(360deg); } }

/* The areas scroll natively; only the native bar is hidden. */
.ups-page [data-ps]::-webkit-scrollbar { display: none; }

/* -- generated ps: start -- */
.jd1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jd2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jd3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jd4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jd5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jd6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jd7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jd8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jd9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.jd10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jd11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jd12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jd13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
}

.jd14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jd15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jd16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jd17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jd18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jd19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.jd20 {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jd21 {
  position: relative;
  height: 380px;
  overflow: hidden;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
}

.jd22 {
  position: absolute;
  inset: 0;
  scrollbar-width: none;
  outline: none;
}

.jd23 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.jd24 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  transition: background .4s;
}

.jd25 {
  font-size: 11px;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  width: 22px;
}

.jd26 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
}

.jd27 {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jd28 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.jd29 {
  width: 110px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--t-a7abb8,#a7abb8);
}

.jd30 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22px;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 3;
}

.jd31 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 3;
}

.jd32 {
  position: absolute;
  right: 2px;
  border-radius: 999px;
  transition: opacity .3s,width .15s;
  z-index: 4;
  cursor: pointer;
}

.jd33 {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 999px;
  cursor: grab;
  touch-action: none;
}

.jd34 {
  position: absolute;
  bottom: 2px;
  border-radius: 999px;
  transition: opacity .3s,height .15s;
  z-index: 4;
  cursor: pointer;
}

.jd35 {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  cursor: grab;
  touch-action: none;
}

.jd36 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jd37 {
  font-size: 12.5px;
  font-weight: 700;
}

.jd38 {
  flex: 1;
}

.jd39 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.jd40 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  overflow-x: auto;
  white-space: pre;
}

.jd41 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jd42 {
  display: flex;
  align-items: center;
}

.jd43 {
  font-size: 15px;
  font-weight: 700;
}

.jd44 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jd45 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jd46 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jd47 {
  display: flex;
  flex-direction: column;
}

.jd48 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.jd49 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
}

.jd50 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jd51 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 16px;
  align-items: start;
}

.jd52 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.jd53 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jd54 {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
}

.jd55 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jd56 {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.jd57 {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  transition: border-color .2s;
}

.jd58 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
}

.jd59 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.jd60 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.jd61 {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  min-width: 820px;
}

.jd62 {
  position: sticky;
  top: 0;
  background: var(--b-1b1f2a,#1b1f2a);
  text-align: left;
  padding: 10px 14px;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
  white-space: nowrap;
}

.jd63 {
  left: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  white-space: nowrap;
}

.jd64 {
  position: relative;
}

.jd65 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.jd66 {
  max-width: 78%;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.4;
}

.jd67 {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 5;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #9adbe6;
  color: #11131a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  animation: psIn .2s ease;
}

.jd68 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
}

.jd69 {
  position: relative;
  height: 170px;
  overflow: hidden;
}

.jd70 {
  display: flex;
  gap: 10px;
  padding: 10px;
  width: max-content;
}

.jd71 {
  scroll-snap-align: start;
  width: 200px;
  height: 130px;
  border-radius: 16px;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  flex-shrink: 0;
}

.jd72 {
  position: absolute;
  left: 6px;
  top: 50%;
  margin-top: -18px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(17,19,26,.75);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  font-weight: 400;
}

.jd73 {
  position: absolute;
  right: 6px;
  top: 50%;
  margin-top: -18px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(17,19,26,.75);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  font-weight: 400;
}

.jd74 {
  position: relative;
  align-self: flex-start;
  width: 260px;
  max-width: 100%;
}

.jd75 {
  padding: 0 12px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: space-between;
  height: 40px;
  border-radius: 12px;
}

.jd76 {
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  z-index: 6;
  border-radius: 14px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  animation: psIn .15s ease;
}

.jd77 {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.jd78 {
  display: flex;
  flex-direction: column;
  padding: 6px;
}

.jd79 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  border: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.jd80 {
  margin-left: auto;
  color: var(--t-9adbe6,#9adbe6);
}

.jd81 {
  height: 250px;
}

.jd82 {
  position: relative;
  height: 260px;
  overflow: hidden;
}

.jd83 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.7;
  padding: 8px 0;
  width: max-content;
}

.jd84 {
  display: flex;
  gap: 14px;
  padding: 0 14px;
}

.jd85 {
  position: sticky;
  left: 0;
  width: 30px;
  text-align: right;
  color: var(--t-8a8f9e,#8a8f9e);
  background: var(--b-151821,#151821);
}

.jd86 {
  white-space: pre;
}

.jd87 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: start;
}

.jd88 {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.jd89 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.035));
  font-size: 13px;
  font-weight: 600;
}

.jd90 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  width: 26px;
}

.jd91 {
  display: flex;
  justify-content: center;
  padding: 12px;
}

.jd92 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--w14,rgba(255,255,255,.2));
  border-top-color: #9adbe6;
  animation: psSpin .8s linear infinite;
  box-sizing: border-box;
}

.jd93 {
  padding: 12px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
}

.jd94 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jd95 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.jd96 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  min-width: 0;
}

.jd97 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.jd98 {
  font-size: 13px;
  font-weight: 700;
}

.jd99 {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
}

.jd100 {
  border-radius: 14px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
}

.jd101 {
  position: relative;
  height: 150px;
  overflow: hidden;
}

.jd102 {
  height: 44px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.035));
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.jd103 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
}

.jd104 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jd105 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.jd106 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jd107 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.jd108 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jd109 {
  font-size: 13.5px;
  font-weight: 700;
}

.jd110 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 10px;
  align-content: start;
}

.jd111 {
  border-radius: 20px;
  padding: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jd112 {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jd113 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jd114 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jd115 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jd116 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jd117 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jd118 {
  font-weight: 900;
}

.jd119 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jdf1:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.jdf2:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.jdf3:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.jdf4:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.jdf5:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.jdf6:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.jdf7:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.jdf8:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.jdf9:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.jdf10:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.jdf11:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.jdf12:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}
/* -- generated ps: end -- */

/* ==========================================================================
   22zz90. Extended UI · Star Ratings: classes generated from the handoff by
   _dev/ext_star_ratings_convert.py (je1 …, jeh hover, jef focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* -- generated rt: start -- */
.je1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.je2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.je3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.je4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.je5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.je6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.je7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.je8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.je9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.je10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.je11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.je12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.je13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
}

.je14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.je15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.je16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.je17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.je18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.je19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.je20 {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.je21 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  min-height: 220px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.je22 {
  display: inline-flex;
  align-items: center;
  outline: none;
  border-radius: 8px;
}

.je23 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 900;
  transition: transform .12s;
}

.je24 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.je25 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: clip-path .12s;
}

.je26 {
  font-size: 15px;
  font-weight: 800;
  min-height: 20px;
}

.je27 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.je28 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.je29 {
  flex: 1;
}

.je30 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.je31 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  white-space: pre;
  overflow-x: auto;
}

.je32 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.je33 {
  display: flex;
}

.je34 {
  font-size: 15px;
  font-weight: 700;
}

.je35 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.je36 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.je37 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.je38 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 16px;
  align-items: start;
}

.je39 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.je40 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.je41 {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
}

.je42 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.je43 {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.je44 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.je45 {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.je46 {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.je47 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  border: none;
  border-radius: 8px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.je48 {
  width: 22px;
}

.je49 {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.je50 {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.je51 {
  width: 30px;
  text-align: right;
  color: var(--t-8a8f9e,#8a8f9e);
}

.je52 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  padding-top: 10px;
}

.je53 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.je54 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.035));
}

.je55 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.je56 {
  font-size: 13px;
  font-weight: 700;
}

.je57 {
  font-size: 13px;
  color: #e6b84a;
  letter-spacing: 1px;
}

.je58 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.je59 {
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-a7abb8,#a7abb8);
}

.je60 {
  display: flex;
  gap: 8px;
  align-items: center;
}

.je61 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 26px;
  font-size: 11.5px;
}

.je62 {
  font-size: 16px;
  font-weight: 700;
}

.je63 {
  font-size: 12.5px;
  font-weight: 700;
  min-height: 18px;
}

.je64 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.je65 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.je66 {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  resize: vertical;
}

.je67 {
  display: flex;
  gap: 8px;
}

.je68 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
}

.je69 {
  font-size: 30px;
}

.je70 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.je71 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.je72 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.je73 {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}

.je74 {
  width: 28px;
  text-align: right;
  font-size: 13px;
  font-weight: 800;
}

.je75 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.je76 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  flex: 1;
}

.je77 {
  font-size: 26px;
  font-weight: 800;
}

.je78 {
  display: grid;
  grid-template-columns: repeat(11,minmax(0,1fr));
  gap: 4px;
}

.je79 {
  height: 38px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

.je80 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.je81 {
  display: flex;
  flex-direction: column;
}

.je82 {
  display: grid;
  grid-template-columns: minmax(0,1fr) 110px 40px;
  gap: 8px;
  padding: 6px 4px;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.je83 {
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: pointer;
  text-align: left;
}

.je84 {
  text-align: right;
}

.je85 {
  display: grid;
  grid-template-columns: minmax(0,1fr) 110px 40px;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 0 4px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13px;
}

.je86 {
  font-weight: 700;
}

.je87 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.je88 {
  font-size: 12px;
  font-weight: 800;
}

.je89 {
  text-align: right;
  color: var(--t-8a8f9e,#8a8f9e);
}

.je90 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap: 16px;
  align-items: stretch;
}

.je91 {
  accent-color: #9adbe6;
}

.je92 {
  font-size: 12.5px;
  font-weight: 700;
}

.je93 {
  font-size: 12px;
  font-weight: 700;
}

.je94 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  align-self: flex-start;
}

.je95 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
}

.je96 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.je97 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.je98 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.je99 {
  font-weight: 900;
}

.je100 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.je101 {
  font-size: 13.5px;
  font-weight: 700;
}

.je102 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 10px;
  align-content: start;
}

.je103 {
  border-radius: 20px;
  padding: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.je104 {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.je105 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.je106 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.je107 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.je108 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.je109 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.je110 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jef1:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jef2:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jef3:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jef4:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jef5:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jef6:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jef7:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jef8:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.jef9:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}
/* -- generated rt: end -- */

/* ==========================================================================
   22zz91. Extended UI · SweetAlert2: classes generated from the handoff by
   _dev/ext_sweetalert2_convert.py (jf1 …, jfh hover, jff focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes swSpin { to { transform: rotate(360deg); } }
@keyframes swFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes swPop { 0% { opacity: 0; transform: scale(.7); } 60% { transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes swSlide { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes swDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes swShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes swX { from { transform: scale(.3) rotate(-45deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes swRing { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* -- generated sw: start -- */
.jf1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jf2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jf3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jf4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jf5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jf6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jf7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jf8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jf9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.jf10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jf11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jf12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.jf13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
}

.jf14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jf15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jf16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jf17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jf18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jf19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.jf20 {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jf21 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 200px;
  justify-content: center;
}

.jf22 {
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 44px;
  padding: 0 22px;
  font-size: 14px;
}

.jf23 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: center;
}

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

.jf25 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jf26 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  white-space: pre;
  overflow-x: auto;
}

.jf27 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jf28 {
  display: flex;
}

.jf29 {
  font-size: 15px;
  font-weight: 700;
}

.jf30 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jf31 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jf32 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jf33 {
  display: flex;
  flex-direction: column;
}

.jf34 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.jf35 {
  flex: 1;
}

.jf36 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
}

.jf37 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jf38 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap: 14px;
}

.jf39 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jf40 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jf41 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jf42 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.jf43 {
  font-size: 14px;
  font-weight: 700;
}

.jf44 {
  font-size: 11px;
  font-family: ui-monospace,Menlo,monospace;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jf45 {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--t-a7abb8,#a7abb8);
}

.jf46 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
  min-height: 16px;
}

.jf47 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  align-self: flex-start;
  margin-top: auto;
}

.jf48 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 14px;
}

.jf49 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: auto;
}

.jf50 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
}

.jf51 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jf52 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.jf53 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jf54 {
  font-weight: 900;
}

.jf55 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jf56 {
  font-size: 13.5px;
  font-weight: 700;
}

.jf57 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jf58 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 10px;
  align-content: start;
}

.jf59 {
  border-radius: 20px;
  padding: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jf60 {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jf61 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jf62 {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  animation: swFade .2s ease;
}

.jf63 {
  position: relative;
  max-width: 100%;
  border-radius: 22px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  overflow: hidden;
}

.jf64 {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  font-weight: 400;
}

.jf65 {
  display: flex;
  gap: 6px;
  justify-content: center;
  width: 100%;
}

.jf66 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jf67 {
  position: relative;
  border-radius: 50%;
  transform: scale(1);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.jf68 {
  font-weight: 900;
  line-height: 1;
}

.jf69 {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: currentColor;
  animation: swSpin .8s linear infinite;
}

.jf70 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.jf71 {
  font-weight: 800;
  line-height: 1.25;
}

.jf72 {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.jf73 {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.jf74 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.jf75 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.jf76 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.jf77 {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jf78 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jf79 {
  align-self: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jf80 {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--w04,rgba(255,255,255,.05));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
  color: var(--t-a7abb8,#a7abb8);
}

.jf81 {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in oklab, #ff9b7a 14%, transparent);
  color: #ff9b7a;
  font-size: 12.5px;
  font-weight: 700;
  box-sizing: border-box;
}

.jf82 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  font-weight: 400;
}

.jf83 {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jf84 {
  gap: 8px;
  flex-wrap: wrap;
}

.jf85 {
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 96px;
  justify-content: center;
}

.jf86 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(17,19,26,.2);
  border-top-color: #11131a;
  animation: swSpin .8s linear infinite;
  box-sizing: border-box;
}

.jf87 {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  transition: width .1s linear;
}

.jf88 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jf89 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jf90 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jf91 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jf92 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* -- generated sw: end -- */

/* ==========================================================================
   22zz92. Extended UI · Text Divider: classes generated from the handoff by
   _dev/ext_text_divider_convert.py (jg1 …, jgh hover, jgf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* -- generated td: start -- */
.jg1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jg2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jg3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jg4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jg5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jg6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jg7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jg8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jg9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.jg10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jg11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jg12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.jg13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
}

.jg14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jg15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jg16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jg17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jg18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jg19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.jg20 {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jg21 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.jg22 {
  font-size: 15px;
  font-weight: 700;
}

.jg23 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.jg24 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.jg25 {
  flex: 1;
  height: 0;
}

.jg26 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  white-space: nowrap;
  border-radius: 999px;
}

.jg27 {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: 60px;
}

.jg28 {
  font-size: 22px;
  font-weight: 800;
}

.jg29 {
  width: 0;
}

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

.jg31 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jg32 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  color: var(--t-a7abb8,#a7abb8);
  white-space: pre;
  overflow-x: auto;
}

.jg33 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jg34 {
  display: flex;
}

.jg35 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jg36 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jg37 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.jg38 {
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.jg39 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: start;
}

.jg40 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.jg41 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jg42 {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
}

.jg43 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jg44 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 42px;
  width: 100%;
}

.jg45 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.jg46 {
  height: 280px;
  overflow-y: auto;
  border-radius: 14px;
  background: var(--b-151821,#151821);
  padding: 0 12px 12px;
}

.jg47 {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 6px 0;
}

.jg48 {
  display: flex;
  padding: 3px 0;
}

.jg49 {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
}

.jg50 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.jg51 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jg52 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
}

.jg53 {
  flex: 1;
}

.jg54 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 12px;
  transition: transform .2s;
}

.jg55 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0 8px;
}

.jg56 {
  height: 38px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.035));
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
}

.jg57 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  padding: 0 4px 4px;
}

.jg58 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  align-self: flex-start;
}

.jg59 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  border: none;
}

.jg60 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  font-style: italic;
}

.jg61 {
  width: 1px;
  height: 20px;
  background: var(--w10,rgba(255,255,255,.18));
}

.jg62 {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.jg63 {
  width: 1px;
  background: var(--w10,rgba(255,255,255,.14));
}

.jg64 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jg65 {
  font-size: 20px;
  font-weight: 800;
}

.jg66 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jg67 {
  font-size: 11px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jg68 {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.jg69 {
  flex: 1;
  border-top: 1px dashed var(--w10,rgba(255,255,255,.18));
}

.jg70 {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jg71 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jg72 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jg73 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.jg74 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jg75 {
  font-weight: 900;
}

.jg76 {
  font-size: 13.5px;
  font-weight: 700;
}

.jg77 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jg78 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jg79 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jg80 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jg81 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* -- generated td: end -- */

/* ==========================================================================
   22zz93. Extended UI · Timeline · Basic: classes generated from the handoff
   by _dev/ext_timeline_basic_convert.py (jh1 …, jhh hover, jhf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes tbPulse { 0% { box-shadow: 0 0 0 0 rgba(154, 219, 230, .5); } 100% { box-shadow: 0 0 0 10px rgba(154, 219, 230, 0); } }
@keyframes tbShim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes tbInA { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes tbInB { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* -- generated tb: start -- */
.jh1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jh2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jh3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jh4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jh5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jh6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jh7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jh8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jh9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.jh10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jh11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jh12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.jh13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
}

.jh14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jh15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jh16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jh17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jh18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jh19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.jh20 {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jh21 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 22px;
  max-width: 560px;
  width: 100%;
  box-sizing: border-box;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jh22 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jh23 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.jh24 {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jh25 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.jh26 {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  column-gap: 14px;
}

.jh27 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.jh28 {
  position: absolute;
  top: 14px;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}

.jh29 {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 900;
  flex-shrink: 0;
  box-sizing: border-box;
}

.jh30 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.jh31 {
  display: flex;
  gap: 4px 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.jh32 {
  font-size: 14px;
  font-weight: 700;
}

.jh33 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jh34 {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--t-a7abb8,#a7abb8);
}

.jh35 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

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

.jh37 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jh38 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  white-space: pre;
  overflow-x: auto;
}

.jh39 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jh40 {
  display: flex;
}

.jh41 {
  font-size: 15px;
  font-weight: 700;
}

.jh42 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jh43 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jh44 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jh45 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: start;
}

.jh46 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jh47 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jh48 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jh49 {
  list-style: none;
  margin: 0 0 0 13px;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--w10,rgba(255,255,255,.14));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jh50 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jh51 {
  position: absolute;
  left: -36px;
  top: -3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  box-sizing: content-box;
}

.jh52 {
  font-size: 13px;
  line-height: 1.4;
}

.jh53 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  column-gap: 12px;
}

.jh54 {
  position: relative;
  display: flex;
  justify-content: center;
}

.jh55 {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.jh56 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 16px;
  min-width: 0;
}

.jh57 {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.jh58 {
  font-size: 13.5px;
  font-weight: 700;
}

.jh59 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

.jh60 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jh61 {
  height: 6px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  overflow: hidden;
}

.jh62 {
  height: 100%;
  width: 62%;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
}

.jh63 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jh64 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.jh65 {
  font-size: 11px;
  font-family: ui-monospace,Menlo,monospace;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jh66 {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
}

.jh67 {
  display: flex;
  gap: 8px;
}

.jh68 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
}

.jh69 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jh70 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jh71 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.jh72 {
  width: 56px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  padding: 3px 5px;
  box-sizing: border-box;
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(17,19,26,.75);
}

.jh73 {
  width: 56px;
  height: 42px;
  border-radius: 8px;
  border: 1px dashed var(--w10,rgba(255,255,255,.2));
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--t-a7abb8,#a7abb8);
}

.jh74 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.04));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  align-self: flex-start;
  max-width: 100%;
}

.jh75 {
  width: 28px;
  height: 32px;
  border-radius: 6px;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jh76 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.jh77 {
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jh78 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jh79 {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.jh80 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jh81 {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.jh82 {
  font-size: 13px;
  font-weight: 800;
}

.jh83 {
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--w04,rgba(255,255,255,.05));
  color: var(--t-c9ccd6,#c9ccd6);
  align-self: flex-start;
}

.jh84 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jh85 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.jh86 {
  font-size: 14px;
  font-weight: 800;
}

.jh87 {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  align-items: center;
}

.jh88 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jh89 {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jh90 {
  min-width: 44px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  padding-top: 2px;
}

.jh91 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: start;
}

.jh92 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.jh93 {
  font-size: 13px;
}

.jh94 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
  min-height: 16px;
}

.jh95 {
  position: absolute;
  left: -36px;
  top: -3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
  background: var(--w10,rgba(255,255,255,.12));
  box-sizing: content-box;
}

.jh96 {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,var(--w04,rgba(255,255,255,.05)) 25%,var(--w10,rgba(255,255,255,.12)) 50%,var(--w04,rgba(255,255,255,.05)) 75%);
  background-size: 200% 100%;
  animation: tbShim 1.2s linear infinite;
}

.jh97 {
  height: 10px;
  width: 30%;
  border-radius: 6px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jh98 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 10px;
  text-align: center;
}

.jh99 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px dashed var(--w10,rgba(255,255,255,.2));
  color: var(--t-8a8f9e,#8a8f9e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.jh100 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  max-width: 260px;
}

.jh101 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  margin-top: 4px;
}

.jh102 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jh103 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jh104 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.jh105 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jh106 {
  font-weight: 900;
}

.jh107 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jh108 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jh109 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jh110 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* -- generated tb: end -- */

/* ==========================================================================
   22zz94. Extended UI · Timeline · Fullscreen: classes generated from the
   handoff by _dev/ext_timeline_fullscreen_convert.py (ji1 …, jih hover,
   jif focus). The page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes fsPulse { 0% { box-shadow: 0 0 0 0 rgba(154, 219, 230, .5); } 100% { box-shadow: 0 0 0 12px rgba(154, 219, 230, 0); } }

/* -- generated fs: start -- */
.ji1 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.ji2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.ji3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.ji4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ji5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ji6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ji7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ji8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ji9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.ji10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ji11 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 28px;
}

.ji12 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.ji13 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 260px;
  min-width: 0;
}

.ji14 {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: oklch(0.82 0.09 280);
  color: #11131a;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ji15 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ji16 {
  font-size: 18px;
  font-weight: 800;
}

.ji17 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ji18 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 220px;
  min-width: 180px;
}

.ji19 {
  display: flex;
  font-size: 12px;
  font-weight: 700;
}

.ji20 {
  margin-left: auto;
  color: var(--t-9adbe6,#9adbe6);
}

.ji21 {
  height: 6px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  overflow: hidden;
}

.ji22 {
  height: 100%;
  width: 62%;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
}

.ji23 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ji24 {
  font-size: 17px;
  font-weight: 800;
}

.ji25 {
  display: flex;
}

.ji26 {
  width: 32px;
  height: 32px;
  margin-left: -8px;
  border-radius: 50%;
  color: #11131a;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ji27 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.ji28 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.ji29 {
  flex: 1 1 auto;
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ji30 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ji31 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ji32 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ji33 {
  font-size: 11px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ji34 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 180px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
}

.ji35 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.ji36 {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.ji37 {
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
}

.ji38 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.ji39 {
  flex: 1 1 560px;
  min-width: 0;
}

.ji40 {
  position: relative;
  height: min(820px, calc(100vh - 150px));
  min-height: 480px;
  overflow-y: auto;
  padding: 0 20px 30px;
  border-radius: 24px;
  background: var(--b-151821,#151821);
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.ji41 {
  display: flex;
  justify-content: center;
  padding: 14px 0;
}

.ji42 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ji43 {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -20px 14px;
  padding: 12px 20px;
  background: color-mix(in oklab, var(--b-151821,#151821) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ji44 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.ji45 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ji46 {
  margin: 0;
  padding: 0;
}

.ji47 {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 22px;
}

.ji48 {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg,transparent,var(--t-9adbe6,#9adbe6));
}

.ji49 {
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  display: flex;
  align-items: center;
}

.ji50 {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg,var(--t-9adbe6,#9adbe6),transparent);
}

.ji51 {
  display: grid;
  column-gap: 16px;
  list-style: none;
}

.ji52 {
  min-width: 0;
  padding-bottom: 18px;
}

.ji53 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 18px;
  cursor: pointer;
  transition: box-shadow .3s;
  text-align: left;
  min-width: 0;
  outline: none;
}

.ji54 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ji55 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ji56 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-left: auto;
}

.ji57 {
  margin: 0;
  font-weight: 800;
  line-height: 1.3;
}

.ji58 {
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}

.ji59 {
  background: color-mix(in oklab, #9adbe6 35%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.ji60 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.ji61 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.05));
}

.ji62 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ji63 {
  font-size: 13.5px;
  line-height: 1.5;
  font-style: italic;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ji64 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 6px;
}

.ji65 {
  aspect-ratio: 4/3;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  padding: 4px 6px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 800;
  color: rgba(17,19,26,.7);
}

.ji66 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  align-self: flex-start;
  max-width: 100%;
}

.ji67 {
  width: 28px;
  height: 32px;
  border-radius: 6px;
  background: oklch(0.78 0.12 30);
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ji68 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ji69 {
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ji70 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ji71 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ji72 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.ji73 {
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
}

.ji74 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ji75 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px 0 3px;
  border-radius: 999px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 12px;
  font-weight: 700;
}

.ji76 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ji77 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
}

.ji78 {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
}

.ji79 {
  width: 64px;
  flex-shrink: 0;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ji80 {
  font-weight: 600;
  min-width: 0;
}

.ji81 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 4px;
}

.ji82 {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.ji83 {
  font-size: 16px;
  font-weight: 800;
}

.ji84 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ji85 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.ji86 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}

.ji87 {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  box-sizing: border-box;
}

.ji88 {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.ji89 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 80px 20px;
  text-align: center;
}

.ji90 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px dashed var(--w10,rgba(255,255,255,.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ji91 {
  font-size: 15px;
  font-weight: 700;
}

.ji92 {
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
}

.ji93 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  margin-top: 6px;
}

.ji94 {
  flex: 0 1 230px;
  min-width: 200px;
  align-self: stretch;
}

.ji95 {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 14px;
  max-height: min(820px, calc(100vh - 150px));
  overflow-y: auto;
  box-sizing: border-box;
}

.ji96 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  border-color: var(--t-9adbe6,#9adbe6);
  color: var(--t-9adbe6,#9adbe6);
}

.ji97 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ji98 {
  font-size: 12.5px;
  font-weight: 800;
  padding: 4px 2px;
}

.ji99 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  border-radius: 9px;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.ji100 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.ji101 {
  width: 46px;
  flex-shrink: 0;
}

.ji102 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ji103 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ji104 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ji105 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.ji106 {
  overflow-x: auto;
}

.ji107 {
  position: relative;
  min-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
}

.ji108 {
  display: grid;
  grid-template-columns: 140px repeat(10,minmax(0,1fr));
}

.ji109 {
  font-size: 11px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
  border-left: 1px solid var(--w06,rgba(255,255,255,.06));
  padding-left: 6px;
}

.ji110 {
  display: grid;
  grid-template-columns: 140px minmax(0,1fr);
  align-items: center;
  height: 48px;
}

.ji111 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ji112 {
  font-size: 13px;
  font-weight: 700;
}

.ji113 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.ji114 {
  position: relative;
  height: 100%;
  background: repeating-linear-gradient(90deg,var(--w06,rgba(255,255,255,.06)) 0 1px,transparent 1px 10%);
}

.ji115 {
  position: absolute;
  top: 9px;
  bottom: 9px;
  min-width: 14px;
  border-radius: 999px;
  cursor: pointer;
  padding: 0 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
}

.ji116 {
  position: absolute;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--t-9adbe6,#9adbe6);
  pointer-events: none;
}

.ji117 {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
}

.ji118 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ji119 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.ji120 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ji121 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.ji122 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ji123 {
  font-weight: 900;
}

.ji124 {
  font-size: 13.5px;
  font-weight: 700;
}

.ji125 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ji126 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ji127 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ji128 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jif1:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}

.jif2:focus {
  outline: 2px solid var(--t-9adbe6,#9adbe6);
  outline-offset: 2px;
}
/* -- generated fs: end -- */

/* ==========================================================================
   22zz95. Extended UI · Tour: classes generated from the handoff by
   _dev/ext_tour_convert.py (jj1 …, jjh hover, jjf focus). The page reuses
   the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes trPing { 0% { box-shadow: 0 0 0 0 rgba(154, 219, 230, .6); } 100% { box-shadow: 0 0 0 10px rgba(154, 219, 230, 0); } }
@keyframes trFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes trIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes trPop { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }

/* -- generated tr: start -- */
.jj1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jj2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jj3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jj4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jj5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jj6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jj7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jj8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jj9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.jj10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jj11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jj12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.jj13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
}

.jj14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jj15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jj16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jj17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jj18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jj19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.jj20 {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jj21 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jj22 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jj23 {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.jj24 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 180px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 12.5px;
}

.jj25 {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--w06,rgba(255,255,255,.08));
}

.jj26 {
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 36px;
}

.jj27 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: oklch(0.82 0.09 200);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jj28 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}

.jj29 {
  padding: 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.jj30 {
  font-size: 18px;
  font-weight: 800;
}

.jj31 {
  font-size: 11px;
  font-weight: 700;
}

.jj32 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.jj33 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: oklch(0.82 0.09 280);
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jj34 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.jj35 {
  font-size: 13.5px;
  font-weight: 700;
}

.jj36 {
  height: 5px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  overflow: hidden;
}

.jj37 {
  display: block;
  height: 100%;
  width: 62%;
  background: var(--t-9adbe6,#9adbe6);
}

.jj38 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jj39 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
  min-height: 16px;
}

.jj40 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.jj41 {
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 40px;
  padding: 0 18px;
  font-size: 13px;
}

.jj42 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jj43 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
}

.jj44 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  white-space: pre;
  overflow-x: auto;
}

.jj45 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jj46 {
  display: flex;
}

.jj47 {
  font-size: 15px;
  font-weight: 700;
}

.jj48 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jj49 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jj50 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jj51 {
  display: flex;
  flex-direction: column;
}

.jj52 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.jj53 {
  flex: 1;
}

.jj54 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
}

.jj55 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jj56 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: start;
}

.jj57 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.jj58 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jj59 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.jj60 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jj61 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: var(--w03,rgba(255,255,255,.03));
  text-align: center;
}

.jj62 {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg,var(--t-9adbe6,#9adbe6),oklch(0.78 0.11 300));
  color: #11131a;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jj63 {
  font-size: 14px;
  font-weight: 700;
}

.jj64 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.jj65 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
}

.jj66 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
}

.jj67 {
  position: relative;
  display: flex;
}

.jj68 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 36px;
}

.jj69 {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
  background: var(--t-9adbe6,#9adbe6);
  padding: 0;
  cursor: pointer;
  animation: trPing 1.6s ease-out infinite;
  font-size: 13.3333px;
  font-weight: 400;
}

.jj70 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jj71 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jj72 {
  display: flex;
  font-size: 12px;
  font-weight: 800;
}

.jj73 {
  margin-left: auto;
  color: var(--t-9adbe6,#9adbe6);
}

.jj74 {
  height: 6px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  overflow: hidden;
}

.jj75 {
  height: 100%;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
  transition: width .4s;
}

.jj76 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.jj77 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.jj78 {
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
}

.jj79 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.jj80 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
}

.jj81 {
  height: 22px;
  align-self: flex-start;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 18%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
}

.jj82 {
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
}

.jj83 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  align-self: flex-start;
}

.jj84 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  position: relative;
  min-height: 220px;
}

.jj85 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  max-width: 280px;
}

.jj86 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.jj87 {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.jj88 {
  width: 220px;
  padding: 6px;
  border-radius: 16px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  animation: trIn .2s ease;
}

.jj89 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.jj90 {
  width: 18px;
  color: var(--t-9adbe6,#9adbe6);
  font-weight: 900;
}

.jj91 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.jj92 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 16px;
  align-items: start;
}

.jj93 {
  height: 170px;
  overflow-y: auto;
  border-radius: 14px;
  background: var(--b-151821,#151821);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jj94 {
  flex-shrink: 0;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
}

.jj95 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.jj96 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jj97 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 14px;
}

.jj98 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jj99 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.jj100 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jj101 {
  font-weight: 900;
}

.jj102 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jj103 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 14px;
  align-content: start;
}

.jj104 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jj105 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jj106 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jj107 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jj108 {
  position: fixed;
  inset: 0;
  z-index: 600;
  pointer-events: none;
}

.jj109 {
  position: fixed;
  border-radius: 14px;
  transition: left .3s ease,top .3s ease,width .3s ease,height .3s ease;
}

.jj110 {
  position: fixed;
  inset: 0;
  background: rgba(6,7,11,.6);
  animation: trFade .2s ease;
}

.jj111 {
  position: fixed;
  max-width: calc(100vw - 24px);
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 22px 60px rgba(0,0,0,.5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--t-eef0f5,#eef0f5);
  transition: left .3s ease,top .3s ease;
  box-sizing: border-box;
}

.jj112 {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--b-1b1f2a,#1b1f2a);
  transform: rotate(45deg);
}

.jj113 {
  align-self: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: trPop .45s cubic-bezier(.2,.9,.3,1.3);
}

.jj114 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jj115 {
  display: flex;
  gap: 5px;
}

.jj116 {
  height: 6px;
  border-radius: 999px;
  transition: width .25s;
}

.jj117 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--t-9adbe6,#9adbe6);
}

.jj118 {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  font-weight: 400;
}

.jj119 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.jj120 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.jj121 {
  height: 4px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  overflow: hidden;
}

.jj122 {
  height: 100%;
  background: var(--t-9adbe6,#9adbe6);
  transition: width .3s;
}

.jj123 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jj124 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t-9adbe6,#9adbe6);
  animation: trPing 1.4s ease-out infinite;
}

.jj125 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  font-weight: 400;
}

.jj126 {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jj127 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.jj128 {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  margin-right: auto;
}

.jj129 {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(6,7,11,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: trFade .2s ease;
}

.jj130 {
  width: 440px;
  max-width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  color: var(--t-eef0f5,#eef0f5);
  outline: none;
  animation: trPop .3s ease;
}

.jj131 {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  font-weight: 900;
  color: rgba(17,19,26,.75);
  transition: background .3s;
}

.jj132 {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jj133 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-9adbe6,#9adbe6);
}

.jj134 {
  font-size: 20px;
  font-weight: 800;
}

.jj135 {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-a7abb8,#a7abb8);
}

.jj136 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

.jj137 {
  height: 6px;
  border-radius: 999px;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width .25s;
  font-size: 13.3333px;
  font-weight: 400;
}

.jjh1:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.06));
}
/* -- generated tr: end -- */

/* ==========================================================================
   22zz96. Extended UI · Treeview: classes generated from the handoff by
   _dev/ext_treeview_convert.py (jk1 …, jkh hover, jkf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes tvSpin { to { transform: rotate(360deg); } }
@keyframes tvIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Patterns: the wide card takes its own row and the cards under it share the
   full width (a grid kept empty tracks beside the four cards). */
.utv-page .jk60 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.utv-page .jk60 > * {
  flex: 1 1 360px;
  min-width: 0;
}

.utv-page .jk60 > :first-child { flex-basis: 100%; }

/* -- generated tv: start -- */
.jk1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jk2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jk3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jk4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jk5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jk6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jk7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jk8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jk9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.jk10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jk11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jk12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.jk13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
}

.jk14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jk15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jk16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jk17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jk18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jk19 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.jk20 {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jk21 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jk22 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 4px;
}

.jk23 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.jk24 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jk25 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.jk26 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  font-size: 12px;
  font-style: italic;
}

.jk27 {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  font-style: normal;
  cursor: pointer;
}

.jk28 {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  font-size: 13px;
  user-select: none;
  min-width: 0;
}

.jk29 {
  display: flex;
  align-self: stretch;
  flex-shrink: 0;
}

.jk30 {
  position: relative;
  width: 18px;
}

.jk31 {
  position: absolute;
  left: 8px;
  top: 0;
  border-left: 1px solid var(--w10,rgba(255,255,255,.16));
}

.jk32 {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 9px;
  border-top: 1px solid var(--w10,rgba(255,255,255,.16));
}

.jk33 {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 9px;
  transition: transform .15s;
}

.jk34 {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.jk35 {
  flex-shrink: 0;
}

.jk36 {
  min-width: 28px;
  height: 16px;
  padding: 0 3px;
  border-radius: 4px;
  color: #11131a;
  font-size: 8.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.jk37 {
  width: 16px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.jk38 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--w10,rgba(255,255,255,.3));
}

.jk39 {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1.5px solid var(--t-9adbe6,#9adbe6);
  background: var(--b-151821,#151821);
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.jk40 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jk41 {
  background: color-mix(in oklab, #9adbe6 35%, transparent);
  color: inherit;
  border-radius: 3px;
}

.jk42 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--w10,rgba(255,255,255,.2));
  border-top-color: var(--t-9adbe6,#9adbe6);
  animation: tvSpin .8s linear infinite;
  flex-shrink: 0;
}

.jk43 {
  font-size: 11px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
  flex-shrink: 0;
}

.jk44 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 2px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.jk45 {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jk46 {
  margin-left: auto;
  font-size: 11px;
}

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

.jk48 {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t-a7abb8,#a7abb8);
  white-space: pre;
  overflow-x: auto;
}

.jk49 {
  flex: 1 1 260px;
  max-width: 340px;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jk50 {
  display: flex;
}

.jk51 {
  font-size: 15px;
  font-weight: 700;
}

.jk52 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jk53 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jk54 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jk55 {
  display: flex;
  flex-direction: column;
}

.jk56 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.jk57 {
  flex: 1;
}

.jk58 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
}

.jk59 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jk60 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 16px;
  align-items: start;
}

.jk61 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  grid-column: 1/-1;
}

.jk62 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jk63 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jk64 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}

.jk65 {
  flex: 0 1 250px;
  min-width: 200px;
  padding: 8px;
  border-radius: 16px;
  background: var(--b-151821,#151821);
  max-height: 360px;
  overflow-y: auto;
}

.jk66 {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jk67 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.jk68 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.jk69 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 12px;
}

.jk70 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.jk71 {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jk72 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(110px,100%),1fr));
  gap: 10px;
}

.jk73 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jk74 {
  height: 66px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
}

.jk75 {
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jk76 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jk77 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
  padding: 20px 0;
}

.jk78 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jk79 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.jk80 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
}

.jk81 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.jk82 {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.jk83 {
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
}

.jk84 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
  min-height: 16px;
}

.jk85 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: 300px;
  overflow-y: auto;
}

.jk86 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
  padding: 12px 4px;
}

.jk87 {
  display: grid;
  grid-template-columns: minmax(0,1fr) repeat(3,64px);
  align-items: center;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
}

.jk88 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.jk89 {
  font-size: 12px;
  font-weight: 800;
}

.jk90 {
  display: grid;
  grid-template-columns: minmax(0,1fr) repeat(3,64px);
  align-items: center;
}

.jk91 {
  min-width: 0;
}

.jk92 {
  display: flex;
  justify-content: center;
}

.jk93 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.jk94 {
  display: flex;
  gap: 8px;
}

.jk95 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.jk96 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: start;
}

.jk97 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.jk98 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--w06,rgba(255,255,255,.07));
  font-size: 12.5px;
}

.jk99 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.jk100 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  align-self: flex-start;
}

.jk101 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jk102 {
  min-width: 72px;
  display: flex;
}

.jk103 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.18));
  background: var(--w04,rgba(255,255,255,.05));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.jk104 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jk105 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jk106 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jk107 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.jk108 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jk109 {
  font-weight: 900;
}

.jk110 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jk111 {
  font-size: 13.5px;
  font-weight: 700;
}

.jk112 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jk113 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jk114 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jk115 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jk116 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jk117 {
  position: fixed;
  inset: 0;
  z-index: 600;
}

.jk118 {
  position: fixed;
  width: 190px;
  padding: 6px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  animation: tvIn .15s ease;
}

.jk119 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.jk120 {
  width: 16px;
}

.jk121 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jkh1:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.06));
}

.jkf1:focus {
  box-shadow: inset 0 0 0 2px var(--t-9adbe6,#9adbe6);
}

.jkf2:focus {
  box-shadow: inset 0 0 0 2px var(--t-9adbe6,#9adbe6);
}

.jkf3:focus {
  box-shadow: inset 0 0 0 2px var(--t-9adbe6,#9adbe6);
}

.jkf4:focus {
  box-shadow: inset 0 0 0 2px var(--t-9adbe6,#9adbe6);
}

.jkf5:focus {
  box-shadow: inset 0 0 0 2px var(--t-9adbe6,#9adbe6);
}

.jkf6:focus {
  box-shadow: inset 0 0 0 2px var(--t-9adbe6,#9adbe6);
}

.jkf7:focus {
  box-shadow: inset 0 0 0 2px var(--t-9adbe6,#9adbe6);
}
/* -- generated tv: end -- */

/* ==========================================================================
   22zz97. Extended UI · Miscellaneous: classes generated from the handoff by
   _dev/ext_miscellaneous_convert.py (jl1 …, jlh hover, jlf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes msSpin { to { transform: rotate(360deg); } }
@keyframes msFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes msIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes msUp { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes msBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* -- generated ms: start -- */
.jl1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jl2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jl3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jl4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jl5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jl6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jl7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jl8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jl9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.jl10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jl11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jl12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.jl13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
}

.jl14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jl15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jl16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jl17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jl18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jl19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 16px;
  align-items: start;
}

.jl20 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.jl21 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jl22 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.jl23 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jl24 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jl25 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 6px 0 12px;
  border-radius: 12px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
}

.jl26 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.jl27 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 30px;
  min-width: 84px;
}

.jl28 {
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 30px;
  min-width: 84px;
}

.jl29 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jl30 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jl31 {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.jl32 {
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  box-sizing: content-box;
}

.jl33 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  max-width: 220px;
}

.jl34 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.jl35 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.jl36 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jl37 {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jl38 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jl39 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jl40 {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}

.jl41 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.jl42 {
  flex: 1;
}

.jl43 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
}

.jl44 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jl45 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: start;
}

.jl46 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.jl47 {
  padding: 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.jl48 {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.jl49 {
  font-size: 11px;
  font-weight: 700;
}

.jl50 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jl51 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jl52 {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}

.jl53 {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.jl54 {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--t-c9ccd6,#c9ccd6);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jl55 {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  align-self: flex-start;
}

.jl56 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jl57 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.03));
  font-size: 12.5px;
  font-family: ui-monospace,Menlo,monospace;
}

.jl58 {
  flex: 1;
  min-width: 0;
}

.jl59 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-family: inherit;
}

.jl60 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.jl61 {
  flex: 1 1 120px;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}

.jl62 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jl63 {
  width: 96px;
  flex-shrink: 0;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jl64 {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.jl65 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jl66 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
}

.jl67 {
  height: 42px;
  min-width: 130px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .2s;
}

.jl68 {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(17,19,26,.2);
  border-top-color: #11131a;
  animation: msSpin .8s linear infinite;
  box-sizing: border-box;
}

.jl69 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.jl70 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  animation: msIn .25s ease;
}

.jl71 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.jl72 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.03));
  font-size: 12.5px;
}

.jl73 {
  font-size: 11px;
  font-weight: 800;
}

.jl74 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jl75 {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--w07,rgba(255,255,255,.08));
  background: var(--b-151821,#151821);
}

.jl76 {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  background: var(--t-9adbe6,#9adbe6);
  box-shadow: 0 0 10px var(--t-9adbe6,#9adbe6);
  transition: width .35s ease,opacity .3s ease .2s;
}

.jl77 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.08));
}

.jl78 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--w10,rgba(255,255,255,.2));
}

.jl79 {
  flex: 1;
  margin-left: 8px;
  height: 22px;
  border-radius: 7px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  display: flex;
  align-items: center;
  padding: 0 8px;
}

.jl80 {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity .2s;
}

.jl81 {
  font-size: 14px;
  font-weight: 700;
}

.jl82 {
  height: 10px;
  width: 80%;
  border-radius: 6px;
  background: var(--w06,rgba(255,255,255,.07));
}

.jl83 {
  height: 10px;
  width: 60%;
  border-radius: 6px;
  background: var(--w06,rgba(255,255,255,.07));
}

.jl84 {
  position: relative;
}

.jl85 {
  height: 230px;
  overflow-y: auto;
  border-radius: 14px;
  background: var(--b-151821,#151821);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jl86 {
  flex-shrink: 0;
  height: 36px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.04));
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12.5px;
}

.jl87 {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transition: opacity .2s,transform .2s;
}

.jl88 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.jl89 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--t-a7abb8,#a7abb8);
}

.jl90 {
  height: 24px;
  min-width: 24px;
  padding: 0 6px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.18));
  border-bottom-width: 2px;
  background: var(--w04,rgba(255,255,255,.05));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.jl91 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  align-self: flex-start;
}

.jl92 {
  position: relative;
  overflow: hidden;
  transition: max-height .45s ease;
}

.jl93 {
  font-size: 14px;
  font-weight: 800;
}

.jl94 {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jl95 {
  min-width: 48px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  padding-top: 3px;
}

.jl96 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(180deg,transparent,var(--b-1b1f2a,#1b1f2a));
  pointer-events: none;
  transition: opacity .3s;
}

.jl97 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}

.jl98 {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  user-select: none;
}

.jl99 {
  position: absolute;
  inset: -12px;
  transition: filter .3s;
}

.jl100 {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  transform: rotate(-24deg);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .3em;
  color: rgba(255,255,255,.55);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  white-space: nowrap;
}

.jl101 {
  position: absolute;
  left: 8px;
  bottom: 8px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(17,19,26,.6);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.jl102 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  flex: 1;
}

.jl103 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
}

.jl104 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jl105 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jl106 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.jl107 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jl108 {
  font-weight: 900;
}

.jl109 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jl110 {
  font-size: 13.5px;
  font-weight: 700;
}

.jl111 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jl112 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jl113 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jl114 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jl115 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jl116 {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(6,7,11,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: msFade .2s ease;
}

.jl117 {
  width: 620px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: 22px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--t-eef0f5,#eef0f5);
  outline: none;
  animation: msIn .25s ease;
}

.jl118 {
  display: flex;
  align-items: center;
}

.jl119 {
  font-size: 19px;
  font-weight: 800;
  flex: 1;
}

.jl120 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jl121 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap: 18px;
}

.jl122 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jl123 {
  flex: 1;
  font-size: 13px;
}

.jl124 {
  display: flex;
  gap: 4px;
}

.jl125 {
  height: 24px;
  min-width: 24px;
  padding: 0 6px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.18));
  border-bottom-width: 2px;
  background: var(--w04,rgba(255,255,255,.05));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/* -- generated ms: end -- */

/* ==========================================================================
   22zz98. Icons · Line icons: classes generated from the handoff by
   _dev/icons_line_icons_convert.py (jm1 …, jmh hover, jmf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes liShim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes liIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes liUp { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Every Lucide icon the model draws (inline styles would be cleared on redraw). */
.uli-page .li-svg { display: block; flex-shrink: 0; }

/* -- generated li: start -- */
.jm1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jm2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jm3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jm4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jm5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jm6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jm8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.jm10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jm11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jm12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.jm13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
}

.jm14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jm15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jm16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jm17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jm18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm19 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.jm20 {
  flex: 1 1 560px;
  min-width: 0;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jm21 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.jm22 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 200px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
}

.jm23 {
  display: flex;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm24 {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.jm25 {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm26 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
}

.jm27 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jm28 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jm29 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm30 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(92px,100%),1fr));
  gap: 8px;
}

.jm31 {
  aspect-ratio: 1;
  border-radius: 14px;
  background: linear-gradient(90deg,var(--w03,rgba(255,255,255,.03)) 25%,var(--w07,rgba(255,255,255,.08)) 50%,var(--w03,rgba(255,255,255,.03)) 75%);
  background-size: 200% 100%;
  animation: liShim 1.2s linear infinite;
}

.jm32 {
  padding: 30px;
  text-align: center;
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
}

.jm33 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jm34 {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 14px;
  font-family: inherit;
  cursor: pointer;
  min-width: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jm35 {
  display: flex;
  height: 32px;
  align-items: center;
}

.jm36 {
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t-a7abb8,#a7abb8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jm37 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 10px;
  text-align: center;
}

.jm38 {
  font-size: 14px;
  font-weight: 700;
}

.jm39 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: center;
}

.jm40 {
  flex: 1 1 280px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 16px;
}

.jm41 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jm42 {
  font-size: 15px;
  font-weight: 700;
}

.jm43 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jm44 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 9px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.jm45 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.jm46 {
  flex: 1;
}

.jm47 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
}

.jm48 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jm49 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: liIn .2s ease;
}

.jm50 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jm51 {
  font-size: 15px;
  font-weight: 800;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jm52 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jm53 {
  height: 160px;
  border-radius: 18px;
  background: repeating-linear-gradient(0deg,var(--w04,rgba(255,255,255,.04)) 0 1px,transparent 1px 20px),repeating-linear-gradient(90deg,var(--w04,rgba(255,255,255,.04)) 0 1px,transparent 1px 20px),var(--b-151821,#151821);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jm54 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
}

.jm55 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.jm56 {
  font-size: 10px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm57 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
}

.jm58 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 36px;
}

.jm59 {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
  white-space: pre-wrap;
  word-break: break-all;
}

.jm60 {
  border-radius: 20px;
  border: 1.5px dashed var(--w10,rgba(255,255,255,.16));
  padding: 22px;
  text-align: center;
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.jm61 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  padding: 0 4px;
}

.jm62 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: start;
  color: var(--t-eef0f5,#eef0f5);
}

.jm63 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.jm64 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jm65 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.jm66 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm67 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jm68 {
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jm69 {
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jm70 {
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jm71 {
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jm72 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm73 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm74 {
  flex: 1;
  font-size: 13px;
}

.jm75 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
}

.jm76 {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
}

.jm77 {
  display: flex;
}

.jm78 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
}

.jm79 {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13.5px;
}

.jm80 {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.jm81 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.jm82 {
  display: flex;
  flex-direction: column;
}

.jm83 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13px;
}

.jm84 {
  flex: 1;
  font-weight: 600;
}

.jm85 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
}

.jm86 {
  display: flex;
  gap: 2px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm87 {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.jm88 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
  text-align: center;
}

.jm89 {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--w04,rgba(255,255,255,.05));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-9adbe6,#9adbe6);
}

.jm90 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  max-width: 240px;
}

.jm91 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jm92 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: start;
}

.jm93 {
  position: relative;
  width: 216px;
  height: 216px;
  align-self: center;
  border-radius: 12px;
  background: repeating-linear-gradient(0deg,var(--w07,rgba(255,255,255,.07)) 0 1px,transparent 1px 9px),repeating-linear-gradient(90deg,var(--w07,rgba(255,255,255,.07)) 0 1px,transparent 1px 9px),var(--b-151821,#151821);
}

.jm94 {
  position: absolute;
  inset: 18px;
  border: 1px dashed color-mix(in oklab, #ff9b7a 60%, transparent);
  border-radius: 2px;
}

.jm95 {
  position: absolute;
  inset: 18px;
  border: 1px dashed color-mix(in oklab, #9adbe6 60%, transparent);
  border-radius: 50%;
}

.jm96 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-eef0f5,#eef0f5);
}

.jm97 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.jm98 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.jm99 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jm100 {
  width: 76px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.jm101 {
  font-size: 13px;
  font-weight: 800;
}

.jm102 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm103 {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.jm104 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: right;
}

.jm105 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
}

.jm106 {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
}

.jm107 {
  display: flex;
  gap: 8px;
  font-weight: 700;
  line-height: 1.2;
}

.jm108 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jm109 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.jm110 {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
}

.jm111 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 11px;
}

.jm112 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jm113 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jm114 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.jm115 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jm116 {
  font-weight: 900;
}

.jm117 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jm118 {
  font-size: 13.5px;
  font-weight: 700;
}

.jm119 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jm120 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jm121 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jm122 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jm123 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jmh1:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.06));
}
/* -- generated li: end -- */

/* ==========================================================================
   22zz99. Icons · Filled icons: classes generated from the handoff by
   _dev/icons_filled_icons_convert.py (jn1 …, jnh hover, jnf focus). The page
   reuses the .cb-page tokens of Cards · Basic; the Phosphor web fonts are
   self-hosted in assets/vendor/phosphor.
   ========================================================================== */
@keyframes fiShim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes fiIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fiPopA { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes fiPopB { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* -- generated fi: start -- */
.jn1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jn2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jn3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jn4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jn5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jn6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jn7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jn8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jn9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.jn10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jn11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jn12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.jn13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
}

.jn14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jn15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jn16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jn17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jn18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jn19 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.jn20 {
  flex: 1 1 560px;
  min-width: 0;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jn21 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.jn22 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 200px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
}

.jn23 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.jn24 {
  font-size: 16px;
  line-height: 1;
  display: block;
}

.jn25 {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.jn26 {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-8a8f9e,#8a8f9e);
}

.jn27 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
}

.jn28 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jn29 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jn30 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jn31 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(92px,100%),1fr));
  gap: 8px;
}

.jn32 {
  aspect-ratio: 1;
  border-radius: 14px;
  background: linear-gradient(90deg,var(--w03,rgba(255,255,255,.03)) 25%,var(--w07,rgba(255,255,255,.08)) 50%,var(--w03,rgba(255,255,255,.03)) 75%);
  background-size: 200% 100%;
  animation: fiShim 1.2s linear infinite;
}

.jn33 {
  padding: 30px;
  text-align: center;
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
}

.jn34 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jn35 {
  display: grid;
  gap: 8px;
}

.jn36 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 14px;
  font-family: inherit;
  cursor: pointer;
  min-width: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jn37 {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 34px;
}

.jn38 {
  line-height: 1;
  display: block;
  opacity: .55;
}

.jn39 {
  line-height: 1;
  display: block;
}

.jn40 {
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t-a7abb8,#a7abb8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jn41 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 10px;
  text-align: center;
}

.jn42 {
  font-size: 40px;
  line-height: 1;
  display: block;
}

.jn43 {
  font-size: 14px;
  font-weight: 700;
}

.jn44 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: center;
}

.jn45 {
  flex: 1 1 280px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 16px;
}

.jn46 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jn47 {
  font-size: 15px;
  font-weight: 700;
}

.jn48 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jn49 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 9px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jn50 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.jn51 {
  flex: 1;
}

.jn52 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
}

.jn53 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jn54 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: fiIn .2s ease;
}

.jn55 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jn56 {
  font-size: 15px;
  font-weight: 800;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jn57 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jn58 {
  height: 150px;
  border-radius: 18px;
  background: repeating-linear-gradient(0deg,var(--w04,rgba(255,255,255,.04)) 0 1px,transparent 1px 20px),repeating-linear-gradient(90deg,var(--w04,rgba(255,255,255,.04)) 0 1px,transparent 1px 20px),var(--b-151821,#151821);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.jn59 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.jn60 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.jn61 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
}

.jn62 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.jn63 {
  font-size: 10px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jn64 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
}

.jn65 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 36px;
}

.jn66 {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
  white-space: pre-wrap;
  word-break: break-all;
}

.jn67 {
  border-radius: 20px;
  border: 1.5px dashed var(--w10,rgba(255,255,255,.16));
  padding: 22px;
  text-align: center;
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.jn68 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  padding: 0 4px;
}

.jn69 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: start;
}

.jn70 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.jn71 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jn72 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.jn73 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jn74 {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}

.jn75 {
  font-size: 20px;
  line-height: 1;
  display: block;
}

.jn76 {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--t-9adbe6,#9adbe6);
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.jn77 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}

.jn78 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: background .15s,border-color .15s;
}

.jn79 {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--t-a7abb8,#a7abb8);
}

.jn80 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jn81 {
  align-self: center;
  width: 100%;
  max-width: 360px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--w10,rgba(255,255,255,.12));
  background: var(--b-151821,#151821);
}

.jn82 {
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--t-a7abb8,#a7abb8);
}

.jn83 {
  font-size: 36px;
  line-height: 1;
  display: block;
  color: var(--t-9adbe6,#9adbe6);
}

.jn84 {
  font-size: 14px;
  font-weight: 700;
  color: var(--t-eef0f5,#eef0f5);
}

.jn85 {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  align-items: center;
  padding: 8px 6px 14px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  background: var(--b-1b1f2a,#1b1f2a);
}

.jn86 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 52px;
  justify-content: center;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jn87 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.jn88 {
  font-size: 10.5px;
  font-weight: 700;
}

.jn89 {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg,oklch(0.78 0.08 220),oklch(0.62 0.09 260));
}

.jn90 {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(17,19,26,.45);
  backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.jn91 {
  position: absolute;
  left: 12px;
  bottom: 12px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(17,19,26,.55);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.jn92 {
  display: flex;
  gap: 2px;
}

.jn93 {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jn94 {
  font-size: 22px;
  line-height: 1;
  display: block;
}

.jn95 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
}

.jn96 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jn97 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jn98 {
  font-size: 19px;
  line-height: 1;
  display: block;
}

.jn99 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jn100 {
  font-size: 13px;
  font-weight: 700;
}

.jn101 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jn102 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jn103 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.jn104 {
  font-size: 15px;
  line-height: 1;
  display: block;
}

.jn105 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px 0 8px;
  border-radius: 999px;
  color: #11131a;
  font-size: 12px;
  font-weight: 800;
}

.jn106 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  text-align: center;
}

.jn107 {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background: color-mix(in oklab, var(--t-9adbe6,#9adbe6) 14%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jn108 {
  font-size: 52px;
  line-height: 1;
  display: block;
}

.jn109 {
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
  max-width: 240px;
}

.jn110 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}

.jn111 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  text-align: center;
}

.jn112 {
  font-size: 32px;
  line-height: 1;
  display: block;
}

.jn113 {
  font-size: 12px;
  font-weight: 700;
}

.jn114 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
}

.jn115 {
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  display: flex;
  align-items: center;
  justify-content: center;
}

.jn116 {
  font-size: 30px;
  line-height: 1;
  display: block;
}

.jn117 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jn118 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jn119 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.jn120 {
  display: flex;
  gap: 6px;
  color: var(--t-eef0f5,#eef0f5);
}

.jn121 {
  font-size: 18px;
  line-height: 1;
  display: block;
  opacity: .6;
}

.jn122 {
  font-size: 18px;
  line-height: 1;
  display: block;
}

.jn123 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jn124 {
  font-size: 13.5px;
  font-weight: 700;
}

.jn125 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jn126 {
  font-weight: 900;
}

.jn127 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jn128 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jn129 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jn130 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jnh1:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.06));
}
/* -- generated fi: end -- */

/* ==========================================================================
   22zz100. Icons · Font Awesome: classes generated from the handoff by
   _dev/icons_font_awesome_convert.py (jo1 …, joh hover, jof focus). The page
   reuses the .cb-page tokens of Cards · Basic; Font Awesome Free is
   self-hosted in assets/vendor/fontawesome.
   ========================================================================== */
@keyframes faShim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes faIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* -- generated fa: start -- */
.jo1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jo2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jo3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jo4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jo5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jo6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jo7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jo8 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jo9 {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.04));
}

.jo10 {
  height: 32px;
  padding: 0 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jo11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jo12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.jo13 {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-radius: 28px;
}

.jo14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jo15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jo16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jo17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jo18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jo19 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.jo20 {
  flex: 1 1 560px;
  min-width: 0;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jo21 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.jo22 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 200px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
}

.jo23 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 14px;
}

.jo24 {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.jo25 {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-8a8f9e,#8a8f9e);
}

.jo26 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-a7abb8,#a7abb8);
}

.jo27 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jo28 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jo29 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jo30 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(92px,100%),1fr));
  gap: 8px;
}

.jo31 {
  aspect-ratio: 1;
  border-radius: 14px;
  background: linear-gradient(90deg,var(--w03,rgba(255,255,255,.03)) 25%,var(--w07,rgba(255,255,255,.08)) 50%,var(--w03,rgba(255,255,255,.03)) 75%);
  background-size: 200% 100%;
  animation: faShim 1.2s linear infinite;
}

.jo32 {
  padding: 30px;
  text-align: center;
  font-size: 13px;
  color: var(--t-a7abb8,#a7abb8);
}

.jo33 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jo34 {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 14px;
  font-family: inherit;
  cursor: pointer;
  min-width: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jo35 {
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: center;
}

.jo36 {
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t-a7abb8,#a7abb8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jo37 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 10px;
  text-align: center;
}

.jo38 {
  font-size: 36px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jo39 {
  font-size: 14px;
  font-weight: 700;
}

.jo40 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: center;
}

.jo41 {
  flex: 1 1 280px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 16px;
}

.jo42 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jo43 {
  font-size: 15px;
  font-weight: 700;
}

.jo44 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jo45 {
  flex: 1 1 auto;
  height: 28px;
  padding: 0 9px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jo46 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.jo47 {
  flex: 1;
}

.jo48 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
}

.jo49 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jo50 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: faIn .2s ease;
}

.jo51 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jo52 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.jo53 {
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jo54 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jo55 {
  height: 150px;
  border-radius: 18px;
  background: repeating-linear-gradient(0deg,var(--w04,rgba(255,255,255,.04)) 0 1px,transparent 1px 20px),repeating-linear-gradient(90deg,var(--w04,rgba(255,255,255,.04)) 0 1px,transparent 1px 20px),var(--b-151821,#151821);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jo56 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
}

.jo57 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.jo58 {
  font-size: 10px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jo59 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
}

.jo60 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 36px;
}

.jo61 {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--t-a7abb8,#a7abb8);
  white-space: pre-wrap;
  word-break: break-all;
}

.jo62 {
  border-radius: 20px;
  border: 1.5px dashed var(--w10,rgba(255,255,255,.16));
  padding: 22px;
  text-align: center;
  font-size: 12.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.jo63 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  padding: 0 4px;
}

.jo64 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: start;
}

.jo65 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.jo66 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jo67 {
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.jo68 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jo69 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jo70 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 19px;
}

.jo71 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jo72 {
  font-size: 13.5px;
  font-weight: 700;
}

.jo73 {
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jo74 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  min-width: 104px;
}

.jo75 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jo76 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 64px;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.jo77 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform .15s;
}

.jo78 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 30px;
}

.jo79 {
  transition: opacity .2s;
}

.jo80 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
}

.jo81 {
  font-size: 24px;
  width: 30px;
  text-align: center;
}

.jo82 {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 14px;
  letter-spacing: .06em;
  outline: none;
}

.jo83 {
  font-size: 11px;
  font-weight: 800;
}

.jo84 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jo85 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.jo86 {
  font-size: 18px;
}

.jo87 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  background: var(--b-151821,#151821);
}

.jo88 {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.jo89 {
  display: flex;
  gap: 6px;
}

.jo90 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: color .15s,background .15s;
  text-decoration: none;
}

.jo91 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: start;
}

.jo92 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
}

.jo93 {
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.jo94 {
  font-size: 24px;
}

.jo95 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 9.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jo96 {
  height: 120px;
  border-radius: 16px;
  background: var(--b-151821,#151821);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  color: var(--t-9adbe6,#9adbe6);
}

.jo97 {
  font-size: 44px;
  transition: transform .3s;
}

.jo98 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-a7abb8,#a7abb8);
}

.jo99 {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}

.jo100 {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jo101 {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jo102 {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-size: 18px;
  cursor: pointer;
  font-weight: 400;
}

.jo103 {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
}

.jo104 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.jo105 {
  margin: 0 0 0 2em;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jo106 {
  position: relative;
}

.jo107 {
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: inherit;
  text-align: left;
  cursor: pointer;
}

.jo108 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jo109 {
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jo110 {
  font-size: 15px;
  font-weight: 700;
  padding-bottom: 4px;
}

.jo111 {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jo112 {
  color: var(--t-9adbe6,#9adbe6);
  width: 18px;
  text-align: center;
  padding-top: 2px;
}

.jo113 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jo114 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jo115 {
  font-weight: 900;
}

.jo116 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jo117 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jo118 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jo119 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.joh1:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.06));
}

.joh2:not(:disabled):hover {
  transform: translateY(-2px);
}
/* -- generated fa: end -- */

/* ==========================================================================
   22zz101. Form Elements · Inputs: classes generated from the handoff by
   _dev/form_inputs_convert.py (jp1 …, jph hover, jpf focus). The page reuses
   the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes fiSpin { to { transform: rotate(360deg); } }
.ufin-page input::placeholder,
.ufin-page textarea::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
.ufin-page input[type=search]::-webkit-search-cancel-button { display: none; }

/* -- generated fin: start -- */
.jp1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jp2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jp3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jp4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jp5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jp6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.jp7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jp8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jp9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.jp10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jp11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jp12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jp13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.jp14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jp15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jp16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jp17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jp18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jp19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 16px;
  align-items: stretch;
}

.jp20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.jp21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.jp22 {
  font-size: 12px;
  font-weight: 800;
}

.jp23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jp24 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 28px;
  min-height: 280px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jp25 {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jp26 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
}

.jp27 {
  display: flex;
  gap: 8px;
  transition: border-color .15s,box-shadow .15s;
  min-width: 0;
  position: relative;
}

.jp28 {
  display: flex;
}

.jp29 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.jp30 {
  position: absolute;
  line-height: 20px;
  font-weight: 600;
  pointer-events: none;
  transition: top .15s,font-size .15s,color .15s;
}

.jp31 {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
}

.jp32 {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 92px;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  line-height: 1.5;
  padding: 0;
  resize: vertical;
}

.jp33 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-a7abb8,#a7abb8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jp34 {
  flex-shrink: 0;
  color: currentColor;
}

.jp35 {
  width: 30px;
  height: 30px;
  margin-right: -6px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jp36 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 16px;
}

.jp37 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.jp38 {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.jp39 {
  display: flex;
  margin-top: 1px;
}

.jp40 {
  font-size: 12px;
  line-height: 1.35;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jp41 {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.jp42 {
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jp43 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-bottom: 2px;
}

.jp44 {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.55;
}

.jp45 {
  overflow-wrap: anywhere;
}

.jp46 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jp47 {
  font-size: 15px;
  font-weight: 700;
}

.jp48 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jp49 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.jp50 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(150px,100%),1fr));
  gap: 10px 18px;
  padding: 4px 0;
}

.jp51 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.jp52 {
  flex: 1;
}

.jp53 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.jp54 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jp55 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.jp56 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.jp57 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.jp58 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jp59 {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jp60 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap: 18px;
  align-items: start;
}

.jp61 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.jp62 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jp63 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.jp64 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.jp65 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.jp66 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  transition: border-color .15s,box-shadow .15s;
  min-width: 0;
  position: relative;
}

.jp67 {
  flex-shrink: 0;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jp68 {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  padding: 0;
}

.jp69 {
  flex-shrink: 0;
}

.jp70 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}

.jp71 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  transition: border-color .15s,box-shadow .15s;
  min-width: 0;
  position: relative;
}

.jp72 {
  width: 36px;
  height: calc(100% - 8px);
  border-radius: 10px;
  border: none;
  background: var(--w05,rgba(255,255,255,.06));
  color: var(--t-eef0f5,#eef0f5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jp73 {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  padding: 0;
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.jp74 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jp75 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-8a8f9e,#8a8f9e);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.jp76 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,140px),1fr));
  gap: 12px;
}

.jp77 {
  position: absolute;
  left: 13px;
  line-height: 20px;
  font-weight: 600;
  pointer-events: none;
  transition: top .15s,font-size .15s,color .15s;
}

.jp78 {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  padding: 15px 0 0;
}

.jp79 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px 14px;
  align-items: center;
}

.jp80 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: start;
  margin-top: 13px;
}

.jp81 {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: 10px;
  border-right: 1px solid var(--w08,rgba(255,255,255,.1));
  font-size: 13.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  flex-shrink: 0;
}

.jp82 {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-left: 10px;
  border-left: 1px solid var(--w08,rgba(255,255,255,.1));
  font-size: 13.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  flex-shrink: 0;
}

.jp83 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jp84 {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.jp85 {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  padding: 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12.5px;
}

.jp86 {
  height: calc(100% - 10px);
  padding: 0 14px;
  margin-right: -7px;
  border-radius: 10px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.jp87 {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  padding: 0;
  letter-spacing: .08em;
  font-weight: 700;
}

.jp88 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: fiSpin .7s linear infinite;
}

.jp89 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  height: auto;
  padding: 11px 12px;
  transition: border-color .15s,box-shadow .15s;
  min-width: 0;
  position: relative;
}

.jp90 {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 21px;
  padding: 0;
  resize: none;
  transition: height .12s;
}

.jp91 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.jp92 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap: 16px;
}

.jp93 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jp94 {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  padding: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

.jp95 {
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.jp96 {
  display: flex;
  align-items: center;
}

.jp97 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jp98 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 6px 8px;
  flex-wrap: wrap;
  transition: border-color .15s,box-shadow .15s;
  min-width: 0;
  position: relative;
  cursor: text;
}

.jp99 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 3px 0 4px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  max-width: 100%;
}

.jp100 {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0 4px 0 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.jp101 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jp102 {
  flex: 1;
  min-width: 140px;
  height: 28px;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  padding: 0 4px;
}

.jp103 {
  display: flex;
  gap: 8px;
}

.jp104 {
  flex: 1;
  min-width: 0;
  max-width: 54px;
  height: 58px;
  padding: 0;
  text-align: center;
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  color: var(--t-eef0f5,#eef0f5);
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  outline: none;
  transition: border-color .15s,box-shadow .15s;
}

.jp105 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
}

.jp106 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.jp107 {
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 34px;
  font-size: 12.5px;
}

.jp108 {
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 34px;
  font-size: 12.5px;
}

.jp109 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  overflow-x: auto;
}

.jp110 {
  display: grid;
  grid-template-columns: 64px repeat(7,minmax(min(150px,100%),1fr));
  gap: 14px;
  align-items: center;
  min-width: 1200px;
}

.jp111 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jp112 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 10px;
}

.jp113 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.jp114 {
  font-size: 13px;
  font-weight: 800;
}

.jp115 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  line-height: 1.4;
}

.jp116 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.jp117 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jp118 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.jp119 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jp120 {
  flex: 1;
  min-width: 180px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--t-c9ccd6,#c9ccd6);
  text-wrap: pretty;
}

.jp121 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jp122 {
  display: flex;
  gap: 4px;
}

.jp123 {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  transition: background .2s;
}

.jp124 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.jp125 {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jp126 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px 12px;
}

.jp127 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  transition: color .2s;
}

.jp128 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 900;
}

.jp129 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--t-9adbe6,#9adbe6);
  border-right-color: transparent;
  animation: fiSpin .7s linear infinite;
  flex-shrink: 0;
}

.jp130 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.jp131 {
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jp132 {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.jp133 {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .2s,color .2s;
}

.jp134 {
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  background: var(--b-1b1f2a,#1b1f2a);
  box-shadow: 0 18px 40px rgba(0,0,0,.3);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jp135 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 10px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 13.5px;
}

.jp136 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jp137 {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jp138 {
  background: color-mix(in oklab, #9adbe6 30%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0;
}

.jp139 {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jp140 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  overflow-wrap: anywhere;
}

.jp141 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,500px),1fr));
  gap: 18px;
  align-items: start;
}

.jp142 {
  display: flex;
  align-items: center;
  gap: 14px;
}

.jp143 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg,#c4f0f6,#8fd3df);
  color: #0d0f15;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jp144 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.jp145 {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jp146 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jp147 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
  box-shadow: 0 0 8px #9adbe6;
}

.jp148 {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 21px;
  padding: 0;
  resize: vertical;
  min-height: 63px;
}

.jp149 {
  display: flex;
  gap: 12px;
}

.jp150 {
  flex: 1;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jp151 {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.jp152 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 10px 10px 16px;
  border-radius: 20px;
  background: var(--w04,rgba(255,255,255,.05));
  border: 1px solid var(--w10,rgba(255,255,255,.14));
}

.jp153 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.jp154 {
  font-size: 13.5px;
  font-weight: 700;
  flex: 1;
  min-width: 140px;
}

.jp155 {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jp156 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  justify-content: center;
}

.jp157 {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: fiSpin .7s linear infinite;
}

.jp158 {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.jp159 {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  overflow: hidden;
}

.jp160 {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) 74px;
  gap: 10px;
  padding: 10px 14px;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  background: var(--w02,rgba(255,255,255,.02));
}

.jp161 {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) 74px;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13.5px;
}

.jp162 {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jp163 {
  color: var(--t-c9ccd6,#c9ccd6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jp164 {
  justify-self: start;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.jp165 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 18px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  text-align: center;
}

.jp166 {
  font-size: 14.5px;
  font-weight: 700;
}

.jp167 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jp168 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.jp169 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 14px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jp170 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jp171 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9adbe6;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jp172 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  box-shadow: 0 0 0 4px color-mix(in oklab, oklch(0.72 0.14 35) 20%, transparent);
  background: var(--w03,rgba(255,255,255,.03));
}

.jp173 {
  font-size: 14.5px;
}

.jp174 {
  width: 1.5px;
  height: 18px;
  background: var(--t-eef0f5,#eef0f5);
}

.jp175 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.jp176 {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  gap: 10px;
  align-items: start;
}

.jp177 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jp178 {
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jp179 {
  color: var(--t-eef0f5,#eef0f5);
}

.jp180 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.jp181 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jp182 {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.jp183 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.jp184 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.jp185 {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.jp186 {
  display: grid;
  grid-template-columns: minmax(min(90px,100%),1fr) repeat(3,minmax(78px,auto));
  gap: 10px;
  padding: 0 0 8px;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  min-width: 380px;
}

.jp187 {
  display: grid;
  grid-template-columns: minmax(min(90px,100%),1fr) repeat(3,minmax(78px,auto));
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13px;
  align-items: center;
  min-width: 380px;
}

.jp188 {
  font-weight: 700;
}

.jp189 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jp190 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
}

.jp191 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 6%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 26%, transparent);
}

.jp192 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jp193 {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  font-size: 14.5px;
}

.jp194 {
  font-size: 12px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jp195 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 6%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 26%, transparent);
}

.jp196 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jp197 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jp198 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jp199 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jp200 {
  font-weight: 900;
}

.jp201 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jph1:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-eef0f5,#eef0f5);
}

.jph2:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jph3:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-eef0f5,#eef0f5);
}

.jph4:not(:disabled):hover {
  background: var(--w08,rgba(255,255,255,.1));
}

.jph5:not(:disabled):hover {
  background: var(--w08,rgba(255,255,255,.1));
}

.jph6:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jph7:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-eef0f5,#eef0f5);
}

.jph8:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jph9:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}
/* -- generated fin: end -- */

/* ==========================================================================
   22zz102. Form Elements · Selects: classes generated from the handoff by
   _dev/form_selects_convert.py (jq1 …, jqh hover, jqf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
@keyframes fsSpin { to { transform: rotate(360deg); } }
.ufs-page input::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
.ufs-page select option,
.ufs-page select optgroup { background: #1b1f2a; color: #eef0f5; }

/* -- generated fsel: start -- */
.jq1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jq2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jq3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jq4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jq5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jq6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.jq7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jq8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.jq10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jq11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jq12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jq13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.jq14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jq15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jq16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jq17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jq18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 16px;
  align-items: stretch;
}

.jq20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
}

.jq21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.jq22 {
  font-size: 12px;
  font-weight: 800;
}

.jq23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jq24 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 48px 28px 40px;
  min-height: 400px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

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

.jq26 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  position: relative;
}

.jq27 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

.jq28 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  transition: border-color .15s,box-shadow .15s;
  min-width: 0;
  position: relative;
}

.jq29 {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  padding: 0 40px 0 12px;
}

.jq30 {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
}

.jq31 {
  flex-shrink: 0;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq32 {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.jq33 {
  display: flex;
  margin-top: 1px;
}

.jq34 {
  flex-shrink: 0;
  color: currentColor;
}

.jq35 {
  font-size: 12px;
  line-height: 1.35;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq36 {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jq37 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  overflow: hidden;
  white-space: nowrap;
}

.jq38 {
  position: relative;
}

.jq39 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  transition: border-color .15s,box-shadow .15s;
  min-width: 0;
  position: relative;
  user-select: none;
  outline: none;
}

.jq40 {
  width: 24px;
  height: 24px;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}

.jq41 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.jq42 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.jq43 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 3px 0 9px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 160px;
}

.jq44 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.jq45 {
  overflow: hidden;
  text-overflow: ellipsis;
}

.jq46 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jq47 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  flex-shrink: 0;
}

.jq48 {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jq49 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-a7abb8,#a7abb8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jq50 {
  flex-shrink: 0;
  color: var(--t-8a8f9e,#8a8f9e);
  transition: transform .18s;
}

.jq51 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 4px 8px 4px 10px;
  flex-wrap: wrap;
  transition: border-color .15s,box-shadow .15s;
  min-width: 0;
  position: relative;
  cursor: text;
}

.jq52 {
  flex: 1;
  min-width: 90px;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  padding: 0;
}

.jq53 {
  border: none;
  background: transparent;
  padding: 4px;
  display: flex;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jq54 {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  background: var(--b-1b1f2a,#1b1f2a);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jq55 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border-radius: 11px;
  background: var(--w04,rgba(255,255,255,.05));
  flex-shrink: 0;
}

.jq56 {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  padding: 0;
}

.jq57 {
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  scrollbar-width: thin;
}

.jq58 {
  padding: 9px 10px 4px;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  flex-shrink: 0;
}

.jq59 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  flex-shrink: 0;
}

.jq60 {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jq61 {
  flex-shrink: 0;
  color: #11131a;
}

.jq62 {
  flex-shrink: 0;
  color: var(--t-9adbe6,#9adbe6);
}

.jq63 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

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

.jq65 {
  background: color-mix(in oklab, #9adbe6 30%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0;
}

.jq66 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jq67 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq68 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--t-9adbe6,#9adbe6);
  border-right-color: transparent;
  animation: fsSpin .7s linear infinite;
  flex-shrink: 0;
}

.jq69 {
  padding: 14px 10px;
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq70 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  flex-shrink: 0;
}

.jq71 {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jq72 {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq73 {
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jq74 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-bottom: 2px;
}

.jq75 {
  display: grid;
  grid-template-columns: 104px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.55;
}

.jq76 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq77 {
  overflow-wrap: anywhere;
}

.jq78 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jq79 {
  font-size: 15px;
  font-weight: 700;
}

.jq80 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jq81 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.jq82 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(150px,100%),1fr));
  gap: 10px 18px;
  padding: 4px 0;
}

.jq83 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.jq84 {
  flex: 1;
}

.jq85 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.jq86 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jq87 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.jq88 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.jq89 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.jq90 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jq91 {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jq92 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap: 18px;
  align-items: start;
}

.jq93 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.jq94 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jq95 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.jq96 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.jq97 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
}

.jq98 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
}

.jq99 {
  font-size: 12px;
  line-height: 1.45;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.jq100 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.jq101 {
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  transition: background .2s,color .2s;
}

.jq102 {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jq103 {
  flex: 1;
  height: 36px;
  border: none;
  border-radius: 11px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.jq104 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.jq105 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}

.jq106 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px;
  border-radius: 14px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  font-size: 13.3333px;
  font-weight: 400;
}

.jq107 {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.jq108 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jq109 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.jq110 {
  font-size: 13.5px;
  font-weight: 800;
}

.jq111 {
  font-size: 16px;
  font-weight: 800;
  padding-left: 24px;
}

.jq112 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  padding-left: 24px;
}

.jq113 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  overflow-x: auto;
}

.jq114 {
  display: grid;
  grid-template-columns: 64px repeat(8,minmax(min(150px,100%),1fr));
  gap: 14px;
  align-items: center;
  min-width: 1340px;
}

.jq115 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jq116 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  transition: border-color .15s,box-shadow .15s;
  min-width: 0;
  position: relative;
}

.jq117 {
  flex-shrink: 0;
}

.jq118 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.jq119 {
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  background: var(--b-1b1f2a,#1b1f2a);
  box-shadow: 0 18px 44px rgba(0,0,0,.25);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.jq120 {
  display: grid;
  grid-template-columns: minmax(0,1fr) 120px;
  gap: 10px;
  align-items: center;
}

.jq121 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13.5px;
}

.jq122 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq123 {
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq124 {
  display: flex;
  flex-direction: column;
}

.jq125 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
  line-height: 1.45;
}

.jq126 {
  font-weight: 800;
}

.jq127 {
  color: var(--t-c9ccd6,#c9ccd6);
}

.jq128 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.jq129 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jq130 {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 7px 12px;
  align-items: center;
}

.jq131 {
  display: flex;
  gap: 4px;
}

.jq132 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.jq133 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jq134 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 120px;
}

.jq135 {
  display: flex;
  align-items: center;
}

.jq136 {
  margin-left: auto;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: #6b7080;
}

.jq137 {
  display: grid;
  grid-template-columns: 86px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.5;
}

.jq138 {
  color: #9adbe6;
}

.jq139 {
  color: #c9ccd6;
  overflow-wrap: anywhere;
}

.jq140 {
  font-size: 12px;
  color: #6b7080;
}

.jq141 {
  position: relative;
  height: 300px;
  border-radius: 14px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.24));
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jq142 {
  position: absolute;
  right: 10px;
  top: 8px;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq143 {
  position: absolute;
  left: 16px;
  right: 16px;
  transition: top .25s;
}

.jq144 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  min-height: 16px;
}

.jq145 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jq146 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  transition: border-color .15s,box-shadow .15s;
  min-width: 0;
  position: relative;
  cursor: pointer;
  user-select: none;
  outline: none;
}

.jq147 {
  flex: 1;
  font-size: 14.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.jq148 {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  background: var(--b-1b1f2a,#1b1f2a);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jq149 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border-radius: 11px;
  background: var(--w04,rgba(255,255,255,.05));
}

.jq150 {
  position: relative;
  overflow-y: auto;
  scrollbar-width: thin;
}

.jq151 {
  position: absolute;
  left: 0;
  right: 0;
  height: 34px;
  display: flex;
  align-items: flex-end;
  padding: 0 10px 6px;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq152 {
  position: absolute;
  left: 0;
  right: 0;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 13.5px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.jq153 {
  width: 52px;
}

.jq154 {
  flex: 1;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq155 {
  position: absolute;
  left: 0;
  right: 8px;
  top: 0;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jq156 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq157 {
  display: flex;
  align-items: center;
  padding: 4px 6px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq158 {
  display: flex;
  justify-content: center;
}

.jq159 {
  position: relative;
  width: 300px;
  max-width: 100%;
  height: 520px;
  border-radius: 34px;
  border: 1.5px solid var(--w14,rgba(255,255,255,.24));
  background: var(--b-151821,#151821);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.jq160 {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}

.jq161 {
  width: 70px;
  height: 6px;
  border-radius: 999px;
  background: var(--w10,rgba(255,255,255,.14));
}

.jq162 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
}

.jq163 {
  font-size: 20px;
  font-weight: 800;
}

.jq164 {
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  display: flex;
  align-items: center;
  font-size: 15px;
}

.jq165 {
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.jq166 {
  position: absolute;
  inset: 0;
  background: rgba(5,6,10,.55);
  transition: opacity .25s;
}

.jq167 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 26px 26px 0 0;
  background: var(--b-1b1f2a,#1b1f2a);
  border-top: 1px solid var(--w10,rgba(255,255,255,.14));
  padding: 8px 10px 18px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jq168 {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}

.jq169 {
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: var(--w14,rgba(255,255,255,.24));
}

.jq170 {
  display: flex;
  align-items: center;
  padding: 0 8px 8px;
}

.jq171 {
  font-size: 16px;
  font-weight: 800;
}

.jq172 {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  padding: 6px;
}

.jq173 {
  height: 50px;
  padding: 0 12px;
  border: none;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}

.jq174 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jq175 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.jq176 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: center;
}

.jq177 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.jq178 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.jq179 {
  width: 190px;
  flex: 0 1 190px;
}

.jq180 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.jq181 {
  width: 170px;
  flex: 0 1 170px;
}

.jq182 {
  width: 180px;
  flex: 0 1 180px;
}

.jq183 {
  margin-left: auto;
  align-self: center;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.jq184 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.jq185 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 12%, transparent);
  border: 1px solid color-mix(in oklab, #9adbe6 35%, transparent);
  font-size: 12.5px;
  font-weight: 700;
}

.jq186 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-weight: 800;
}

.jq187 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jq188 {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.jq189 {
  min-width: 720px;
  display: flex;
  flex-direction: column;
}

.jq190 {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1.1fr) 120px minmax(0,1fr) 110px;
  gap: 12px;
  padding: 10px 16px;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  background: var(--w02,rgba(255,255,255,.02));
}

.jq191 {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1.1fr) 120px minmax(0,1fr) 110px;
  gap: 12px;
  align-items: center;
  padding: 11px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13.5px;
}

.jq192 {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jq193 {
  color: var(--t-c9ccd6,#c9ccd6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jq194 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}

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

.jq196 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jq197 {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.jq198 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 18px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  text-align: center;
}

.jq199 {
  font-size: 14.5px;
  font-weight: 700;
}

.jq200 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq201 {
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 34px;
  font-size: 12.5px;
}

.jq202 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,460px),1fr));
  gap: 18px;
  align-items: start;
}

.jq203 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.jq204 {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14.5px;
  padding: 0;
}

.jq205 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap: 16px;
}

.jq206 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jq207 {
  flex: 1;
  min-width: 160px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq208 {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jq209 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jq210 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 14px;
  border-radius: 16px;
  border: 1.5px dashed var(--w10,rgba(255,255,255,.14));
  text-align: center;
}

.jq211 {
  font-size: 14px;
  font-weight: 700;
}

.jq212 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.jq213 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jq214 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.jq215 {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jq216 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.jq217 {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  align-items: start;
}

.jq218 {
  font-size: 13px;
  font-weight: 800;
}

.jq219 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jq220 {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.jq221 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 14px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jq222 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jq223 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9adbe6;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jq224 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1.5px solid var(--t-9adbe6,#9adbe6);
  box-shadow: 0 0 0 4px color-mix(in oklab, #9adbe6 22%, transparent);
  background: var(--w03,rgba(255,255,255,.03));
}

.jq225 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #9adbe6;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jq226 {
  flex: 1;
  font-size: 14.5px;
  font-weight: 700;
}

.jq227 {
  color: var(--t-8a8f9e,#8a8f9e);
  transform: rotate(180deg);
}

.jq228 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.jq229 {
  flex: 1;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  background: var(--b-1b1f2a,#1b1f2a);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.jq230 {
  padding: 6px 10px 4px;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jq231 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--t-9adbe6,#9adbe6);
  font-size: 13.5px;
  font-weight: 800;
}

.jq232 {
  margin-left: auto;
  display: flex;
}

.jq233 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--w06,rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px var(--w10,rgba(255,255,255,.14));
  font-size: 13.5px;
  font-weight: 600;
}

.jq234 {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  gap: 10px;
  align-items: start;
}

.jq235 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jq236 {
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jq237 {
  color: var(--t-eef0f5,#eef0f5);
}

.jq238 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.jq239 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jq240 {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.jq241 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.jq242 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.jq243 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jq244 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jq245 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jq246 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jq247 {
  font-weight: 900;
}

.jq248 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jqh1:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh2:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh3:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh4:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh5:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh6:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh7:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh8:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh9:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh10:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh11:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh12:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh13:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh14:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh15:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh16:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh17:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh18:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh19:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh20:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}

.jqh21:not(:disabled):hover {
  background: var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
}
/* -- generated fsel: end -- */

/* ==========================================================================
   22zz103. Form Elements · Checkboxes & Radios: classes generated from the
   handoff by _dev/form_checkboxes_convert.py (jr1 …, jrh hover, jrf focus).
   The page reuses the .cb-page tokens of Cards · Basic. Each box is a real
   input made transparent on top of its skin.
   ========================================================================== */
.ufc-page input::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ufc-page [data-fcanim] { transition: none !important; }
}

/* -- generated fcb: start -- */
.jr1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jr2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jr3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jr4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jr5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jr6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.jr7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jr8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.jr10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jr11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jr12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jr13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.jr14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jr15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jr16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jr17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jr18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 16px;
  align-items: stretch;
}

.jr20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.jr21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.jr22 {
  font-size: 12px;
  font-weight: 800;
}

.jr23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jr24 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  min-height: 300px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jr25 {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jr26 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 12px;
  min-width: 0;
  transition: background .15s;
}

.jr27 {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.jr28 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
  z-index: 1;
}

.jr29 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.jr30 {
  position: absolute;
}

.jr31 {
  stroke-dasharray: 1;
}

.jr32 {
  position: absolute;
  height: 2.2px;
  border-radius: 2px;
  background: #11131a;
}

.jr33 {
  position: absolute;
  border-radius: 50%;
}

.jr34 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.jr35 {
  font-weight: 700;
  transition: color .2s;
}

.jr36 {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr37 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jr38 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr39 {
  display: flex;
  flex-direction: column;
}

.jr40 {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.jr41 {
  display: flex;
  margin-top: 1px;
}

.jr42 {
  flex-shrink: 0;
  color: currentColor;
}

.jr43 {
  font-size: 12px;
  line-height: 1.35;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr44 {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.jr45 {
  padding: 0;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
}

.jr46 {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.jr47 {
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jr48 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-bottom: 2px;
}

.jr49 {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.55;
}

.jr50 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr51 {
  overflow-wrap: anywhere;
}

.jr52 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jr53 {
  font-size: 15px;
  font-weight: 700;
}

.jr54 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jr55 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.jr56 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(150px,100%),1fr));
  gap: 10px 18px;
}

.jr57 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.jr58 {
  flex: 1;
}

.jr59 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.jr60 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jr61 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.jr62 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.jr63 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.jr64 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jr65 {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jr66 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap: 18px;
  align-items: start;
}

.jr67 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.jr68 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jr69 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.jr70 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.jr71 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.jr72 {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.jr73 {
  color: var(--t-9adbe6,#9adbe6);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jr74 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jr75 {
  font-size: 12px;
  line-height: 1.45;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.jr76 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jr77 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jr78 {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr79 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 9px;
  padding-left: 19px;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.jr80 {
  display: flex;
  align-items: center;
}

.jr81 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr82 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,140px),1fr));
  gap: 10px;
}

.jr83 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .15s,background .15s,box-shadow .15s;
  min-width: 0;
}

.jr84 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.jr85 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.jr86 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jr87 {
  font-size: 14px;
  font-weight: 800;
}

.jr88 {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 20%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
}

.jr89 {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jr90 {
  font-size: 12px;
  font-weight: 600;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr91 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jr92 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr93 {
  margin-left: auto;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jr94 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr95 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,120px),1fr));
  gap: 10px;
}

.jr96 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jr97 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s,border-color .15s,padding .15s;
}

.jr98 {
  font-size: 11.5px;
  font-weight: 800;
  opacity: .7;
}

.jr99 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
}

.jr100 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.jr101 {
  margin: 6px 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jr102 {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  transition: border-color .15s,box-shadow .15s;
}

.jr103 {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  padding: 0;
}

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

.jr105 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
}

.jr106 {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.jr107 {
  overflow-x: auto;
}

.jr108 {
  display: grid;
  grid-template-columns: 150px repeat(6,minmax(min(96px,100%),1fr));
  gap: 18px 14px;
  align-items: center;
  min-width: 780px;
  padding-top: 6px;
}

.jr109 {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jr110 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 10px;
}

.jr111 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.jr112 {
  font-size: 13px;
  font-weight: 800;
}

.jr113 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  line-height: 1.4;
}

.jr114 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.jr115 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jr116 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.jr117 {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 7px 12px;
  align-items: center;
}

.jr118 {
  display: flex;
}

.jr119 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.jr120 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jr121 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 110px;
}

.jr122 {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.5;
}

.jr123 {
  color: #9adbe6;
}

.jr124 {
  color: #c9ccd6;
  overflow-wrap: anywhere;
}

.jr125 {
  font-size: 12px;
  color: #6b7080;
}

.jr126 {
  padding: 14px;
  border-radius: 16px;
  transition: border-color .2s,background .2s;
}

.jr127 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,140px),1fr));
  gap: 2px 12px;
}

.jr128 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jr129 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jr130 {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}

.jr131 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 16px;
}

.jr132 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jr133 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 14px;
  background: #eef0f5;
  color: #11131a;
  font-size: 13px;
  font-weight: 700;
}

.jr134 {
  flex-shrink: 0;
  color: #2f8a55;
}

.jr135 {
  flex: 1;
  min-width: 0;
}

.jr136 {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: #11131a;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.jr137 {
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  font-size: 12.5px;
}

.jr138 {
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  font-size: 12.5px;
}

.jr139 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 180px;
}

.jr140 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  padding: 22px;
  border-radius: 16px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jr141 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jr142 {
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  font-size: 12.5px;
}

.jr143 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  overflow-wrap: anywhere;
}

.jr144 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.jr145 {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.jr146 {
  min-width: 560px;
  display: flex;
  flex-direction: column;
}

.jr147 {
  display: grid;
  grid-template-columns: minmax(0,1fr) repeat(3,110px);
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  background: var(--w02,rgba(255,255,255,.02));
}

.jr148 {
  padding: 0;
  font-weight: inherit;
  text-align: inherit;
  min-width: 0;
}

.jr149 {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr150 {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr151 {
  display: grid;
  grid-template-columns: minmax(0,1fr) repeat(3,110px);
  gap: 10px;
  align-items: center;
  padding: 11px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jr152 {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 0;
}

.jr153 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.jr154 {
  font-size: 13.5px;
  font-weight: 700;
}

.jr155 {
  padding: 0;
  font-weight: inherit;
  text-align: inherit;
  min-width: 0;
  display: flex;
}

.jr156 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 8px 8px 14px;
  border-radius: 16px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
}

.jr157 {
  font-size: 13.5px;
  font-weight: 800;
  flex: 1;
  min-width: 140px;
}

.jr158 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: rgba(17,19,26,.08);
  color: inherit;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.jr159 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: #b2482c;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.jr160 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.jr161 {
  min-width: 620px;
  display: flex;
  flex-direction: column;
}

.jr162 {
  display: grid;
  grid-template-columns: 28px minmax(0,1.6fr) 80px 80px minmax(0,1fr) 96px;
  gap: 12px;
  align-items: center;
  padding: 11px 16px;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  background: var(--w02,rgba(255,255,255,.02));
}

.jr163 {
  display: grid;
  grid-template-columns: 28px minmax(0,1.6fr) 80px 80px minmax(0,1fr) 96px;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13.5px;
  transition: background .15s;
}

.jr164 {
  padding: 0;
  font-weight: inherit;
  text-align: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.jr165 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jr166 {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jr167 {
  padding: 0;
  font-weight: inherit;
  text-align: inherit;
  min-width: 0;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jr168 {
  padding: 0;
  font-weight: inherit;
  text-align: inherit;
  min-width: 0;
  color: var(--t-c9ccd6,#c9ccd6);
  font-variant-numeric: tabular-nums;
}

.jr169 {
  padding: 0;
  font-weight: inherit;
  text-align: inherit;
  min-width: 0;
  color: var(--t-c9ccd6,#c9ccd6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jr170 {
  padding: 0;
  font-weight: inherit;
  text-align: inherit;
  min-width: 0;
  color: var(--t-8a8f9e,#8a8f9e);
  font-variant-numeric: tabular-nums;
}

.jr171 {
  display: block;
}

.jr172 {
  display: block;
  padding: 0;
}

.jr173 {
  padding: 28px;
  text-align: center;
  font-size: 13.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jr174 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.jr175 {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  overflow: hidden;
}

.jr176 {
  height: 100%;
  border-radius: 999px;
  transition: width .35s cubic-bezier(.2,.8,.2,1),background .3s;
}

.jr177 {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jr178 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 12%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 35%, transparent);
}

.jr179 {
  flex-shrink: 0;
}

.jr180 {
  flex: 1;
  font-size: 13.5px;
  font-weight: 800;
}

.jr181 {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jr182 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  align-items: start;
}

.jr183 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jr184 {
  font-size: 13px;
  font-weight: 700;
}

.jr185 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.jr186 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 14px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jr187 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jr188 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9adbe6;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jr189 {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #9adbe6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jr190 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.jr191 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.jr192 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jr193 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.jr194 {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  gap: 10px;
  align-items: start;
}

.jr195 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jr196 {
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jr197 {
  color: var(--t-eef0f5,#eef0f5);
}

.jr198 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.jr199 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jr200 {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.jr201 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.jr202 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.jr203 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 14px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jr204 {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--w14,rgba(255,255,255,.24));
}

.jr205 {
  position: absolute;
  inset: -13px;
}

.jr206 {
  font-size: 14px;
  font-weight: 700;
}

.jr207 {
  margin-left: auto;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
}

.jr208 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 10px;
  border-radius: 12px;
}

.jr209 {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #9adbe6;
}

.jr210 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jr211 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jr212 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jr213 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jr214 {
  font-weight: 900;
}

.jr215 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* -- generated fcb: end -- */

/* ==========================================================================
   22zz104. Form Elements · Custom Options: classes generated from the handoff
   by _dev/form_custom_options_convert.py (js1 …, jsh hover, jsf focus). The
   page reuses the .cb-page tokens of Cards · Basic. Each card is a label with
   a transparent native input covering it.
   ========================================================================== */
@keyframes coSpin { to { transform: rotate(360deg); } }
.ucop-page input::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ucop-page [data-coanim] { transition: none !important; }
}
/* Fixed 2 / 3 columns (playground, density) squeeze card text on a phone: one column there */
@media (max-width: 600px) {
  .ucop-page [data-co-cols] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Patterns: eleven cards on a grid left the second row one track short, so
   the row wraps instead and every row spans the full width (js76 is the
   generated name of that grid; re-check it after the converter runs). */
.ucop-page .js76 {
  display: flex;
  flex-wrap: wrap;
}

.ucop-page .js76 > * {
  flex: 1 1 330px;
  min-width: 0;
}

/* -- generated cop: start -- */
.js1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.js2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.js3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.js4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.js5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.js6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.js7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.js8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.js10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.js11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.js12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.js13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.js14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.js15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.js16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.js17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.js18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 16px;
  align-items: stretch;
}

.js20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.js21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.js22 {
  font-size: 12px;
  font-weight: 800;
}

.js23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.js24 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
  min-height: 320px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.js25 {
  width: 100%;
  max-width: 640px;
}

.js26 {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.js27 {
  padding: 0;
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
}

.js28 {
  display: grid;
  gap: 10px;
}

.js29 {
  position: relative;
  display: flex;
  border-radius: 16px;
  min-width: 0;
  transition: border-color .15s,background .15s,box-shadow .15s;
}

.js30 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
  z-index: 2;
}

.js31 {
  display: flex;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.js32 {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  transition: background .15s,border-color .15s;
}

.js33 {
  position: absolute;
  transition: opacity .1s;
}

.js34 {
  stroke-dasharray: 1;
  transition: stroke-dashoffset .26s cubic-bezier(.65,0,.35,1);
}

.js35 {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9adbe6;
  transition: transform .18s cubic-bezier(.3,1.5,.6,1);
}

.js36 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s,color .15s;
}

.js37 {
  display: block;
  width: 100%;
}

.js38 {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--w06,rgba(255,255,255,.06));
}

.js39 {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4/3;
  border-radius: 10px;
  background: repeating-linear-gradient(135deg,var(--w03,rgba(255,255,255,.03)) 0 8px,transparent 8px 16px),var(--w04,rgba(255,255,255,.04));
  border: 1px solid var(--w06,rgba(255,255,255,.06));
  padding: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js40 {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.js41 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.js42 {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.js43 {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.js44 {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js45 {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

.js46 {
  font-size: 12px;
  font-weight: 600;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js47 {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.js48 {
  display: flex;
  align-self: center;
  margin-left: 4px;
}

.js49 {
  flex-shrink: 0;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js50 {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
}

.js51 {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.js52 {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.js53 {
  display: flex;
  margin-top: 1px;
}

.js54 {
  flex-shrink: 0;
  color: currentColor;
}

.js55 {
  font-size: 12px;
  line-height: 1.35;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js56 {
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.js57 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-bottom: 2px;
}

.js58 {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.55;
}

.js59 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.js60 {
  overflow-wrap: anywhere;
}

.js61 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.js62 {
  font-size: 15px;
  font-weight: 700;
}

.js63 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.js64 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.js65 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(150px,100%),1fr));
  gap: 10px 18px;
}

.js66 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.js67 {
  flex: 1;
}

.js68 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.js69 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.js70 {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.js71 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.js72 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.js73 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.js74 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.js75 {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.js76 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap: 18px;
  align-items: start;
}

.js77 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.js78 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.js79 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.js80 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap: 10px;
}

.js81 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  width: 100%;
  min-width: 0;
}

.js82 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.js83 {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.js84 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,130px),1fr));
  gap: 10px;
}

.js85 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  width: 100%;
  min-width: 0;
}

.js86 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.js87 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s,color .15s;
}

.js88 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  width: 100%;
  min-width: 0;
}

.js89 {
  position: relative;
  display: block;
}

.js90 {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  padding: 3px;
  border-radius: 50%;
  background: var(--b-1b1f2a,#1b1f2a);
}

.js91 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 4px 4px;
}

.js92 {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.25;
}

.js93 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap: 10px;
}

.js94 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  width: 100%;
  min-width: 0;
}

.js95 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.js96 {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.js97 {
  margin-left: auto;
  display: flex;
}

.js98 {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
}

.js99 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.js100 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js101 {
  font-size: 12px;
  min-height: 16px;
}

.js102 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.js103 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  width: 100%;
  min-width: 0;
}

.js104 {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--w05,rgba(255,255,255,.06));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.js105 {
  color: var(--t-c9ccd6,#c9ccd6);
}

.js106 {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.js107 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.js108 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js109 {
  width: 46px;
  height: 30px;
  border-radius: 7px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.js110 {
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed var(--w14,rgba(255,255,255,.24));
}

.js111 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.js112 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
}

.js113 {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  font-variant-numeric: tabular-nums;
}

.js114 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.js115 {
  display: flex;
}

.js116 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
}

.js117 {
  font-size: 13px;
  font-weight: 800;
}

.js118 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap: 10px;
}

.js119 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
}

.js120 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.js121 {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.js122 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.js123 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.js124 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,74px),1fr));
  gap: 10px;
}

.js125 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  width: 100%;
}

.js126 {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .15s;
}

.js127 {
  flex-shrink: 0;
  color: #11131a;
}

.js128 {
  font-size: 12.5px;
  font-weight: 800;
}

.js129 {
  display: none;
}

.js130 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,120px),1fr));
  gap: 10px;
}

.js131 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  width: 100%;
}

.js132 {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 9px;
  background: var(--w04,rgba(255,255,255,.04));
}

.js133 {
  border-radius: 4px;
}

.js134 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.js135 {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.js136 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.js137 {
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  color: #11131a;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  transition: background .2s;
}

.js138 {
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  transition: all .2s;
}

.js139 {
  display: grid;
  grid-template-columns: repeat(11,minmax(0,1fr));
  gap: 4px;
}

.js140 {
  position: relative;
  display: flex;
  min-width: 0;
  transition: border-color .15s,background .15s,box-shadow .15s;
}

.js141 {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.js142 {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js143 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
}

.js144 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.js145 {
  font-size: 13.5px;
  font-weight: 700;
}

.js146 {
  display: flex;
  justify-content: center;
}

.js147 {
  width: 100%;
  max-width: 340px;
  padding: 12px;
  border-radius: 24px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--b-151821,#151821);
}

.js148 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
}

.js149 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.js150 {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  transition: border-color .15s,background .15s,box-shadow .15s;
}

.js151 {
  position: relative;
  display: flex;
  border-radius: 16px;
  min-width: 0;
  transition: border-color .15s,background .15s,box-shadow .15s;
  border: none;
  background: transparent;
  box-shadow: none;
}

.js152 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  width: 100%;
}

.js153 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.js154 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 14px 14px 46px;
}

.js155 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.js156 {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
}

.js157 {
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.js158 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.js159 {
  width: 16px;
  height: 16px;
  accent-color: #9adbe6;
  margin: 0;
}

.js160 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  overflow-x: auto;
}

.js161 {
  display: grid;
  grid-template-columns: 140px repeat(6,minmax(min(150px,100%),1fr));
  gap: 14px;
  align-items: center;
  min-width: 1100px;
}

.js162 {
  position: relative;
  display: flex;
  border-radius: 16px;
}

.js163 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  width: 100%;
}

.js164 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.js165 {
  font-size: 13.5px;
  font-weight: 800;
}

.js166 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 10px;
}

.js167 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.js168 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  line-height: 1.4;
}

.js169 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.js170 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,110px),1fr));
  gap: 10px;
}

.js171 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  width: 100%;
  min-width: 0;
}

.js172 {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.js173 {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 7px 12px;
  align-items: center;
}

.js174 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.js175 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.js176 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 96px;
}

.js177 {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.5;
}

.js178 {
  color: #9adbe6;
}

.js179 {
  color: #c9ccd6;
}

.js180 {
  font-size: 12px;
  color: #6b7080;
}

.js181 {
  display: flex;
  align-items: center;
}

.js182 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}

.js183 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.js184 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.js185 {
  font-size: 12.5px;
}

.js186 {
  position: relative;
  height: 330px;
  border-radius: 16px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  overflow: hidden;
}

.js187 {
  height: 100%;
  overflow-y: auto;
  padding: 12px 12px 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
}

.js188 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.js189 {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 16px;
  border-radius: 16px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}

.js190 {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 800;
}

.js191 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: rgba(17,19,26,.08);
  color: inherit;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.js192 {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #11131a;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.js193 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,480px),1fr));
  gap: 18px;
  align-items: start;
}

.js194 {
  display: flex;
  gap: 6px;
}

.js195 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.js196 {
  height: 4px;
  border-radius: 999px;
  transition: background .25s;
}

.js197 {
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.js198 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,140px),1fr));
  gap: 10px;
}

.js199 {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  overflow: hidden;
}

.js200 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.js201 {
  width: 110px;
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js202 {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
}

.js203 {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.js204 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  background: var(--w02,rgba(255,255,255,.02));
}

.js205 {
  flex: 1;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.js206 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.js207 {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}

.js208 {
  flex: 1;
  min-width: 120px;
  font-size: 12.5px;
}

.js209 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.js210 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}

.js211 {
  font-variant-numeric: tabular-nums;
}

.js212 {
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  height: 46px;
  font-size: 14.5px;
}

.js213 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: coSpin .7s linear infinite;
}

.js214 {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js215 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.js216 {
  display: flex;
  flex-direction: column;
}

.js217 {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  align-items: start;
}

.js218 {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.js219 {
  padding: 18px;
  border-radius: 14px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.js220 {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1.5px solid #9adbe6;
  box-shadow: inset 0 0 0 1px #9adbe6;
  background: color-mix(in oklab, #9adbe6 8%, transparent);
}

.js221 {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.js222 {
  font-size: 15px;
  font-weight: 800;
}

.js223 {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 20%, transparent);
  color: #9adbe6;
  font-size: 10.5px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
}

.js224 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #9adbe6;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.js225 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.js226 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 800;
  margin-top: 4px;
}

.js227 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.js228 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #9adbe6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.js229 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9adbe6;
}

.js230 {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #9adbe6;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.js231 {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  gap: 10px;
  align-items: start;
}

.js232 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.js233 {
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-c9ccd6,#c9ccd6);
}

.js234 {
  color: var(--t-eef0f5,#eef0f5);
}

.js235 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.js236 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.js237 {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.js238 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.js239 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.js240 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.js241 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.js242 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.js243 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.js244 {
  font-weight: 900;
}

.js245 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jsf1:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jsf2:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}
/* -- generated cop: end -- */

/* ==========================================================================
   22zz105. Form Elements · Editors: classes generated from the handoff by
   _dev/form_editors_convert.py (jt1 …, jth hover, jtf focus). The page reuses
   the .cb-page tokens of Cards · Basic. [data-ed] is a contenteditable editor:
   its content is written by the page script, so these rules style it.
   ========================================================================== */
@keyframes feSpin { to { transform: rotate(360deg); } }
.ufe-page input::placeholder,
.ufe-page textarea::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
.ufe-page [data-ed] h1 { font-size: 24px; line-height: 1.25; margin: .4em 0 .3em; font-weight: 800; letter-spacing: -.01em; }
.ufe-page [data-ed] h2 { font-size: 19px; line-height: 1.3; margin: .5em 0 .3em; font-weight: 800; }
.ufe-page [data-ed] h3 { font-size: 16px; margin: .5em 0 .2em; font-weight: 800; }
.ufe-page [data-ed] p { margin: 0 0 .55em; }
.ufe-page [data-ed] ul,
.ufe-page [data-ed] ol { margin: .3em 0 .6em; padding-left: 1.4em; }
.ufe-page [data-ed] li { margin: .15em 0; }
.ufe-page [data-ed] ul[data-check] { list-style: none; padding-left: 0; }
.ufe-page [data-ed] ul[data-check] li[data-done] { position: relative; padding-left: 26px; }
.ufe-page [data-ed] ul[data-check] li[data-done]::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 5px; border: 1.5px solid currentColor; opacity: .55; }
.ufe-page [data-ed] ul[data-check] li[data-done="true"] { opacity: .6; text-decoration: line-through; }
.ufe-page [data-ed] ul[data-check] li[data-done="true"]::before { background: #9adbe6; border: 1.5px solid #9adbe6; opacity: 1; }
.ufe-page [data-ed] blockquote { margin: .5em 0; padding: 4px 0 4px 14px; border-left: 3px solid #9adbe6; color: var(--t-c9ccd6, #c9ccd6); }
.ufe-page [data-ed] pre { margin: .5em 0; padding: 10px 12px; border-radius: 10px; background: #0b0c11; color: #c9ccd6; font: 12.5px/1.6 ui-monospace, Menlo, monospace; white-space: pre-wrap; }
.ufe-page [data-ed] code { padding: 1px 5px; border-radius: 5px; background: var(--w06, rgba(255, 255, 255, .08)); font: .88em ui-monospace, Menlo, monospace; }
.ufe-page [data-ed] a { color: #9adbe6; text-decoration: underline; text-underline-offset: 3px; }
.ufe-page [data-ed] hr { border: none; border-top: 1px solid var(--w14, rgba(255, 255, 255, .24)); margin: 1em 0; }
.ufe-page [data-ed] [data-m] { display: inline-flex; align-items: center; padding: 0 6px; border-radius: 6px; background: color-mix(in oklab, #9adbe6 18%, transparent); color: #9adbe6; font-weight: 700; white-space: nowrap; }
.ufe-page [data-ed] [data-tag] { display: inline-flex; padding: 0 6px; border-radius: 6px; background: color-mix(in oklab, oklch(0.84 0.13 75) 20%, transparent); color: oklch(0.84 0.13 75); font-weight: 700; white-space: nowrap; }
.ufe-page [data-ed] [data-var] { display: inline-flex; padding: 0 6px; border-radius: 6px; border: 1px dashed color-mix(in oklab, #9adbe6 55%, transparent); background: color-mix(in oklab, #9adbe6 12%, transparent); color: #9adbe6; font: 600 .85em ui-monospace, Menlo, monospace; white-space: nowrap; }
.ufe-page [data-ed] [data-file] { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--w14, rgba(255, 255, 255, .24)); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
/* The client's email preview shows paragraphs as a mail client does (1em apart) */
.ufe-page [data-xref="re.emPrev"] p { margin: 1em 0; }
.ufe-page [data-ed][contenteditable="true"]:empty::before { content: attr(data-ph); color: var(--t-6b7080, #6b7080); pointer-events: none; }

/* -- generated fed: start -- */
.jt1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jt2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jt3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jt4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jt5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jt6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.jt7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jt8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jt9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.jt10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jt11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jt12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jt13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.jt14 {
  display: contents;
}

.jt15 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jt16 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jt17 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jt18 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jt19 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jt20 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 16px;
  align-items: stretch;
}

.jt21 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.jt22 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.jt23 {
  font-size: 12px;
  font-weight: 800;
}

.jt24 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jt25 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px;
  min-height: 340px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jt26 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
}

.jt27 {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  transition: border-color .15s,box-shadow .15s;
  min-width: 0;
}

.jt28 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.07));
  background: var(--w02,rgba(255,255,255,.02));
  border-radius: 14px 14px 0 0;
}

.jt29 {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--w10,rgba(255,255,255,.14));
}

.jt30 {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  flex-shrink: 0;
  transition: background .12s,color .12s;
  font-size: 13.3333px;
  font-weight: 400;
}

.jt31 {
  font-size: 12.5px;
}

.jt32 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 4px;
}

.jt33 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.07));
  background: var(--w03,rgba(255,255,255,.03));
}

.jt34 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jt35 {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1.5px solid var(--t-9adbe6,#9adbe6);
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.jt36 {
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.jt37 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jt38 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jt39 {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.jt40 {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  outline: none;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--t-eef0f5,#eef0f5);
  overflow-wrap: anywhere;
}

.jt41 {
  position: absolute;
  z-index: 20;
  width: 240px;
  max-width: calc(100% - 16px);
  border-radius: 14px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  background: var(--b-1b1f2a,#1b1f2a);
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.jt42 {
  padding: 6px 8px 4px;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jt43 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 5px 8px;
  border-radius: 10px;
  cursor: pointer;
}

.jt44 {
  width: 28px;
  height: 28px;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jt45 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.jt46 {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jt47 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jt48 {
  padding: 10px 8px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jt49 {
  padding: 6px 8px 2px;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  margin-top: 2px;
}

.jt50 {
  position: absolute;
  z-index: 21;
  transform: translate(-50%,-100%);
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: #11131a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  --t-eef0f5: #eef0f5;
  --w06: rgba(255,255,255,.1);
}

.jt51 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  flex-wrap: wrap;
}

.jt52 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.jt53 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.jt54 {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.jt55 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  border-radius: 16px;
  overflow: hidden;
  background: var(--w03,rgba(255,255,255,.03));
}

.jt56 {
  border: none;
  border-right: 1px solid var(--w07,rgba(255,255,255,.07));
  padding: 14px 16px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12.5px;
  line-height: 1.65;
  outline: none;
  resize: vertical;
}

.jt57 {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  overflow: auto;
}

.jt58 {
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.6;
  outline: none;
  resize: vertical;
}

.jt59 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.jt60 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.jt61 {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.jt62 {
  display: flex;
  margin-top: 1px;
}

.jt63 {
  flex-shrink: 0;
  color: currentColor;
}

.jt64 {
  font-size: 12px;
  line-height: 1.35;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jt65 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-variant-numeric: tabular-nums;
}

.jt66 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jt67 {
  font-size: 15px;
  font-weight: 700;
}

.jt68 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jt69 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.jt70 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 180px;
}

.jt71 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jt72 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.jt73 {
  margin-left: auto;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: #6b7080;
}

.jt74 {
  margin: 0;
  flex: 1;
  max-height: 260px;
  overflow: auto;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: #c9ccd6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jt75 {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jt76 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 18px;
  align-items: start;
}

.jt77 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.jt78 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jt79 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.jt80 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.jt81 {
  transform: rotate(-90deg);
}

.jt82 {
  transition: stroke-dasharray .2s,stroke .2s;
}

.jt83 {
  font-weight: 800;
  min-width: 24px;
}

.jt84 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jt85 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  border-radius: 16px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  overflow: hidden;
  background: var(--w03,rgba(255,255,255,.03));
}

.jt86 {
  height: 300px;
  border: none;
  border-right: 1px solid var(--w07,rgba(255,255,255,.07));
  padding: 14px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  line-height: 1.65;
  outline: none;
  resize: none;
}

.jt87 {
  height: 300px;
  overflow: auto;
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.6;
}

.jt88 {
  color: var(--t-c9ccd6,#c9ccd6);
}

.jt89 {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  border-radius: 14px;
  background: #0b0c11;
  overflow: hidden;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12.5px;
  line-height: 20px;
  transition: border-color .15s,box-shadow .15s;
}

.jt90 {
  height: 260px;
  overflow: hidden;
  padding: 12px 10px 12px 0;
  text-align: right;
  color: #4b505e;
  user-select: none;
  border-right: 1px solid rgba(255,255,255,.06);
}

.jt91 {
  height: 20px;
}

.jt92 {
  position: relative;
  height: 260px;
}

.jt93 {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 12px 14px;
  overflow: hidden;
  white-space: pre;
  color: #c9ccd6;
  font: inherit;
  line-height: inherit;
  pointer-events: none;
}

.jt94 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 12px 14px;
  border: none;
  outline: none;
  resize: none;
  background: none;
  color: transparent;
  caret-color: #9adbe6;
  white-space: pre;
  overflow: auto;
  font: inherit;
  line-height: inherit;
  tab-size: 2;
}

.jt95 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jt96 {
  margin-left: auto;
}

.jt97 {
  font-weight: 800;
}

.jt98 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  overflow-x: auto;
}

.jt99 {
  display: grid;
  grid-template-columns: repeat(6,minmax(min(170px,100%),1fr));
  gap: 14px;
  min-width: 1080px;
}

.jt100 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jt101 {
  border-radius: 16px;
  overflow: hidden;
}

.jt102 {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--w07,rgba(255,255,255,.07));
  background: var(--w02,rgba(255,255,255,.02));
}

.jt103 {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

.jt104 {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-style: italic;
}

.jt105 {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-decoration: underline;
}

.jt106 {
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.jt107 {
  display: flex;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
}

.jt108 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.jt109 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.jt110 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.jt111 {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
}

.jt112 {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jt113 {
  display: flex;
  flex-direction: column;
}

.jt114 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
  line-height: 1.45;
}

.jt115 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px 14px;
}

.jt116 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jt117 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.jt118 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 96px;
}

.jt119 {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.5;
}

.jt120 {
  color: #9adbe6;
}

.jt121 {
  color: #c9ccd6;
  overflow-wrap: anywhere;
}

.jt122 {
  font-size: 12px;
  color: #6b7080;
}

.jt123 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jt124 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  font-size: 12.5px;
}

.jt125 {
  font-size: 12px;
}

.jt126 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px 14px;
}

.jt127 {
  min-width: 58px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--w05,rgba(255,255,255,.06));
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
}

.jt128 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.jt129 {
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  font-size: 12.5px;
}

.jt130 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.jt131 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jt132 {
  display: flex;
  gap: 10px;
}

.jt133 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jt134 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jt135 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.jt136 {
  font-size: 13.5px;
  font-weight: 800;
}

.jt137 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jt138 {
  margin-left: auto;
  display: flex;
}

.jt139 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jt140 {
  padding: 10px 12px;
  border-radius: 4px 14px 14px 14px;
  font-size: 13.5px;
  line-height: 1.55;
}

.jt141 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--t-9adbe6,#9adbe6);
}

.jt142 {
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  margin-left: auto;
}

.jt143 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.jt144 {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px dashed color-mix(in oklab, #9adbe6 50%, transparent);
  background: color-mix(in oklab, #9adbe6 10%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.jt145 {
  border-radius: 14px;
  background: #ffffff;
  color: #11131a;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jt146 {
  font-size: 14px;
  line-height: 1.6;
}

.jt147 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  align-items: start;
}

.jt148 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jt149 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jt150 {
  font-size: 13px;
  font-weight: 700;
}

.jt151 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.jt152 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jt153 {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.jt154 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.jt155 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.jt156 {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jt157 {
  font-weight: 900;
}

.jt158 {
  color: var(--t-eef0f5,#eef0f5);
}

.jt159 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jt160 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jt161 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jt162 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jt163 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* -- generated fed: end -- */

/* ==========================================================================
   22zz106. Form Elements · File Upload: classes generated from the handoff by
   _dev/form_file_upload_convert.py (ju1 …, juh hover, juf focus). The page
   reuses the .cb-page tokens of Cards · Basic. Each dropzone is a label
   around a visually hidden file input.
   ========================================================================== */
.ufu-page input::placeholder,
.ufu-page textarea::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }

/* -- generated fup: start -- */
.ju1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ju2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.ju3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.ju4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ju5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ju6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.ju7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ju8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.ju10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ju11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.ju12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ju13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.ju14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ju15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.ju16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ju17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.ju18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap: 16px;
  align-items: stretch;
}

.ju20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.ju21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.ju22 {
  font-size: 12px;
  font-weight: 800;
}

.ju23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ju24 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  min-height: 360px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.ju25 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ju26 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  text-align: center;
  transition: border-color .15s,background .15s,box-shadow .15s,transform .15s;
}

.ju27 {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.ju28 {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s,color .15s;
}

.ju29 {
  font-size: 14.5px;
  font-weight: 800;
}

.ju30 {
  color: var(--t-9adbe6,#9adbe6);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ju31 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.ju32 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ju33 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.ju34 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ju35 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.ju36 {
  flex-shrink: 0;
  color: currentColor;
}

.ju37 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju38 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ju39 {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.ju40 {
  flex-shrink: 0;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju41 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,6,10,.55);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.ju42 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ju43 {
  font-size: 14px;
  font-weight: 800;
}

.ju44 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.ju45 {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ju46 {
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  position: relative;
}

.ju47 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 8%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 32%, transparent);
}

.ju48 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ju49 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
}

.ju50 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju51 {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  font-size: 12px;
}

.ju52 {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ju53 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ju54 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ju55 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-c9ccd6,#c9ccd6);
  font-variant-numeric: tabular-nums;
}

.ju56 {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.ju57 {
  height: 100%;
  transition: width .2s linear;
}

.ju58 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  outline: none;
  transition: border-color .15s,opacity .2s;
}

.ju59 {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--w06,rgba(255,255,255,.08)) center/cover no-repeat;
  flex-shrink: 0;
}

.ju60 {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #11131a;
  font-size: 9.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ju61 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ju62 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.ju63 {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ju64 {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ju65 {
  height: 5px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.ju66 {
  height: 100%;
  border-radius: 999px;
  transition: width .2s linear,background .2s;
}

.ju67 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-variant-numeric: tabular-nums;
}

.ju68 {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.ju69 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.ju70 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.ju71 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ju72 {
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ju73 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-bottom: 2px;
}

.ju74 {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.55;
}

.ju75 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju76 {
  overflow-wrap: anywhere;
}

.ju77 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ju78 {
  font-size: 15px;
  font-weight: 700;
}

.ju79 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ju80 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.ju81 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.ju82 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.ju83 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.ju84 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ju85 {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ju86 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 18px;
  align-items: start;
}

.ju87 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ju88 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ju89 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ju90 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(96px,100%),1fr));
  gap: 8px;
}

.ju91 {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  cursor: grab;
  outline: none;
  transition: border-color .15s,opacity .15s;
}

.ju92 {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
}

.ju93 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #11131a;
}

.ju94 {
  position: absolute;
  left: 6px;
  top: 6px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #11131a;
  color: #9adbe6;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
}

.ju95 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(0,0,0,.4);
}

.ju96 {
  display: block;
  height: 100%;
  background: #9adbe6;
  transition: width .2s linear;
}

.ju97 {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(17,19,26,.75);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.ju98 {
  display: flex;
  gap: 8px;
}

.ju99 {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.ju100 {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid var(--w14,rgba(255,255,255,.24));
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ju101 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  padding: 0 20px;
  text-align: center;
}

.ju102 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 150px;
}

.ju103 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ju104 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ju105 {
  border-radius: 50%;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ju106 {
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju107 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ju108 {
  accent-color: #9adbe6;
}

.ju109 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
  cursor: pointer;
}

.ju110 {
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  font-size: 12.5px;
}

.ju111 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ju112 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
}

.ju113 {
  font-size: 13.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ju114 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ju115 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 4px 0 6px;
  border-radius: 10px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w04,rgba(255,255,255,.04));
  font-size: 12px;
  font-weight: 700;
  max-width: 240px;
}

.ju116 {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: #11131a;
  font-size: 8px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.ju118 {
  font-size: 11px;
  white-space: nowrap;
}

.ju119 {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.ju120 {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  padding-top: 10px;
}

.ju121 {
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  position: relative;
  cursor: pointer;
}

.ju122 {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju123 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 6px 0 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.ju124 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju125 {
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  position: relative;
  cursor: pointer;
}

.ju126 {
  font-size: 12px;
}

.ju127 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
  cursor: pointer;
  align-self: flex-start;
}

.ju128 {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  padding: 6px;
  max-height: 260px;
  overflow: auto;
}

.ju129 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding-right: 8px;
  font-size: 12.5px;
  border-radius: 8px;
}

.ju130 {
  flex-shrink: 0;
}

.ju131 {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ju132 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-variant-numeric: tabular-nums;
}

.ju133 {
  padding: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju134 {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju135 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}

.ju136 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju137 {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
}

.ju138 {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.ju139 {
  min-width: 420px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.ju140 {
  display: grid;
  grid-template-columns: 22px repeat(4,minmax(0,1fr));
  gap: 8px;
  padding: 7px 10px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  align-items: center;
}

.ju141 {
  font-weight: 900;
}

.ju142 {
  font-size: 12px;
  flex: 1;
}

.ju143 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  overflow-x: auto;
}

.ju144 {
  display: grid;
  grid-template-columns: repeat(6,minmax(min(150px,100%),1fr));
  gap: 12px;
  min-width: 960px;
}

.ju145 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 120px;
  border-radius: 16px;
  text-align: center;
  padding: 10px;
}

.ju146 {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ju147 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.ju148 {
  display: flex;
  flex-direction: column;
}

.ju149 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
  line-height: 1.45;
}

.ju150 {
  font-weight: 800;
}

.ju151 {
  color: var(--t-c9ccd6,#c9ccd6);
}

.ju152 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px 14px;
}

.ju153 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ju154 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: flex-end;
}

.ju155 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ju156 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ju157 {
  padding: 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  border-radius: 14px;
  border: 1px dashed var(--w10,rgba(255,255,255,.14));
}

.ju158 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ju159 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ju160 {
  color: var(--t-eef0f5,#eef0f5);
  font-weight: 800;
}

.ju161 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: start;
}

.ju162 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ju163 {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  outline: none;
  resize: vertical;
}

.ju164 {
  flex: 1;
  min-width: 140px;
  font-size: 12px;
}

.ju165 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ju166 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.ju167 {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.ju168 {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}

.ju169 {
  font-size: 22px;
  letter-spacing: .1em;
  font-weight: 600;
}

.ju170 {
  display: flex;
  gap: 6px;
}

.ju171 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}

.ju172 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
}

.ju173 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #eef0f5;
  overflow: hidden;
}

.ju174 {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.ju175 {
  font-size: 12.5px;
  font-weight: 800;
}

.ju176 {
  font-size: 10.5px;
  opacity: .6;
}

.ju177 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
}

.ju178 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.ju179 {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  align-items: start;
}

.ju180 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ju181 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ju182 {
  font-size: 13px;
  font-weight: 700;
}

.ju183 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.ju184 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ju185 {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.ju186 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.ju187 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.ju188 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 6%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 26%, transparent);
}

.ju189 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ju190 {
  font-size: 13.5px;
  font-weight: 700;
}

.ju191 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 6%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 26%, transparent);
}

.ju192 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.ju193 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ju194 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ju195 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ju196 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ju197 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.juh1:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.juh2:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.juh3:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.juh4:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.juh5:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.juh6:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.juh7:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.juh8:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.juf1:focus {
  box-shadow: 0 0 0 4px rgba(154,219,230,.25);
  border-color: #9adbe6;
}

.juf2:focus {
  box-shadow: 0 0 0 4px rgba(154,219,230,.25);
  border-color: #9adbe6;
}

.juf3:focus {
  box-shadow: 0 0 0 4px rgba(154,219,230,.3);
}

.juf4:focus {
  box-shadow: 0 0 0 4px rgba(154,219,230,.25);
  border-color: #9adbe6;
}

.juf5:focus {
  box-shadow: 0 0 0 4px rgba(154,219,230,.25);
  border-color: #9adbe6;
}

.juf6:focus {
  box-shadow: 0 0 0 4px rgba(154,219,230,.25);
  border-color: #9adbe6;
}

.juf7:focus {
  box-shadow: 0 0 0 4px rgba(154,219,230,.25);
  border-color: #9adbe6;
}

.juf8:focus {
  box-shadow: 0 0 0 4px rgba(154,219,230,.25);
  border-color: #9adbe6;
}

.juf9:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.juf10:focus {
  box-shadow: 0 0 0 4px rgba(154,219,230,.25);
  border-color: #9adbe6;
}
/* -- generated fup: end -- */

/* ==========================================================================
   22zz107. Form Elements · Date Pickers: classes generated from the handoff
   by _dev/form_date_pickers_convert.py (jv1 …, jvh hover, jvf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.udp-page input::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }

/* -- generated fdp: start -- */
.jv1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jv2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jv3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jv4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jv5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jv6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.jv7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jv8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jv9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.jv10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jv11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jv12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jv13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.jv14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jv15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jv16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jv17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jv18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jv19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap: 16px;
  align-items: stretch;
}

.jv20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
}

.jv21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.jv22 {
  font-size: 12px;
  font-weight: 800;
}

.jv23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jv24 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px 24px;
  min-height: 440px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jv25 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jv26 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.jv27 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
}

.jv28 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 12px;
  border-radius: 14px;
  transition: border-color .15s,box-shadow .15s;
}

.jv29 {
  flex-shrink: 0;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jv30 {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14.5px;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.jv31 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-a7abb8,#a7abb8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jv32 {
  flex-shrink: 0;
  color: currentColor;
}

.jv33 {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jv34 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jv35 {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.jv36 {
  display: flex;
  margin-top: 1px;
}

.jv37 {
  align-self: flex-start;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
  cursor: pointer;
  text-align: left;
}

.jv38 {
  font-size: 12px;
  line-height: 1.35;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jv39 {
  position: absolute;
  left: 0;
  z-index: 5;
  padding: 12px;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jv40 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.jv41 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.jv42 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  background: var(--w04,rgba(255,255,255,.05));
  color: var(--t-eef0f5,#eef0f5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jv43 {
  flex: 1;
  height: 30px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}

.jv44 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jv45 {
  display: grid;
  margin-bottom: 2px;
}

.jv46 {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--t-8a8f9e,#8a8f9e);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jv47 {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
}

.jv48 {
  display: grid;
}

.jv49 {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.jv50 {
  display: flex;
  justify-content: center;
}

.jv51 {
  position: relative;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 0;
  transition: background .1s;
}

.jv52 {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.jv53 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
}

.jv54 {
  height: 44px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
}

.jv55 {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  padding-top: 8px;
}

.jv56 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jv57 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jv58 {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 18px;
  background: var(--w02,rgba(255,255,255,.02));
  width: fit-content;
  max-width: 100%;
}

.jv59 {
  width: 170px;
}

.jv60 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

.jv61 {
  height: 34px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jv62 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jv63 {
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14.5px;
  outline: none;
}

.jv64 {
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jv65 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-bottom: 2px;
}

.jv66 {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.55;
}

.jv67 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.jv68 {
  overflow-wrap: anywhere;
}

.jv69 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jv70 {
  font-size: 15px;
  font-weight: 700;
}

.jv71 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.jv72 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.jv73 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.jv74 {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .2s;
}

.jv75 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}

.jv76 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
}

.jv77 {
  color: #6b7080;
}

.jv78 {
  color: #9adbe6;
  word-break: break-all;
}

.jv79 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.jv80 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.jv81 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.jv82 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jv83 {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jv84 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.jv85 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.jv86 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jv87 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.jv88 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jv89 {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-c9ccd6,#c9ccd6);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 400;
}

.jv90 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  grid-column: 1/-1;
}

.jv91 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.jv92 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.jv93 {
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.jv94 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.jv95 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jv96 {
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jv97 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jv98 {
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jv99 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.jv100 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

.jv101 {
  font-size: 13px;
  font-weight: 800;
}

.jv102 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 16px;
}

.jv103 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jv104 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jv105 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.jv106 {
  height: 200px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 64px;
  scrollbar-width: thin;
}

.jv107 {
  height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.jv108 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 120px;
}

.jv109 {
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  outline: none;
  font-variant-numeric: tabular-nums;
}

.jv110 {
  font-size: 12px;
}

.jv111 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jv112 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
}

.jv113 {
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jv114 {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
}

.jv115 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jv116 {
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14.5px;
  outline: none;
}

.jv117 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
}

.jv118 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.jv119 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 84px;
}

.jv120 {
  display: flex;
  justify-content: center;
  width: 84px;
}

.jv121 {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.jv122 {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f0c2b4;
}

.jv123 {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: center;
}

.jv124 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  overflow-x: auto;
}

.jv125 {
  display: grid;
  grid-template-columns: repeat(6,minmax(min(160px,100%),1fr));
  gap: 12px;
  min-width: 1000px;
}

.jv126 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
}

.jv127 {
  flex: 1;
  font-size: 13.5px;
}

.jv128 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 18px;
  align-items: start;
}

.jv129 {
  flex: 1;
  min-width: 180px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 7px 10px;
  align-content: start;
}

.jv130 {
  display: flex;
}

.jv131 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.jv132 {
  font-size: 12px;
  color: var(--t-c9ccd6,#c9ccd6);
  align-self: center;
}

.jv133 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 90px;
}

.jv134 {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
}

.jv135 {
  color: #9adbe6;
}

.jv136 {
  color: #c9ccd6;
}

.jv137 {
  font-size: 12px;
  color: #6b7080;
}

.jv138 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jv139 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jv140 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
}

.jv141 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.jv142 {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  overflow: hidden;
}

.jv143 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jv144 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.jv145 {
  font-size: 13.5px;
  font-weight: 800;
}

.jv146 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.jv147 {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jv148 {
  font-size: 11.5px;
  font-weight: 700;
}

.jv149 {
  font-family: ui-monospace,Menlo,monospace;
  color: var(--t-9adbe6,#9adbe6);
}

.jv150 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.jv151 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap: 14px;
}

.jv152 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
}

.jv153 {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jv154 {
  display: flex;
  flex-direction: column;
}

.jv155 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.jv156 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.jv157 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.jv158 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.jv159 {
  font-size: 10px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jv160 {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jv161 {
  font-size: 11.5px;
  font-weight: 800;
}

.jv162 {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jv163 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jv164 {
  flex-shrink: 0;
  color: var(--t-9adbe6,#9adbe6);
}

.jv165 {
  flex: 1;
  min-width: 160px;
  font-size: 13.5px;
  font-weight: 800;
}

.jv166 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jv167 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.jv168 {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  align-items: start;
}

.jv169 {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.jv170 {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
  align-items: baseline;
}

.jv171 {
  font-weight: 800;
}

.jv172 {
  font-family: ui-monospace,Menlo,monospace;
}

.jv173 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.jv174 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jv175 {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.jv176 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.jv177 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.jv178 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jv179 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jv180 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jv181 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jv182 {
  font-weight: 900;
}

.jv183 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jvh1:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh2:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh3:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh4:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh5:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh6:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh7:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh8:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh9:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh10:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh11:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh12:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh13:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh14:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh15:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh16:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh17:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh18:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh19:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh20:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh21:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh22:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh23:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh24:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh25:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh26:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh27:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh28:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh29:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh30:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh31:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh32:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh33:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh34:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvh35:not(:disabled):hover {
  background: var(--w04,rgba(255,255,255,.05));
}

.jvh36:not(:disabled):hover {
  filter: brightness(1.15);
}

.jvf1:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf2:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf3:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf4:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf5:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf6:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf7:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf8:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf9:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf10:focus {
  box-shadow: 0 0 0 4px rgba(154,219,230,.22);
}

.jvf11:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf12:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf13:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jvf14:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jvf15:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf16:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf17:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf18:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf19:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf20:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.jvf21:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}
/* -- generated fdp: end -- */

/* ==========================================================================
   22zz108. Form Elements · Sliders: classes generated from the handoff
   by _dev/form_sliders_convert.py (jw1 …, jwh hover, jwf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.usl-page input::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
/* On phones a mark within 12% of the last one ends at its tick instead of centring on it */
@media (max-width: 480px) {
  .usl-page [data-near] { translate: -50% 0; }
}

/* -- generated fsl: start -- */
.jw1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jw2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jw3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jw4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jw5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jw6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.jw7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jw8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jw9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.jw10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jw11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jw12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jw13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.jw14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jw15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jw16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jw17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jw18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jw19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap: 16px;
  align-items: stretch;
}

.jw20 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
}

.jw21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.jw22 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jw23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jw24 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 44px 28px;
  min-height: 300px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jw25 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.jw26 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
}

.jw27 {
  margin-left: auto;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--t-9adbe6,#9adbe6);
}

.jw28 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jw29 {
  position: relative;
  flex: 1 1 auto;
  flex-shrink: 0;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  touch-action: none;
}

.jw30 {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
}

.jw31 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.jw32 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
}

.jw33 {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
}

.jw34 {
  position: absolute;
  top: calc(100% - 2px);
  font-size: 11px;
  white-space: nowrap;
}

.jw35 {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  outline: none;
  transition: transform .12s,box-shadow .12s;
}

.jw36 {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  height: 24px;
  padding: 0 9px;
  border-radius: 8px;
  background: #11131a;
  color: #eef0f5;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.jw37 {
  display: flex;
  gap: 6px;
}

.jw38 {
  height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  outline: none;
  font-variant-numeric: tabular-nums;
}

.jw39 {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}

.jw40 {
  position: relative;
  width: 44px;
  touch-action: none;
}

.jw41 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
}

.jw42 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
}

.jw43 {
  position: absolute;
  left: 50%;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  transform: translate(-50%,50%);
}

.jw44 {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  outline: none;
  transition: transform .12s,box-shadow .12s;
}

.jw45 {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  padding: 0 9px;
  border-radius: 8px;
  background: #11131a;
  color: #eef0f5;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.jw46 {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jw47 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jw48 {
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jw49 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-bottom: 2px;
}

.jw50 {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.55;
}

.jw51 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.jw52 {
  overflow-wrap: anywhere;
}

.jw53 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jw54 {
  font-size: 15px;
  font-weight: 700;
}

.jw55 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jw56 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.jw57 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.jw58 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.jw59 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.jw60 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jw61 {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jw62 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.jw63 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.jw64 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jw65 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.jw66 {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 56px;
  padding: 0 10px;
}

.jw67 {
  flex: 1;
  border-radius: 3px 3px 0 0;
  transition: background .15s;
}

.jw68 {
  padding: 0 0;
}

.jw69 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jw70 {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jw71 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
}

.jw72 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.jw73 {
  font-size: 13px;
  font-weight: 800;
}

.jw74 {
  display: flex;
  gap: 14px;
  align-items: center;
}

.jw75 {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  flex-shrink: 0;
  background: repeating-conic-gradient(#888 0 25%,#ccc 0 50%) 0 0/12px 12px;
  position: relative;
  overflow: hidden;
}

.jw76 {
  position: absolute;
  inset: 0;
}

.jw77 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jw78 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 13px;
  font-weight: 700;
}

.jw79 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jw80 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.jw81 {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--t-9adbe6,#9adbe6);
}

.jw82 {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: var(--w05,rgba(255,255,255,.06));
  color: var(--t-eef0f5,#eef0f5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jw83 {
  flex-shrink: 0;
  color: currentColor;
}

.jw84 {
  flex-shrink: 0;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jw85 {
  width: 44px;
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jw86 {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 0;
}

.jw87 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.jw88 {
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jw89 {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jw90 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
}

.jw91 {
  font-size: 12px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jw92 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jw93 {
  margin-left: auto;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jw94 {
  width: 100%;
  accent-color: #9adbe6;
  height: 24px;
}

.jw95 {
  display: grid;
  gap: 4px;
}

.jw96 {
  height: 28px;
  border-radius: 6px;
  background: color-mix(in oklab, #9adbe6 20%, transparent);
}

.jw97 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  overflow-x: auto;
}

.jw98 {
  display: grid;
  grid-template-columns: repeat(6,minmax(min(140px,100%),1fr));
  gap: 16px;
  min-width: 900px;
}

.jw99 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jw100 {
  position: relative;
  height: 44px;
}

.jw101 {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--w10,rgba(255,255,255,.14));
}

.jw102 {
  position: absolute;
  left: 0;
  width: 60%;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
}

.jw103 {
  position: absolute;
  left: 60%;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.jw104 {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  height: 24px;
  padding: 0 9px;
  border-radius: 8px;
  background: #11131a;
  color: #eef0f5;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
}

.jw105 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 10px;
}

.jw106 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.jw107 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  line-height: 1.4;
}

.jw108 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 18px;
  align-items: start;
}

.jw109 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px 12px;
}

.jw110 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jw111 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.jw112 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 96px;
}

.jw113 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
}

.jw114 {
  color: #9adbe6;
}

.jw115 {
  color: #c9ccd6;
}

.jw116 {
  font-size: 12px;
  color: #6b7080;
}

.jw117 {
  font-size: 12px;
  font-weight: 700;
}

.jw118 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jw119 {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-c9ccd6,#c9ccd6);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 400;
}

.jw120 {
  height: 120px;
  border-radius: 16px;
  background: linear-gradient(135deg,#c4f0f6,#5d7c86 55%,#1b1f2a);
  display: flex;
  align-items: flex-end;
  padding: 12px;
  font-size: 12px;
  font-weight: 800;
  color: #11131a;
}

.jw121 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
}

.jw122 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.jw123 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.jw124 {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 48px;
  padding: 0 10px;
}

.jw125 {
  flex: 1;
  border-radius: 3px 3px 0 0;
}

.jw126 {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jw127 {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jw128 {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  overflow: hidden;
}

.jw129 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13px;
}

.jw130 {
  flex: 1;
  font-weight: 700;
}

.jw131 {
  width: 70px;
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jw132 {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.jw133 {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg,#c4f0f6,#5d7c86);
  flex-shrink: 0;
}

.jw134 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.jw135 {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jw136 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  grid-column: 1/-1;
}

.jw137 {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
}

.jw138 {
  transition: width .15s;
}

.jw139 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jw140 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.jw141 {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jw142 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.jw143 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.jw144 {
  display: flex;
  flex-direction: column;
}

.jw145 {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  align-items: start;
}

.jw146 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jw147 {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.jw148 {
  padding: 30px 18px 26px;
  border-radius: 14px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jw149 {
  position: absolute;
  left: 0;
  width: 62%;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #9adbe6;
}

.jw150 {
  position: absolute;
  left: 62%;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: #f2f3f6;
  border: 2px solid #9adbe6;
}

.jw151 {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #9adbe6;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%,-50%);
}

.jw152 {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  gap: 10px;
  align-items: start;
}

.jw153 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jw154 {
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jw155 {
  color: var(--t-eef0f5,#eef0f5);
}

.jw156 {
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.jw157 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jw158 {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.jw159 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.jw160 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.jw161 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jw162 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jw163 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jw164 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jw165 {
  font-weight: 900;
}

.jw166 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jwf1:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.22);
}

.jwf2:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.22);
}

.jwf3:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.22);
}

.jwf4:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.22);
}

.jwf5:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.22);
}
/* -- generated fsl: end -- */

/* ==========================================================================
   22zz109. Form Elements · Switches: classes generated from the handoff
   by _dev/form_switches_convert.py (jx1 …, jxh hover, jxf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.usw-page input::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }

/* -- generated fsw: start -- */
.jx1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jx2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jx3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jx4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jx5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jx6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.jx7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jx8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jx9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.jx10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jx11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jx12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jx13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.jx14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jx15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jx16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jx17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jx18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jx19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap: 16px;
  align-items: stretch;
}

.jx20 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
}

.jx21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.jx22 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jx23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jx24 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  min-height: 260px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jx25 {
  width: 100%;
  max-width: 400px;
}

.jx26 {
  display: flex;
  gap: 14px;
  border-radius: 14px;
  min-width: 0;
}

.jx27 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jx28 {
  font-weight: 700;
  line-height: 1.3;
}

.jx29 {
  font-size: 12.5px;
  line-height: 1.4;
}

.jx30 {
  position: relative;
  padding: 0;
  flex-shrink: 0;
  outline: none;
  font-family: inherit;
  touch-action: none;
  font-size: 13.3333px;
  font-weight: 400;
}

.jx31 {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
}

.jx32 {
  position: absolute;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jx33 {
  flex-shrink: 0;
}

.jx34 {
  flex-shrink: 0;
  color: #8a8f9e;
}

.jx35 {
  width: 45%;
  height: 2.5px;
  border-radius: 2px;
  background: #8a8f9e;
}

.jx36 {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  border: 2px solid #9adbe6;
  border-right-color: transparent;
  animation: swSpin .7s linear infinite;
}

.jx37 {
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jx38 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-bottom: 2px;
}

.jx39 {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.55;
}

.jx40 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.jx41 {
  overflow-wrap: anywhere;
}

.jx42 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jx43 {
  font-size: 15px;
  font-weight: 700;
}

.jx44 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jx45 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.jx46 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.jx47 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.jx48 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.jx49 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jx50 {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jx51 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.jx52 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.jx53 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jx54 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.jx55 {
  display: flex;
  flex-direction: column;
}

.jx56 {
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jx57 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
}

.jx58 {
  accent-color: #9adbe6;
  margin: 0;
}

.jx59 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
}

.jx60 {
  flex: 1;
}

.jx61 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jx62 {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: rgba(5,6,10,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.jx63 {
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jx64 {
  font-size: 15px;
  font-weight: 800;
}

.jx65 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.jx66 {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.jx67 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jx68 {
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  background: #b2482c;
  color: #fff;
}

.jx69 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jx70 {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.jx71 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap: 10px;
}

.jx72 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  transition: border-color .15s,background .15s;
}

.jx73 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jx74 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jx75 {
  font-size: 13.5px;
  font-weight: 800;
}

.jx76 {
  font-size: 13px;
  font-weight: 800;
}

.jx77 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jx78 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jx79 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  overflow-x: auto;
}

.jx80 {
  display: flex;
  align-items: center;
  gap: 14px;
}

.jx81 {
  display: grid;
  grid-template-columns: 70px repeat(7,minmax(min(80px,100%),1fr));
  gap: 16px 12px;
  align-items: center;
  min-width: 760px;
}

.jx82 {
  font-size: 12.5px;
  font-weight: 800;
}

.jx83 {
  display: flex;
}

.jx84 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 10px;
}

.jx85 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
}

.jx86 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  line-height: 1.4;
}

.jx87 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.jx88 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jx89 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.jx90 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 90px;
}

.jx91 {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
}

.jx92 {
  color: #9adbe6;
}

.jx93 {
  color: #c9ccd6;
}

.jx94 {
  font-size: 12px;
  color: #6b7080;
}

.jx95 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap: 14px;
}

.jx96 {
  font-size: 12px;
}

.jx97 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0;
}

.jx98 {
  width: 18px;
  height: 18px;
  accent-color: #9adbe6;
  margin: 0;
}

.jx99 {
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.jx100 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.jx101 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px;
  border-radius: 14px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jx102 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jx103 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jx104 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: start;
}

.jx105 {
  font-size: 11.5px;
  font-weight: 800;
}

.jx106 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jx107 {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jx108 {
  font-size: 14px;
  font-weight: 800;
}

.jx109 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jx110 {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-left: 2px;
}

.jx111 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jx112 {
  height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
}

.jx113 {
  font-size: 12.5px;
  font-weight: 700;
}

.jx114 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.jx115 {
  display: grid;
  grid-template-columns: 100px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jx116 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jx117 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jx118 {
  font-size: 13px;
  font-weight: 700;
}

.jx119 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13px;
}

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

.jx121 {
  font-weight: 700;
}

.jx122 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.jx123 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jx124 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.jx125 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.jx126 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.jx127 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jx128 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jx129 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jx130 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jx131 {
  font-weight: 900;
}

.jx132 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* -- generated fsw: end -- */

/* ==========================================================================
   22zz110. Form Elements · Extras: classes generated from the handoff
   by _dev/form_extras_convert.py (jy1 …, jyh hover, jyf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.ufx-page input::placeholder,
.ufx-page textarea::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
/* On phones the stars keep their size and the rating word drops below them */
@media (max-width: 480px) {
  .ufx-page [role="radiogroup"] { flex-wrap: wrap; }
  .ufx-page [role="group"]:has([data-fx-pin]) { flex-wrap: wrap; }
}

/* -- generated fex: start -- */
.jy1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jy2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jy3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jy4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jy5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jy6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.jy7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jy8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jy9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.jy10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jy11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jy12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jy13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.jy14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jy15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jy16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jy17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jy18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jy19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap: 16px;
  align-items: stretch;
}

.jy20 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
}

.jy21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.jy22 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jy23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jy24 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 40px 28px;
  min-height: 280px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.jy25 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: flex;
  align-items: center;
  gap: 6px;
}

.jy26 {
  display: inline-flex;
  align-items: center;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  width: fit-content;
}

.jy27 {
  height: 100%;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  font-size: 13.3333px;
  font-weight: 400;
}

.jy28 {
  flex-shrink: 0;
  color: currentColor;
}

.jy29 {
  height: 100%;
  border: none;
  border-left: 1px solid var(--w07,rgba(255,255,255,.08));
  border-right: 1px solid var(--w07,rgba(255,255,255,.08));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 800;
  text-align: center;
  outline: none;
  font-variant-numeric: tabular-nums;
}

.jy30 {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.jy31 {
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 4px;
  border-radius: 12px;
}

.jy32 {
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
  line-height: 1;
  font-family: system-ui;
  outline: none;
  transition: transform .12s;
  font-weight: 400;
}

.jy33 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jy34 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.jy35 {
  display: block;
  text-align: center;
}

.jy36 {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 800;
  min-width: 80px;
}

.jy37 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.jy38 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  cursor: text;
}

.jy39 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.jy40 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.jy41 {
  flex: 1;
  min-width: 110px;
  height: 28px;
  border: none;
  background: transparent;
  outline: none;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  padding: 0 4px;
}

.jy42 {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 6px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.jy43 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 13px;
  cursor: pointer;
}

.jy44 {
  color: var(--t-9adbe6,#9adbe6);
}

.jy45 {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jy46 {
  display: flex;
  gap: 8px;
}

.jy47 {
  text-align: center;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  outline: none;
}

.jy48 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  align-self: center;
}

.jy49 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jy50 {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--w14,rgba(255,255,255,.26));
}

.jy51 {
  width: 120px;
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 14px;
  outline: none;
}

.jy52 {
  font-size: 12px;
  font-weight: 800;
}

.jy53 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jy54 {
  padding: 12px 16px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.07));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jy55 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-bottom: 2px;
}

.jy56 {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.55;
}

.jy57 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.jy58 {
  overflow-wrap: anywhere;
}

.jy59 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jy60 {
  font-size: 15px;
  font-weight: 700;
}

.jy61 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jy62 {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.jy63 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.jy64 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.jy65 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jy66 {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jy67 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.jy68 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.jy69 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jy70 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.jy71 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.jy72 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.jy73 {
  font-size: 28px;
  font-weight: 800;
}

.jy74 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jy75 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.jy76 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.jy77 {
  width: 120px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 13.5px;
  outline: none;
}

.jy78 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}

.jy79 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.jy80 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jy81 {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid var(--w14,rgba(255,255,255,.26));
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.jy82 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 6px 0 12px;
  border-radius: 14px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
}

.jy83 {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jy84 {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.jy85 {
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.jy86 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 9%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 32%, transparent);
}

.jy87 {
  flex: 1;
  min-width: 160px;
  font-size: 12.5px;
  font-weight: 700;
}

.jy88 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jy89 {
  padding: 0 15px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  background: #b2482c;
  color: #fff;
  font-size: 12px;
}

.jy90 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jy91 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jy92 {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jy93 {
  display: flex;
  flex-direction: column;
}

.jy94 {
  display: grid;
  grid-template-columns: 100px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jy95 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jy96 {
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}

.jy97 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  margin-left: -10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: text;
  text-align: left;
}

.jy98 {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jy99 {
  font-size: 11px;
  font-weight: 800;
}

.jy100 {
  flex-shrink: 0;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jy101 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
}

.jy102 {
  accent-color: #9adbe6;
  margin: 0;
}

.jy103 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jy104 {
  position: relative;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  overflow: hidden;
}

.jy105 {
  display: block;
  width: 100%;
  height: 150px;
  touch-action: none;
  cursor: crosshair;
}

.jy106 {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 34px;
  border-bottom: 1px solid var(--w14,rgba(255,255,255,.26));
}

.jy107 {
  position: absolute;
  left: 24px;
  bottom: 42px;
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
  pointer-events: none;
}

.jy108 {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.jy109 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jy110 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  overflow-x: auto;
}

.jy111 {
  display: grid;
  grid-template-columns: 90px repeat(6,minmax(min(130px,100%),1fr));
  gap: 16px 12px;
  align-items: center;
  min-width: 960px;
}

.jy112 {
  font-size: 12.5px;
  font-weight: 800;
}

.jy113 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  width: fit-content;
  font-weight: 800;
}

.jy114 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.jy115 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  color: #c9ccd6;
}

.jy116 {
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
}

.jy117 {
  font-size: 15px;
  font-weight: 800;
}

.jy118 {
  font-size: 11.5px;
  font-weight: 800;
}

.jy119 {
  width: 52px;
  height: 56px;
  text-align: center;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  outline: none;
}

.jy120 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
}

.jy121 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: start;
}

.jy122 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jy123 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.jy124 {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  resize: vertical;
  outline: none;
}

.jy125 {
  flex: 1;
  font-size: 12px;
}

.jy126 {
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}

.jy127 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
}

.jy128 {
  width: 52px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

.jy129 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.jy130 {
  font-size: 13.5px;
  font-weight: 800;
}

.jy131 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jy132 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
}

.jy133 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap: 10px;
}

.jy134 {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.jy135 {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px dashed var(--w10,rgba(255,255,255,.16));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
}

.jy136 {
  height: 110px;
  border-radius: 16px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.26));
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-family: 'Brush Script MT','Segoe Script',cursive;
  font-size: 38px;
  color: var(--t-eef0f5,#eef0f5);
}

.jy137 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
}

.jy138 {
  accent-color: #9adbe6;
  margin: 2px 0 0;
}

.jy139 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.jy140 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jy141 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jy142 {
  font-size: 13px;
  font-weight: 700;
}

.jy143 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.jy144 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jy145 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.jy146 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.jy147 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.jy148 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jy149 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jy150 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jy151 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jy152 {
  font-weight: 900;
}

.jy153 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jyh1:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.jyf1:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.22);
}

.jyf2:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.22);
}

.jyf3:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}
/* -- generated fex: end -- */

/* ==========================================================================
   22zz111. Form Layouts · Vertical: classes generated from the handoff
   by _dev/layout_vertical_convert.py (jz1 …, jzh hover, jzf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.ulv-page input::placeholder,
.ulv-page textarea::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }

/* -- generated flv: start -- */
.jz1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.jz2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.jz3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.jz4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.jz5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.jz6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.jz7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jz8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jz9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.jz10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jz11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.jz12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jz13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.jz14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jz15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.jz16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jz17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.jz18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jz19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: start;
}

.jz20 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.jz21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.jz22 {
  font-size: 12px;
  font-weight: 800;
}

.jz23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.jz24 {
  display: flex;
  justify-content: center;
  padding: 28px 20px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  overflow-x: auto;
}

.jz25 {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: 20px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.jz26 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jz27 {
  font-size: 20px;
  font-weight: 800;
}

.jz28 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 9%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 35%, transparent);
  outline: none;
}

.jz29 {
  font-size: 13.5px;
  font-weight: 800;
}

.jz30 {
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jz31 {
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 10%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 35%, transparent);
  font-size: 13.5px;
  font-weight: 800;
}

.jz32 {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 16px;
}

.jz33 {
  padding: 0 4px;
  font-size: 14px;
  font-weight: 800;
}

.jz34 {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--t-8a8f9e,#8a8f9e);
  margin-top: 2px;
}

.jz35 {
  display: grid;
  gap: 16px 14px;
  clear: both;
}

.jz36 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.jz37 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jz38 {
  font-weight: 600;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jz39 {
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

.jz40 {
  padding: 0 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.jz41 {
  padding: 0 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  min-width: 0;
}

.jz42 {
  font-size: 12px;
  font-weight: 700;
}

.jz43 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jz44 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jz45 {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.jz46 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
}

.jz47 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: flSpin .7s linear infinite;
}

.jz48 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.jz49 {
  font-size: 15px;
  font-weight: 700;
}

.jz50 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jz51 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.jz52 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.jz53 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #c9ccd6;
}

.jz54 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.jz55 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.jz56 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jz57 {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.jz58 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 18px;
  align-items: start;
}

.jz59 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.jz60 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.jz61 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.jz62 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 360px;
}

.jz63 {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 16px 14px;
}

.jz64 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.jz65 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap: 16px 14px;
}

.jz66 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  grid-column: 1/-1;
}

.jz67 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.jz68 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jz69 {
  font-size: 14px;
  font-weight: 800;
}

.jz70 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  line-height: 1.45;
}

.jz71 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jz72 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  background: var(--w02,rgba(255,255,255,.02));
}

.jz73 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jz74 {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 800;
}

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

.jz76 {
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  font-size: 12.5px;
}

.jz77 {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  gap: 14px;
}

.jz78 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  align-self: start;
}

.jz79 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

.jz80 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jz81 {
  height: 300px;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  scrollbar-width: thin;
}

.jz82 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: 4px;
}

.jz83 {
  height: 120px;
}

.jz84 {
  display: flex;
  justify-content: center;
  padding: 18px;
  border-radius: 16px;
  background: rgba(5,6,10,.5);
}

.jz85 {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.jz86 {
  font-size: 16px;
  font-weight: 800;
}

.jz87 {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 12px;
}

.jz88 {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.jz89 {
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 36px;
}

.jz90 {
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
}

.jz91 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.jz92 {
  flex: 1;
  min-width: 200px;
}

.jz93 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.jz94 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.jz95 {
  width: 18px;
  height: 18px;
  accent-color: #9adbe6;
  margin: 0;
}

.jz96 {
  padding: 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border-left: 3px solid #9adbe6;
}

.jz97 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 14px;
}

.jz98 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
}

.jz99 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jz100 {
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 10%, transparent);
  font-size: 11.5px;
  font-weight: 800;
}

.jz101 {
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 10%, transparent);
  font-size: 11.5px;
  font-weight: 800;
}

.jz102 {
  height: 34px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.03));
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 12.5px;
}

.jz103 {
  height: 34px;
  border-radius: 10px;
  background: var(--w03,rgba(255,255,255,.03));
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jz104 {
  height: 34px;
  border-radius: 999px;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
}

.jz105 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  line-height: 1.4;
}

.jz106 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
}

.jz107 {
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
}

.jz108 {
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 34px;
}

.jz109 {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: rgba(5,6,10,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.jz110 {
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jz111 {
  font-size: 15px;
  font-weight: 800;
}

.jz112 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jz113 {
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  background: #b2482c;
  color: #fff;
}

.jz114 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jz115 {
  accent-color: #9adbe6;
}

.jz116 {
  overflow: hidden;
}

.jz117 {
  max-width: 100%;
  padding: 14px;
  border-radius: 16px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.26));
  transition: width .1s;
}

.jz118 {
  display: grid;
  gap: 12px;
}

.jz119 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.jz120 {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jz121 {
  padding: 0;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jz122 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap: 14px;
}

.jz123 {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 6px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jz124 {
  flex: 1;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.jz125 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
}

.jz126 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.jz127 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.jz128 {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jz129 {
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.jz130 {
  color: var(--t-eef0f5,#eef0f5);
}

.jz131 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.jz132 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.jz133 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.jz134 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.jz135 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.jz136 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jz137 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.jz138 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.jz139 {
  font-weight: 900;
}

.jz140 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jzf1:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf2:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf3:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf4:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf5:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf6:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf7:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf8:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf9:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf10:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf11:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf12:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf13:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf14:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf15:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf16:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf17:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf18:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf19:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf20:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf21:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf22:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf23:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf24:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf25:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf26:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf27:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf28:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf29:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf30:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf31:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf32:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf33:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf34:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf35:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf36:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf37:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf38:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf39:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf40:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf41:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.jzf42:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}
/* -- generated flv: end -- */

/* ==========================================================================
   22zz112. Form Layouts · Horizontal: classes generated from the handoff
   by _dev/layout_horizontal_convert.py (ki1 …, kih hover, kif focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.ulh-page input::placeholder,
.ulh-page textarea::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
/* Stack, don't squeeze: on phones every horizontal row puts its label above the field.
   The rows read these variables before their own column, gap and label values. */
@media (max-width: 600px) {
  .ulh-page {
    --fh-cols: minmax(0, 1fr);
    --fh-gap: 6px;
    --fh-lj: flex-start;
    --fh-ta: left;
    --fh-lh: auto;
    --fh-lpt: 0;
  }
  .ulh-page [data-fh-mx] { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* -- generated flh: start -- */
.ki1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ki2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.ki3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.ki4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ki5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ki6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.ki7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ki8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ki9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.ki10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ki11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.ki12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ki13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.ki14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ki15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.ki16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ki17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.ki18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ki19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 16px;
  align-items: start;
}

.ki20 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  grid-column: span 1;
}

.ki21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.ki22 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ki23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ki24 {
  padding: 14px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.ki25 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ki26 {
  accent-color: #9adbe6;
}

.ki27 {
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  overflow: hidden;
}

.ki28 {
  max-width: 100%;
  padding: 22px;
  border-radius: 20px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  transition: width .1s;
}

.ki29 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
}

.ki30 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 9%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 35%, transparent);
  outline: none;
}

.ki31 {
  font-size: 13.5px;
  font-weight: 800;
}

.ki32 {
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
}

.ki33 {
  display: grid;
}

.ki34 {
  display: flex;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.3;
}

.ki35 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ki36 {
  position: relative;
  display: flex;
  min-width: 0;
}

.ki37 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t-8a8f9e,#8a8f9e);
  pointer-events: none;
}

.ki38 {
  min-width: 0;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.ki39 {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  pointer-events: none;
}

.ki40 {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.ki41 {
  padding: 0 12px;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.ki42 {
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  outline: none;
}

.ki43 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ki44 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ki45 {
  min-width: 0;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ki46 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ki47 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 8px 0;
}

.ki48 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.ki49 {
  width: 16px;
  height: 16px;
  accent-color: #9adbe6;
  margin: 0;
}

.ki50 {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}

.ki51 {
  font-size: 12px;
  font-weight: 700;
}

.ki52 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ki53 {
  display: grid;
  padding-top: 14px;
}

.ki54 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.ki55 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ki56 {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ki57 {
  font-size: 12.5px;
  font-weight: 700;
}

.ki58 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ki59 {
  font-size: 15px;
  font-weight: 700;
}

.ki60 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ki61 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.ki62 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.ki63 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.ki64 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ki65 {
  align-self: flex-start;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.ki66 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: start;
}

.ki67 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.ki68 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ki69 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ki70 {
  display: flex;
  flex-direction: column;
}

.ki71 {
  display: grid;
  grid-template-columns: 140px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 6px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ki72 {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ki73 {
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  min-width: 0;
}

.ki74 {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ki75 {
  display: flex;
  gap: 4px;
}

.ki76 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ki77 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ki78 {
  overflow-x: auto;
}

.ki79 {
  min-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ki80 {
  display: grid;
  grid-template-columns: minmax(0,1fr) 70px 100px 90px 32px;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ki81 {
  padding: 0;
  font-weight: inherit;
  text-align: inherit;
  min-width: 0;
}

.ki82 {
  padding: 0;
  font-weight: inherit;
  min-width: 0;
  text-align: right;
}

.ki83 {
  display: grid;
  grid-template-columns: minmax(0,1fr) 70px 100px 90px 32px;
  gap: 8px;
  align-items: center;
}

.ki84 {
  padding: 0;
  font-weight: inherit;
  text-align: inherit;
  min-width: 0;
  display: flex;
}

.ki85 {
  min-width: 0;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  font-variant-numeric: tabular-nums;
}

.ki86 {
  padding: 0;
  min-width: 0;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ki87 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
}

.ki88 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ki89 {
  margin-left: auto;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ki90 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.ki91 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ki92 {
  margin-left: auto;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ki93 {
  display: grid;
  padding-top: 10px;
}

.ki94 {
  display: flex;
  gap: 8px;
}

.ki95 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ki96 {
  font-size: 14px;
  font-weight: 800;
  padding: 2px 0 6px;
}

.ki97 {
  height: 1px;
  margin: 14px -16px;
  background: var(--w07,rgba(255,255,255,.08));
}

.ki98 {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.ki99 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ki100 {
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  background: var(--w02,rgba(255,255,255,.02));
}

.ki101 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 16px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

.ki102 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ki103 {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ki104 {
  color: var(--t-8a8f9e,#8a8f9e);
  transition: transform .2s;
}

.ki105 {
  padding: 4px 16px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 0 28px;
}

.ki106 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 16px;
}

.ki107 {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--w08,rgba(255,255,255,.1));
}

.ki108 {
  height: 40px;
  padding: 0 14px;
  border: none;
  margin-bottom: -1px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}

.ki109 {
  display: flex;
  justify-content: center;
  padding: 24px 8px;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
}

.ki110 {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--b-1b1f2a,#1b1f2a);
}

.ki111 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
}

.ki112 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 0 14px;
}

.ki113 {
  width: 18px;
  height: 18px;
  accent-color: #9adbe6;
  margin: 0;
}

.ki114 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.ki115 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  min-width: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ki116 {
  display: grid;
  grid-template-columns: 110px 150px minmax(0,1fr);
  gap: 16px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ki117 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  padding-top: 12px;
}

.ki118 {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-top: 12px;
}

.ki119 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ki120 {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  max-width: 320px;
}

.ki121 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
}

.ki122 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ki123 {
  color: var(--t-c9ccd6,#c9ccd6);
}

.ki124 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap: 4px 24px;
}

.ki125 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ki126 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ki127 {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.ki128 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.ki129 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ki130 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ki131 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ki132 {
  font-size: 13px;
  font-weight: 700;
}

.ki133 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.ki134 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ki135 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.ki136 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.ki137 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.ki138 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.ki139 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ki140 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ki141 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ki142 {
  font-weight: 900;
}

.ki143 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kif1:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif2:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif3:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif4:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif5:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif6:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif7:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif8:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif9:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif10:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif11:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif12:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif13:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif14:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif15:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif16:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif17:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif18:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif19:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif20:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif21:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif22:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif23:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif24:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif25:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif26:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif27:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif28:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.kif29:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}
/* -- generated flh: end -- */

/* ==========================================================================
   22zz113. Form Layouts · Sticky Actions: classes generated from the handoff
   by _dev/layout_sticky_actions_convert.py (la1 …, lah hover, laf focus).
   The page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.usa-page input::placeholder,
.usa-page textarea::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
/* Phones: the floating toast stays inside its frame and wraps; an invoice
   line puts its item on a row of its own above qty, rate, total and remove. */
@media (max-width: 480px) {
  .usa-page [data-sa-toast] { width: max-content; max-width: calc(100% - 24px); }
  .usa-page [data-sa-toast] > [aria-label] { white-space: normal; flex-wrap: wrap; border-radius: 22px; }
  .usa-page [data-sa-line] { grid-template-columns: 56px minmax(0, 1fr) auto 28px; }
  .usa-page [data-sa-line] > :first-child { grid-column: 1 / -1; }
}

/* -- generated fls: start -- */
.la1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.la2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.la3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.la4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.la5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.la6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.la7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.la8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.la9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.la10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.la11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.la12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.la13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.la14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.la15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.la16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.la17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.la18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.la19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 16px;
  align-items: start;
}

.la20 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.la21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.la22 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.la23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.la24 {
  position: relative;
  height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.la25 {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all .2s;
}

.la26 {
  font-weight: 800;
  transition: font-size .2s;
  flex: 1;
}

.la27 {
  display: flex;
  gap: 8px;
}

.la28 {
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 34px;
}

.la29 {
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
}

.la30 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: saSpin .7s linear infinite;
}

.la31 {
  display: grid;
  gap: 18px;
}

.la32 {
  font-size: 20px;
  font-weight: 800;
}

.la33 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.la34 {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.la35 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 14px;
}

.la36 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.la37 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.la38 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.la39 {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  outline: none;
}

.la40 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.la41 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  min-width: 0;
}

.la42 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.la43 {
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.la44 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.la45 {
  position: sticky;
  top: 12px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  background: var(--w03,rgba(255,255,255,.03));
}

.la46 {
  font-size: 15px;
  font-weight: 800;
}

.la47 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.la48 {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.la49 {
  font-size: 12px;
  font-weight: 800;
}

.la50 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.la51 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.la52 {
  position: sticky;
  z-index: 3;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}

.la53 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  transition: box-shadow .2s,background .2s;
}

.la54 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 140px;
  font-size: 13px;
  font-weight: 800;
}

.la55 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.la56 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
}

.la57 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.la58 {
  font-size: 15px;
  font-weight: 700;
}

.la59 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.la60 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.la61 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.la62 {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
}

.la63 {
  color: #6b7080;
}

.la64 {
  color: #c9ccd6;
}

.la65 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.la66 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.la67 {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.la68 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 18px;
  align-items: start;
}

.la69 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.la70 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.la71 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.la72 {
  position: relative;
  height: 260px;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  overflow: hidden;
}

.la73 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.la74 {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s;
}

.la75 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
  white-space: nowrap;
}

.la76 {
  font-size: 13px;
  font-weight: 800;
}

.la77 {
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #11131a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.la78 {
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: #11131a;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.la79 {
  display: flex;
  justify-content: center;
}

.la80 {
  position: relative;
  width: 280px;
  height: 420px;
  border-radius: 30px;
  border: 1.5px solid var(--w14,rgba(255,255,255,.26));
  background: var(--b-151821,#151821);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.la81 {
  flex: 1;
  overflow-y: auto;
  padding: 22px 16px 110px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.la82 {
  font-size: 18px;
  font-weight: 800;
}

.la83 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px calc(12px + 18px);
  background: linear-gradient(180deg,transparent,var(--b-151821,#151821) 30%);
}

.la84 {
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  font-size: 14.5px;
}

.la85 {
  display: block;
  height: 4px;
  width: 110px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: var(--w14,rgba(255,255,255,.26));
}

.la86 {
  display: flex;
  gap: 6px;
}

.la87 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.la88 {
  height: 4px;
  border-radius: 999px;
}

.la89 {
  font-size: 11px;
  font-weight: 800;
}

.la90 {
  position: relative;
  height: 250px;
  border-radius: 16px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.la91 {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

.la92 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--w08,rgba(255,255,255,.1));
  background: var(--b-1b1f2a,#1b1f2a);
}

.la93 {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.la94 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.la95 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 14px;
  align-items: center;
}

.la96 {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  overflow: hidden;
}

.la97 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.la98 {
  font-weight: 800;
  min-width: 80px;
}

.la99 {
  color: var(--t-8a8f9e,#8a8f9e);
  text-decoration: line-through;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30%;
}

.la100 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.la101 {
  flex: 1;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.la102 {
  padding: 12px;
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.la103 {
  padding: 12px;
  border-radius: 14px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.26));
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  outline: none;
}

.la104 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
}

.la105 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: start;
}

.la106 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.la107 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap: 12px;
}

.la108 {
  display: grid;
  grid-template-columns: minmax(0,1fr) 64px 96px 84px 28px;
  gap: 8px;
  align-items: center;
}

.la109 {
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  min-width: 0;
}

.la110 {
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  text-align: right;
  min-width: 0;
}

.la111 {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.la112 {
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
}

.la113 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.la114 {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  background: var(--w03,rgba(255,255,255,.03));
}

.la115 {
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}

.la116 {
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}

.la117 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.la118 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.la119 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.la120 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.la121 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.la122 {
  font-size: 13px;
  font-weight: 700;
}

.la123 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.la124 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.la125 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.la126 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.la127 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.la128 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.la129 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.la130 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.la131 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.la132 {
  font-weight: 900;
}

.la133 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.la134 {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(5,6,10,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.la135 {
  width: 100%;
  max-width: 340px;
  padding: 18px;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.la136 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.la137 {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.la138 {
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #b2482c;
  color: #fff;
}

.laf1:focus {
  border-color: #9adbe6;
}

.laf2:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.laf3:focus {
  border-color: #9adbe6;
}

.laf4:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.laf5:focus {
  border-color: #9adbe6;
}

.laf6:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.laf7:focus {
  border-color: #9adbe6;
}

.laf8:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.laf9:focus {
  border-color: #9adbe6;
}

.laf10:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.laf11:focus {
  border-color: #9adbe6;
}

.laf12:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.laf13:focus {
  border-color: #9adbe6;
}

.laf14:focus {
  border-color: #9adbe6;
}

.laf15:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}
/* -- generated fls: end -- */

/* ==========================================================================
   22zz114. Form Wizard · Numbered: classes generated from the handoff
   by _dev/wizard_numbered_convert.py (lb1 …, lbh hover, lbf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.uwn-page input::placeholder,
.uwn-page textarea::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }

/* -- generated fwn: start -- */
.lb1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lb2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.lb3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.lb4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lb5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.lb6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.lb7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lb8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lb9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.lb10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lb11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.lb12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lb13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.lb14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lb15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.lb16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.lb17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.lb18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lb19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 16px;
  align-items: start;
}

.lb20 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.lb21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.lb22 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lb23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.lb24 {
  padding: 26px 22px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.lb25 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px;
  border-radius: 20px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.lb26 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lb27 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
}

.lb28 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  min-width: 0;
}

.lb29 {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  transition: background .3s;
}

.lb30 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  padding: 0;
  min-width: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.lb31 {
  border-radius: 50%;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s,border-color .2s,box-shadow .2s;
}

.lb32 {
  font-size: 12.5px;
  font-weight: 800;
  text-align: center;
}

.lb33 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: center;
}

.lb34 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lb35 {
  display: flex;
}

.lb36 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
}

.lb37 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lb38 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.lb39 {
  font-size: 14px;
  font-weight: 800;
}

.lb40 {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lb41 {
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.lb42 {
  display: block;
  height: 100%;
  background: #9adbe6;
  border-radius: 999px;
  transition: width .3s;
}

.lb43 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lb44 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lb45 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  outline: none;
}

.lb46 {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lb47 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 14px;
}

.lb48 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lb49 {
  display: flex;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lb50 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.lb51 {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  outline: none;
}

.lb52 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  min-width: 0;
}

.lb53 {
  font-size: 12px;
  font-weight: 700;
}

.lb54 {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  overflow: hidden;
}

.lb55 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lb56 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb57 {
  font-size: 13px;
  font-weight: 800;
}

.lb58 {
  font-size: 11.5px;
  font-weight: 800;
}

.lb59 {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
}

.lb60 {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 10px;
  font-size: 12.5px;
}

.lb61 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.lb62 {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.lb63 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lb64 {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lb65 {
  flex: 1;
  min-width: 120px;
  font-size: 12px;
  font-weight: 700;
}

.lb66 {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lb67 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb68 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: wzSpin .7s linear infinite;
}

.lb69 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 16px;
  text-align: center;
}

.lb70 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 20%, transparent);
  font-size: 24px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb71 {
  font-size: 17px;
  font-weight: 800;
}

.lb72 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lb73 {
  font-size: 15px;
  font-weight: 700;
}

.lb74 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lb75 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.lb76 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.lb77 {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
}

.lb78 {
  color: #6b7080;
}

.lb79 {
  color: #c9ccd6;
  overflow-wrap: anywhere;
}

.lb80 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.lb81 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.lb82 {
  white-space: pre-wrap;
}

.lb83 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: start;
}

.lb84 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lb85 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lb86 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lb87 {
  display: flex;
  justify-content: center;
  padding: 18px;
  border-radius: 16px;
  background: rgba(5,6,10,.5);
}

.lb88 {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.lb89 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  overflow-x: auto;
}

.lb90 {
  display: grid;
  grid-template-columns: 70px repeat(6,minmax(min(90px,100%),1fr));
  gap: 18px 12px;
  align-items: center;
  min-width: 700px;
}

.lb91 {
  font-size: 12.5px;
  font-weight: 800;
}

.lb92 {
  font-size: 12px;
  font-weight: 800;
}

.lb93 {
  display: flex;
  flex-direction: column;
}

.lb94 {
  display: grid;
  grid-template-columns: 130px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.lb95 {
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lb96 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lb97 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 160px;
}

.lb98 {
  display: grid;
  grid-template-columns: 100px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
}

.lb99 {
  color: #9adbe6;
}

.lb100 {
  color: #c9ccd6;
}

.lb101 {
  font-size: 12px;
  color: #6b7080;
}

.lb102 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.lb103 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.lb104 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.lb105 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lb106 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lb107 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lb108 {
  font-size: 13px;
  font-weight: 700;
}

.lb109 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lb110 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lb111 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.lb112 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.lb113 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.lb114 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.lb115 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lb116 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lb117 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lb118 {
  font-weight: 900;
}

.lb119 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lbf1:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lbf2:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lbf3:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lbf4:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lbf5:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lbf6:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}
/* -- generated fwn: end -- */

/* ==========================================================================
   22zz115. Form Wizard · Icons: classes generated from the handoff
   by _dev/wizard_icons_convert.py (lc1 …, lch hover, lcf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.uwi-page input::placeholder,
.uwi-page textarea::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }

/* -- generated fwi: start -- */
.lc1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lc2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.lc3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.lc4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lc5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.lc6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.lc7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lc8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lc9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.lc10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lc11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.lc12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lc13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.lc14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lc15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.lc16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.lc17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.lc18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lc19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 16px;
  align-items: start;
}

.lc20 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.lc21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.lc22 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lc23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.lc24 {
  padding: 26px 22px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.lc25 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px;
  border-radius: 20px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.lc26 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lc27 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
}

.lc28 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  min-width: 0;
}

.lc29 {
  position: absolute;
  height: 0;
  transition: border-color .3s;
}

.lc30 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  padding: 0;
  min-width: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.lc31 {
  position: relative;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s,border-color .2s,box-shadow .2s;
}

.lc32 {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #9adbe6;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--b-1b1f2a,#1b1f2a);
}

.lc33 {
  font-size: 12.5px;
  font-weight: 800;
  text-align: center;
}

.lc34 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-align: center;
}

.lc35 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lc36 {
  display: flex;
}

.lc37 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
}

.lc38 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lc39 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.lc40 {
  font-size: 14px;
  font-weight: 800;
}

.lc41 {
  margin-left: auto;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lc42 {
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.lc43 {
  display: block;
  height: 100%;
  background: #9adbe6;
  border-radius: 999px;
  transition: width .3s;
}

.lc44 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lc45 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lc46 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  outline: none;
}

.lc47 {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lc48 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 14px;
}

.lc49 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lc50 {
  display: flex;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lc51 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.lc52 {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  outline: none;
}

.lc53 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  min-width: 0;
}

.lc54 {
  font-size: 12px;
  font-weight: 700;
}

.lc55 {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  overflow: hidden;
}

.lc56 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lc57 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lc58 {
  font-size: 13px;
  font-weight: 800;
}

.lc59 {
  font-size: 11.5px;
  font-weight: 800;
}

.lc60 {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
}

.lc61 {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 10px;
  font-size: 12.5px;
}

.lc62 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.lc63 {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.lc64 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lc65 {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lc66 {
  flex: 1;
  min-width: 120px;
  font-size: 12px;
  font-weight: 700;
}

.lc67 {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lc68 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lc69 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: wzSpin .7s linear infinite;
}

.lc70 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 16px;
  text-align: center;
}

.lc71 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 20%, transparent);
  font-size: 24px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lc72 {
  font-size: 17px;
  font-weight: 800;
}

.lc73 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lc74 {
  font-size: 15px;
  font-weight: 700;
}

.lc75 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lc76 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.lc77 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.lc78 {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
}

.lc79 {
  color: #6b7080;
}

.lc80 {
  color: #c9ccd6;
  overflow-wrap: anywhere;
}

.lc81 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.lc82 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.lc83 {
  white-space: pre-wrap;
}

.lc84 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: start;
}

.lc85 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lc86 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lc87 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lc88 {
  display: flex;
  justify-content: center;
  padding: 18px;
  border-radius: 16px;
  background: rgba(5,6,10,.5);
}

.lc89 {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  border-radius: 18px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.lc90 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  overflow-x: auto;
}

.lc91 {
  display: grid;
  grid-template-columns: 70px repeat(6,minmax(min(90px,100%),1fr));
  gap: 18px 12px;
  align-items: center;
  min-width: 700px;
}

.lc92 {
  font-size: 12.5px;
  font-weight: 800;
}

.lc93 {
  font-size: 12px;
  font-weight: 800;
}

.lc94 {
  display: flex;
  flex-direction: column;
}

.lc95 {
  display: grid;
  grid-template-columns: 130px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.lc96 {
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lc97 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lc98 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 160px;
}

.lc99 {
  display: grid;
  grid-template-columns: 100px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
}

.lc100 {
  color: #9adbe6;
}

.lc101 {
  color: #c9ccd6;
}

.lc102 {
  font-size: 12px;
  color: #6b7080;
}

.lc103 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.lc104 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.lc105 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.lc106 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lc107 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lc108 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lc109 {
  font-size: 13px;
  font-weight: 700;
}

.lc110 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lc111 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lc112 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.lc113 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.lc114 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.lc115 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.lc116 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lc117 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lc118 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lc119 {
  font-weight: 900;
}

.lc120 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lcf1:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lcf2:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lcf3:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lcf4:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lcf5:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lcf6:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}
/* -- generated fwi: end -- */

/* ==========================================================================
   22zz116. Form Wizard · Vertical: classes generated from the handoff
   by _dev/wizard_vertical_convert.py (ld1 …, ldh hover, ldf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.uwv-page input::placeholder,
.uwv-page textarea::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
/* One column below 640 px: the step list sits above the current step */
@media (max-width: 640px) {
  .uwv-page { --wv-cols: minmax(0, 1fr); --wv-gap: 16px; }
  /* above the step, a sticky list would ride over the fields */
  .uwv-page nav[aria-label$="progress"] { position: static; }
}

/* -- generated fwv: start -- */
.ld1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ld2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.ld3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.ld4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ld5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ld6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.ld7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ld8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ld9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.ld10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ld11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.ld12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ld13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
}

.ld14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ld15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.ld16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ld17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.ld18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ld19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 16px;
  align-items: start;
}

.ld20 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.ld21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.ld22 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ld23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ld24 {
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.ld25 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ld26 {
  accent-color: #9adbe6;
}

.ld27 {
  padding: 22px 16px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.ld28 {
  max-width: 100%;
  padding: 22px;
  border-radius: 20px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.ld29 {
  display: grid;
  align-items: start;
}

.ld30 {
  position: sticky;
  top: 12px;
  align-self: start;
}

.ld31 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ld32 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.ld33 {
  font-size: 12px;
  font-weight: 800;
}

.ld34 {
  height: 5px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.ld35 {
  display: block;
  height: 100%;
  background: #9adbe6;
  transition: width .3s;
}

.ld36 {
  position: relative;
}

.ld37 {
  position: absolute;
  bottom: 4px;
  transition: border-color .3s;
}

.ld38 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  font-size: 13.3333px;
  font-weight: 400;
}

.ld39 {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s,border-color .2s;
}

.ld40 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ld41 {
  font-size: 13.5px;
  font-weight: 800;
}

.ld42 {
  font-size: 12px;
  line-height: 1.35;
}

.ld43 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ld44 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ld45 {
  font-size: 14px;
  font-weight: 800;
}

.ld46 {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.ld47 {
  display: block;
  height: 100%;
  background: #9adbe6;
}

.ld48 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ld49 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}

.ld50 {
  min-width: 0;
}

.ld51 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ld52 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ld53 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  outline: none;
}

.ld54 {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ld55 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: 14px;
}

.ld56 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ld57 {
  display: flex;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ld58 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.ld59 {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  outline: none;
}

.ld60 {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  min-width: 0;
}

.ld61 {
  font-size: 12px;
  font-weight: 700;
}

.ld62 {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  overflow: hidden;
}

.ld63 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ld64 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ld65 {
  font-size: 13px;
  font-weight: 800;
}

.ld66 {
  font-size: 11.5px;
  font-weight: 800;
}

.ld67 {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
}

.ld68 {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 10px;
  font-size: 12.5px;
}

.ld69 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.ld70 {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ld71 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ld72 {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ld73 {
  flex: 1;
  min-width: 120px;
  font-size: 12px;
  font-weight: 700;
}

.ld74 {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ld75 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ld76 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: wzSpin .7s linear infinite;
}

.ld77 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 16px;
  text-align: center;
}

.ld78 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 20%, transparent);
  font-size: 24px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ld79 {
  font-size: 17px;
  font-weight: 800;
}

.ld80 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ld81 {
  font-size: 15px;
  font-weight: 700;
}

.ld82 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ld83 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.ld84 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.ld85 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.ld86 {
  white-space: pre-wrap;
}

.ld87 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.ld88 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.ld89 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ld90 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ld91 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ld92 {
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
}

.ld93 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  font-size: 13.3333px;
  font-weight: 400;
}

.ld94 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ld95 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ld96 {
  padding: 0 14px 14px 56px;
}

.ld97 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
}

.ld98 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap: 16px;
}

.ld99 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ld100 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ld101 {
  font-size: 11.5px;
}

.ld102 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: start;
}

.ld103 {
  display: flex;
  flex-direction: column;
}

.ld104 {
  display: grid;
  grid-template-columns: 130px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.ld105 {
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ld106 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.ld107 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.ld108 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.ld109 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ld110 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ld111 {
  font-size: 13px;
  font-weight: 700;
}

.ld112 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ld113 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
}

.ld114 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.ld115 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
}

.ld116 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.ld117 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ld118 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ld119 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ld120 {
  font-weight: 900;
}

.ld121 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ldf1:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.ldf2:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.ldf3:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.ldf4:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}
/* -- generated fwv: end -- */

/* ==========================================================================
   22zz117. Forms · Form Validation: classes generated from the handoff
   by _dev/form_validation_convert.py (le1 …, leh hover, lef focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.ufv-page input::placeholder,
.ufv-page textarea::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }

/* -- generated fva: start -- */
.le1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.le2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.le3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.le4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.le5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.le6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.le7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.le8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.le9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.le10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.le11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.le12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.le13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.le14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.le15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.le16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.le17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.le18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.le19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 16px;
  align-items: start;
}

.le20 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.le21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.le22 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.le23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.le24 {
  padding: 26px 20px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.le25 {
  max-width: 520px;
  margin: 0 auto;
  padding: 22px;
  border-radius: 20px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.le26 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.le27 {
  font-size: 19px;
  font-weight: 800;
}

.le28 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 9%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 35%, transparent);
  outline: none;
}

.le29 {
  font-size: 13.5px;
  font-weight: 800;
}

.le30 {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.le31 {
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.le32 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 10%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.13 70) 35%, transparent);
}

.le33 {
  flex: 1;
  min-width: 180px;
  font-size: 13px;
  font-weight: 700;
}

.le34 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.le35 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 10%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 32%, transparent);
  font-size: 13px;
  font-weight: 800;
}

.le36 {
  display: grid;
  gap: 14px;
}

.le37 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.le38 {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.le39 {
  font-weight: 600;
  color: var(--t-8a8f9e,#8a8f9e);
}

.le40 {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.le41 {
  position: relative;
  display: flex;
  align-items: center;
}

.le42 {
  width: 100%;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.le43 {
  width: 100%;
  padding: 0 38px 0 12px;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s,box-shadow .15s;
}

.le44 {
  position: absolute;
  display: flex;
  pointer-events: none;
}

.le45 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #9adbe6;
  border-right-color: transparent;
  animation: fvSpin .7s linear infinite;
}

.le46 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.le47 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.le48 {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 4;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.le49 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(130px,100%),1fr));
  gap: 5px 12px;
}

.le50 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
}

.le51 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.le52 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.le53 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.le54 {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 4px;
}

.le55 {
  height: 4px;
  border-radius: 999px;
  transition: background .2s;
}

.le56 {
  font-size: 12px;
  font-weight: 800;
  min-width: 64px;
  text-align: right;
}

.le57 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.le58 {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  overflow: hidden;
}

.le59 {
  flex-shrink: 0;
}

.le60 {
  align-self: flex-start;
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
  cursor: pointer;
  text-align: left;
}

.le61 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.le62 {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.16));
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.le63 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-8a8f9e,#8a8f9e);
}

.le64 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.le65 {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.le66 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.le67 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.le68 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.le69 {
  font-size: 15px;
  font-weight: 700;
}

.le70 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.le71 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.le72 {
  font-size: 12px;
  line-height: 1.45;
  color: var(--t-8a8f9e,#8a8f9e);
}

.le73 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 120px;
}

.le74 {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
}

.le75 {
  color: #9adbe6;
}

.le76 {
  color: #c9ccd6;
  overflow-wrap: anywhere;
}

.le77 {
  font-size: 12px;
  color: #6b7080;
}

.le78 {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr);
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.5;
}

.le79 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.le80 {
  overflow-wrap: anywhere;
}

.le81 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.le82 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.le83 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.le84 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.le85 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap: 14px;
}

.le86 {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.le87 {
  padding: 0;
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.le88 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.le89 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.le90 {
  width: 16px;
  height: 16px;
  accent-color: #9adbe6;
  margin: 0;
}

.le91 {
  font-size: 12px;
  font-weight: 700;
}

.le92 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.le93 {
  font-family: inherit;
  font-size: 13px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.le94 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.le95 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.le96 {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.16));
  background: transparent;
  color: var(--t-c9ccd6,#c9ccd6);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  cursor: pointer;
  font-weight: 400;
}

.le97 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
}

.le98 {
  font-size: 13px;
  font-weight: 800;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.le99 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  font-variant-numeric: tabular-nums;
}

.le100 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
}

.le101 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 18px;
}

.le102 {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 38px 0 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  font-size: 14px;
}

.le103 {
  position: absolute;
  right: 12px;
  display: flex;
}

.le104 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
}

.le105 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.le106 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap: 16px;
}

.le107 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
}

.le108 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.le109 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 18px;
  align-items: start;
}

.le110 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
}

.le111 {
  accent-color: #9adbe6;
  margin: 0;
}

.le112 {
  display: flex;
  flex-direction: column;
}

.le113 {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
  line-height: 1.4;
}

.le114 {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.le115 {
  font-weight: 700;
}

.le116 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.le117 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: -2px;
}

.le118 {
  font-size: 17px;
  font-weight: 800;
}

.le119 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.le120 {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

.le121 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.le122 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.le123 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  font-weight: 400;
}

.le124 {
  font-size: 12.5px;
  font-weight: 700;
}

.le125 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.le126 {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.le127 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.le128 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.le129 {
  font-size: 13px;
  font-weight: 800;
}

.le130 {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.le131 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.le132 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.le133 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.le134 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.le135 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.le136 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.le137 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.le138 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.le139 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.le140 {
  font-weight: 900;
}

.le141 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lef1:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, oklch(0.72 0.14 35) 40%, transparent);
}

.lef2:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, oklch(0.72 0.14 35) 40%, transparent);
}

.lef3:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, oklch(0.72 0.14 35) 40%, transparent);
}

.lef4:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, oklch(0.72 0.14 35) 40%, transparent);
}

.lef5:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, oklch(0.72 0.14 35) 40%, transparent);
}

.lef6:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}
/* -- generated fva: end -- */

/* ==========================================================================
   22zz118. Tables: classes generated from the handoff by
   _dev/tables_convert.py (lf1 …, lfh hover, lff focus). The page reuses
   the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* The skeleton shimmer reuses @keyframes tbShim (defined once, above). */
/* A card spanning two columns must not invent a second one on a phone */
@media (max-width: 700px) {
  .utb-page [data-tb-span] { grid-column: auto; }
}

/* -- generated tbl: start -- */
.lf1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lf2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.lf3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.lf4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lf5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.lf6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.lf7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lf8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lf9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.lf10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lf11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.lf12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lf13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.lf14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lf15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.lf16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.lf17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.lf18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lf19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: start;
}

.lf20 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  grid-column: span 2;
}

.lf21 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.lf22 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lf23 {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--t-a7abb8,#a7abb8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.lf24 {
  padding: 12px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.07));
}

.lf25 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lf26 {
  accent-color: #9adbe6;
}

.lf27 {
  padding: 22px 16px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.lf28 {
  max-width: 100%;
}

.lf29 {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  overflow: hidden;
  background: var(--b-1b1f2a,#1b1f2a);
}

.lf30 {
  position: relative;
  overflow: auto;
  outline: none;
}

.lf31 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  color: var(--t-eef0f5,#eef0f5);
}

.lf32 {
  caption-side: top;
  text-align: left;
  padding: 14px 16px 12px;
  font-size: 14px;
  font-weight: 800;
}

.lf33 {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lf34 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  text-align: left;
  height: 40px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--b-1b1f2a,#1b1f2a);
  top: 0;
  z-index: 2;
  display: table-cell;
}

.lf35 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  text-align: left;
  height: 40px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--b-1b1f2a,#1b1f2a);
  top: 0;
  z-index: 2;
}

.lf36 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  text-align: right;
  height: 40px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--b-1b1f2a,#1b1f2a);
  top: 0;
  z-index: 2;
  display: table-cell;
}

.lf37 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lf38 {
  transition: background .12s;
}

.lf39 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lf40 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #11131a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lf41 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lf42 {
  font-weight: 800;
  white-space: nowrap;
}

.lf43 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.lf44 {
  white-space: nowrap;
}

.lf45 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.lf46 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.lf47 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 110px;
}

.lf48 {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.lf49 {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.lf50 {
  font-size: 12px;
  font-weight: 800;
  color: var(--t-c9ccd6,#c9ccd6);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

.lf51 {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lf52 {
  display: flex;
  flex-direction: column;
}

.lf53 {
  font-variant-numeric: tabular-nums;
}

.lf54 {
  font-size: 11.5px;
  font-weight: 700;
}

.lf55 {
  text-align: right;
  width: 44px;
}

.lf56 {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: none;
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
}

.lf57 {
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lf58 {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)),var(--w10,rgba(255,255,255,.12)),var(--w05,rgba(255,255,255,.06)));
  background-size: 200% 100%;
  animation: tbShim 1.2s linear infinite;
}

.lf59 {
  padding: 36px 16px;
  text-align: center;
}

.lf60 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lf61 {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lf62 {
  font-size: 15px;
  font-weight: 800;
}

.lf63 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  max-width: 320px;
}

.lf64 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 4px;
}

.lf65 {
  padding: 14px 16px 4px;
  font-size: 14px;
  font-weight: 800;
}

.lf66 {
  list-style: none;
  margin: 0;
  padding: 6px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lf67 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lf68 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lf69 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lf70 {
  font-weight: 800;
  font-size: 14px;
}

.lf71 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lf72 {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 6px 12px;
  font-size: 12.5px;
}

.lf73 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.lf74 {
  margin: 0;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lf75 {
  margin: 0;
  text-align: right;
}

.lf76 {
  font-weight: 700;
}

.lf77 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lf78 {
  font-size: 15px;
  font-weight: 700;
}

.lf79 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lf80 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.lf81 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
}

.lf82 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: #6b7080;
}

.lf83 {
  display: flex;
  flex-direction: column;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.7;
}

.lf84 {
  white-space: pre-wrap;
}

.lf85 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lf86 {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
  align-items: start;
}

.lf87 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lf88 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lf89 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lf90 {
  position: relative;
  overflow-x: auto;
  border-radius: 14px;
}

.lf91 {
  width: 100%;
  border-collapse: collapse;
  color: var(--t-eef0f5,#eef0f5);
}

.lf92 {
  caption-side: top;
  text-align: left;
  padding: 0 0 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lf93 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  height: 40px;
}

.lf94 {
  width: 52px;
  padding: 0 8px;
}

.lf95 {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lf96 {
  width: 52px;
  padding: 0 8px;
  text-align: right;
}

.lf97 {
  height: 44px;
  border-top: 1.5px solid var(--w14,rgba(255,255,255,.26));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lf98 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 8px 8px 14px;
  border-radius: 14px;
  background: color-mix(in oklab, #9adbe6 12%, transparent);
  border: 1px solid color-mix(in oklab, #9adbe6 35%, transparent);
}

.lf99 {
  flex: 1;
  min-width: 120px;
  font-size: 13px;
  font-weight: 800;
}

.lf100 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lf101 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lf102 {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lf103 {
  position: relative;
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.lf104 {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.lf105 {
  width: 44px;
  padding: 0 14px;
  height: 40px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lf106 {
  width: 16px;
  height: 16px;
  accent-color: #9adbe6;
  margin: 0;
  cursor: pointer;
}

.lf107 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  text-align: left;
  padding: 0 14px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lf108 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  text-align: right;
  padding: 0 14px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lf109 {
  width: 52px;
  padding: 0 8px;
  height: 40px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lf110 {
  cursor: pointer;
  transition: background .12s;
}

.lf111 {
  padding: 0 14px;
  height: 48px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lf112 {
  padding: 0 14px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lf113 {
  padding: 0 14px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lf114 {
  padding: 0 14px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lf115 {
  width: 52px;
  padding: 0 8px;
  text-align: right;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lf116 {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
}

.lf117 {
  display: flex;
  gap: 6px;
}

.lf118 {
  width: 100%;
  min-width: 440px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.lf119 {
  width: 44px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lf120 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  text-align: left;
  padding: 0 14px;
  height: 40px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lf121 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  text-align: right;
  padding: 0 14px;
  height: 40px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lf122 {
  padding: 0 6px 0 10px;
  height: 52px;
}

.lf123 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.3333px;
  font-weight: 400;
}

.lf124 {
  transition: transform .18s;
}

.lf125 {
  padding: 0 14px;
  font-weight: 800;
}

.lf126 {
  padding: 0 14px;
}

.lf127 {
  padding: 0 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lf128 {
  padding: 0 14px;
  white-space: nowrap;
}

.lf129 {
  background: var(--w02,rgba(255,255,255,.02));
}

.lf130 {
  padding: 4px 14px 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lf131 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap: 12px;
}

.lf132 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lf133 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lf134 {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lf135 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.lf136 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lf137 {
  position: relative;
  overflow: auto;
  max-height: 280px;
  border-radius: 14px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  outline: none;
}

.lf138 {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  min-width: 1100px;
  width: 100%;
}

.lf139 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  text-align: left;
  padding: 0 16px;
  height: 42px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lf140 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  text-align: right;
  padding: 0 12px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lf141 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  white-space: nowrap;
  text-transform: uppercase;
  text-align: right;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-9adbe6,#9adbe6);
}

.lf142 {
  text-align: left;
  padding: 0 16px;
  height: 46px;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  font-weight: 800;
  white-space: nowrap;
}

.lf143 {
  text-align: right;
  padding: 0 12px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  font-variant-numeric: tabular-nums;
}

.lf144 {
  text-align: right;
  padding: 0 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lf145 {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.lf146 {
  flex: 0 0 auto;
  width: 390px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lf147 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lf148 {
  position: relative;
  padding: 10px;
  border-radius: 26px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--b-151821,#151821);
}

.lf149 {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 26px;
}

.lf150 {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--t-c9ccd6,#c9ccd6);
  text-wrap: pretty;
}

.lf151 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.lf152 {
  caption-side: top;
  text-align: left;
  padding: 12px 14px 4px;
  font-size: 13px;
  font-weight: 800;
}

.lf153 {
  text-align: left;
  padding: 0 14px;
  height: 52px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  font-weight: 400;
}

.lf154 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lf155 {
  font-weight: 800;
}

.lf156 {
  padding: 0 14px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  color: var(--t-c9ccd6,#c9ccd6);
}

.lf157 {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 3px;
}

.lf158 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  grid-column: 1/-1;
}

.lf159 {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.lf160 {
  padding: 14px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lf161 {
  padding: 14px;
  text-align: center;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
  vertical-align: bottom;
}

.lf162 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.lf163 {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #9adbe6;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
}

.lf164 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lf165 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  white-space: nowrap;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 14px 6px;
  color: var(--t-9adbe6,#9adbe6);
}

.lf166 {
  text-align: left;
  padding: 0 14px;
  height: 44px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  font-weight: 600;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lf167 {
  text-align: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  font-weight: 800;
}

.lf168 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.lf169 {
  position: relative;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.lf170 {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lf171 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lf172 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lf173 {
  font-size: 13px;
  font-weight: 700;
}

.lf174 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.lf175 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lf176 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lf177 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.lf178 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.lf179 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.lf180 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.lf181 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lf182 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lf183 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lf184 {
  font-weight: 900;
}

.lf185 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lf186 {
  position: fixed;
  z-index: 95;
  list-style: none;
  margin: 0;
  width: 200px;
  padding: 6px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lf187 {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.lf188 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 90;
  transition: transform .3s,opacity .3s;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: 14px;
}

.lf189 {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: #11131a;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.lfh1:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh2:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh3:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh4:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh5:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh6:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh7:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh8:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh9:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh10:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh11:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh12:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh13:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh14:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh15:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh16:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh17:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh18:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lfh19:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lff1:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lff2:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lff3:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lff4:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lff5:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lff6:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lff7:focus {
  background: var(--w06,rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1.5px #9adbe6;
}
/* -- generated tbl: end -- */

/* ==========================================================================
   22zz119. Datatables · Basic: classes generated from the handoff by
   _dev/datatables_basic_convert.py (lg1 …, lgh hover, lgf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.udb-page input::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
/* Phones: the three preset views wrap instead of running past the card */
@media (max-width: 480px) {
  .udb-page [data-db-presets] { flex-wrap: wrap; }
}

/* -- generated dtb: start -- */
.lg1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lg2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.lg3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.lg4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lg5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.lg6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.lg7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lg8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lg9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.lg10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lg11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.lg12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lg13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.lg14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lg15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.lg16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.lg17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.lg18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lg19 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  min-width: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lg20 {
  position: fixed;
  inset: 0;
  z-index: 7;
}

.lg21 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lg22 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lg23 {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.lg24 {
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.lg25 {
  flex: 1;
}

.lg26 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lg27 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-c9ccd6,#c9ccd6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.lg28 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lg29 {
  position: relative;
}

.lg30 {
  height: 36px;
  padding: 0 10px 0 12px;
  border-radius: 999px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: border-color .15s,background .15s;
  font-weight: 400;
}

.lg31 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-weight: 700;
}

.lg32 {
  font-weight: 800;
}

.lg33 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.lg34 {
  color: var(--t-8a8f9e,#8a8f9e);
  transition: transform .15s;
}

.lg35 {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 8;
  min-width: 190px;
  list-style: none;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lg36 {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: none;
  border-radius: 9px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lg37 {
  width: 14px;
  color: #9adbe6;
  font-weight: 900;
}

.lg38 {
  padding: 6px 10px 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--t-8a8f9e,#8a8f9e);
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
  margin-top: 4px;
}

.lg39 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.lg40 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lg41 {
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lg42 {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.lg43 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lg44 {
  position: relative;
  flex: 1 1 240px;
  max-width: 360px;
  display: flex;
  align-items: center;
}

.lg45 {
  position: absolute;
  left: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lg46 {
  width: 100%;
  height: 40px;
  padding: 0 36px 0 36px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.lg47 {
  position: absolute;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  font-weight: 400;
}

.lg48 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.lg49 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lg50 {
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
}

.lg51 {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  overflow: hidden;
  background: var(--b-1b1f2a,#1b1f2a);
}

.lg52 {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  outline: none;
}

.lg53 {
  position: relative;
  overflow: auto;
  outline: none;
}

.lg54 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  color: var(--t-eef0f5,#eef0f5);
}

.lg55 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lg56 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  height: 42px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--b-1b1f2a,#1b1f2a);
  position: sticky;
  top: 0;
  z-index: 2;
}

.lg57 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 6px;
  margin: 0 -6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.lg58 {
  font-size: 12px;
  letter-spacing: 0;
}

.lg59 {
  min-width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #9adbe6;
  color: #11131a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lg60 {
  transition: background .12s;
}

.lg61 {
  white-space: nowrap;
}

.lg62 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lg63 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lg64 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lg65 {
  background: color-mix(in oklab, #9adbe6 38%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.lg66 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lg67 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.lg68 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.lg69 {
  display: block;
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lg70 {
  font-variant-numeric: tabular-nums;
}

.lg71 {
  display: flex;
  flex-direction: column;
}

.lg72 {
  font-size: 11.5px;
  font-weight: 700;
}

.lg73 {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: none;
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
}

.lg74 {
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lg75 {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)),var(--w10,rgba(255,255,255,.12)),var(--w05,rgba(255,255,255,.06)));
  background-size: 200% 100%;
  animation: dbShim 1.2s linear infinite;
}

.lg76 {
  padding: 14px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
}

.lg77 {
  padding: 40px 16px;
  text-align: center;
}

.lg78 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lg79 {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lg80 {
  font-size: 15px;
  font-weight: 800;
}

.lg81 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  max-width: 340px;
  white-space: normal;
}

.lg82 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 4px;
}

.lg83 {
  height: 46px;
  border-top: 1.5px solid var(--w14,rgba(255,255,255,.26));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--b-1b1f2a,#1b1f2a);
  position: sticky;
  bottom: 0;
}

.lg84 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.lg85 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lg86 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.lg87 {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lg88 {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lg89 {
  min-width: 24px;
  text-align: center;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lg90 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lg91 {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: center;
}

.lg92 {
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 38px;
}

.lg93 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  overflow-x: auto;
}

.lg94 {
  color: #6b7080;
  flex-shrink: 0;
}

.lg95 {
  color: #6b7080;
}

.lg96 {
  color: #9adbe6;
  white-space: nowrap;
  margin-left: -8px;
}

.lg97 {
  flex-shrink: 0;
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.14);
  background: transparent;
  color: #c9ccd6;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.lg98 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.lg99 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  min-width: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lg100 {
  position: relative;
  width: 10px;
  height: 10px;
}

.lg101 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #9adbe6;
}

.lg102 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--t-eef0f5,#eef0f5);
  text-wrap: pretty;
}

.lg103 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lg104 {
  display: grid;
  grid-template-columns: 62px minmax(0,1fr);
  gap: 8px;
  align-items: baseline;
}

.lg105 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lg106 {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lg107 {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t-eef0f5,#eef0f5);
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: #0b0c11;
  display: flex;
  flex-direction: column;
}

.lg108 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lg109 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #8a8f9e;
}

.lg110 {
  font-size: 11px;
  font-weight: 800;
  color: #6fd3a0;
}

.lg111 {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.lg112 {
  padding: 8px 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: auto;
  max-height: 260px;
}

.lg113 {
  display: grid;
  grid-template-columns: 28px 14px minmax(0,1fr);
  padding-right: 12px;
}

.lg114 {
  text-align: right;
  color: #4b5263;
  padding-right: 8px;
}

.lg115 {
  color: #6fd3a0;
  font-weight: 900;
}

.lg116 {
  white-space: pre;
  color: #c9ccd6;
}

.lg117 {
  color: #9adbe6;
}

.lg118 {
  color: #f2c98a;
}

.lg119 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  min-width: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lg120 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lg121 {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.lg122 {
  position: relative;
  padding: 6px 0 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lg123 {
  position: absolute;
  left: -5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--b-1b1f2a,#1b1f2a);
}

.lg124 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 800;
}

.lg125 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lg126 {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
}

.lg127 {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lg128 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lg129 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lg130 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lg131 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.lg132 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lg133 {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.16));
  background: transparent;
  color: var(--t-c9ccd6,#c9ccd6);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  cursor: pointer;
  font-weight: 400;
}

.lg134 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 18px;
  align-items: start;
}

.lg135 {
  overflow-x: auto;
}

.lg136 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.lg137 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  text-align: left;
  padding: 0 10px;
  height: 36px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lg138 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  text-align: center;
  padding: 0 10px;
  height: 36px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lg139 {
  text-align: left;
  padding: 0 10px;
  height: 40px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  font-weight: 700;
}

.lg140 {
  text-align: center;
  padding: 0 10px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  font-weight: 800;
}

.lg141 {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.lg142 {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lg143 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.lg144 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.4;
}

.lg145 {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lg146 {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #9adbe6;
  word-break: break-all;
}

.lg147 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.lg148 {
  display: grid;
  grid-template-columns: 100px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lg149 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lg150 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lg151 {
  font-size: 13px;
  font-weight: 700;
}

.lg152 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lg153 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.lg154 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.lg155 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.lg156 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.lg157 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lg158 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lg159 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lg160 {
  font-weight: 900;
}

.lg161 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lg162 {
  position: fixed;
  z-index: 95;
  list-style: none;
  margin: 0;
  width: 200px;
  padding: 6px;
  border-radius: 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lg163 {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.lg164 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 90;
  transition: transform .3s,opacity .3s;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: 14px;
}

.lg165 {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: #11131a;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.lgh1:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lgh2:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lgh3:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lgh4:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lgh5:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lgh6:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lgh7:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lgh8:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lgh9:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lgh10:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lgh11:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lgh12:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lgh13:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lgh14:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lgh15:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lgh16:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lgh17:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lgh18:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lgh19:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lgh20:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
}

.lgf1:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lgf2:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lgf3:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lgf4:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lgf5:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lgf6:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lgf7:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lgf8:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lgf9:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lgf10:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lgf11:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lgf12:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lgf13:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lgf14:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lgf15:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lgf16:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lgf17:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 4px rgba(154,219,230,.2);
}

.lgf18:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lgf19:focus {
  background: var(--w06,rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1.5px #9adbe6;
}
/* -- generated dtb: end -- */

/* ==========================================================================
   22zz120. Datatables · Advanced: classes generated from the handoff by
   _dev/datatables_advanced_convert.py (lh1 …, lhh hover, lhf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.uda-page input::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
/* The refilter bar runs across the top of the table; skeleton rows shimmer */
@keyframes adBar {
  0% { left: -40%; }
  100% { left: 100%; }
}
@keyframes adShim {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
/* Phones: the toast wraps inside the screen instead of running past it */
@media (max-width: 480px) {
  .uda-page [data-ad-toast] { width: max-content; max-width: calc(100vw - 32px); white-space: normal; }
}

/* -- generated dta: start -- */
.lh1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lh2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.lh3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.lh4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lh5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.lh6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.lh7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lh8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lh9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.lh10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lh11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.lh12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lh13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.lh14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lh15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.lh16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.lh17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.lh18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lh19 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lh20 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lh21 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lh22 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.lh23 {
  flex: 1;
}

.lh24 {
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 32px;
}

.lh25 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.lh26 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lh27 {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.lh28 {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
}

.lh29 {
  height: 32px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.lh30 {
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 10.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.lh31 {
  font-size: 11px;
  color: #f2c98a;
}

.lh32 {
  width: 22px;
  height: 22px;
  margin-right: 5px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  font-weight: 400;
}

.lh33 {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  min-width: 0;
  width: 160px;
}

.lh34 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lh35 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lh36 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lh37 {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lh38 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 34px;
}

.lh39 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 4px 0 11px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 12%, transparent);
  border: 1px solid color-mix(in oklab, #9adbe6 35%, transparent);
  font-size: 12.5px;
  color: var(--t-eef0f5,#eef0f5);
  white-space: nowrap;
}

.lh40 {
  color: var(--t-8a8f9e,#8a8f9e);
  font-weight: 700;
}

.lh41 {
  font-weight: 800;
}

.lh42 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  font-weight: 400;
}

.lh43 {
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px dashed var(--w14,rgba(255,255,255,.26));
  background: transparent;
  color: #f2c98a;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}

.lh44 {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px dashed var(--w14,rgba(255,255,255,.26));
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lh45 {
  font-size: 12px;
  font-weight: 700;
}

.lh46 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lh47 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 8px 8px 14px;
  border-radius: 14px;
  background: color-mix(in oklab, #9adbe6 12%, transparent);
  border: 1px solid color-mix(in oklab, #9adbe6 35%, transparent);
}

.lh48 {
  flex: 1;
  min-width: 160px;
  font-size: 13px;
  font-weight: 800;
}

.lh49 {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lh50 {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.lh51 {
  flex: 0 1 250px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.lh52 {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.lh53 {
  font-size: 14px;
  font-weight: 800;
  flex: 1;
}

.lh54 {
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  height: 24px;
}

.lh55 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lh56 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lh57 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.lh58 {
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  outline: none;
  min-width: 0;
  width: 100%;
  height: 36px;
  font-size: 12.5px;
}

.lh59 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lh60 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 6px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}

.lh61 {
  width: 16px;
  height: 16px;
  accent-color: #9adbe6;
  margin: 0;
  cursor: pointer;
}

.lh62 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
  font-variant-numeric: tabular-nums;
}

.lh63 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lh64 {
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  outline: none;
  min-width: 0;
  width: 100%;
  height: 36px;
  font-size: 12.5px;
  text-align: right;
}

.lh65 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.lh66 {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 34px;
}

.lh67 {
  flex: 1;
  border-radius: 2px 2px 0 0;
}

.lh68 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lh69 {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--t-c9ccd6,#c9ccd6);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.lh70 {
  flex: 999 1 520px;
  min-width: 0;
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  overflow: hidden;
  background: var(--b-1b1f2a,#1b1f2a);
}

.lh71 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 4;
  overflow: hidden;
}

.lh72 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: #9adbe6;
  animation: adBar 1s ease-in-out infinite;
}

.lh73 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  outline: none;
}

.lh74 {
  position: relative;
  overflow: auto;
  outline: none;
}

.lh75 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  color: var(--t-eef0f5,#eef0f5);
  transition: opacity .15s;
}

.lh76 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lh77 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  height: 42px;
  background: var(--b-1b1f2a,#1b1f2a);
}

.lh78 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lh79 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 6px;
  margin: 0 -6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.lh80 {
  font-size: 12px;
  letter-spacing: 0;
}

.lh81 {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  font-size: 13.3333px;
  font-weight: 400;
}

.lh82 {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9adbe6;
}

.lh83 {
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--w02,rgba(255,255,255,.02));
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.lh84 {
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  outline: none;
  min-width: 0;
  width: 100%;
  height: 30px;
  font-size: 12.5px;
}

.lh85 {
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  outline: none;
  min-width: 0;
  width: 100%;
  height: 30px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: left;
  font-weight: 400;
}

.lh86 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lh87 {
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  outline: none;
  min-width: 0;
  width: 100%;
  height: 30px;
  font-size: 12.5px;
  text-align: right;
}

.lh88 {
  transition: background .12s;
}

.lh89 {
  white-space: nowrap;
}

.lh90 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lh91 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lh92 {
  display: flex;
  flex-direction: column;
}

.lh93 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lh94 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.lh95 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.lh96 {
  font-size: 11.5px;
  font-weight: 700;
}

.lh97 {
  font-variant-numeric: tabular-nums;
}

.lh98 {
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lh99 {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)),var(--w10,rgba(255,255,255,.12)),var(--w05,rgba(255,255,255,.06)));
  background-size: 200% 100%;
  animation: adShim 1.2s linear infinite;
}

.lh100 {
  padding: 36px 16px;
  text-align: center;
}

.lh101 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lh102 {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 19px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lh103 {
  font-size: 15px;
  font-weight: 800;
}

.lh104 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  max-width: 380px;
  white-space: normal;
  line-height: 1.45;
}

.lh105 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.lh106 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.lh107 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lh108 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.lh109 {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lh110 {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lh111 {
  min-width: 20px;
  text-align: center;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lh112 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0b0c11;
  border: 1px solid rgba(255,255,255,.08);
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  overflow-x: auto;
}

.lh113 {
  color: #6b7080;
  flex-shrink: 0;
}

.lh114 {
  color: #6b7080;
}

.lh115 {
  color: #9adbe6;
  white-space: nowrap;
  margin-left: -8px;
}

.lh116 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.lh117 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
}

.lh118 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lh119 {
  display: grid;
  grid-template-columns: 62px minmax(0,1fr);
  gap: 8px;
  align-items: baseline;
}

.lh120 {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lh121 {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lh122 {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #0b0c11;
}

.lh123 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lh124 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #8a8f9e;
}

.lh125 {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.lh126 {
  padding: 8px 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: auto;
  max-height: 280px;
}

.lh127 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  padding-right: 12px;
}

.lh128 {
  text-align: right;
  color: #4b5263;
  padding-right: 8px;
}

.lh129 {
  white-space: pre;
}

.lh130 {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.lh131 {
  position: relative;
  padding: 6px 0 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lh132 {
  position: absolute;
  left: -5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--b-1b1f2a,#1b1f2a);
}

.lh133 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 800;
}

.lh134 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lh135 {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
}

.lh136 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lh137 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lh138 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lh139 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.lh140 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lh141 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #9adbe6;
  color: #11131a;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lh142 {
  font-size: 13px;
  font-weight: 800;
}

.lh143 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  line-height: 1.4;
}

.lh144 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lh145 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lh146 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lh147 {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.lh148 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lh149 {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lh150 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.lh151 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lh152 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap: 10px;
}

.lh153 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lh154 {
  font-size: 10px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lh155 {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lh156 {
  display: grid;
  grid-template-columns: 80px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lh157 {
  font-size: 13px;
  font-weight: 700;
}

.lh158 {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

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

.lh160 {
  font-weight: 700;
}

.lh161 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lh162 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.lh163 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.lh164 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.lh165 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.lh166 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lh167 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lh168 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lh169 {
  font-weight: 900;
}

.lh170 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lh171 {
  position: fixed;
  inset: 0;
  z-index: 93;
}

.lh172 {
  position: fixed;
  z-index: 94;
  width: 290px;
  padding: 14px;
  border-radius: 16px;
  background: var(--b-1b1f2a,#1b1f2a);
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  box-shadow: 0 22px 50px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lh173 {
  display: flex;
  align-items: center;
}

.lh174 {
  flex: 1;
  font-size: 14px;
  font-weight: 800;
}

.lh175 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.lh176 {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  min-width: 0;
  width: 100%;
}

.lh177 {
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--t-9adbe6,#9adbe6);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
}

.lh178 {
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lh179 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lh180 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow: auto;
}

.lh181 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 6px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}

.lh182 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  padding: 8px 6px;
}

.lh183 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lh184 {
  font-size: 12px;
  color: var(--t-9adbe6,#9adbe6);
  min-height: 16px;
}

.lh185 {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-end;
}

.lh186 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 96;
  transition: transform .3s,opacity .3s;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: 14px;
}

.lh187 {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: #11131a;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.lhh1:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh2:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh3:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh4:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh5:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh6:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh7:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh8:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh9:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh10:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh11:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh12:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh13:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh14:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh15:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh16:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh17:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh18:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhh19:not(:disabled):hover {
  background: var(--w05,rgba(255,255,255,.06));
}

.lhf1:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf2:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf3:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf4:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf5:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lhf6:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf7:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf8:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf9:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf10:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf11:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf12:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf13:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lhf14:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf15:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf16:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf17:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf18:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf19:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf20:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf21:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lhf22:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf23:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf24:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf25:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf26:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf27:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf28:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf29:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lhf30:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf31:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf32:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf33:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf34:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf35:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf36:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf37:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lhf38:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf39:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf40:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf41:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf42:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf43:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf44:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf45:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lhf46:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf47:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf48:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf49:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf50:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf51:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf52:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf53:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lhf54:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf55:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf56:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf57:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf58:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf59:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf60:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf61:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lhf62:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf63:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf64:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf65:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf66:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf67:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf68:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf69:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lhf70:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf71:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf72:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf73:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lhf74:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}
/* -- generated dta: end -- */

/* ==========================================================================
   22zz121. Datatables · Row Grouping: classes generated from the handoff by
   _dev/datatables_row_grouping_convert.py (li1 …, lih hover, lif focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.urg-page input::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
/* Skeleton rows shimmer */
@keyframes rgShim {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
/* Phones: the toast wraps inside the screen instead of running past it */
@media (max-width: 480px) {
  .urg-page [data-rg-toast] { width: max-content; max-width: calc(100vw - 32px); white-space: normal; }
}

/* -- generated drg: start -- */
.li1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.li2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.li3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.li4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.li5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.li6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.li7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.li8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.li9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.li10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.li11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.li12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.li13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.li14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.li15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.li16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.li17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.li18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.li19 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.li20 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  flex: 999 1 560px;
  max-width: 100%;
}

.li21 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.li22 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.8 0.14 155);
  box-shadow: 0 0 0 4px color-mix(in oklab, oklch(0.8 0.14 155) 22%, transparent);
}

.li23 {
  font-size: 13px;
  font-weight: 800;
}

.li24 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-9adbe6,#9adbe6);
}

.li25 {
  flex: 1;
}

.li26 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.li27 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.li28 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  background: color-mix(in oklab, #9adbe6 12%, transparent);
  border: 1px solid color-mix(in oklab, #9adbe6 35%, transparent);
  font-size: 12px;
  font-weight: 800;
}

.li29 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  font-weight: 400;
}

.li30 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.li31 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.li32 {
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  flex: 1 1 220px;
  max-width: 320px;
}

.li33 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.li34 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
}

.li35 {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  overflow: hidden;
  background: var(--b-1b1f2a,#1b1f2a);
}

.li36 {
  position: relative;
  overflow: auto;
  outline: none;
}

.li37 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  color: var(--t-eef0f5,#eef0f5);
}

.li38 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  height: 42px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--b-1b1f2a,#1b1f2a);
  position: sticky;
  top: 0;
  z-index: 3;
}

.li39 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 6px;
  margin: 0 -6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.li40 {
  font-size: 12px;
}

.li41 {
  top: 42px;
  z-index: 2;
}

.li42 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  transition: box-shadow .12s;
}

.li43 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-eef0f5,#eef0f5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.li44 {
  transition: transform .18s;
}

.li45 {
  width: 16px;
  height: 16px;
  accent-color: #9adbe6;
  margin: 0;
  cursor: pointer;
}

.li46 {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.li47 {
  font-weight: 800;
  white-space: nowrap;
}

.li48 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.li49 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.li50 {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.li51 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}

.li52 {
  font-size: 9.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.li53 {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.li54 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.li55 {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.li56 {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.li57 {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

.li58 {
  outline: none;
  transition: background .12s;
}

.li59 {
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  white-space: nowrap;
}

.li60 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.li61 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.li62 {
  font-weight: 700;
}

.li63 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.li64 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.li65 {
  display: flex;
  flex-direction: column;
}

.li66 {
  font-size: 11.5px;
  font-weight: 700;
}

.li67 {
  font-variant-numeric: tabular-nums;
}

.li68 {
  height: 30px;
  padding: 0 8px;
  border-radius: 9px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
}

.li69 {
  background: var(--w03,rgba(255,255,255,.03));
}

.li70 {
  height: 40px;
  border-bottom: 1px solid var(--w08,rgba(255,255,255,.1));
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.li71 {
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.li72 {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg,var(--w05,rgba(255,255,255,.06)),var(--w10,rgba(255,255,255,.12)),var(--w05,rgba(255,255,255,.06)));
  background-size: 200% 100%;
  animation: rgShim 1.2s linear infinite;
}

.li73 {
  padding: 16px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.li74 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.li75 {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.li76 {
  color: var(--t-c9ccd6,#c9ccd6);
}

.li77 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 30px;
}

.li78 {
  height: 48px;
  border-top: 1.5px solid var(--w14,rgba(255,255,255,.26));
  background: var(--b-1b1f2a,#1b1f2a);
  position: sticky;
  bottom: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.li79 {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.li80 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.li81 {
  flex: 1 1 300px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 16px;
}

.li82 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.li83 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.li84 {
  font-size: 15px;
  font-weight: 800;
}

.li85 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.li86 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
}

.li87 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px;
  border-radius: 14px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.li88 {
  font-size: 16px;
}

.li89 {
  font-size: 12.5px;
  font-weight: 800;
}

.li90 {
  font-size: 11px;
  line-height: 1.3;
  color: var(--t-8a8f9e,#8a8f9e);
}

.li91 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--w07,rgba(255,255,255,.08));
}

.li92 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
}

.li93 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
}

.li94 {
  height: 32px;
  padding: 0 6px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.li95 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.li96 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.li97 {
  flex-shrink: 0;
  min-width: 58px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.li98 {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 12.5px;
  line-height: 1.45;
}

.li99 {
  flex-shrink: 0;
  min-width: 58px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: color-mix(in oklab, #9adbe6 18%, transparent);
  color: var(--t-9adbe6,#9adbe6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.li100 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap: 16px;
  align-items: start;
}

.li101 {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #0b0c11;
}

.li102 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.li103 {
  display: flex;
  gap: 5px;
}

.li104 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e5735f;
}

.li105 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f2c14e;
}

.li106 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5f8f5a;
}

.li107 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #8a8f9e;
}

.li108 {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.li109 {
  padding: 8px 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: auto;
}

.li110 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  padding-right: 12px;
}

.li111 {
  text-align: right;
  color: #4b5263;
  padding-right: 8px;
}

.li112 {
  white-space: pre;
}

.li113 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.li114 {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.li115 {
  position: relative;
  padding: 6px 0 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.li116 {
  position: absolute;
  left: -5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--b-1b1f2a,#1b1f2a);
}

.li117 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 800;
}

.li118 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.li119 {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
}

.li120 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.li121 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.li122 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.li123 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.li124 {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.li125 {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.li126 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.li127 {
  font-weight: 800;
}

.li128 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.li129 {
  display: grid;
  grid-template-columns: 70px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.li130 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.li131 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.li132 {
  font-size: 13px;
  font-weight: 700;
}

.li133 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.li134 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.li135 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.li136 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.li137 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.li138 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.li139 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.li140 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.li141 {
  font-weight: 900;
}

.li142 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.li143 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 96;
  transition: transform .3s,opacity .3s;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: 14px;
}

.li144 {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: #11131a;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.lif1:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lif2:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lif3:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.lif4:focus {
  box-shadow: inset 3px 0 0 #9adbe6;
  background: var(--w04,rgba(255,255,255,.05));
}

.lif5:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lif6:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lif7:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.lif8:focus {
  box-shadow: inset 3px 0 0 #9adbe6;
  background: var(--w04,rgba(255,255,255,.05));
}

.lif9:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lif10:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lif11:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.lif12:focus {
  box-shadow: inset 3px 0 0 #9adbe6;
  background: var(--w04,rgba(255,255,255,.05));
}

.lif13:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lif14:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lif15:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.lif16:focus {
  box-shadow: inset 3px 0 0 #9adbe6;
  background: var(--w04,rgba(255,255,255,.05));
}

.lif17:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lif18:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lif19:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.lif20:focus {
  box-shadow: inset 3px 0 0 #9adbe6;
  background: var(--w04,rgba(255,255,255,.05));
}

.lif21:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lif22:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lif23:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.lif24:focus {
  box-shadow: inset 3px 0 0 #9adbe6;
  background: var(--w04,rgba(255,255,255,.05));
}

.lif25:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lif26:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lif27:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.lif28:focus {
  box-shadow: inset 3px 0 0 #9adbe6;
  background: var(--w04,rgba(255,255,255,.05));
}

.lif29:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lif30:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lif31:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.lif32:focus {
  box-shadow: inset 3px 0 0 #9adbe6;
  background: var(--w04,rgba(255,255,255,.05));
}

.lif33:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lif34:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lif35:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.lif36:focus {
  box-shadow: inset 3px 0 0 #9adbe6;
  background: var(--w04,rgba(255,255,255,.05));
}

.lif37:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lif38:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lif39:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.lif40:focus {
  box-shadow: inset 3px 0 0 #9adbe6;
  background: var(--w04,rgba(255,255,255,.05));
}

.lif41:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lif42:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lif43:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.lif44:focus {
  box-shadow: inset 3px 0 0 #9adbe6;
  background: var(--w04,rgba(255,255,255,.05));
}

.lif45:focus {
  border-color: #9adbe6;
  box-shadow: 0 0 0 3px rgba(154,219,230,.2);
}

.lif46:focus {
  box-shadow: inset 0 0 0 2px #9adbe6;
}

.lif47:focus {
  outline: 2px solid #9adbe6;
  outline-offset: 1px;
}

.lif48:focus {
  box-shadow: inset 3px 0 0 #9adbe6;
  background: var(--w04,rgba(255,255,255,.05));
}
/* -- generated drg: end -- */

/* ==========================================================================
   22zz122. Datatables · Editable: classes generated from the handoff by
   _dev/datatables_editable_convert.py (lj1 …, ljh hover, ljf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.ued-page input::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
/* The saving spinner in a cell */
@keyframes edSpin {
  to { transform: rotate(360deg); }
}
/* Phones: the toast wraps inside the screen instead of running past it */
@media (max-width: 480px) {
  .ued-page [data-ed-toast] { width: max-content; max-width: calc(100vw - 32px); white-space: normal; }
}

/* -- generated ded: start -- */
.lj1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lj2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.lj3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.lj4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lj5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.lj6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.lj7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lj8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lj9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.lj10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lj11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.lj12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lj13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.lj14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lj15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.lj16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.lj17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.lj18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lj19 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lj20 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lj21 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lj22 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.lj23 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
}

.lj24 {
  accent-color: #9adbe6;
  margin: 0;
}

.lj25 {
  flex: 1;
}

.lj26 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lj27 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.lj28 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lj29 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
}

.lj30 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.lj31 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  color: var(--t-9adbe6,#9adbe6);
  border-style: dashed;
}

.lj32 {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lj33 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in oklab, oklch(0.8 0.13 70) 10%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.13 70) 38%, transparent);
}

.lj34 {
  flex: 1;
  min-width: 200px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--t-eef0f5,#eef0f5);
}

.lj35 {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  overflow: hidden;
  background: var(--b-1b1f2a,#1b1f2a);
}

.lj36 {
  position: relative;
  overflow: auto;
}

.lj37 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  color: var(--t-eef0f5,#eef0f5);
}

.lj38 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  height: 40px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--b-1b1f2a,#1b1f2a);
  position: sticky;
  top: 0;
  z-index: 2;
}

.lj39 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lj40 {
  font-size: 10px;
  letter-spacing: 0;
}

.lj41 {
  width: 120px;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
  background: var(--b-1b1f2a,#1b1f2a);
  position: sticky;
  top: 0;
  z-index: 2;
}

.lj42 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lj43 {
  transition: background .2s;
}

.lj44 {
  position: relative;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  outline: none;
  white-space: nowrap;
  transition: background .35s,box-shadow .12s;
}

.lj45 {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  border: none;
  background: var(--w05,rgba(255,255,255,.06));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
}

.lj46 {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  border: none;
  background: var(--w05,rgba(255,255,255,.06));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  cursor: pointer;
}

.lj47 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.lj48 {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  font-size: 13.3333px;
  font-weight: 400;
}

.lj49 {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s;
}

.lj50 {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  display: inline-flex;
  align-items: center;
}

.lj51 {
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lj52 {
  font-size: 10px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lj53 {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f2c98a;
}

.lj54 {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
}

.lj55 {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #9adbe6;
  border-right-color: transparent;
  animation: edSpin .7s linear infinite;
}

.lj56 {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  white-space: normal;
  line-height: 1.25;
}

.lj57 {
  padding: 0 10px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  text-align: right;
  white-space: nowrap;
}

.lj58 {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.lj59 {
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.lj60 {
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.lj61 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
}

.lj62 {
  height: 44px;
  border-top: 1.5px solid var(--w14,rgba(255,255,255,.26));
  background: var(--b-1b1f2a,#1b1f2a);
  position: sticky;
  bottom: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lj63 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lj64 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.lj65 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lj66 {
  flex-shrink: 0;
  min-width: 58px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lj67 {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 12.5px;
  line-height: 1.45;
}

.lj68 {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #0b0c11;
}

.lj69 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lj70 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #8a8f9e;
}

.lj71 {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.lj72 {
  padding: 8px 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: auto;
}

.lj73 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  padding-right: 12px;
}

.lj74 {
  text-align: right;
  color: #4b5263;
  padding-right: 8px;
}

.lj75 {
  white-space: pre;
}

.lj76 {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.lj77 {
  position: relative;
  padding: 6px 0 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lj78 {
  position: absolute;
  left: -5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--b-1b1f2a,#1b1f2a);
}

.lj79 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 800;
}

.lj80 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lj81 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lj82 {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
}

.lj83 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lj84 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lj85 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lj86 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.lj87 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lj88 {
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}

.lj89 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.lj90 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.lj91 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lj92 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lj93 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lj94 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.lj95 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: var(--w04,rgba(255,255,255,.05));
  border: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lj96 {
  font-size: 14px;
  font-weight: 800;
}

.lj97 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lj98 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lj99 {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.lj100 {
  font-weight: 800;
}

.lj101 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lj102 {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lj103 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lj104 {
  font-size: 13px;
  font-weight: 700;
}

.lj105 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lj106 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.lj107 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.lj108 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.lj109 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.lj110 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lj111 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lj112 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lj113 {
  font-weight: 900;
}

.lj114 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lj115 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 96;
  transition: transform .3s,opacity .3s;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: 14px;
}

.lj116 {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: #11131a;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.ljh1:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: #e5735f;
}

.ljh2:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: #e5735f;
}

.ljh3:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: #e5735f;
}

.ljh4:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: #e5735f;
}

.ljh5:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: #e5735f;
}

.ljh6:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: #e5735f;
}

.ljh7:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: #e5735f;
}

.ljh8:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: #e5735f;
}

.ljh9:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: #e5735f;
}

.ljh10:not(:disabled):hover {
  background: var(--w06,rgba(255,255,255,.08));
  color: #e5735f;
}
/* -- generated ded: end -- */

/* ==========================================================================
   22zz123. Datatables · Extensions: classes generated from the handoff by
   _dev/datatables_extensions_convert.py (lk1 …, lkh hover, lkf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
.uxt-page input::placeholder { color: var(--t-6b7080, #6b7080); opacity: 1; }
/* Phones: the toast wraps inside the screen instead of running past it */
@media (max-width: 480px) {
  .uxt-page [data-xt-toast] { width: max-content; max-width: calc(100vw - 32px); white-space: normal; }
}

/* -- generated dxt: start -- */
.lk1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lk2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.lk3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.lk4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lk5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.lk6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.lk7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lk8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lk9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.lk10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lk11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.lk12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lk13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.lk14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lk15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.lk16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.lk17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.lk18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lk19 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lk20 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lk21 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lk22 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.lk23 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
}

.lk24 {
  accent-color: #9adbe6;
  margin: 0;
}

.lk25 {
  flex: 1;
}

.lk26 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lk27 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.lk28 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lk29 {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.lk30 {
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 30px;
  padding: 0 11px;
}

.lk31 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 30px;
}

.lk32 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lk33 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.lk34 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lk35 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 28px;
}

.lk36 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(200px,100%),1fr));
  gap: 4px 12px;
}

.lk37 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 6px;
  border-radius: 9px;
}

.lk38 {
  width: 16px;
  height: 16px;
  accent-color: #9adbe6;
  margin: 0;
  cursor: pointer;
}

.lk39 {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}

.lk40 {
  font-size: 10.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lk41 {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: none;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  font-weight: 400;
}

.lk42 {
  font-size: 12px;
  font-weight: 800;
}

.lk43 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.lk44 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lk45 {
  font-size: 14px;
  font-weight: 800;
  flex: 1;
}

.lk46 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.lk47 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lk48 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lk49 {
  height: 34px;
  width: 200px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.lk50 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lk51 {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: var(--b-f2f3f6,#f2f3f6);
  color: var(--pillink,#11131a);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lk52 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lk53 {
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.lk54 {
  display: block;
  height: 100%;
  background: #9adbe6;
  transition: width .15s;
}

.lk55 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 10%, transparent);
}

.lk56 {
  font-size: 13px;
  font-weight: 800;
}

.lk57 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 10%, transparent);
}

.lk58 {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  overflow: hidden;
  background: var(--b-1b1f2a,#1b1f2a);
}

.lk59 {
  position: relative;
  overflow: auto;
}

.lk60 {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  color: var(--t-eef0f5,#eef0f5);
}

.lk61 {
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  height: 42px;
  padding: 0 0 0 14px;
  background: var(--b-1b1f2a,#1b1f2a);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lk62 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 14px;
  height: 100%;
}

.lk63 {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 4px 2px;
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lk64 {
  color: var(--t-9adbe6,#9adbe6);
  flex-shrink: 0;
}

.lk65 {
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 0;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
  display: flex;
  justify-content: center;
  outline: none;
}

.lk66 {
  width: 2px;
  height: 100%;
  border-radius: 2px;
}

.lk67 {
  padding: 0;
  border: 0;
}

.lk68 {
  padding: 0 14px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}

.lk69 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--t-8a8f9e,#8a8f9e);
  cursor: grab;
  font-size: 14px;
  letter-spacing: -2px;
  font-weight: 400;
}

.lk70 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.lk71 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.lk72 {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--w07,rgba(255,255,255,.08));
  overflow: hidden;
}

.lk73 {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.lk74 {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

.lk75 {
  font-variant-numeric: tabular-nums;
}

.lk76 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lk77 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.lk78 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lk79 {
  flex-shrink: 0;
  min-width: 62px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lk80 {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 12.5px;
  line-height: 1.45;
}

.lk81 {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #0b0c11;
}

.lk82 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lk83 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #8a8f9e;
}

.lk84 {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.lk85 {
  padding: 8px 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: auto;
}

.lk86 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  padding-right: 12px;
}

.lk87 {
  text-align: right;
  color: #4b5263;
  padding-right: 8px;
}

.lk88 {
  white-space: pre;
}

.lk89 {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.lk90 {
  position: relative;
  padding: 6px 0 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lk91 {
  position: absolute;
  left: -5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--b-1b1f2a,#1b1f2a);
}

.lk92 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 800;
}

.lk93 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lk94 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lk95 {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
}

.lk96 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lk97 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lk98 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lk99 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.lk100 {
  padding: 20px;
  border-radius: 14px;
  background: var(--w04,rgba(255,255,255,.05));
  overflow: auto;
}

.lk101 {
  width: 560px;
  max-width: 100%;
  margin: 0 auto;
  padding: 28px 30px 18px;
  background: #fff;
  color: #11131a;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  border-radius: 4px;
  font-size: 10.5px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lk102 {
  display: flex;
  align-items: flex-end;
  border-bottom: 2px solid #11131a;
  padding-bottom: 8px;
}

.lk103 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lk104 {
  font-size: 15px;
  font-weight: 800;
}

.lk105 {
  color: #6b7080;
}

.lk106 {
  font-weight: 800;
  color: #6b7080;
}

.lk107 {
  width: 100%;
  border-collapse: collapse;
}

.lk108 {
  padding: 4px 6px;
  border-bottom: 1px solid #11131a;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lk109 {
  padding: 4px 6px;
  border-bottom: 1px solid #e3e5ea;
  white-space: nowrap;
}

.lk110 {
  display: flex;
  justify-content: space-between;
  color: #6b7080;
  border-top: 1px solid #e3e5ea;
  padding-top: 6px;
}

.lk111 {
  height: 32px;
  width: 90px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--w10,rgba(255,255,255,.16));
  background: var(--w03,rgba(255,255,255,.03));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.lk112 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.lk113 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
}

.lk114 {
  font-size: 12px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lk115 {
  display: block;
  height: 100%;
  width: 62%;
  background: #9adbe6;
}

.lk116 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
  height: 28px;
}

.lk117 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.lk118 {
  font-weight: 800;
}

.lk119 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lk120 {
  display: grid;
  grid-template-columns: 70px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lk121 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lk122 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lk123 {
  font-size: 13px;
  font-weight: 700;
}

.lk124 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lk125 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.lk126 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.lk127 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.lk128 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.lk129 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lk130 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lk131 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lk132 {
  font-weight: 900;
}

.lk133 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lk134 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 96;
  transition: transform .3s,opacity .3s;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: 14px;
}

.lk135 {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: #11131a;
  color: #eef0f5;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.lkf1:focus {
  border-color: #9adbe6;
}

.lkf2:focus {
  outline: 2px solid #9adbe6;
}

.lkf3:focus {
  background: color-mix(in oklab, #9adbe6 30%, transparent);
}

.lkf4:focus {
  outline: 2px solid #9adbe6;
}

.lkf5:focus {
  border-color: #9adbe6;
}

.lkf6:focus {
  outline: 2px solid #9adbe6;
}

.lkf7:focus {
  background: color-mix(in oklab, #9adbe6 30%, transparent);
}

.lkf8:focus {
  outline: 2px solid #9adbe6;
}

.lkf9:focus {
  border-color: #9adbe6;
}

.lkf10:focus {
  outline: 2px solid #9adbe6;
}

.lkf11:focus {
  background: color-mix(in oklab, #9adbe6 30%, transparent);
}

.lkf12:focus {
  outline: 2px solid #9adbe6;
}

.lkf13:focus {
  border-color: #9adbe6;
}

.lkf14:focus {
  outline: 2px solid #9adbe6;
}

.lkf15:focus {
  background: color-mix(in oklab, #9adbe6 30%, transparent);
}

.lkf16:focus {
  outline: 2px solid #9adbe6;
}

.lkf17:focus {
  border-color: #9adbe6;
}

.lkf18:focus {
  outline: 2px solid #9adbe6;
}

.lkf19:focus {
  background: color-mix(in oklab, #9adbe6 30%, transparent);
}

.lkf20:focus {
  outline: 2px solid #9adbe6;
}

.lkf21:focus {
  border-color: #9adbe6;
}

.lkf22:focus {
  outline: 2px solid #9adbe6;
}

.lkf23:focus {
  background: color-mix(in oklab, #9adbe6 30%, transparent);
}

.lkf24:focus {
  outline: 2px solid #9adbe6;
}

.lkf25:focus {
  border-color: #9adbe6;
}

.lkf26:focus {
  outline: 2px solid #9adbe6;
}

.lkf27:focus {
  background: color-mix(in oklab, #9adbe6 30%, transparent);
}

.lkf28:focus {
  outline: 2px solid #9adbe6;
}

.lkf29:focus {
  border-color: #9adbe6;
}

.lkf30:focus {
  outline: 2px solid #9adbe6;
}

.lkf31:focus {
  background: color-mix(in oklab, #9adbe6 30%, transparent);
}

.lkf32:focus {
  outline: 2px solid #9adbe6;
}
/* -- generated dxt: end -- */

/* ==========================================================================
   22zz124. Charts · Line & Area: classes generated from the handoff by
   _dev/charts_line_and_area_convert.py (ll1 …, llh hover, llf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* Phones: the toast wraps inside the screen instead of running past it */
@media (max-width: 480px) {
  .ucl-page [data-ch-toast] { width: max-content; max-width: calc(100vw - 32px); white-space: normal; }
  /* The crosshair tooltip sits centred over the chart instead of beside the crosshair */
  .ucl-page [data-ch-tip] { --ch-tl: 50%; --ch-tt: translateX(-50%); max-width: calc(100% - 8px); }
}

/* -- generated chl: start -- */
.ll1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ll2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.ll3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.ll4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ll5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ll6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.ll7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ll8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ll9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.ll10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ll11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.ll12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ll13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.ll14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ll15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.ll16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ll17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.ll18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ll19 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ll20 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.ll21 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ll22 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.ll23 {
  flex: 1;
}

.ll24 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ll25 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.ll26 {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ll27 {
  font-size: 13px;
  font-weight: 800;
}

.ll28 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ll29 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ll30 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ll31 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.ll32 {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ll33 {
  position: relative;
  outline: none;
  border-radius: 12px;
}

.ll34 {
  display: block;
  overflow: visible;
}

.ll35 {
  transition: all .35s;
}

.ll36 {
  position: absolute;
  top: 6px;
  min-width: 160px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #11131a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 3;
  color: #eef0f5;
}

.ll37 {
  font-size: 11.5px;
  font-weight: 800;
  color: #8a8f9e;
}

.ll38 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.ll39 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.ll40 {
  flex: 1;
  color: #c9ccd6;
}

.ll41 {
  font-variant-numeric: tabular-nums;
}

.ll42 {
  font-size: 11.5px;
  font-weight: 800;
}

.ll43 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: color-mix(in oklab, var(--b-1b1f2a,#1b1f2a) 70%, transparent);
}

.ll44 {
  font-size: 14px;
  font-weight: 800;
}

.ll45 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  max-width: 300px;
}

.ll46 {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.ll47 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ll48 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ll49 {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ll50 {
  text-align: right;
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ll51 {
  text-align: left;
  padding: 7px 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ll52 {
  text-align: right;
  padding: 7px 12px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ll53 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ll54 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.ll55 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ll56 {
  flex-shrink: 0;
  min-width: 58px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll57 {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 12.5px;
  line-height: 1.45;
}

.ll58 {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #0b0c11;
}

.ll59 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ll60 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #8a8f9e;
}

.ll61 {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.ll62 {
  padding: 8px 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: auto;
}

.ll63 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  padding-right: 12px;
}

.ll64 {
  text-align: right;
  color: #4b5263;
  padding-right: 8px;
}

.ll65 {
  white-space: pre;
}

.ll66 {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.ll67 {
  position: relative;
  padding: 6px 0 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ll68 {
  position: absolute;
  left: -5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--b-1b1f2a,#1b1f2a);
}

.ll69 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 800;
}

.ll70 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ll71 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ll72 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap: 18px;
  align-items: start;
}

.ll73 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.ll74 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ll75 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ll76 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.ll77 {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ll78 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
  font-variant-numeric: tabular-nums;
}

.ll79 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: start;
}

.ll80 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.ll81 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.ll82 {
  font-weight: 800;
}

.ll83 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.ll84 {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
}

.ll85 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.ll86 {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ll87 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ll88 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ll89 {
  font-size: 13px;
  font-weight: 700;
}

.ll90 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ll91 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.ll92 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.ll93 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.ll94 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.ll95 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ll96 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ll97 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ll98 {
  font-weight: 900;
}

.ll99 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ll100 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 96;
  transition: transform .3s,opacity .3s;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.llf1:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf2:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf3:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf4:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf5:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf6:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf7:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf8:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf9:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf10:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf11:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf12:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf13:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.llf14:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}
/* -- generated chl: end -- */

/* ==========================================================================
   22zz125. Charts · Bar: classes generated from the handoff by
   _dev/charts_bar_convert.py (lm1 …, lmh hover, lmf focus). The page reuses
   the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* A chart shows its ring for keyboard focus only */
.ucb-page [data-br-chart]:focus-visible { box-shadow: 0 0 0 2px #9adbe6; }
/* Phones: the toast wraps; the tooltip sits centred over the chart */
@media (max-width: 480px) {
  .ucb-page [data-br-toast] { width: max-content; max-width: calc(100vw - 32px); white-space: normal; }
  .ucb-page [data-br-tip] { --br-tl: 50%; --br-tt: translate(-50%, -100%); max-width: calc(100% - 8px); }
}

/* -- generated chb: start -- */
.lm1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lm2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.lm3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.lm4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lm5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.lm6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.lm7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lm8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lm9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.lm10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lm11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.lm12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lm13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.lm14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lm15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.lm16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.lm17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.lm18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lm19 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lm20 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lm21 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lm22 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.lm23 {
  flex: 1;
}

.lm24 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lm25 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.lm26 {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lm27 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lm28 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lm29 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.lm30 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.lm31 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.lm32 {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.lm33 {
  position: relative;
  outline: none;
  border-radius: 12px;
}

.lm34 {
  display: block;
  overflow: visible;
}

.lm35 {
  transition: fill-opacity .15s;
}

.lm36 {
  position: absolute;
  min-width: 150px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #11131a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 3;
  color: #eef0f5;
}

.lm37 {
  font-size: 11.5px;
  font-weight: 800;
  color: #8a8f9e;
}

.lm38 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.lm39 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.lm40 {
  flex: 1;
  color: #c9ccd6;
}

.lm41 {
  font-variant-numeric: tabular-nums;
}

.lm42 {
  font-size: 11.5px;
  font-weight: 800;
}

.lm43 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: color-mix(in oklab, var(--b-1b1f2a,#1b1f2a) 70%, transparent);
}

.lm44 {
  font-size: 14px;
  font-weight: 800;
}

.lm45 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  max-width: 300px;
}

.lm46 {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.lm47 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.lm48 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lm49 {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lm50 {
  text-align: right;
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lm51 {
  text-align: left;
  padding: 7px 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lm52 {
  text-align: right;
  padding: 7px 12px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lm53 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lm54 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.lm55 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lm56 {
  flex-shrink: 0;
  min-width: 58px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lm57 {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 12.5px;
  line-height: 1.45;
}

.lm58 {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #0b0c11;
}

.lm59 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lm60 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #8a8f9e;
}

.lm61 {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.lm62 {
  padding: 8px 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: auto;
}

.lm63 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  padding-right: 12px;
}

.lm64 {
  text-align: right;
  color: #4b5263;
  padding-right: 8px;
}

.lm65 {
  white-space: pre;
}

.lm66 {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.lm67 {
  position: relative;
  padding: 6px 0 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lm68 {
  position: absolute;
  left: -5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--b-1b1f2a,#1b1f2a);
}

.lm69 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 800;
}

.lm70 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lm71 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap: 18px;
  align-items: start;
}

.lm72 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lm73 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lm74 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lm75 {
  display: grid;
  grid-template-columns: 130px minmax(0,1fr) 90px;
  gap: 12px;
  align-items: center;
}

.lm76 {
  display: flex;
  flex-direction: column;
}

.lm77 {
  font-size: 13px;
  font-weight: 800;
}

.lm78 {
  position: relative;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
}

.lm79 {
  position: absolute;
  left: 0;
  top: 8px;
  height: 10px;
  border-radius: 0 4px 4px 0;
}

.lm80 {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: #eef0f5;
}

.lm81 {
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lm82 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lm83 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: start;
}

.lm84 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.lm85 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.lm86 {
  font-weight: 800;
}

.lm87 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lm88 {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
}

.lm89 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.lm90 {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lm91 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lm92 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lm93 {
  font-size: 13px;
  font-weight: 700;
}

.lm94 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lm95 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.lm96 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.lm97 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.lm98 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.lm99 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lm100 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lm101 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lm102 {
  font-weight: 900;
}

.lm103 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lm104 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 96;
  transition: transform .3s,opacity .3s;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
/* -- generated chb: end -- */

/* ==========================================================================
   22zz126. Charts · Pie & Donut: classes generated from the handoff by
   _dev/charts_pie_and_donut_convert.py (ln1 …, lnh hover, lnf focus). The
   page reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* A chart shows its ring for keyboard focus only */
.ucp-page [data-pi-chart]:focus-visible { box-shadow: 0 0 0 2px #9adbe6; }
/* Phones: the toast wraps inside the screen */
@media (max-width: 480px) {
  .ucp-page [data-pi-toast] { width: max-content; max-width: calc(100vw - 32px); white-space: normal; }
}

/* -- generated chp: start -- */
.ln1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ln2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.ln3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.ln4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ln5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.ln6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.ln7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ln8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ln9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.ln10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.ln11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.ln12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ln13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.ln14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ln15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.ln16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.ln17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.ln18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ln19 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ln20 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.ln21 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ln22 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.ln23 {
  flex: 1;
}

.ln24 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ln25 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

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

.ln27 {
  display: flex;
  align-items: center;
  gap: 18px 26px;
  flex-wrap: wrap;
  justify-content: center;
}

.ln28 {
  position: relative;
  flex: 0 1 auto;
  max-width: 100%;
  outline: none;
  border-radius: 18px;
}

.ln29 {
  display: block;
  overflow: visible;
}

.ln30 {
  cursor: pointer;
  transition: transform .18s,fill-opacity .15s;
}

.ln31 {
  transition: transform .18s,stroke-opacity .15s,stroke-width .15s;
}

.ln32 {
  pointer-events: none;
}

.ln33 {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  text-align: center;
}

.ln34 {
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.ln35 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-8a8f9e,#8a8f9e);
  max-width: 140px;
}

.ln36 {
  font-size: 12px;
  font-weight: 800;
}

.ln37 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 30px;
}

.ln38 {
  font-size: 13.5px;
  font-weight: 800;
}

.ln39 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  max-width: 170px;
}

.ln40 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 28px;
}

.ln41 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 200px;
  max-width: 320px;
  min-width: 0;
}

.ln42 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.ln43 {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ln44 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ln45 {
  font-variant-numeric: tabular-nums;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ln46 {
  min-width: 42px;
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ln47 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  margin-top: 4px;
  border-top: 1px solid var(--w08,rgba(255,255,255,.1));
  font-size: 13px;
  font-weight: 800;
}

.ln48 {
  font-variant-numeric: tabular-nums;
}

.ln49 {
  min-width: 42px;
  text-align: right;
}

.ln50 {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.ln51 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ln52 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ln53 {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ln54 {
  text-align: right;
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.ln55 {
  text-align: left;
  padding: 7px 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ln56 {
  text-align: right;
  padding: 7px 12px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ln57 {
  text-align: right;
  padding: 7px 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ln58 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr) 48px;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
}

.ln59 {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ln60 {
  height: 10px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  overflow: hidden;
}

.ln61 {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.ln62 {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ln63 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ln64 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.ln65 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ln66 {
  flex-shrink: 0;
  min-width: 58px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ln67 {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 12.5px;
  line-height: 1.45;
}

.ln68 {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #0b0c11;
}

.ln69 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ln70 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #8a8f9e;
}

.ln71 {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.ln72 {
  padding: 8px 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: auto;
}

.ln73 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  padding-right: 12px;
}

.ln74 {
  text-align: right;
  color: #4b5263;
  padding-right: 8px;
}

.ln75 {
  white-space: pre;
}

.ln76 {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.ln77 {
  position: relative;
  padding: 6px 0 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ln78 {
  position: absolute;
  left: -5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--b-1b1f2a,#1b1f2a);
}

.ln79 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 800;
}

.ln80 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ln81 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ln82 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.ln83 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.ln84 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ln85 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ln86 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(130px,100%),1fr));
  gap: 12px;
}

.ln87 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ln88 {
  font-size: 12.5px;
  font-weight: 800;
}

.ln89 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(180px,100%),1fr));
  gap: 12px;
}

.ln90 {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.ln91 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ln92 {
  display: grid;
  grid-template-columns: 14px minmax(0,1fr) 54px 54px 64px;
  gap: 10px;
  align-items: center;
  min-height: 30px;
  font-size: 12.5px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ln93 {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.ln94 {
  font-weight: 700;
}

.ln95 {
  text-align: right;
  color: var(--t-8a8f9e,#8a8f9e);
  font-variant-numeric: tabular-nums;
}

.ln96 {
  text-align: right;
  font-weight: 800;
}

.ln97 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap: 18px;
  align-items: start;
}

.ln98 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.ln99 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.ln100 {
  font-weight: 800;
}

.ln101 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.ln102 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: start;
}

.ln103 {
  display: grid;
  grid-template-columns: 86px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ln104 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.ln105 {
  font-size: 13px;
  font-weight: 700;
}

.ln106 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.ln107 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.ln108 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.ln109 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.ln110 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.ln111 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ln112 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ln113 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.ln114 {
  font-weight: 900;
}

.ln115 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ln116 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 96;
  transition: transform .3s,opacity .3s;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
/* -- generated chp: end -- */

/* ==========================================================================
   22zz127. Charts · Radar: classes generated from the handoff by
   _dev/charts_radar_convert.py (lo1 …, loh hover, lof focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* A chart shows its ring for keyboard focus only */
.ucr-page [data-rd-chart]:focus-visible { box-shadow: 0 0 0 2px #9adbe6; }
/* Phones: the toast wraps inside the screen */
@media (max-width: 480px) {
  .ucr-page [data-rd-toast] { width: max-content; max-width: calc(100vw - 32px); white-space: normal; }
}

/* -- generated chr: start -- */
.lo1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lo2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.lo3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.lo4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lo5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.lo6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.lo7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lo8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lo9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.lo10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lo11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.lo12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lo13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.lo14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lo15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.lo16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.lo17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.lo18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lo19 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lo20 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lo21 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lo22 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.lo23 {
  flex: 1;
}

.lo24 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lo25 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  align-items: stretch;
}

.lo26 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.lo27 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lo28 {
  font-weight: 800;
  color: var(--t-c9ccd6,#c9ccd6);
  font-variant-numeric: tabular-nums;
}

.lo29 {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  outline: none;
  border-radius: 18px;
}

.lo30 {
  display: block;
  overflow: visible;
}

.lo31 {
  cursor: pointer;
}

.lo32 {
  transition: fill-opacity .15s,stroke-opacity .15s;
}

.lo33 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 40px;
}

.lo34 {
  font-size: 14px;
  font-weight: 800;
}

.lo35 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
  max-width: 200px;
}

.lo36 {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  height: 28px;
}

.lo37 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
}

.lo38 {
  font-size: 12.5px;
  font-weight: 800;
}

.lo39 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}

.lo40 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.lo41 {
  color: var(--t-c9ccd6,#c9ccd6);
}

.lo42 {
  font-variant-numeric: tabular-nums;
}

.lo43 {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.lo44 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.lo45 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lo46 {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lo47 {
  text-align: right;
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lo48 {
  text-align: left;
  padding: 7px 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lo49 {
  text-align: right;
  padding: 7px 12px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lo50 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lo51 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lo52 {
  font-size: 12px;
  font-weight: 800;
}

.lo53 {
  display: grid;
  grid-template-columns: 70px minmax(0,1fr) 40px;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
}

.lo54 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.lo55 {
  height: 8px;
  border-radius: 999px;
  background: var(--w06,rgba(255,255,255,.08));
  overflow: hidden;
}

.lo56 {
  display: block;
  height: 100%;
}

.lo57 {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lo58 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lo59 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.lo60 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lo61 {
  flex-shrink: 0;
  min-width: 58px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lo62 {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 12.5px;
  line-height: 1.45;
}

.lo63 {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #0b0c11;
}

.lo64 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lo65 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #8a8f9e;
}

.lo66 {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.lo67 {
  padding: 8px 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: auto;
}

.lo68 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  padding-right: 12px;
}

.lo69 {
  text-align: right;
  color: #4b5263;
  padding-right: 8px;
}

.lo70 {
  white-space: pre;
}

.lo71 {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.lo72 {
  position: relative;
  padding: 6px 0 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lo73 {
  position: absolute;
  left: -5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--b-1b1f2a,#1b1f2a);
}

.lo74 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 800;
}

.lo75 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lo76 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lo77 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.lo78 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lo79 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lo80 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lo81 {
  display: flex;
  flex-direction: column;
}

.lo82 {
  display: grid;
  grid-template-columns: minmax(0,1fr) 50px 50px 70px;
  gap: 10px;
  align-items: center;
  min-height: 30px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.lo83 {
  font-weight: 700;
}

.lo84 {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lo85 {
  text-align: right;
  color: var(--t-8a8f9e,#8a8f9e);
  font-variant-numeric: tabular-nums;
}

.lo86 {
  text-align: right;
  font-weight: 800;
}

.lo87 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(170px,100%),1fr));
  gap: 12px;
}

.lo88 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
  border-radius: 16px;
  background: var(--w02,rgba(255,255,255,.02));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lo89 {
  font-size: 13px;
  font-weight: 800;
}

.lo90 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap: 18px;
  align-items: start;
}

.lo91 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.lo92 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.lo93 {
  font-weight: 800;
}

.lo94 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lo95 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 18px;
  align-items: start;
}

.lo96 {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lo97 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lo98 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lo99 {
  font-size: 13px;
  font-weight: 700;
}

.lo100 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lo101 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.lo102 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.lo103 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.lo104 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.lo105 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lo106 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lo107 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lo108 {
  font-weight: 900;
}

.lo109 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lo110 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 96;
  transition: transform .3s,opacity .3s;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
/* -- generated chr: end -- */

/* ==========================================================================
   22zz128. Charts · Mixed: classes generated from the handoff by
   _dev/charts_mixed_convert.py (lp1 …, lph hover, lpf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* A chart shows its ring for keyboard focus only */
.ucm-page [data-mx-chart]:focus-visible { box-shadow: 0 0 0 2px #9adbe6; }
/* Phones: the toast wraps; the tooltip sits centred over the chart */
@media (max-width: 480px) {
  .ucm-page [data-mx-toast] { width: max-content; max-width: calc(100vw - 32px); white-space: normal; }
  .ucm-page [data-mx-tip] { --mx-tl: 50%; --mx-tt: translateX(-50%); max-width: calc(100% - 8px); }
}

/* -- generated chm: start -- */
.lp1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lp2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.lp3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.lp4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lp5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.lp6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.lp7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lp9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.lp10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lp11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.lp12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lp13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.lp14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.lp16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.lp17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.lp18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lp19 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lp20 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lp21 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp22 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.lp23 {
  flex: 1;
}

.lp24 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lp25 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.lp26 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.lp27 {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lp28 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lp29 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.lp30 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.lp31 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lp32 {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lp33 {
  position: relative;
  outline: none;
  border-radius: 12px;
}

.lp34 {
  display: block;
  overflow: visible;
}

.lp35 {
  position: absolute;
  top: 8px;
  min-width: 170px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #11131a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 3;
  color: #eef0f5;
}

.lp36 {
  font-size: 11.5px;
  font-weight: 800;
  color: #8a8f9e;
}

.lp37 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.lp38 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.lp39 {
  flex: 1;
  color: #c9ccd6;
}

.lp40 {
  font-variant-numeric: tabular-nums;
}

.lp41 {
  font-size: 10px;
  font-weight: 900;
  color: #6b7080;
  min-width: 10px;
}

.lp42 {
  font-size: 11.5px;
  font-weight: 800;
}

.lp43 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: color-mix(in oklab, var(--b-1b1f2a,#1b1f2a) 70%, transparent);
}

.lp44 {
  font-size: 14px;
  font-weight: 800;
}

.lp45 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
  max-width: 300px;
}

.lp46 {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.lp47 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.lp48 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lp49 {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lp50 {
  text-align: right;
  padding: 8px 12px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--t-8a8f9e,#8a8f9e);
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lp51 {
  text-align: left;
  padding: 7px 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lp52 {
  text-align: right;
  padding: 7px 12px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lp53 {
  font-size: 11.5px;
}

.lp54 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.lp55 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lp56 {
  flex-shrink: 0;
  min-width: 58px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp57 {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 12.5px;
  line-height: 1.45;
}

.lp58 {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #0b0c11;
}

.lp59 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lp60 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #8a8f9e;
}

.lp61 {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.lp62 {
  padding: 8px 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: auto;
}

.lp63 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  padding-right: 12px;
}

.lp64 {
  text-align: right;
  color: #4b5263;
  padding-right: 8px;
}

.lp65 {
  white-space: pre;
}

.lp66 {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.lp67 {
  position: relative;
  padding: 6px 0 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lp68 {
  position: absolute;
  left: -5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--b-1b1f2a,#1b1f2a);
}

.lp69 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 800;
}

.lp70 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lp71 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lp72 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap: 18px;
  align-items: start;
}

.lp73 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lp74 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lp75 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lp76 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: start;
}

.lp77 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.lp78 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.lp79 {
  font-weight: 800;
}

.lp80 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lp81 {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
}

.lp82 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap: 18px;
  align-items: start;
}

.lp83 {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lp84 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lp85 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp86 {
  font-size: 13px;
  font-weight: 700;
}

.lp87 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lp88 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.lp89 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.lp90 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.lp91 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.lp92 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp93 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lp94 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lp95 {
  font-weight: 900;
}

.lp96 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp97 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 96;
  transition: transform .3s,opacity .3s;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
/* -- generated chm: end -- */

/* ==========================================================================
   22zz129. Charts · Sparklines: classes generated from the handoff by
   _dev/charts_sparklines_convert.py (lq1 …, lqh hover, lqf focus). The page
   reuses the .cb-page tokens of Cards · Basic.
   ========================================================================== */
/* A sparkline never runs past its cell: the SVG stretches to the width it gets */
.ucs-page [data-sp] { max-width: 100%; }
/* Phones: the toast wraps inside the screen */
@media (max-width: 480px) {
  .ucs-page [data-sp-toast] { width: max-content; max-width: calc(100vw - 32px); white-space: normal; }
  .ucs-page [data-sp-row="st"] { grid-template-columns: 96px minmax(0, 1fr) 64px; }
  .ucs-page [data-sp-row="pj"] { grid-template-columns: minmax(0, 1fr) 72px 72px; }
}

/* -- generated chs: start -- */
.lq1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lq2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.lq3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.lq4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lq5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.lq6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.lq7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lq8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lq9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.lq10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lq11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.lq12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lq13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.lq14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lq15 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.lq16 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.lq17 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.lq18 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lq19 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap: 16px;
  align-items: stretch;
}

.lq20 {
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  justify-content: center;
  align-items: center;
  min-height: 280px;
  background: repeating-linear-gradient(0deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--w02,rgba(255,255,255,.025)) 23px 24px),var(--b-151821,#141820);
}

.lq21 {
  width: min(100%,360px);
}

.lq22 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w08,rgba(255,255,255,.1));
  min-width: 0;
}

.lq23 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lq24 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-c9ccd6,#c9ccd6);
  flex: 1;
}

.lq25 {
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lq26 {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.lq27 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lq28 {
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.lq29 {
  font-size: 12px;
  font-weight: 800;
}

.lq30 {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  outline: none;
  border-radius: 4px;
  flex-shrink: 0;
}

.lq31 {
  display: block;
  overflow: visible;
}

.lq32 {
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}

.lq33 {
  position: absolute;
  bottom: calc(100% + 8px);
  padding: 5px 8px;
  border-radius: 8px;
  background: #11131a;
  border: 1px solid rgba(255,255,255,.12);
  color: #eef0f5;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}

.lq34 {
  color: #8a8f9e;
  font-weight: 700;
  margin-left: 6px;
}

.lq35 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.lq36 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.lq37 {
  width: min(100%,520px);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto 80px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.lq38 {
  font-weight: 800;
}

.lq39 {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lq40 {
  font-size: 11.5px;
}

.lq41 {
  margin: 0;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lq42 {
  color: var(--t-eef0f5,#eef0f5);
}

.lq43 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lq44 {
  font-size: 15px;
  font-weight: 700;
}

.lq45 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lq46 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.lq47 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  align-self: flex-start;
}

.lq48 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.lq49 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lq50 {
  flex-shrink: 0;
  min-width: 58px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lq51 {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 12.5px;
  line-height: 1.45;
}

.lq52 {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #0b0c11;
}

.lq53 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lq54 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #8a8f9e;
}

.lq55 {
  flex: 1;
}

.lq56 {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: #f2f3f6;
  color: #11131a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.lq57 {
  padding: 8px 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: auto;
}

.lq58 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  padding-right: 12px;
}

.lq59 {
  text-align: right;
  color: #4b5263;
  padding-right: 8px;
}

.lq60 {
  white-space: pre;
}

.lq61 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap: 14px;
}

.lq62 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap: 18px;
  align-items: start;
}

.lq63 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lq64 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lq65 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

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

.lq67 {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.lq68 {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 13px;
}

.lq69 {
  text-align: left;
  padding: 0 14px;
  height: 40px;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  text-transform: uppercase;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lq70 {
  text-align: right;
  padding: 0 14px;
  height: 40px;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  text-transform: uppercase;
  border-bottom: 1px solid var(--w10,rgba(255,255,255,.14));
}

.lq71 {
  text-align: left;
  padding: 0 14px;
  height: 48px;
  font-weight: 800;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lq72 {
  padding: 0 14px;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lq73 {
  text-align: right;
  padding: 0 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lq74 {
  text-align: right;
  padding: 0 14px;
  font-weight: 800;
  border-bottom: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lq75 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lq76 {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lq77 {
  color: var(--t-8a8f9e,#8a8f9e);
}

.lq78 {
  display: flex;
  flex-direction: column;
}

.lq79 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr) 80px;
  gap: 12px;
  align-items: center;
  min-height: 40px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lq80 {
  font-size: 13px;
  font-weight: 700;
}

.lq81 {
  text-align: right;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lq82 {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) 120px;
  gap: 14px;
  align-items: center;
  min-height: 52px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lq83 {
  font-size: 13px;
  font-weight: 800;
}

.lq84 {
  text-align: right;
  font-size: 13px;
  font-weight: 800;
}

.lq85 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.lq86 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.lq87 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lq88 {
  display: grid;
  grid-template-columns: minmax(0,1fr) 120px 120px;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lq89 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lq90 {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lq91 {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lq92 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lq93 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lq94 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lq95 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.lq96 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.lq97 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.lq98 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.lq99 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lq100 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lq101 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lq102 {
  font-weight: 900;
}

.lq103 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lq104 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 96;
  transition: transform .3s,opacity .3s;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eef0f5;
  color: #11131a;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.lqf1:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf2:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf3:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf4:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf5:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf6:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf7:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf8:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf9:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf10:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf11:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf12:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf13:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf14:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf15:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf16:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}

.lqf17:focus {
  box-shadow: 0 0 0 2px #9adbe6;
}
/* -- generated chs: end -- */

/* ==========================================================================
   22zz130. Leaflet Maps: classes generated from the handoff by
   _dev/leaflet_maps_convert.py (lr1 …, lrh hover, lrf focus). The page
   reuses the .cb-page tokens of Cards · Basic; Leaflet's own sheet is
   assets/vendor/leaflet/leaflet.css (left untouched).
   ========================================================================== */
/* Leaflet draws into a canvas div inside each map host */
.ulm-page [data-lm-map] > .lm-canvas { width: 100%; height: 100%; }
/* The map's panes (z-index 400–1000) stay inside the map, under the shell's menus */
.ulm-page .leaflet-container { isolation: isolate; background: transparent; font-family: inherit; }
.ulm-page .leaflet-container:focus-visible { outline: 2px solid #9adbe6; outline-offset: -2px; }
.ulm-page .leaflet-popup-content a { color: #2b8a99; }

/* -- generated lfm: start -- */
.lr1 {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.lr2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  padding-left: 10px;
}

.lr3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

.lr4 {
  font-size: 11.5px;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lr5 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.lr6 {
  font-size: 14px;
  color: var(--t-8a8f9e,#8a8f9e);
  text-wrap: pretty;
}

.lr7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lr8 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lr9 {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--w04,rgba(255,255,255,.05));
  width: fit-content;
  max-width: 100%;
}

.lr10 {
  height: 30px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.lr11 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 10px;
}

.lr12 {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lr13 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 28px;
  transition: background .3s;
}

.lr14 {
  display: contents;
}

.lr15 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lr16 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-left: 4px;
}

.lr17 {
  font-size: 12px;
  font-weight: 900;
  color: var(--t-9adbe6,#9adbe6);
}

.lr18 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.lr19 {
  font-size: 13px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lr20 {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--b-1b1f2a,#1b1f2a),var(--b-151821,#151821));
  border: 1px solid var(--w07,rgba(255,255,255,.07));
  color: var(--t-eef0f5,#eef0f5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lr21 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--w03,rgba(255,255,255,.03));
  border: 1px solid var(--w07,rgba(255,255,255,.08));
}

.lr22 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lr23 {
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
}

.lr24 {
  flex: 1;
}

.lr25 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lr26 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: stretch;
}

.lr27 {
  flex: 999 1 520px;
  min-width: 0;
}

.lr28 {
  overflow: hidden;
  background: #151821;
  border: 1px solid var(--w08,rgba(255,255,255,.1));
}

.lr29 {
  width: 100%;
  background: #1a1d27;
}

.lr30 {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  display: flex;
  gap: 6px;
}

.lr31 {
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(17,19,26,.85);
  color: #eef0f5;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.lr32 {
  position: absolute;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,11,16,.45);
  pointer-events: none;
}

.lr33 {
  padding: 10px 16px;
  border-radius: 999px;
  background: #11131a;
  color: #eef0f5;
  font-size: 13px;
  font-weight: 800;
}

.lr34 {
  position: absolute;
  inset: 0;
  z-index: 650;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.lr35 {
  font-size: 14px;
  font-weight: 800;
  color: #eef0f5;
}

.lr36 {
  font-size: 12.5px;
  color: #a7abb8;
  max-width: 300px;
}

.lr37 {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--w10,rgba(255,255,255,.14));
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  color: #eef0f5;
}

.lr38 {
  position: absolute;
  left: 10px;
  bottom: 26px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(17,19,26,.85);
  color: #eef0f5;
  font-size: 11.5px;
}

.lr39 {
  border-radius: 50%;
  opacity: .8;
}

.lr40 {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lr41 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.lr42 {
  font-size: 14px;
  font-weight: 800;
}

.lr43 {
  font-size: 12px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lr44 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: auto;
}

.lr45 {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 10px;
  border: none;
  border-radius: 12px;
  color: var(--t-eef0f5,#eef0f5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13.3333px;
  font-weight: 400;
}

.lr46 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #11131a;
  font-size: 10.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lr47 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lr48 {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lr49 {
  font-size: 11.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lr50 {
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lr51 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 16px;
  align-items: stretch;
}

.lr52 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.lr53 {
  flex-shrink: 0;
  min-width: 58px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--w06,rgba(255,255,255,.08));
  color: var(--t-c9ccd6,#c9ccd6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lr54 {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--w04,rgba(255,255,255,.05));
  font-size: 12.5px;
  line-height: 1.45;
}

.lr55 {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--t-eef0f5,#eef0f5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #0b0c11;
}

.lr56 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lr57 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: #8a8f9e;
}

.lr58 {
  padding: 8px 0;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  line-height: 1.75;
  overflow: auto;
}

.lr59 {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  padding-right: 12px;
}

.lr60 {
  text-align: right;
  color: #4b5263;
  padding-right: 8px;
}

.lr61 {
  white-space: pre;
}

.lr62 {
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--w08,rgba(255,255,255,.1));
}

.lr63 {
  position: relative;
  padding: 6px 0 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lr64 {
  position: absolute;
  left: -5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9adbe6;
  box-shadow: 0 0 0 3px var(--b-1b1f2a,#1b1f2a);
}

.lr65 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  font-weight: 800;
  color: #9adbe6;
}

.lr66 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lr67 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap: 18px;
  align-items: start;
}

.lr68 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.lr69 {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.lr70 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11px;
  color: var(--t-8a8f9e,#8a8f9e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lr71 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--w03,rgba(255,255,255,.03));
}

.lr72 {
  font-size: 12.5px;
  font-weight: 800;
}

.lr73 {
  font-family: ui-monospace,Menlo,monospace;
  font-size: 12px;
  color: var(--t-9adbe6,#9adbe6);
}

.lr74 {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.lr75 {
  width: 200px;
  flex-shrink: 0;
}

.lr76 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lr77 {
  font-size: 15px;
  font-weight: 800;
}

.lr78 {
  font-size: 12.5px;
  color: var(--t-8a8f9e,#8a8f9e);
}

.lr79 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lr80 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lr81 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 18px;
  align-items: start;
}

.lr82 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: 18px;
  align-items: start;
}

.lr83 {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
  font-size: 12.5px;
}

.lr84 {
  font-weight: 800;
}

.lr85 {
  color: var(--t-c9ccd6,#c9ccd6);
  line-height: 1.45;
}

.lr86 {
  display: grid;
  grid-template-columns: 70px minmax(0,1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lr87 {
  font-size: 13px;
  font-weight: 800;
  color: var(--t-9adbe6,#9adbe6);
}

.lr88 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lr89 {
  font-size: 13px;
  font-weight: 700;
}

.lr90 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-top: 1px solid var(--w06,rgba(255,255,255,.06));
}

.lr91 {
  display: flex;
  gap: 8px;
  font-family: ui-monospace,Menlo,monospace;
  font-size: 11.5px;
  color: var(--t-9adbe6,#9adbe6);
  overflow-wrap: anywhere;
}

.lr92 {
  font-family: 'Urbanist',sans-serif;
  font-weight: 900;
}

.lr93 {
  font-size: 12.5px;
  color: var(--t-c9ccd6,#c9ccd6);
  padding-left: 18px;
  line-height: 1.4;
}

.lr94 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 14px;
}

.lr95 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.8 0.14 155) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.8 0.14 155) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lr96 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lr97 {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-c9ccd6,#c9ccd6);
}

.lr98 {
  font-weight: 900;
}

.lr99 {
  border-radius: 24px;
  padding: 20px;
  background: color-mix(in oklab, oklch(0.72 0.14 35) 7%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 35) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* -- generated lfm: end -- */

/* ==========================================================================
   23. Responsive: drawer sidebar (below 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
  .sidebar-wrap {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    height: auto;
    padding: 12px;
    transform: translateX(-110%);
    transition: transform .25s var(--ease-out);
    visibility: hidden;
  }

  .is-drawer-open .sidebar-wrap {
    transform: none;
    visibility: visible;
  }

  .sidebar {
    width: min(320px, calc(100vw - 24px));
  }

  .sidebar__toggle {
    display: none;
  }

  .sidebar__close {
    display: flex;
  }

  .drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: block;
    background: rgba(5, 6, 9, .6);
  }

  .is-drawer-open {
    overflow: hidden;
  }

  .topbar__menu {
    display: flex;
  }

  .topbar {
    gap: 12px;
  }
}

/* ==========================================================================
   24. Responsive: phones
   ========================================================================== */
@media (max-width: 767px) {
  .content {
    padding: 14px 12px 24px;
  }

  /* One line on phones; the pill scrolls sideways if it ever overflows. */
  .topbar .crumbs {
    order: 3;
    flex-basis: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topbar .crumbs::-webkit-scrollbar {
    display: none;
  }

  .crumbs__list {
    flex-wrap: nowrap;
    gap: 4px;
  }

  .crumbs__list li {
    gap: 4px;
    flex-shrink: 0;
  }

  .crumbs__link {
    padding: 0 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  .crumbs__current {
    padding: 0 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  .topbar__actions {
    gap: 8px;
  }

  .icon-btn {
    width: 44px;
    height: 44px;
  }

  .icon-btn__dot {
    top: 10px;
    right: 11px;
  }

  .user-pill {
    gap: 10px;
    height: 44px;
    padding: 0 16px 0 4px;
    font-size: 15px;
  }

  .user-pill__photo {
    width: 36px;
    height: 36px;
  }

  .page-head {
    padding-left: 4px;
  }

  .page-head__title {
    font-size: 34px;
  }

  .page-head__chips {
    margin-left: 0;
  }

  .project {
    min-height: 560px;
  }

  .project__text {
    left: 20px;
    top: 20px;
    right: 84px;
  }

  .project__name {
    font-size: 32px;
  }

  .project__tags {
    font-size: 17px;
  }

  .project__gauges {
    left: 8px;
    right: 8px;
    bottom: 8px;
    gap: 4px;
    padding: 16px 10px 14px;
    border-radius: 22px;
  }

  .gauge__pct {
    font-size: 24px;
  }

  .gauge__label {
    margin-top: 2px;
    font-size: 16px;
  }

  .gauge__sub {
    font-size: 13px;
  }

  .budget__total {
    height: 48px;
    padding: 0 20px;
    font-size: 21px;
  }

  .budget__logo {
    width: 48px;
    height: 48px;
  }

  .budget__sq--a { left: 14px; top: 21px; }
  .budget__sq--b { left: 25px; top: 12px; }

  .budget__title {
    font-size: 30px;
  }

  .budget__sub {
    font-size: 17px;
  }

  .budget__legend {
    padding-right: 10px;
  }

  .budget__legend dd {
    font-size: 22px;
  }

  .files {
    padding: 18px 16px 12px;
  }

  .files__head {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .files__row {
    gap: 14px;
  }

  .files__tile {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .files__name {
    font-size: 16px;
  }

  .inv,
  .rev,
  .mix,
  .tp,
  .act,
  .notes {
    padding-left: 16px;
    padding-right: 16px;
  }

  .inv__head {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .inv__out {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
  }

  .lead__photo {
    width: 76px;
    height: 76px;
  }

  .lead__edit {
    width: 48px;
    height: 48px;
  }

  .cal {
    padding-left: 6px;
    padding-right: 6px;
  }

  .review__title {
    font-size: 26px;
  }

  .report__head {
    padding: 14px 4px 0;
  }

  .report__title {
    font-size: 26px;
  }

  .report__rule {
    display: none;
  }

  .report__refresh {
    margin-left: auto;
  }

  .rev__totals {
    margin-left: 0;
  }

  .chart {
    height: 200px;
  }

  /* Twelve labels do not fit a phone: keep every other one. */
  .chart__x--dense li:nth-child(even) {
    visibility: hidden;
  }

  .tp__export {
    margin-left: 0;
  }

  /* Overview 3 */
  .pl__time,
  .pl__best {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .pl__name {
    display: none;
  }

  /* The comfort strip keeps its row; only the caption goes. */
  .pl__time > .pl__cap {
    font-size: 0;
  }

  .pl__best {
    row-gap: 10px;
  }

  .pl__best > .pl__cap {
    grid-column: 1 / -1;
  }

  .pl__best .pl__bestlist {
    grid-column: 1 / -1;
  }

  .pl__legend {
    gap: 8px 14px;
    padding-left: 0;
  }

  .pl__legend .pl__hint {
    margin-left: 0;
  }

  .gr__stats {
    gap: 6px;
  }

  .gr__stat {
    padding: 10px;
  }

  .gr__stat dd {
    font-size: 22px;
  }

  .gr__months span:nth-child(even) {
    visibility: hidden;
  }

  .gr__marktext {
    display: none;
  }

  .nps__top {
    flex-direction: column;
  }

  .nps__trend {
    width: auto;
  }

  .nps__cols,
  .nps__row {
    grid-template-columns: 96px minmax(0, 1fr) 30px 30px;
    gap: 10px;
  }

  .nps__bench {
    display: none;
  }

  .ret__mhead {
    flex-wrap: wrap;
  }

  .ret__cap {
    flex-basis: 100%;
  }

  .ret__left {
    margin-left: 0;
  }

  .ret__row {
    flex-wrap: wrap;
  }

  .ret__body {
    flex-basis: calc(100% - 52px);
  }

  .ret__rev {
    margin-left: 52px;
  }

  .ret__btn {
    margin-left: auto;
  }

  .ret__acts {
    padding-left: 0;
  }

  .dir__tools,
  .dir__search {
    width: 100%;
  }

  .dir__search {
    flex: 1 1 100%;
  }

  .map__legend .map__ramp {
    flex: 1 1 80px;
  }

  .map__hqkey {
    margin-left: 0;
  }

  /* Overview 4 */
  .ap__row {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .ap__text {
    flex-basis: calc(100% - 54px);
  }

  .ap__rounds {
    margin-left: 54px;
  }

  .ap__wait {
    width: auto;
    margin-left: auto;
  }

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

  .dl__date {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    padding: 0 2px 2px;
  }

  .pf .o3-tabs {
    flex-wrap: wrap;
    flex-shrink: 1;
    border-radius: 20px;
  }

  .gt__foot .o4-status {
    margin-left: 0;
  }

  /* Categories: the tree keeps name and status; numbers live in All categories */
  .ct-tree__head,
  .ct-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
  }

  .ct-row,
  .ct-row__main {
    gap: 8px;
  }

  /* The status pill keeps only its dot; the label stays for screen readers. */
  .ct-live {
    gap: 0;
    padding: 0 3px;
    font-size: 0;
  }

  .ct-tree__head span:nth-of-type(2),
  .ct-tree__head span:nth-of-type(3),
  .ct-row .ct-rev,
  .ct-row__n {
    display: none;
  }

  .ct-search {
    max-width: none;
  }

  .ct-tb__end {
    margin-left: 0;
  }

  .ct-health {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .ct-save__h,
  .ct-sec__sum {
    display: none;
  }

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

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

  .ct-addrow {
    padding-left: 12px;
  }

  .ct-addrow svg {
    display: none;
  }

  .ct-empty {
    margin-left: 12px;
  }

  .ct-dock {
    right: 12px;
    left: 12px;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 22px;
    transform: translateY(160%);
    white-space: normal;
  }

  .ct-dock.is-on {
    transform: none;
  }

  .o2-row > .o2-block > .ct-all.has-dock {
    padding-bottom: 150px;
  }

  /* Add product */
  .ap-card,
  .ap-side {
    padding: 18px 16px;
  }

  .ap-media__main,
  .ap-insp {
    padding: 18px 16px;
  }

  .ap-head--inline .ap-titles {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

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

  .ap-slots {
    gap: 8px;
  }

  .ap-slot.is-cover .ap-slot__ph svg {
    width: 22px;
    height: 22px;
  }

  .ap-slot:not(.is-cover) .ap-slot__ph span {
    display: none;
  }

  .ap-slug {
    margin-left: 0;
  }

  .ap-ed__tools {
    margin-left: 0;
  }

  .ap-opt-row {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .ap-opt-row .ap-vals {
    grid-column: 1 / -1;
    grid-row: 2;
  }

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

  .ap-num {
    margin-left: 0;
  }

  .ap-save {
    gap: 8px;
    padding: 10px 12px;
    border-radius: 18px;
  }

  .ap-save__sub {
    display: none;
  }

  .ap-save__st {
    flex: 1 1 60%;
  }

  .ap-save .ap-btn,
  .ap-save .ap-pub,
  .ap-save__discard {
    flex: 1 1 0;
    height: 38px;
    margin-left: 0;
    padding: 0 10px;
    font-size: 13px;
  }

  .ap-col--side {
    position: static;
  }

  /* Product list: tabs and status scroll sideways, panels fit the screen */
  .o2-row > .o2-block > .pr-tb {
    padding: 12px 14px 16px;
  }

  .pr-views,
  .pr-sts {
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pr-views::-webkit-scrollbar,
  .pr-sts::-webkit-scrollbar {
    display: none;
  }

  .pr-view::after {
    bottom: 0;
  }

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

  .pr-find {
    flex-basis: 100%;
    max-width: none;
  }

  .pr-dd {
    right: 0;
  }

  .pr-dd__st {
    display: none;
  }

  .pr-sts {
    flex: 1 1 100%;
  }

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

  .pr-fwrap {
    position: static;
  }

  .pr-tb__row {
    position: relative;
  }

  .pr-fpop {
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    width: auto;
    padding: 16px;
  }

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

  .pr-range {
    width: 100%;
    min-width: 0;
  }

  .pr-fgrp__l {
    flex-basis: 100%;
    width: auto;
  }

  .pr-res__n,
  .pr-mix {
    min-width: 0;
  }

  .pr-res__mix {
    min-width: 0;
  }

  .pr-sort {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .pr-sort .pr-select {
    flex: 1;
  }

  .pr-kp__hint {
    flex-basis: 100%;
    margin-left: 0;
  }

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

  .pr-kd {
    flex-direction: column;
    align-items: stretch;
    position: relative;
  }

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

  .pr-kd .pr-x {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .o2-row > .o2-block > .pr-tbl {
    padding: 16px 12px;
  }

  .pr-tbl__tools {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .pr-colwrap {
    margin-left: auto;
  }

  .pr-bulk__acts {
    margin-left: 0;
  }

  .pr-r__vars {
    padding-left: 12px;
  }

  .pr-save__hint {
    display: none;
  }

  .pr-pager .pr-seg {
    margin-left: 0;
  }

  .pr-pages {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  /* Product grid: two small cards per row, the dock wraps above the edge */
  .gd-tools {
    margin-left: 0;
  }

  .gd-cards--s {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .gd-cards--s .gd-info {
    padding: 18px 10px 10px;
  }

  .gd-dock {
    right: 12px;
    left: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
    border-radius: 22px;
    white-space: normal;
    transform: translateY(160%);
  }

  .gd-dock.is-open {
    transform: none;
  }

  .o2-row > .o2-block > .gd.has-dock {
    padding-bottom: 260px;
  }

  /* Projects: one card per row, list view stacks the cover on top */
  .pj-aside {
    flex-basis: 100%;
    min-width: 0;
  }

  .pj-search {
    flex: 1 1 auto;
    margin-left: 0;
  }

  .pj-tab {
    padding-left: 14px;
    font-size: 14px;
  }

  .pj-cards,
  .pj-cards--list .pj-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .pj-cards--list .pj-cover {
    height: 170px;
  }

  .pj-cards--list .pj-info {
    padding-right: 0;
  }

  .pj-name {
    font-size: 20px;
  }

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

  .pj-due {
    margin-left: 6px;
    font-size: 14px;
  }

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

  .pj-sum__body {
    gap: 16px;
  }

  /* Transactions: search full width, status chips scroll, drawer edge to edge */
  .o2-row > .o2-block > .tx-vol,
  .o2-row > .o2-block > .tx-tbl {
    padding: 16px 12px;
  }

  .tx-legend {
    order: 3;
    margin-left: 0;
  }

  .tx-search {
    flex-basis: 100%;
    max-width: none;
  }

  .tx-sts {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tx-sts::-webkit-scrollbar {
    display: none;
  }

  .tx-select {
    flex: 1 1 140px;
  }

  .tx-export {
    margin-left: 0;
  }

  .tx-bulk__first {
    margin-left: 0;
  }

  /* Transaction detail: header stacks, money flow becomes a column */
  .td-hd {
    padding: 18px 16px;
    border-radius: 24px;
  }

  .td-hd__mark {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }

  .td-hd__amt {
    font-size: 44px;
  }

  .td-hd__side {
    align-items: flex-start;
    margin-left: 0;
  }

  .td-hd__btns,
  .td-hd__chips {
    justify-content: flex-start;
  }

  .td-steps {
    padding: 14px 14px 12px;
  }

  .td-steps__list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 12px;
  }

  .td-left,
  .td-right {
    flex-basis: 100%;
  }

  .td-items,
  .td-sum,
  .td-mf {
    padding: 16px;
  }

  .td-rf,
  .td-ac {
    padding: 16px;
    border-radius: 24px;
  }

  .td-rf__reasons {
    grid-template-columns: repeat(2, 1fr);
  }

  .td-rf__amt > span:first-child {
    font-size: 38px;
  }

  .td-rf__legend > span:last-child {
    margin-left: 0;
  }

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

  .td-rf__go {
    flex-basis: 100%;
    order: -1;
  }

  .td-mf__stops,
  .td-mf__stops.is-five {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .td-mf__arr {
    display: none;
  }

  .td-mf__stop {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

  .td-mf__bank b {
    margin-left: 0;
  }

  .td-ac__head .td-tabs {
    margin-left: 0;
  }

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

  .td-page .td-ev {
    padding-left: 26px;
  }

  .td-ev::before {
    left: 5px;
  }

  .td-ev__dot {
    left: -27px;
  }

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

  .td-ev__time {
    width: auto;
  }

  .td-stats,
  .td-checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .td-stats .td-tile p:nth-child(2) {
    font-size: 18px;
  }

  /* Seller list: KPI cards stack, filters wrap, bulk bar becomes a block */
  .sl-hero,
  .sl-kc {
    flex-basis: 100%;
    padding: 16px;
    border-radius: 24px;
  }

  .sl-hero__num {
    font-size: 42px;
  }

  .o2-row > .o2-block > .sl-card {
    padding: 16px 12px;
  }

  .sl-search {
    flex-basis: 100%;
  }

  .sl-tabs {
    flex: 1 1 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sl-tabs::-webkit-scrollbar {
    display: none;
  }

  .sl-select {
    flex: 1 1 130px;
    min-width: 0;
  }

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

  .sl-card__head > .sl-muted:last-child {
    flex-basis: 100%;
    margin-left: 0;
  }

  .sl-pages {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  .sl-bulk {
    right: 12px;
    left: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
    border-radius: 22px;
    transform: translateY(140%);
  }

  .sl-bulk.is-open {
    transform: none;
  }

  .sl-bulk__n {
    flex-basis: 100%;
    text-align: center;
  }

  .sl-dr {
    padding: 18px;
  }

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

  .sl-dr__foot .sl-btn--wide {
    flex-basis: 100%;
    order: -1;
  }

  /* Seller detail: header stacks, heatmap side panel goes full width */
  .sd-page > .o2-block > .sd-hd {
    padding: 18px 16px;
    border-radius: 24px;
  }

  .sd-hd__name {
    font-size: 28px;
  }

  .sd-hd__side {
    align-items: flex-start;
    margin-left: 0;
  }

  .sd-hd__btns {
    justify-content: flex-start;
  }

  .sd-menu {
    right: auto;
    left: 0;
  }

  .sd-left {
    flex-basis: 100%;
  }

  .sd-card,
  .sd-kpi {
    padding: 16px;
  }

  .sd-sales,
  .sd-prods {
    padding: 16px;
    border-radius: 24px;
  }

  .sd-sales__side {
    flex: 1 1 100%;
  }

  .sd-tiles--10 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sd-cats > span {
    padding: 0 6px;
  }

  .sd-cats > span > span {
    display: none;
  }

  .sd-head__end {
    margin-left: 0;
  }

  .sd-head__end {
    max-width: 100%;
  }

  .sd-seg--md {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sd-seg--md::-webkit-scrollbar {
    display: none;
  }

  .sd-seg--md .pr-seg__btn {
    flex-shrink: 0;
  }

  .sd-po__list li {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .sd-rv__score {
    flex-basis: 100%;
  }

  .sd-noterow,
  .sd-replybox {
    flex-wrap: wrap;
  }

  .sd-noterow .sd-btn,
  .sd-replybox .sd-btn {
    flex: 1 1 100%;
  }

  .pf__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .pf__v {
    font-size: 20px;
  }

  /* Reviews: tighter panels, counts drop from the star bar, the topic
     scale keeps only its axis labels, quotes stack */
  .rw-row > .o2-block > .rw-rate,
  .rw-row > .o2-block > .rw-top {
    padding: 18px 16px;
  }

  .rw-chips,
  .rw-rate__ds {
    margin-left: 0;
  }

  .rw-dist__b {
    min-width: 50px;
    padding: 0 9px;
  }

  .rw-dist__n {
    display: none;
  }

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

  .rw-scale,
  .rw-trow__b {
    grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) 30px;
  }

  .rw-scale > span:nth-child(2) > span:not(:last-child),
  .rw-scale > span:nth-child(3) > span:not(:first-child) {
    display: none;
  }

  .rw-trow__pos > span {
    min-width: 34px;
  }

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

  .rw-filters .sl-select {
    flex: 1 1 120px;
  }

  .rw-card {
    gap: 10px;
    padding: 14px 12px;
  }

  /* Email: the thread uses the full width, compose fills the screen width */
  .em-rbody {
    padding: 16px 14px;
  }

  .em-msg__body {
    padding: 0 14px 14px;
  }

  .em-subj {
    font-size: 21px;
  }

  .em-cw,
  .em-cw.fm-upw {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  .fm-modal {
    padding: 12px;
  }

  /* Point of sale: a tighter timeline, sale details in one column */
  .ps-regc {
    flex-basis: 100%;
  }

  .ps-cat,
  .ps-cart,
  .ps-act {
    padding: 16px 14px;
  }

  .ps-ev {
    grid-template-columns: 44px 30px minmax(0, 1fr);
    gap: 8px;
  }

  .ps-tl::before {
    left: 66px;
  }

  .ps-salec__x {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 12px 12px;
  }

  .ps-salec__h .ps-thumbs {
    display: none;
  }

  .ps-salec__t {
    flex-basis: calc(100% - 48px);
  }

  .ps-salec__tot {
    min-width: 0;
    margin-left: auto;
  }

  .ps-holdc {
    gap: 10px 12px;
  }

  .ps-acts {
    display: flex;
    flex-wrap: wrap;
  }

  .ps-acts > * {
    flex: 1 1 auto;
  }

  .ps-holdc__tot {
    min-width: 0;
  }

  .ps-tl__none {
    padding-left: 82px;
  }

  .ps-asearch {
    flex: 1 1 100%;
  }

  .ps-modal {
    padding: 12px;
  }

  .ps-dlg {
    padding: 16px;
  }


  .fm-dlg {
    padding: 16px;
  }

  .po-node,
  .po-page[data-wide] .po-node {
    grid-template-columns: 52px 20px minmax(0, 1fr);
  }

  .po-node__d {
    padding-right: 8px;
  }

  .po-node__d b {
    font-size: 19px;
  }

  .po-node__d span {
    font-size: 9.5px;
    letter-spacing: .06em;
  }

  .po-gh,
  .po-page[data-wide] .po-gh {
    padding-left: 80px;
  }

  .po-page .po-drafts {
    grid-template-columns: minmax(0, 1fr);
    margin-left: 80px;
  }

  .po-node__c {
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-left: 6px;
  }

  .po-node__t {
    flex-basis: 100%;
  }

  .po-node__n {
    white-space: normal;
  }

  .po-node__m {
    flex-wrap: wrap;
    row-gap: 4px;
    white-space: normal;
  }

  .po-node__m > span[aria-hidden] {
    display: none;
  }

  .po-next__a > * {
    flex: 1 1 auto;
  }

  .po-days {
    gap: 4px;
  }

  .po-day {
    padding: 10px 2px;
    border-radius: 14px;
  }

  .po-day__l {
    font-size: 9.5px;
    letter-spacing: .02em;
  }

  .po-day b {
    font-size: 19px;
  }

  .po-hero__a b {
    font-size: 48px;
  }

  .po-next__b {
    padding: 18px;
  }

  .po-next__t {
    font-size: 22px;
  }

  .po-stat {
    min-height: 0;
  }

  .po-ed__b,
  .po-ed__h {
    padding-right: 14px;
    padding-left: 14px;
  }

  .po-ed__f {
    padding: 12px 14px;
  }

  .po-ed .po-ed__acts {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .po-ed__acts > * {
    flex: 1 1 auto;
  }

  .ca-ed__h {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .ca-ed__h h2 {
    flex: 1 0 calc(100% - 46px);
  }

  .ca-ed__h .ca-pill,
  .ca-ed__cf {
    order: 2;
  }

  .ca-x {
    order: 1;
  }

  .ca-dy {
    flex-basis: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--tint-06);
  }

  .ca-form,
  .ca-ed__post {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ca-ed__f {
    padding: 12px 14px;
  }

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

  .ca-when .ca-f:first-child {
    grid-column: 1 / -1;
  }

  .fo-bar {
    gap: 8px;
    padding: 10px;
  }

  .fo-bar__s {
    padding-left: 6px;
  }

  .fo-bar__s > span:last-child span {
    display: none;
  }

  .fo-page .fo-bar__a {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .fo-bar .fo-bb {
    flex: 1 1 auto;
    justify-content: center;
    height: 40px;
    padding: 0 10px;
  }

  .fo-sec {
    padding: 16px;
  }

  .fo-page[data-narrow] .fo-ct {
    grid-template-columns: 30px minmax(0, 1fr) 34px;
  }

  .fo-page[data-narrow] .fo-ct > input,
  .fo-page[data-narrow] .fo-ct__role {
    grid-column: 2;
  }

  .fo-page[data-narrow] .fo-ct__pri {
    align-self: start;
    grid-row: 1;
    margin-top: 4px;
  }

  .fo-page[data-narrow] .fo-ct__rm {
    align-self: start;
    grid-row: 1;
    grid-column: 3;
    margin-top: 2px;
  }

  .ul-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .ul-stat,
  .ul-seats {
    min-height: 0;
    padding: 16px;
  }

  .ul-stat b,
  .ul-seats__v b {
    font-size: 28px;
  }

  .ul-stat > span {
    font-size: 12px;
  }

  .ul-stat:nth-child(3),
  .ul-seats {
    grid-column: 1 / -1;
  }

  .ua-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ua-tabs button {
    flex-shrink: 0;
  }

  .ua-now__h {
    display: none;
  }

  .ua-now p {
    flex: 1;
  }

  .ua-stats b {
    font-size: 15px;
  }

  .se-page .se-tmo .fo-seg--cur {
    align-self: stretch;
    width: 100%;
  }

  .se-page .se-tmo .fo-seg--cur button {
    flex: 1;
    padding: 0 6px;
  }

  .se-score,
  .se-card,
  .ub-seat {
    padding: 16px;
  }

  .ua-tabs a {
    flex-shrink: 0;
  }

  .ub-page .ub-plan__b {
    align-items: flex-start;
  }

  .ub-page .ub-seat__st {
    flex-basis: 100%;
  }

  .un-pl {
    padding: 16px;
  }

  .un-page .un-pz {
    width: 100%;
  }

  .un-pz button {
    flex: 1;
    padding: 0 8px;
  }

  .un-page .un-cols,
  .un-ev {
    grid-template-columns: minmax(0, 1fr) repeat(3, 34px);
    gap: 4px;
  }

  .un-page .un-cols {
    font-size: 9px;
    letter-spacing: .04em;
  }

  .un-g__h .fo-seg {
    width: 100%;
  }

  .un-g__h .fo-seg button {
    flex: 1;
  }

  .un-page .un-pre {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-radius: 19px;
  }

  .un-ev > p > span:first-child {
    flex-wrap: wrap;
  }

  .un-ev b,
  .un-ev > p > span:last-child,
  .un-ch__t span {
    white-space: normal;
  }

  .uc-pl {
    padding: 16px;
  }

  .uc-page .uc-cats {
    width: 100%;
  }

  .uc-page .uc-cats button {
    flex: 1 1 auto;
    padding: 0 8px;
  }

  .uc-cat b,
  .uc-cat p span {
    white-space: normal;
  }

  .tm-list__t span {
    white-space: normal;
  }

  .uj-page .uj-row > .tm-seg {
    flex-shrink: 1;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .uj-page .uj-row > .tm-seg button {
    flex-shrink: 0;
  }

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

  .ub-newcard .fo-field:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 400px) {
  .topbar__actions > .icon-btn:first-child {
    display: none;
  }

  .project__name {
    font-size: 28px;
  }

  .gauge__label {
    font-size: 15px;
  }

  .budget__title {
    font-size: 27px;
  }

  .files__meta {
    column-gap: 12px;
  }

  .rev__totals {
    gap: 16px;
  }

  .rev__now {
    padding-right: 16px;
  }

  .pj-sum__body {
    flex-direction: column;
    align-items: stretch;
  }

  .pj-ring {
    align-self: center;
  }
}

/* ==========================================================================
   24b. Print
   main.js switches to the light theme before printing.
   ========================================================================== */
@media print {
  .sidebar-wrap,
  .drawer-backdrop,
  .topbar,
  .page-head__tools,
  .page-head__chips,
  .toast,
  .menu,
  .skip-link,
  .report__refresh,
  .dlg {
    display: none !important;
  }

  body,
  .app {
    background: #fff;
  }

  .content {
    padding: 0;
  }

  .card,
  .hero,
  .mk,
  .project,
  .budget,
  .files,
  .notes,
  .review,
  .kpi {
    box-shadow: none !important;
    break-inside: avoid;
  }

  .card--lift,
  .mk,
  .kpi {
    transform: none !important;
  }
}

/* ==========================================================================
   25. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Portraits in initials avatars (B.faces): the photo fills the round box.
   ========================================================================== */
.av-ph {
  display: block;
  flex: none;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* ==========================================================================
   Full-width card rows on the component pages. Their generated section
   grids (repeat(auto-fit, minmax(N, 1fr))) left the last row short of the
   right edge; as wrapping rows every row spans the container. Each card
   keeps its own minimum width N from the grid. The class names are the
   converters' generated ones: re-check them after a converter re-runs.
   ========================================================================== */
.unv-page .kv111,
.upg-page .kz69,
.ufs-page .jq92,
.ufc-page .jr66,
.ufe-page .jt76,
.usw-page .jx51,
.usl-page .jw62,
.ufu-page .ju86,
.ulh-page .ki105,
.ulv-page .jz58,
.ufv-page .le81,
.ucp-page .ln82,
.ucm-page .lp72,
.ucs-page .lq62,
.cs-page .ks553 {
  display: flex;
  flex-wrap: wrap;
}

.unv-page .kv111 > * { flex: 1 1 520px; min-width: 0; }

.upg-page .kz69 > * { flex: 1 1 440px; min-width: 0; }

.ufs-page .jq92 > * { flex: 1 1 330px; min-width: 0; }

.ufc-page .jr66 > * { flex: 1 1 330px; min-width: 0; }

.ufe-page .jt76 > * { flex: 1 1 360px; min-width: 0; }

.usw-page .jx51 > * { flex: 1 1 340px; min-width: 0; }

.usl-page .jw62 > * { flex: 1 1 340px; min-width: 0; }

.ufu-page .ju86 > * { flex: 1 1 360px; min-width: 0; }

.ulh-page .ki105 > * { flex: 1 1 380px; min-width: 0; }

.ulv-page .jz58 > * { flex: 1 1 360px; min-width: 0; }
.ulv-page .jz58 > :nth-child(3) { flex-basis: 100%; }
.ulv-page .jz58 > :nth-child(5) { flex-basis: 100%; }

.ufv-page .le81 > * { flex: 1 1 340px; min-width: 0; }

.ucp-page .ln82 > * { flex: 1 1 420px; min-width: 0; }

.ucm-page .lp72 > * { flex: 1 1 440px; min-width: 0; }

.ucs-page .lq62 > * { flex: 1 1 440px; min-width: 0; }

.cs-page .ks553 > * { flex: 1 1 320px; min-width: 0; }