/* PilatesCRM — product UI previews (features + home).
   Lightweight HTML/CSS echoes of the staff Schedule, Today list, client booking and member drawer.
   Resting state = final state (no-JS / reduced motion). JS adds html.js-ui and .is-live on enter. */

.ui-stage {
  position: relative; border-radius: var(--radius-panel); padding: clamp(14px, 3vw, 28px);
  background: linear-gradient(150deg, var(--c-wash-sky) 0%, var(--c-wash-peri) 55%, var(--c-wash-iris) 100%);
  border: var(--border); overflow: hidden; min-width: 0;
}
.ui-stage::before { /* streak accent */
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 70%; height: 90%;
  background:
    linear-gradient(162deg, transparent 38%, rgba(139,184,240,.28) 39%, rgba(139,184,240,.28) 43%, transparent 44%),
    linear-gradient(162deg, transparent 50%, rgba(43,95,191,.12) 51%, rgba(43,95,191,.12) 54%, transparent 55%),
    linear-gradient(162deg, transparent 62%, rgba(139,111,207,.16) 63%, rgba(139,111,207,.16) 66%, transparent 67%);
  pointer-events: none;
}
.ui-preview {
  position: relative; z-index: 1; min-width: 0;
  background: var(--c-surface-raised); border: var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg); overflow: hidden;
  font-family: var(--font-sans); font-size: 13px; color: var(--c-ink); text-align: left;
}
.ui-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: var(--border); background: var(--c-paper);
}
.ui-dots { display: inline-flex; gap: 5px; }
.ui-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-rule-strong); }
.ui-crumb { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.ui-body { padding: 14px; }
.ui-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-3); }
.ui-title { font-weight: 600; font-size: 15px; margin: 2px 0 0; color: var(--c-ink); }
.ui-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ui-muted { color: var(--c-ink-3); font-size: 12px; }
.ui-preview .chip { font-size: 9px; padding: 4px 8px; }
.ui-btn {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 8px 14px; border: 0; cursor: pointer;
  background: var(--c-cobalt); color: var(--c-surface-raised);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.ui-btn:hover { background: var(--c-navy); }
.ui-btn:active { transform: scale(.98); }
.ui-btn:focus-visible, .ui-preview button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ui-btn.ghost { background: transparent; color: var(--c-navy); border: 1px solid var(--c-rule-strong); }
.ui-status { font-size: 12px; color: var(--c-success); min-height: 18px; margin-top: 8px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.ui-status.is-on { opacity: 1; }

/* rows (schedule / today / members) */
.ui-rows { display: grid; gap: 0; border: var(--border); border-radius: 8px; overflow: hidden; }
.ui-row {
  display: grid; grid-template-columns: 62px 1fr auto auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-top: var(--border); background: var(--c-surface);
  transition: background var(--dur-fast) var(--ease-standard);
  cursor: pointer; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; font: inherit; color: inherit; text-align: left;
}
.ui-row:first-child { border-top: 0; }
.ui-row:hover { background: var(--c-paper); }
.ui-row.is-selected { background: var(--c-wash-sky); box-shadow: inset 2px 0 0 var(--c-cobalt); }
.ui-row .t { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-2); }
.ui-row .n { font-weight: 600; font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row .n small { display: block; font-weight: 400; color: var(--c-ink-3); font-size: 11px; }
.ui-row .s { font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-2); }
.ui-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--c-mist); border-radius: 999px; }
.ui-tabs span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; color: var(--c-ink-3); }
.ui-tabs span.on { background: var(--c-cobalt); color: var(--c-surface-raised); }
.ui-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ui-kpi { border: var(--border); border-radius: 8px; padding: 8px 10px; background: var(--c-surface); }
.ui-kpi b { display: block; font-size: 18px; font-weight: 600; color: var(--c-navy); line-height: 1.2; }
.ui-kpi span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); }

