/* ──────────────────────────────────────────────────────────────────────────────
   TruCreatives UI · components · v1.0
   Plain CSS, no framework needed. Load tokens.css first. Every class starts with
   "tru-" so nothing collides with the host app.
   ────────────────────────────────────────────────────────────────────────────── */

/* ── app shell ─────────────────────────────────────────────────────────────── */
.tru-app {
  min-height: 100vh;
  background: var(--tru-ambient), hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--tru-font-sans);
  font-size: var(--tru-text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.tru-app *, .tru-app *::before, .tru-app *::after { box-sizing: border-box; }
.tru-app :focus-visible { outline: 2px solid hsl(var(--primary) / 0.6); outline-offset: 2px; border-radius: 6px; }

/* ── type ──────────────────────────────────────────────────────────────────── */
.tru-eyebrow { font-family: var(--tru-font-sans); font-size: var(--tru-text-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tru-label); }
.tru-gradient-text { background: var(--tru-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tru-display { font-family: var(--tru-font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.tru-title { font-family: var(--tru-font-display); font-weight: 700; font-size: var(--tru-text-xl); letter-spacing: -0.01em; }
.tru-muted { color: hsl(var(--muted-foreground)); }
.tru-mono { font-family: var(--tru-font-mono); }

/* ── glass rail + pills (the Discover · Map · Build stepper, view switchers, tabs) ── */
.tru-rail { display: inline-flex; align-items: center; gap: 4px; padding: 4px; min-width: 0; border-radius: var(--tru-radius-rail); background: var(--tru-rail-bg); border: 1px solid var(--tru-rail-border); box-shadow: var(--tru-rail-shadow); backdrop-filter: blur(16px); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tru-rail::-webkit-scrollbar { display: none; }
.tru-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: var(--tru-radius-pill); background: transparent; color: hsl(var(--muted-foreground)); font: 500 var(--tru-text-sm)/1 var(--tru-font-ui); letter-spacing: .04em; white-space: nowrap; cursor: pointer; transition: all .2s var(--tru-ease); }
.tru-pill:hover { color: hsl(var(--foreground)); }
.tru-pill.is-active, .tru-pill[aria-selected="true"], .tru-pill[data-state="active"] { color: hsl(var(--foreground)); background: var(--tru-pill-active-bg); box-shadow: 0 0 28px hsl(var(--primary) / 0.3), inset 0 0 0 1px hsl(var(--primary) / 0.5); }

/* ── ring icons (the "From Vision to Reality" step icons). Set the colour with --ring-c ── */
.tru-ring { --ring-c: hsl(var(--primary)); --size: 40px; display: inline-grid; place-items: center; flex-shrink: 0; width: var(--size); height: var(--size); border-radius: 9999px; border: 2px solid var(--ring-c); color: var(--ring-c); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--ring-c) 16%, hsl(var(--card))) 0%, hsl(var(--card)) 72%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-c) 10%, transparent), 0 0 22px color-mix(in srgb, var(--ring-c) 42%, transparent); transition: transform .2s var(--tru-ease), box-shadow .2s var(--tru-ease); }
.tru-ring svg { width: 50%; height: 50%; stroke-width: 2; color: inherit; }
button.tru-ring, a.tru-ring { cursor: pointer; }
button.tru-ring:hover, a.tru-ring:hover { transform: scale(1.05); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring-c) 16%, transparent), 0 0 30px color-mix(in srgb, var(--ring-c) 60%, transparent); }
.tru-ring--xs { --size: 20px; border-width: 1.5px; box-shadow: 0 0 9px color-mix(in srgb, var(--ring-c) 35%, transparent); }
.tru-ring--sm { --size: 24px; border-width: 1.5px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-c) 10%, transparent), 0 0 12px color-mix(in srgb, var(--ring-c) 38%, transparent); }
.tru-ring--lg { --size: 56px; }
.tru-ring--xl { --size: 96px; border-width: 3px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--ring-c) 10%, transparent), 0 0 40px color-mix(in srgb, var(--ring-c) 45%, transparent); }
.tru-ring--xl svg { width: 40%; height: 40%; }
.tru-ring.is-green { --ring-c: var(--tru-green); }
.tru-ring.is-blue { --ring-c: var(--tru-ring-blue); }
.tru-ring.is-cyan { --ring-c: var(--tru-ring-cyan); }
.tru-ring.is-orange { --ring-c: var(--tru-orange); }
.tru-ring.is-indigo { --ring-c: var(--tru-indigo); }
.tru-ring.is-teal { --ring-c: var(--tru-teal); }
.tru-ring.is-pink { --ring-c: var(--tru-pink); }
.tru-ring.is-amber { --ring-c: var(--tru-amber); }
.tru-ring.is-muted { --ring-c: hsl(var(--muted-foreground)); box-shadow: none; }

