/* ============================================================
   Trendsic Go — role shell (header, bottom bar, sheets, tour).
   Tokens are the design's tokens(mode) VERBATIM ("Trendsic Go -
   Role Shell.dc.html"), scoped to the shell root .gs so the older
   screens' own tokens.css values elsewhere stay untouched. The
   markup carries the design's inline styles; this file only holds
   what inline styles cannot: tokens, keyframes, helper classes.
   ============================================================ */

.gs {
  --brand-500:#5E76EE; --brand-600:#4C63E6; --brand-700:#3D4FC9; --brand-grad:linear-gradient(135deg,#5E76EE,#8A63E8);
  --success:#15A06B; --danger:#E04646; --warning:#EE8A2E; --gold:#D99B12; --info:#4C6EF5;
  --r-md:12px; --r-lg:16px; --e1:0 1px 2px rgba(20,25,55,.06); --e2:0 8px 28px rgba(20,25,55,.14); --ease:cubic-bezier(.2,.8,.2,1);
  /* light */
  --desk:#E4E7F1; --bg:#F5F6FB; --surface:#FFFFFF; --surface-2:#FAFBFE; --border:#E5E8F2; --border-strong:#D2D7E6;
  --text:#1A1D2E; --text-2:#4A4F63; --muted:#767C92; --faint:#A2A7BC; --brand-50:#EEF1FE; --info-bg:#ECEFFB; --info-fg:#3D4FC9;
  --ok-bg:#E2F6EE; --ok-fg:#0E6B47; --warn-bg:#FCEEDD; --warn-fg:#B5651A; --gold-bg:#FBF1D6; --gold-fg:#8A6A0C;
  --bad-bg:#FCE7E7; --bad-fg:#B3262B; --bad-line:#F4D4D4; --bad-soft:#FEF6F6; --pur-bg:#EFE9FD; --pur-fg:#6D45C9;
  --neutral-bg:#F1F2F6; --neutral-fg:#6B7080;
  /* safe areas: the phone's notch and home indicator (the pixel probe sets the design frame's 42 / 20) */
  --gs-sat: env(safe-area-inset-top, 0px);
  --gs-sab: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
html[data-theme="dark"] .gs {
  --desk:#090D22; --bg:#0E1430; --surface:#161E3C; --surface-2:#1B2446; --border:#2A335C; --border-strong:#38436F;
  --text:#EEF1FB; --text-2:#B9C2E0; --muted:#8590B5; --faint:#6B7596; --brand-50:rgba(94,118,238,.16); --info-bg:rgba(94,118,238,.16);
  --info-fg:#C2CCFB; --ok-bg:rgba(52,211,153,.15); --ok-fg:#5FE3B0; --warn-bg:rgba(238,138,46,.16); --warn-fg:#F0A961;
  --gold-bg:rgba(217,155,18,.16); --gold-fg:#F2C14E; --bad-bg:rgba(224,70,70,.16); --bad-fg:#F58A8A; --bad-line:rgba(224,70,70,.32);
  --bad-soft:rgba(224,70,70,.08); --pur-bg:rgba(139,92,246,.18); --pur-fg:#C3A8FB; --neutral-bg:rgba(255,255,255,.06); --neutral-fg:#8590B5;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .gs {
    --desk:#090D22; --bg:#0E1430; --surface:#161E3C; --surface-2:#1B2446; --border:#2A335C; --border-strong:#38436F;
    --text:#EEF1FB; --text-2:#B9C2E0; --muted:#8590B5; --faint:#6B7596; --brand-50:rgba(94,118,238,.16); --info-bg:rgba(94,118,238,.16);
    --info-fg:#C2CCFB; --ok-bg:rgba(52,211,153,.15); --ok-fg:#5FE3B0; --warn-bg:rgba(238,138,46,.16); --warn-fg:#F0A961;
    --gold-bg:rgba(217,155,18,.16); --gold-fg:#F2C14E; --bad-bg:rgba(224,70,70,.16); --bad-fg:#F58A8A; --bad-line:rgba(224,70,70,.32);
    --bad-soft:rgba(224,70,70,.08); --pur-bg:rgba(139,92,246,.18); --pur-fg:#C3A8FB; --neutral-bg:rgba(255,255,255,.06); --neutral-fg:#8590B5;
    color-scheme: dark;
  }
}

/* the design's helmet <style>, scoped */
.gs, .gs * { box-sizing: border-box; }
.gs { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text); background: var(--bg); line-height: normal; font-size: 16px; }
.gs ::selection { background: #C2CCFB; }
.gs a { color: #3D4FC9; text-decoration: none; }
.gs .rs-scroll::-webkit-scrollbar { width: 0; height: 0; }
.gs .rs-act { transition: filter .14s, transform .06s; cursor: pointer; }
.gs .rs-act:hover { filter: brightness(.96); }
.gs .rs-act:active { transform: scale(.98); }
.gs button { font-family: inherit; }
@keyframes rs-pop { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes rs-sheet { from { transform: translateY(100%) } to { transform: none } }
@keyframes rs-drop { from { transform: translateY(-24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes rs-veil { from { opacity: 0 } to { opacity: 1 } }
@keyframes rs-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(94,118,238,.45) } 50% { box-shadow: 0 0 0 12px rgba(94,118,238,0) } }
.gs input.rs-in, .gs select.rs-in, .gs textarea.rs-in { font: 600 14px 'Plus Jakarta Sans'; color: var(--text, #1A1D2E); background: var(--surface, #fff); border: 1px solid var(--border-strong, #D2D7E6); border-radius: 11px; padding: 12px; outline: none; width: 100%; }
.gs input.rs-in:focus, .gs textarea.rs-in:focus, .gs select.rs-in:focus { border-color: var(--brand-500, #5E76EE); box-shadow: 0 0 0 3px rgba(94,118,238,.15); }
@media (prefers-reduced-motion: reduce) { .gs * { animation-duration: .001ms !important; } }

/* the frame: the phone column. Fixed to the viewport; centred and capped on wide screens. */
.gs-frame { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 520px; display: flex; flex-direction: column; overflow: hidden; padding-top: var(--gs-sat); z-index: 10; }
body.gs-on #ts-net { display: none !important; }
body.gs-on { overflow: hidden; }

/* hosted legacy screens: they were full pages with their own scroller and bottom padding for the old
   fixed tab bar; inside the frame the frame scrolls and owns the bar. */
.gs-body .ts-screen, .gs-body .pw-screen { min-height: 0 !important; height: auto !important; max-width: none; padding-bottom: 0 !important; background: transparent; }
.gs-body .ts-scroll, .gs-body .pw-scroll { overflow: visible !important; height: auto !important; padding-bottom: 0 !important; }
.gs-body .dfl-root { min-height: 0 !important; height: auto !important; overflow: visible !important; background: transparent !important; }
.gs-body .pw-fixed { position: fixed; }

/* the tour ring highlights */
.gs-ring { position: absolute; border: 2.5px solid #fff; border-radius: 16px; z-index: 91; box-shadow: 0 0 0 4px rgba(94,118,238,.6); pointer-events: none; }

/* an empty error line takes no room (the design has none until something fails) */
.gs [data-ck-err]:empty, .gs [data-att-err]:empty { display: none; }
@keyframes gs-spin { to { transform: rotate(360deg) } }