/* today list check-in toggles */
.ui-check {
  width: 34px; height: 20px; border-radius: 999px; background: var(--c-rule); position: relative; border: 0; padding: 0; cursor: pointer;
  transition: background var(--dur-base, 200ms) var(--ease-standard);
}
.ui-check::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 260ms var(--ease-out); }
.ui-check[aria-pressed="true"] { background: var(--c-success); }
.ui-check[aria-pressed="true"]::after { transform: translateX(14px); }
.ui-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--c-violet); background: var(--c-wash-iris); flex: none; }
.ui-roster .ui-row { grid-template-columns: 26px 1fr auto auto; }

/* reformer spot picker (booking) */
.ui-spots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 14px 10px; border-radius: 10px; background: linear-gradient(180deg, var(--c-mist), var(--c-wash-sky)); border: 1px dashed var(--c-rule-strong); }
.ui-spot {
  position: relative; aspect-ratio: 1 / 2.1; border-radius: 8px; border: 1.5px solid var(--c-rule-strong); background: var(--c-surface);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--c-ink-2); cursor: pointer; padding: 0;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.ui-spot::before { /* reformer bed + footbar */
  content: ""; position: absolute; left: 22%; right: 22%; top: 12%; height: 42%; border-radius: 5px; background: var(--c-wash-sky); border: 1px solid var(--c-rule);
  transition: transform 420ms var(--ease-out), background var(--dur-fast) var(--ease-standard);
}
.ui-spot::after { content: ""; position: absolute; left: 18%; right: 18%; top: 62%; height: 2px; border-radius: 2px; background: var(--c-rule-strong); }
.ui-spot:hover:not(.is-taken) { border-color: rgba(43,95,191,.45); }
.ui-spot.is-selected { border-color: var(--c-cobalt); box-shadow: 0 0 0 3px rgba(43,95,191,.18); color: var(--c-navy); }
.ui-spot.is-selected::before { background: var(--c-sky); transform: translateY(14%); }
.ui-spot.is-taken { background: var(--c-mist); border-style: dashed; border-color: var(--c-rule); color: var(--c-ink-4); cursor: default; }
.ui-spot.is-taken::before { background: var(--c-rule); }
.ui-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ui-summary div { border: var(--border); border-radius: 8px; padding: 7px 9px; background: var(--c-surface); min-width: 0; }
.ui-summary b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-slots { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.ui-slot { font-family: var(--font-mono); font-size: 10px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--c-rule-strong); background: var(--c-surface); color: var(--c-ink-2); cursor: pointer; }
.ui-slot.is-selected { border-color: var(--c-cobalt); background: var(--c-wash-sky); color: var(--c-navy); }
.ui-slot.is-full { color: var(--c-ink-4); border-style: dashed; cursor: default; }

/* member drawer */
.ui-split { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 230px; }
.ui-list { padding: 10px; border-right: var(--border); background: var(--c-paper); display: grid; align-content: start; gap: 4px; }
.ui-list button { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: left; min-width: 0; }
.ui-list button span:last-child { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-list button.is-selected { background: var(--c-surface-raised); box-shadow: var(--shadow-sm); }
.ui-drawer { padding: 14px; background: var(--c-surface-raised); transition: transform 520ms var(--ease-out), opacity 520ms var(--ease-out); }
.ui-meter { height: 6px; border-radius: 999px; background: var(--c-mist); overflow: hidden; margin: 6px 0 4px; }
.ui-meter i { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--c-cobalt), var(--c-iris)); transform-origin: left; transition: transform 900ms var(--ease-out); }
.ui-visits { display: flex; gap: 6px; margin-top: 10px; }
.ui-visits i { flex: 1; height: 26px; border-radius: 6px; border: 1px dashed var(--c-rule-strong); background: var(--c-surface); }
.ui-visits i.done { background: var(--c-wash-sky); border: 1px solid var(--c-sky); }
.ui-visits i.next { background: var(--c-wash-iris); border: 1px solid var(--c-lilac); }
.ui-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 6px 0; border-top: var(--border); }
.ui-kv span:first-child { color: var(--c-ink-3); }