/* ── step timeline: rings joined by a gradient line, 01 numbers, title, text, tag ── */
.tru-steps { display: grid; grid-template-columns: repeat(var(--steps, 6), minmax(0, 1fr)); gap: 16px; position: relative; text-align: center; }
.tru-steps::before { content: ""; position: absolute; top: 48px; left: calc(100% / var(--steps, 6) / 2); right: calc(100% / var(--steps, 6) / 2); height: 2px; background: var(--tru-gradient-connector); opacity: .55; }
.tru-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tru-step .tru-ring { --size: 96px; border-width: 3px; margin-bottom: 10px; background: hsl(var(--card)); }
.tru-step .tru-ring svg { width: 38%; height: 38%; }
.tru-step__num { font: 600 13px/1 var(--tru-font-mono); letter-spacing: .12em; color: var(--ring-c, var(--tru-label)); }
.tru-step__title { font: 700 18px/1.2 var(--tru-font-display); letter-spacing: -0.01em; color: hsl(var(--foreground)); text-wrap: balance; }
.tru-step__text { color: hsl(var(--muted-foreground)); font-size: var(--tru-text-base); line-height: 1.6; max-width: 26ch; }
@media (max-width: 900px) {
  .tru-steps { grid-template-columns: 1fr; text-align: left; }
  .tru-steps::before { top: 0; bottom: 0; left: 28px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--tru-green), var(--tru-ring-blue), var(--tru-ring-cyan), var(--tru-orange)); }
  .tru-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: start; }
  .tru-step .tru-ring { --size: 56px; border-width: 2px; grid-row: span 4; margin: 0; }
  .tru-step__text { max-width: none; }
  .tru-step .tru-tag { justify-self: start; margin-top: 4px; }
}

/* ── frames, cards, panels ─────────────────────────────────────────────────── */
.tru-frame { border-radius: var(--tru-radius-lg); border: 1px solid var(--tru-frame-border); background: var(--tru-frame-bg); box-shadow: var(--tru-frame-shadow); }
.tru-card { border-radius: var(--tru-radius-md); border: 1px solid var(--tru-card-border); background: var(--tru-card-bg); padding: 12px 14px; }
.tru-card__title { font: 700 14px/1.3 var(--tru-font-display); }
.tru-panel-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--tru-frame-border); }
.tru-grid-bg { background-image: linear-gradient(hsl(var(--foreground) / 0.04) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--foreground) / 0.04) 1px, transparent 1px); background-size: 28px 28px; }

/* ── buttons ───────────────────────────────────────────────────────────────── */
.tru-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 20px; border-radius: var(--tru-radius-full); font: 700 var(--tru-text-sm)/1 var(--tru-font-sans); letter-spacing: .01em; white-space: nowrap; cursor: pointer; transition: transform .15s var(--tru-ease), box-shadow .2s var(--tru-ease), background .2s; text-decoration: none; }
.tru-btn svg { width: 16px; height: 16px; }
.tru-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.tru-btn--primary { color: var(--tru-btn-color); background: var(--tru-btn-bg); border: 1.5px solid var(--tru-btn-border); box-shadow: var(--tru-btn-shadow); }
.tru-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 38px hsl(var(--primary) / 0.5); }
.tru-btn--ghost { color: var(--tru-chip-color); background: var(--tru-chip-bg); border: 1px solid var(--tru-chip-border); }
.tru-btn--ghost:hover { border-color: hsl(var(--primary) / 0.5); box-shadow: 0 0 18px hsl(var(--primary) / 0.15); }
.tru-btn--solid { color: #fff; background: hsl(var(--primary)); border: 0; box-shadow: 0 6px 18px -8px hsl(var(--primary) / 0.8); }
.tru-btn--solid:hover { transform: translateY(-1px); }
.tru-btn--danger { color: #fff; background: var(--tru-danger); border: 0; }
.tru-btn--sm { height: 30px; padding: 0 14px; font-size: 12px; }
.tru-btn--lg { height: 48px; padding: 0 28px; font-size: 15px; }
.tru-btn--block { width: 100%; }
/* round floating action (sidebar toggle, assistant) */
.tru-fab { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 9999px; color: #fff; border: 1.5px solid hsl(var(--primary) / 0.6); background: linear-gradient(135deg, hsl(var(--primary)), hsl(199 89% 55%)); box-shadow: 0 0 24px hsl(var(--primary) / 0.55), 0 8px 20px -8px rgba(0,0,0,.5); cursor: pointer; transition: transform .2s var(--tru-ease), box-shadow .2s; }
.tru-fab:hover { transform: scale(1.08); box-shadow: 0 0 34px hsl(var(--primary) / 0.75), 0 8px 20px -8px rgba(0,0,0,.5); }
.tru-fab svg { width: 20px; height: 20px; }

/* ── chips (filters, toggles in tool rows) ─────────────────────────────────── */
.tru-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--tru-radius-full); border: 1px solid var(--tru-chip-border); background: var(--tru-chip-bg); color: var(--tru-chip-color); font: 600 var(--tru-text-sm)/1 var(--tru-font-sans); cursor: pointer; transition: all .2s var(--tru-ease); white-space: nowrap; }
.tru-chip:hover { border-color: hsl(var(--primary) / 0.5); box-shadow: 0 0 18px hsl(var(--primary) / 0.15); }
.tru-chip.is-on, .tru-chip[aria-pressed="true"], .tru-chip[data-on="true"] { color: var(--tru-outline-color); border-color: color-mix(in srgb, var(--tru-outline-color) 50%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tru-outline-color) 35%, transparent), 0 0 18px color-mix(in srgb, var(--tru-outline-color) 14%, transparent); }
/* outline chip with a cyan inset ring ("Activity", "Automations", "Team") */
.tru-outline-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--tru-radius-pill); border: 1px solid var(--tru-rail-border); background: var(--tru-outline-bg); color: var(--tru-outline-color); font: 500 var(--tru-text-sm)/1 var(--tru-font-ui); letter-spacing: .04em; box-shadow: inset 0 0 0 1px var(--tru-outline-ring); backdrop-filter: blur(16px); cursor: pointer; transition: box-shadow .2s; }
.tru-outline-chip:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tru-outline-color) 55%, transparent), 0 0 20px color-mix(in srgb, var(--tru-outline-color) 18%, transparent); }