/* funnel bars / rollup bars */
.ui-bars { display: grid; gap: 8px; }
.ui-bars .r { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 10px; font-size: 12px; }
.ui-bars .track { height: 10px; border-radius: 999px; background: var(--c-mist); overflow: hidden; }
.ui-bars .fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--c-sky), var(--c-cobalt)); transform-origin: left; transition: transform 1000ms var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.ui-bars .fill.v { background: linear-gradient(90deg, var(--c-lilac), var(--c-violet)); }
.ui-bars b { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--c-navy); text-align: right; }

/* automations rule */
.ui-flow { display: grid; gap: 0; }
.ui-node { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: var(--border); border-radius: 8px; background: var(--c-surface); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(var(--i, 0) * 180ms); }
.ui-node .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-violet); background: var(--c-wash-iris); border-radius: 999px; padding: 3px 8px; flex: none; }
.ui-node .v { font-size: 12.5px; font-weight: 500; min-width: 0; }
.ui-link { width: 2px; height: 14px; margin-left: 26px; background: linear-gradient(var(--c-sky), var(--c-iris)); transform-origin: top; transition: transform 300ms var(--ease-out); transition-delay: calc(var(--i, 0) * 180ms); }
.ui-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 12px; }

/* launch */
.ui-ring { display: flex; align-items: center; gap: 14px; }
.ui-ring svg { width: 84px; height: 84px; flex: none; transform: rotate(-90deg); }
.ui-ring circle { fill: none; stroke-width: 3.6; }
.ui-ring .bg { stroke: var(--c-mist); }
.ui-ring .fg { stroke: url(#ui-ring-grad); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 24; transition: stroke-dashoffset 1200ms var(--ease-out); }
.ui-founders { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.ui-founders i { width: 14px; height: 14px; border-radius: 4px; background: var(--c-wash-sky); border: 1px solid var(--c-sky); transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out); transition-delay: calc(var(--i, 0) * 25ms); }
.ui-founders i.open { background: var(--c-surface); border: 1px dashed var(--c-rule-strong); }

/* wizard */
.ui-steps { display: flex; gap: 6px; margin-bottom: 12px; }
.ui-steps i { flex: 1; height: 4px; border-radius: 999px; background: var(--c-mist); transition: background 300ms var(--ease-standard); }
.ui-steps i.on { background: var(--c-cobalt); }
.ui-todo { display: grid; gap: 6px; }
.ui-todo div { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 7px 10px; border: var(--border); border-radius: 8px; background: var(--c-surface); }
.ui-todo div::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--c-rule-strong); flex: none; transition: background 260ms var(--ease-standard), border-color 260ms var(--ease-standard); }
.ui-todo div.done::before { background: var(--c-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; border-color: var(--c-success); }
.ui-todo div.doing::before { border-color: var(--c-cobalt); box-shadow: 0 0 0 3px rgba(43,95,191,.15); }
.ui-todo div span { margin-left: auto; color: var(--c-ink-3); font-size: 11px; }

/* POS */
.ui-cart .ui-kv b { font-weight: 600; }
.ui-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-rule-strong); font-weight: 600; }

/* index chart */
.ui-chart { width: 100%; height: 110px; display: block; }
.ui-chart .line { fill: none; stroke: var(--c-cobalt); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--ease-out); }
.ui-chart .line.v { stroke: var(--c-violet); stroke-dasharray: 3 4; }
.ui-chart .area { fill: url(#ui-area); }
.ui-chart .grid { stroke: var(--c-rule); stroke-width: 1; }

/* white-label phone */
.ui-brand { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px; }
.ui-phone { --wl: #2B5FBF; width: 168px; border-radius: 22px; border: 6px solid var(--c-ink); background: var(--c-surface-raised); overflow: hidden; box-shadow: var(--shadow-md); }
.ui-phone .top { padding: 10px 10px 8px; background: color-mix(in srgb, var(--wl) 12%, #fff); transition: background 400ms var(--ease-standard); }
.ui-phone .top b { display: block; font-size: 11px; }
.ui-phone .top small { font-size: 9px; color: var(--c-ink-3); }
.ui-phone .cls { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-top: var(--border); font-size: 10.5px; }
.ui-phone .cls em { font-style: normal; font-family: var(--font-mono); font-size: 8.5px; color: var(--c-ink-3); }
.ui-phone .book { margin: 8px 10px 10px; display: block; text-align: center; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--wl); border-radius: 999px; padding: 7px; transition: background 400ms var(--ease-standard); }
.ui-swatches { display: flex; gap: 8px; margin-top: 8px; }
.ui-swatches button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--c-surface-raised); box-shadow: 0 0 0 1px var(--c-rule-strong); cursor: pointer; padding: 0; }
.ui-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-ink); }

/* hero preview on /features */
.features-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.features-hero-grid > * { min-width: 0; }
@media (max-width: 900px) { .features-hero-grid { grid-template-columns: 1fr; } }
.feature-split > * { min-width: 0; }
.feature-split .ui-stage { width: 100%; }
.feature-copy h2 { margin: 14px 0 10px; font-size: 24px; }
.feature-copy p { margin: 8px 0 0; font-size: 15px; max-width: 42ch; color: var(--c-ink-3); }
.feature-copy ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--c-ink-2); }
.feature-copy li { display: flex; gap: 8px; align-items: baseline; }
.feature-copy li::before { content: ""; width: 10px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c-sky), var(--c-iris)); flex: none; transform: translateY(-3px); }

/* compact previews on home cards */
.ui-mini { margin-top: 14px; }
.ui-mini .ui-spots { padding: 10px 8px; gap: 5px; }
.ui-mini .ui-rows .ui-row { padding: 7px 10px; grid-template-columns: 64px minmax(0, 1fr) auto; }
.ui-row .t { white-space: nowrap; }
.ui-mini .ui-spot { aspect-ratio: 1 / 1.35; }
.ui-mini .ui-spot::before { top: 10%; height: 40%; }

/* mobile */
@media (max-width: 560px) {
  .ui-body { padding: 12px; }
  .ui-row { grid-template-columns: 62px minmax(0, 1fr) auto; }
  .ui-row .t { white-space: nowrap; }
  .ui-row .s.hide-sm, .hide-sm { display: none; }
  .ui-split { grid-template-columns: 1fr; }
  .ui-list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-right: 0; border-bottom: var(--border); }
  .ui-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-kpi b { font-size: 15px; }
  .ui-bars .r { grid-template-columns: 78px 1fr 36px; }
  .ui-brand { grid-template-columns: 1fr; justify-items: start; }
  .ui-summary b { font-size: 11.5px; }
}

/* ---- enter / idle animation (only with JS, only without reduced motion) ---- */
html.js-ui .ui-preview:not(.is-live) .ui-bars .fill,
html.js-ui .ui-preview:not(.is-live) .ui-meter i { transform: scaleX(0); }
html.js-ui .ui-preview:not(.is-live) .ui-link { transform: scaleY(0); }
html.js-ui .ui-preview:not(.is-live) .ui-node { opacity: 0; transform: translateY(6px); }
html.js-ui .ui-preview:not(.is-live) .ui-ring .fg { stroke-dashoffset: 100; }
html.js-ui .ui-preview:not(.is-live) .ui-chart .line { stroke-dashoffset: 100; }
html.js-ui .ui-preview:not(.is-live) .ui-founders i:not(.open) { opacity: 0; transform: scale(.6); }
html.js-ui .ui-preview:not(.is-live) .ui-drawer { opacity: 0; transform: translateX(16px); }
html.js-ui .ui-preview .ui-rows > * { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out), background var(--dur-fast) var(--ease-standard); transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s; }
html.js-ui .ui-preview:not(.is-live) .ui-rows > * { opacity: 0; transform: translateY(6px); }
.ui-pulse { animation: ui-pulse 900ms var(--ease-out); }
@keyframes ui-pulse { 0% { box-shadow: 0 0 0 0 rgba(43,95,191,.35); } 100% { box-shadow: 0 0 0 10px rgba(43,95,191,0); } }
.ui-tick { animation: ui-tick 420ms var(--ease-out); }
@keyframes ui-tick { 0% { transform: translateY(-4px); opacity: 0; } 100% { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ui-preview *, .ui-preview *::before, .ui-preview *::after { transition: none !important; animation: none !important; }
}

/* Mobile QA — product UI previews (2026-10-06) */
@media (max-width: 560px) {
  .ui-stage { padding: 12px; }
  .ui-preview { font-size: 12.5px; }
  .ui-spots {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    padding: 10px 6px;
  }
  .ui-spot { font-size: 9px; padding-bottom: 4px; }
  .ui-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ui-kpis { gap: 6px; }
  .ui-bars .r { grid-template-columns: minmax(0, 72px) minmax(0, 1fr) 32px; gap: 8px; font-size: 11px; }
  .ui-phone { width: min(168px, 100%); }
  .ui-mini .ui-rows .ui-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 7px 8px;
  }
  .ui-row .n { font-size: 12px; }
  .features-hero-grid .ui-stage { margin-top: 8px; }
  .feature-copy h2 { font-size: 22px; }
  .feature-split { margin: 32px 0; gap: 20px; }
}