/* ── badges, tags, status pills ────────────────────────────────────────────── */
.tru-badge { --c: hsl(var(--primary)); display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--tru-radius-full); font: 700 10px/1.6 var(--tru-font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.tru-badge--live { --c: var(--tru-live); }
.tru-badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; box-shadow: 0 0 8px currentColor; animation: tru-pulse 1.6s ease-in-out infinite; }
/* the outlined tags under each step ("Kickoff in 48 hours") */
.tru-tag { --c: var(--tru-ring-blue); display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 8px 18px; border-radius: var(--tru-radius-full); font: 600 13px/1.35 var(--tru-font-sans); color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); }
/* status pill inside tables ("New", "Writing proposal") */
.tru-status { --c: hsl(var(--primary)); display: inline-flex; align-items: center; justify-content: center; min-width: 110px; height: 32px; padding: 0 14px; border-radius: 10px; font: 600 12.5px/1 var(--tru-font-sans); color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
/* segment / category chip with a dot */
.tru-segment { --c: hsl(var(--primary)); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 10px; font: 600 12px/1 var(--tru-font-sans); color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.tru-segment::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; }
.is-green { --c: var(--tru-green); } .is-blue { --c: var(--tru-ring-blue); } .is-cyan { --c: var(--tru-ring-cyan); } .is-orange { --c: var(--tru-orange); }
.is-indigo { --c: var(--tru-indigo); } .is-teal { --c: var(--tru-teal); } .is-pink { --c: var(--tru-pink); } .is-amber { --c: var(--tru-amber); }
.is-red { --c: var(--tru-danger); } .is-gold { --c: var(--tru-gold); }

/* ── avatars: rounded-square initials, never grey circles ─────────────────── */
.tru-avatar { --c: var(--tru-ring-blue); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: var(--c); font: 700 11px/1 var(--tru-font-sans); letter-spacing: .02em; box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--c) 70%, transparent); }
.tru-avatar-stack { display: inline-flex; }
.tru-avatar-stack .tru-avatar { box-shadow: 0 0 0 2px hsl(var(--card)); }
.tru-avatar-stack .tru-avatar + .tru-avatar { margin-left: -6px; }

/* ── form controls ─────────────────────────────────────────────────────────── */
.tru-input, .tru-select, .tru-textarea { width: 100%; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--background) / 0.7); color: hsl(var(--foreground)); font: 400 var(--tru-text-base)/1.4 var(--tru-font-sans); transition: border-color .15s, box-shadow .15s; }
.tru-textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
.tru-input:focus, .tru-select:focus, .tru-textarea:focus { outline: none; border-color: hsl(var(--primary) / 0.6); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15), 0 0 18px hsl(var(--primary) / 0.12); }
.tru-input::placeholder, .tru-textarea::placeholder { color: hsl(var(--muted-foreground) / 0.8); }
.tru-label { display: block; margin-bottom: 6px; font-size: var(--tru-text-xs); font-weight: 600; color: hsl(var(--muted-foreground)); }
/* search field ("Search or ask") */
.tru-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 9999px; border: 1px solid hsl(var(--border) / 0.8); background: hsl(var(--card) / 0.6); color: hsl(var(--muted-foreground)); }
.tru-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: hsl(var(--foreground)); font: inherit; }
.tru-kbd { padding: 2px 6px; border-radius: 6px; border: 1px solid hsl(var(--border)); font: 500 10px/1 var(--tru-font-mono); color: hsl(var(--muted-foreground)); }
/* checkbox: rounded square, brand fill, animated check */
.tru-checkbox { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; width: 18px; height: 18px; margin: 0; border-radius: 5px; border: 2px solid hsl(var(--primary) / 0.5); background: hsl(var(--card)); cursor: pointer; transition: all .15s; vertical-align: middle; }
.tru-checkbox:hover { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.1); }
.tru-checkbox::after { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform 120ms ease-out; background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.tru-checkbox:checked { background: hsl(var(--primary)); border-color: hsl(var(--primary)); box-shadow: 0 0 12px hsl(var(--primary) / 0.45); }
.tru-checkbox:checked::after { transform: scale(1); }
/* switch: <input type="checkbox" role="switch" class="tru-switch"> */
.tru-switch { appearance: none; -webkit-appearance: none; position: relative; width: 38px; height: 22px; margin: 0; border-radius: 9999px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); cursor: pointer; transition: background .2s, box-shadow .2s; vertical-align: middle; }
.tru-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s var(--tru-ease); }
.tru-switch:checked { background: var(--tru-gradient-brand); border-color: transparent; box-shadow: 0 0 14px hsl(var(--primary) / 0.5); }
.tru-switch:checked::after { transform: translateX(16px); }