@media (max-width: 400px) {
  .ui-tabs span { padding: 5px 8px; font-size: 8.5px; }
  .ui-head { flex-wrap: wrap; }
  .ui-crumb { font-size: 9px; }
}


/* Operational mini-list (home engines card) */
.op-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.op-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: var(--c-paper); border: var(--border); border-radius: 10px; }
.op-list b { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink); }
.op-list small { display: block; font-size: 12px; color: var(--c-ink-2); }
.op-chip { flex: none; font-size: 11.5px; font-weight: 500; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.op-ok { background: #E3F2EC; color: #1F6650; }
.op-due { background: #E4ECFA; color: #1E3A7A; }

/* ---- Ink & Light app look (matches the live app) ---- */
.ui-preview { background: #F4F6FB; border: 0; border-radius: 16px; box-shadow: 0 0 0 1px rgba(26,27,58,.07), 0 2px 4px rgba(26,27,58,.05), 0 8px 20px -6px rgba(26,27,58,.12); color: #1A1B3A; }
.ui-bar { position: relative; overflow: hidden; gap: 10px; padding: 10px 12px; background: #12132B; border-bottom: 0; flex-wrap: nowrap; }
.ui-bar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(180px 140px at 100% 0%, rgba(94,74,158,.5), transparent 70%); pointer-events: none; }
.ui-bar > * { position: relative; }
.ui-crumb { flex: 0 1 auto; color: #B9BCD9; font-size: 10px; letter-spacing: .08em; }
.ui-ask { margin-left: auto; flex: 0 1 220px; min-width: 0; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 5px 0 5px; border-radius: 8px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 11.5px; color: #B9BCD9; }
.ui-ask > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-spark { flex: none; width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(120deg,#5E4A9E,#2B5FBF) center/cover; position: relative; }
.ui-spark::after { content: ""; position: absolute; inset: 4px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.ui-ask kbd { flex: none; font: 500 9.5px/14px var(--font-mono); color: #B9BCD9; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; padding: 0 4px; }
.ui-title { font-size: 16px; font-weight: 600; letter-spacing: -.006em; }
.ui-label { font-size: 10px; letter-spacing: .08em; color: #5A5E7D; }
.ui-muted { color: #5A5E7D; }
.ui-rows { border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(26,27,58,.06), 0 1px 2px rgba(26,27,58,.06), 0 2px 6px -2px rgba(26,27,58,.06); }
.ui-row { background: #fff; border-top-color: #E0E5F0; }
.ui-row.is-selected { background: #F8F9FC; box-shadow: inset 3px 0 0 #5E4A9E; }
.ui-preview .chip { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 2px 8px; border-radius: 999px; }
.ui-btn { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; border-radius: 8px; padding: 7px 12px; background: #2B5FBF; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(26,27,58,.12); }
.ui-btn.ghost { background: #fff; color: #1A1B3A; border: 0; box-shadow: 0 0 0 1px #CDD4E6; }
@media (max-width: 480px) { .ui-crumb { display: none; } .ui-ask { flex: 1 1 auto; } .ui-ask kbd { display: none; } }