/* ── floaty table ──────────────────────────────────────────────────────────── */
.tru-table-wrap { border-radius: var(--tru-radius-lg); border: 1px solid var(--tru-frame-border); background: var(--tru-frame-bg); box-shadow: var(--tru-frame-shadow); overflow: auto; }
.tru-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--tru-text-base); }
.tru-table th { position: sticky; top: 0; z-index: 2; text-align: left; padding: 12px 16px; font: 600 var(--tru-text-2xs)/1 var(--tru-font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tru-label); background: var(--tru-table-head), hsl(var(--card)); border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
.tru-table td { padding: 10px 16px; border-bottom: 1px solid hsl(var(--border) / 0.55); vertical-align: middle; }
.tru-table tbody tr { transition: background .15s; }
.tru-table tbody tr:hover { background: hsl(var(--primary) / 0.06); }
.tru-table tbody tr:last-child td { border-bottom: 0; }
/* sticky first column with a solid background so later columns never paint over it */
.tru-table .tru-sticky { position: sticky; left: 0; z-index: 1; background: hsl(var(--card)); box-shadow: 6px 0 12px -8px rgba(0,0,0,.35); }
.tru-table th.tru-sticky { z-index: 3; }
.tru-table .tru-link { color: hsl(var(--foreground)); font-weight: 500; text-decoration: none; cursor: pointer; }
.tru-table .tru-link:hover { color: hsl(var(--primary)); }
/* grouped rows: one short heading per group with a numbered ring */
.tru-group-row td { padding: 0; background: hsl(var(--muted) / 0.25); }
.tru-group-head { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; font-weight: 700; }
.tru-group-head .tru-ring { --size: 28px; border-width: 2px; font: 700 10px/1 var(--tru-font-mono); }

/* ── rich text (docs, pages, notes): wrap content in .tru-prose ────────────── */
.tru-prose { max-width: 72ch; font-size: 15px; line-height: 1.7; color: hsl(var(--foreground)); }
.tru-prose > * + * { margin-top: .7em; }
.tru-prose h1 { font: 700 34px/1.15 var(--tru-font-display); letter-spacing: -0.02em; margin: 1.4em 0 .4em; background: var(--tru-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tru-prose h2 { font: 700 24px/1.25 var(--tru-font-display); letter-spacing: -0.01em; margin: 1.3em 0 .35em; }
.tru-prose h2::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: middle; border-radius: 9999px; background: hsl(var(--primary)); box-shadow: 0 0 10px hsl(var(--primary) / 0.8); }
.tru-prose h3 { font: 700 18px/1.3 var(--tru-font-display); margin: 1.1em 0 .25em; }
.tru-prose a { color: hsl(var(--primary)); text-underline-offset: 3px; }
.tru-prose code { font: 500 .9em var(--tru-font-mono); padding: 1px 6px; border-radius: 6px; background: hsl(var(--muted)); }
/* bullets: glowing orbs (nested: hollow cyan rings) */
.tru-prose ul, .tru-list { list-style: none; padding-left: .15rem; }
.tru-prose ul > li, .tru-list > li { position: relative; padding-left: 1.85rem; margin: .35rem 0; }
.tru-prose ul > li::before, .tru-list > li::before { content: ""; position: absolute; left: .15rem; top: .4em; width: .85rem; height: .85rem; border-radius: 9999px; background: var(--tru-gradient-orb); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.14), 0 0 12px hsl(var(--primary) / 0.55); }
.tru-prose ul ul > li::before, .tru-list .tru-list > li::before { width: .65rem; height: .65rem; top: .5em; left: .25rem; background: hsl(var(--card)); border: 2px solid var(--tru-cyan); box-shadow: 0 0 10px color-mix(in srgb, var(--tru-cyan) 50%, transparent); }
/* numbered: 01 02 03 pills */
.tru-prose ol, .tru-olist { list-style: none; counter-reset: tru-ol; padding-left: .15rem; }
.tru-prose ol > li, .tru-olist > li { counter-increment: tru-ol; position: relative; padding-left: 2.6rem; margin: .45rem 0; }
.tru-prose ol > li::before, .tru-olist > li::before { content: counter(tru-ol, decimal-leading-zero); position: absolute; left: 0; top: .15em; min-width: 2rem; height: 1.45rem; padding: 0 .45rem; display: grid; place-items: center; border-radius: 9999px; font: 600 11px/1 var(--tru-font-mono); letter-spacing: .04em; color: var(--tru-label); border: 1.5px solid color-mix(in srgb, var(--tru-label) 55%, transparent); background: color-mix(in srgb, var(--tru-label) 8%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--tru-label) 26%, transparent); }
/* callout */
.tru-prose blockquote, .tru-callout { margin: 1em 0; padding: 12px 18px; border-left: 2px solid hsl(var(--primary) / 0.7); border-radius: 0 16px 16px 0; background: linear-gradient(165deg, hsl(var(--primary) / 0.08), transparent 70%); box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.12); }
/* divider */
.tru-prose hr, .tru-divider { border: 0; height: 1px; margin: 2em 0; background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.6), transparent); }
.tru-prose img { max-width: 100%; height: auto; border-radius: 16px; border: 1px solid hsl(var(--border) / 0.6); box-shadow: 0 0 40px hsl(var(--primary) / 0.12), 0 18px 40px -24px rgba(0,0,0,.5); }
.tru-prose table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--tru-frame-border); background: var(--tru-frame-bg); box-shadow: var(--tru-frame-shadow); font-size: 14px; }
.tru-prose th { text-align: left; padding: 10px 14px; font: 600 11px/1 var(--tru-font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tru-label); background: var(--tru-table-head); }
.tru-prose td { padding: 10px 14px; border-top: 1px solid hsl(var(--border) / 0.5); }
/* checklists in docs */
.tru-checklist { list-style: none; padding: 0; }
.tru-checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 4px 8px; margin: 0 -8px; border-radius: 10px; }
.tru-checklist li:hover { background: hsl(var(--primary) / 0.05); }
.tru-checklist li .tru-checkbox { margin-top: 3px; }
.tru-checklist li.is-done span { text-decoration: line-through; color: hsl(var(--muted-foreground)); }

/* ── menus and popovers ────────────────────────────────────────────────────── */
.tru-menu { min-width: 220px; padding: 6px; border-radius: 16px; border: 1px solid var(--tru-frame-border); background: var(--tru-frame-bg), hsl(var(--popover)); box-shadow: var(--tru-frame-shadow), 0 24px 48px -24px rgba(0,0,0,.6); backdrop-filter: blur(16px); }
.tru-menu__label { padding: 8px 10px 4px; }
.tru-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: hsl(var(--foreground)); font: 500 var(--tru-text-sm)/1.3 var(--tru-font-sans); text-align: left; cursor: pointer; }
.tru-menu__item:hover, .tru-menu__item.is-active { background: hsl(var(--primary) / 0.15); }
.tru-menu__hint { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); font-weight: 400; }

/* ── scrollbars that are always visible (mouse and Windows users) ──────────── */
.tru-scroll { scrollbar-width: auto; scrollbar-color: hsl(var(--primary) / 0.45) hsl(var(--muted)); }
.tru-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
.tru-scroll::-webkit-scrollbar-track { background: hsl(var(--muted)); }
.tru-scroll::-webkit-scrollbar-thumb { background: hsl(var(--primary) / 0.45); border-radius: 999px; border: 3px solid hsl(var(--muted)); }
.tru-scroll::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary) / 0.7); }

/* ── motion ────────────────────────────────────────────────────────────────── */
@keyframes tru-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes tru-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tru-rise { animation: tru-rise .35s var(--tru-ease) both; }
@media (prefers-reduced-motion: reduce) {
  .tru-app *, .tru-app *::before, .tru-app *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}