/* ==========================================================================
   Odin CRM page: animated product scenes (O2 to O11)
   Each [data-oa] block is built by odin-anim.js into a fixed-size stage that
   scales to the column width. Everything is scoped to .oa so nothing leaks
   into the theme (and theme classes like .btn or .pill can't leak in).
   ========================================================================== */

.oa {
  --ink: #131a26; --ink-2: #1e293b;
  --s600: #475569; --s500: #64748b; --s400: #94a3b8; --s300: #cbd5e1; --s200: #e2e8f0; --s100: #f1f5f9;
  --b700: #11477b; --b600: #145593; --b500: #2b74ba; --b400: #4f93d6; --b300: #8ec0ef;
  --g: #22a045; --g600: #1d8a3b; --amber: #f0a43a; --purple: #a855f7; --canvas: #f2f5f9;
  --pink-tint: #fbe9e9; --beige-tint: #f6efe0;
  position: relative;
  width: 100%;
}
.oa.is-ready { aspect-ratio: var(--oa-w) / var(--oa-h); }
.oa.is-ready > :not(.oa__stage) { display: none; }
.oa--phone { width: min(360px, 78%); margin-inline: auto; }
.oa--phone > img { width: 100%; }

.oa__stage {
  position: absolute; left: 0; top: 0;
  width: calc(var(--oa-w) * 1px); height: calc(var(--oa-h) * 1px);
  transform: scale(var(--oa-k, 1)); transform-origin: 0 0;
  font: 400 14px/1.4 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink); text-align: left; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01";
  user-select: none; pointer-events: none;
}
.oa__stage *, .oa__stage *::before, .oa__stage *::after { box-sizing: border-box; margin: 0; padding: 0; }
.oa__stage svg { display: inline-block; flex: none; }
.oa__stage b { font-weight: 700; }
.oa__stage small { font-size: inherit; }
.oa__fade { transition: opacity .32s ease; }
.oa__fade.is-out { opacity: 0; }

/* ---------- shared atoms ---------- */
.oa .o-ic { width: 16px; height: 16px; stroke: currentColor; }
.oa .o-av { width: 32px; height: 32px; border-radius: 50%; background: var(--b600); color: #fff; font-weight: 700; font-size: 12px; display: grid; place-items: center; flex: none; }
.oa .o-av.sm { width: 22px; height: 22px; font-size: 9px; background: #e6eef8; color: var(--b600); }
.oa .o-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 8px; font-weight: 600; font-size: 13px; background: #fff; border: 1px solid var(--s300); color: var(--ink-2); box-shadow: 0 1px 2px rgba(13,30,51,.08); white-space: nowrap; }
.oa .o-btn svg { width: 14px; height: 14px; stroke: currentColor; }
.oa .o-btn.pri { background: linear-gradient(#2b74ba, #145593); color: #fff; border-color: #11477b; }
.oa .o-btn.won { background: linear-gradient(#2fb052, #1d8a3b); color: #fff; border-color: #177531; }
.oa .o-btn.lost { background: linear-gradient(#c53535, #9e1f1f); color: #fff; border-color: #861a1a; }
.oa .o-btn.defer { color: #b7791f; border-color: #e7b75f; }
.oa .o-card { background: #fff; border: 1px solid var(--s200); border-radius: 12px; box-shadow: 0 1px 2px rgba(13,30,51,.05); }
.oa .o-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #e8f0fb; color: var(--b600); white-space: nowrap; }
.oa .o-pill.g { background: #e3f5e8; color: #1d7a37; }
.oa .o-pill.a { background: #fdf1dc; color: #a2640c; }
.oa .o-pill.r { background: #fde6e6; color: #b42323; }
.oa .o-pill.p { background: #f3e8ff; color: #7e22ce; }
.oa .o-pill.s { background: var(--s100); color: var(--s600); }
.oa .o-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.oa .o-lbl { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--s400); font-weight: 650; }
.oa .o-kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--s500); font-weight: 650; }
.oa .o-h1 { font-size: 23px; font-weight: 750; letter-spacing: -0.02em; color: #151c2c; margin-top: 2px; }
.oa .o-muted { color: var(--s500); }
.oa .o-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--b500); vertical-align: -2px; margin-left: 1px; }
.oa .o-grow { overflow: hidden; }
.oa .o-cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 60; opacity: 0; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.oa .o-ripple { position: absolute; left: 0; top: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; border: 3px solid rgba(43,116,186,.8); z-index: 59; opacity: 0; }
.oa .o-callout { position: absolute; z-index: 40; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 10px; background: #0d1e33; color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 16px 36px rgba(10,22,40,.4); opacity: 0; }
.oa .o-callout svg { width: 16px; height: 16px; stroke: var(--b300); }
.oa .o-toast { position: absolute; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 9px 13px 9px 9px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 650; white-space: nowrap; box-shadow: 0 0 0 1px rgba(10,22,40,.06), 0 18px 40px -12px rgba(10,22,40,.45); opacity: 0; }
.oa .o-tick { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #e5f5ea; color: #16833a; flex: none; }
.oa .o-tick svg { width: 14px; height: 14px; stroke: currentColor; }
.oa .o-ok { width: 18px; height: 18px; border-radius: 50%; background: var(--g); color: #fff; display: grid; place-items: center; flex: none; }
.oa .o-ok svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 3.2; }

/* ---------- browser window + app shell (matches the product screenshots) ---------- */
.oa .o-win { position: absolute; inset: 0; border-radius: 14px; background: var(--canvas); overflow: hidden; box-shadow: 0 0 0 1px rgba(13,30,51,.1), 0 46px 80px -34px rgba(13,30,51,.5); }
.theme-dark .oa .o-win, .theme-dark-alt .oa .o-win { box-shadow: 0 0 0 1px rgba(143,192,239,.28), 0 50px 90px -24px rgba(0,0,0,.65); }
.oa .o-chrome { height: 38px; background: #e8edf3; border-bottom: 1px solid #d6dde6; display: flex; align-items: center; gap: 7px; padding: 0 14px; position: relative; z-index: 5; }
.oa .o-chrome i { width: 11px; height: 11px; border-radius: 50%; display: block; background: #cfd6df; }
.oa .o-chrome i:nth-child(1) { background: #f26b5b; } .oa .o-chrome i:nth-child(2) { background: #f5bf4f; } .oa .o-chrome i:nth-child(3) { background: #5dc760; }
.oa .o-url { position: absolute; left: 50%; transform: translateX(-50%); height: 24px; width: 380px; border-radius: 7px; background: #fff; border: 1px solid #d9e0e8; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--s500); }
.oa .o-url svg { width: 11px; height: 11px; stroke: var(--s400); }
.oa .o-vp { position: absolute; top: 38px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.oa .o-app { position: absolute; inset: 0; background: var(--canvas); }
.oa .o-hdr { height: 52px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--s200); display: flex; align-items: center; gap: 16px; padding: 0 22px; }
.oa .o-hdr .o-ham svg { width: 20px; height: 20px; stroke: var(--s600); }
.oa .o-ttl { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; min-width: 104px; }
.oa .o-search { flex: 0 0 300px; height: 32px; border-radius: 8px; background: var(--s100); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--s400); font-size: 13px; }
.oa .o-search svg { width: 14px; height: 14px; stroke: var(--s400); }
.oa .o-sp { flex: 1; }
.oa .o-ico svg { width: 17px; height: 17px; stroke: var(--s600); }
.oa .o-bell { position: relative; }
.oa .o-bell b { position: absolute; top: -7px; right: -8px; background: #e0413a; color: #fff; font-size: 9px; font-weight: 700; border-radius: 999px; padding: 1px 5px; }
.oa .o-body { position: absolute; top: 52px; left: 0; right: 0; bottom: 0; padding: 18px 20px; overflow: hidden; }
.oa .o-dash-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.oa .o-crumb { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--s500); }
.oa .o-crumb a { color: var(--b600); font-weight: 600; }

/* ==========================================================================
   O2 Lead capture: sources -> Odin -> round robin
   ========================================================================== */
.oa--dark .oa__stage { color: #fff; }
.oa .o-pipe { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; border: 1px solid #1b416b; background: radial-gradient(70% 70% at 52% 50%, rgba(43,116,186,.35), transparent 70%), linear-gradient(160deg, #0f2846, #0a1628); }
.oa .o-pipe-in { position: absolute; inset: 0; z-index: 1; }
.oa .o-pipe::after { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(143,192,239,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(143,192,239,.05) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.oa .o-lines { position: absolute; left: 0; top: 0; width: 880px; height: 600px; z-index: 1; }
.oa .o-wire { fill: none; stroke: rgba(142,192,239,.3); stroke-width: 1.6; }
.oa .o-wire--off { stroke: rgba(142,192,239,.12); stroke-dasharray: 5 5; }
.oa .o-wire--ghost { stroke: none; }
.oa .o-src { position: absolute; left: 28px; width: 196px; height: 48px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 8px; border-radius: 11px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 14.5px; font-weight: 600; }
.oa .o-ci { width: 31px; height: 31px; border-radius: 8px; display: grid; place-items: center; background: rgba(79,147,214,.28); }
.oa .o-ci svg { width: 16px; height: 16px; stroke: #fff; }
.oa .o-hub { position: absolute; left: 388px; top: 236px; width: 128px; height: 128px; z-index: 3; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #1d4a80, #0f2748); border: 2px solid rgba(142,192,239,.5); box-shadow: 0 0 0 12px rgba(79,147,214,.1), 0 0 60px rgba(79,147,214,.35); }
.oa .o-hub img { width: 60px; }
.oa .o-hub span { position: absolute; top: 140px; left: 50%; transform: translateX(-50%); font: 800 13px/1 "Montserrat", "Inter", sans-serif; letter-spacing: .22em; white-space: nowrap; }
.oa .o-rr { position: absolute; left: 644px; top: 116px; z-index: 2; display: flex; white-space: nowrap; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--b300); }
.oa .o-rr svg { width: 15px; height: 15px; stroke: currentColor; }
.oa .o-con { position: absolute; left: 644px; width: 224px; height: 62px; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 0 12px; border-radius: 13px; background: #fff; color: var(--ink); box-shadow: 0 16px 34px rgba(0,0,0,.3); }
.oa .o-con .o-av { width: 36px; height: 36px; font-size: 13px; }
.oa .o-con b { display: block; font-size: 14px; white-space: nowrap; }
.oa .o-con small { display: block; font-size: 11.5px; color: var(--s500); }
.oa .o-cnt { margin-left: auto; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: #e8f0fb; color: var(--b600); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.oa .o-con.is-leave { background: #dde3ea; }
.oa .o-con.is-leave .o-cnt { background: #fde6e6; color: #b42323; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.oa .o-ld { position: absolute; left: -6px; top: -6px; z-index: 4; width: 12px; height: 12px; border-radius: 50%; background: #8ec0ef; box-shadow: 0 0 12px #4f93d6; opacity: 0; }
.oa .o-call { position: absolute; left: 356px; top: 30px; width: 236px; z-index: 5; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 20px 44px rgba(0,0,0,.4); opacity: 0; }
.oa .o-call .o-ph { width: 38px; height: 38px; border-radius: 50%; background: var(--g); display: grid; place-items: center; flex: none; }
.oa .o-call .o-ph svg { width: 18px; height: 18px; stroke: #fff; }
.oa .o-call b { display: block; font-size: 13px; }
.oa .o-call small { display: block; font-size: 11.5px; color: var(--s500); margin-top: 1px; }
.oa .o-newlead { position: absolute; left: 330px; top: 418px; width: 268px; z-index: 5; padding: 12px 14px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 20px 44px rgba(0,0,0,.4); opacity: 0; }
.oa .o-newlead .o-top { display: flex; justify-content: space-between; }
.oa .o-newlead b { display: block; font-size: 14px; margin-top: 7px; }
.oa .o-newlead small { display: block; font-size: 11.5px; color: var(--s500); margin-top: 2px; }
.oa .o-newlead .o-auto { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11.5px; font-weight: 650; color: var(--g600); }
.oa .o-newlead .o-auto svg { width: 13px; height: 13px; stroke: currentColor; }

/* ==========================================================================
   O3 Board
   ========================================================================== */
.oa .o-btop { display: flex; justify-content: space-between; align-items: flex-end; }
.oa .o-btop .o-acts { display: flex; gap: 8px; }
.oa .o-soldbar { display: flex; height: 40px; width: 520px; margin-top: 12px; border-radius: 9px; overflow: hidden; color: #fff; }
.oa .o-soldbar > div { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.oa .o-soldbar .s1 { background: linear-gradient(90deg, #36b25a, #2e9e4d); }
.oa .o-soldbar .s2 { background: linear-gradient(90deg, #3f78b5, #325f94); justify-content: flex-end; }
.oa .o-soldbar span { font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.oa .o-soldbar b { font-size: 20px; font-weight: 800; }
.oa .o-soldbar svg { width: 17px; height: 17px; stroke: #fff; }
.oa .o-legend { display: flex; align-items: center; gap: 13px; margin-top: 10px; font-size: 11.5px; color: var(--s600); }
.oa .o-legend .k { font-size: 10px; letter-spacing: .14em; color: var(--s400); font-weight: 650; }
.oa .o-legend span { display: inline-flex; align-items: center; gap: 5px; }
.oa .o-legend .o-heat-k { padding: 2px 6px; margin: -2px -6px; border-radius: 6px; }
.oa .o-board { position: relative; margin-top: 12px; height: 420px; }
.oa .o-bcol { position: absolute; top: 0; height: 460px; width: 170px; border-radius: 11px; background: #e9eef4; }
.oa .o-bcol .o-ch { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 11px; font-weight: 700; font-size: 13px; }
.oa .o-bcol .o-ch .o-dot { background: #9aa6b5; }
.oa .o-bcol .o-ch em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; background: #fff; border: 1px solid var(--s200); border-radius: 999px; padding: 0 8px; color: var(--s600); font-variant-numeric: tabular-nums; }
.oa .o-bcard { position: absolute; z-index: 1; left: 0; top: 0; width: 154px; height: 74px; padding: 10px 10px 8px; border-radius: 9px; background: #fff; border: 1px solid #e3e8ef; box-shadow: 0 1px 2px rgba(13,30,51,.06); overflow: hidden; }
.oa .o-bcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sc, #94a3b8); }
.oa .o-bcard.att { background: var(--pink-tint); }
.oa .o-bcard .v { font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa .o-bcard .c { font-size: 11.5px; color: var(--s500); margin-top: 1px; }
.oa .o-bcard .f { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: var(--s500); }
.oa .o-bcard .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #16833a; letter-spacing: .02em; }
.oa .o-bcard .tag svg { width: 11px; height: 11px; stroke: currentColor; }
.oa .o-bcard.is-new { border-color: #b9e2c6; }
.oa .o-bcard.is-new .f { margin-top: 3px; }

/* ==========================================================================
   O4 Lead record
   ========================================================================== */
.oa .o-leadhead { margin-top: 10px; padding: 15px 18px; display: flex; justify-content: space-between; gap: 12px; }
.oa .o-lt { font-size: 20px; font-weight: 750; letter-spacing: -0.015em; }
.oa .o-stage { position: relative; height: 22px; margin-top: 7px; }
.oa .o-stage .o-pill { position: absolute; left: 0; top: 0; }
.oa .o-meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin-top: 10px; font-size: 12.5px; }
.oa .o-meta .o-lbl { font-size: 9.5px; padding-top: 2px; }
.oa .o-bt { display: flex; gap: 6px; align-items: flex-start; }
.oa .o-bt .o-btn { height: 30px; padding: 0 11px; font-size: 12.5px; }
.oa .o-days { position: relative; display: flex; gap: 7px; margin-top: 12px; }
.oa .o-days span { position: relative; z-index: 1; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--s300); background: #fff; font-size: 12px; font-weight: 600; color: var(--s600); }
.oa .o-days .o-dayhl { position: absolute; left: 0; top: 0; z-index: 2; border-radius: 999px; background: var(--b500); transform-origin: 0 50%; }
.oa .o-days .o-daytx { position: absolute; left: 0; top: 0; z-index: 3; padding: 7px 0; font-size: 12px; font-weight: 600; color: #fff; text-align: center; white-space: nowrap; }
.oa .o-lcols { display: grid; grid-template-columns: 1fr 236px; gap: 14px; margin-top: 12px; }
.oa .o-tl { overflow: hidden; height: 330px; }
.oa .o-tabs { display: flex; align-items: center; gap: 18px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--s200); font-size: 13px; font-weight: 600; color: var(--s500); }
.oa .o-tabs .on { color: var(--ink); border-bottom: 2px solid var(--b500); padding: 12px 0 11px; }
.oa .o-tabs .o-acts { margin-left: auto; display: flex; gap: 6px; }
.oa .o-tabs .o-acts .o-btn { height: 28px; font-size: 12px; padding: 0 9px; gap: 5px; }
.oa .o-tli { display: flex; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--s100); }
.oa .o-tli.is-fresh { background: #f2f8ff; }
.oa .o-ib { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: #e8f0fb; color: var(--b600); }
.oa .o-ib svg { width: 15px; height: 15px; stroke: currentColor; }
.oa .o-ib.g { background: #e3f5e8; color: #1d7a37; }
.oa .o-ib.a { background: #fdf1dc; color: #a2640c; }
.oa .o-ib.p { background: #f3e8ff; color: #7e22ce; }
.oa .o-ib.s { background: var(--s100); color: var(--s600); }
.oa .o-tli .h { font-weight: 650; font-size: 12.5px; }
.oa .o-tli .h small { color: var(--s400); font-weight: 500; margin-left: 5px; }
.oa .o-tli .d { font-size: 12px; color: var(--s600); margin-top: 2px; line-height: 1.45; min-height: 17px; }
.oa .o-chg { display: inline-block; background: var(--s100); border-radius: 5px; padding: 0 6px; margin-right: 4px; }
.oa .o-chg s { color: var(--s400); }
.oa .o-side .o-card { padding: 13px 15px; margin-bottom: 12px; }
.oa .o-kv { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; }
.oa .o-kv span:first-child { color: var(--s500); }
.oa .o-kv span:last-child { font-weight: 600; }
.oa .o-kv .is-upd { color: var(--b600); }

/* ==========================================================================
   O5 SMS
   ========================================================================== */
.oa .o-smsp { position: relative; margin-top: 10px; height: 512px; display: flex; flex-direction: column; }
.oa .o-smsh { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--s200); }
.oa .o-smsh b { display: block; font-size: 14.5px; }
.oa .o-smsh small { display: block; font-size: 12px; color: var(--s500); }
.oa .o-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 22px 16px; overflow: hidden; }
.oa .o-mr > div { padding-top: 11px; display: flex; flex-direction: column; }
.oa .o-bub { max-width: 470px; padding: 10px 14px; border-radius: 17px; font-size: 14px; line-height: 1.45; }
.oa .o-bub.out { align-self: flex-end; background: linear-gradient(#2b74ba, #1f63a6); color: #fff; border-bottom-right-radius: 5px; }
.oa .o-bub.in { align-self: flex-start; background: #fff; border: 1px solid var(--s200); border-bottom-left-radius: 5px; }
.oa .o-bst { font-size: 11px; color: var(--s500); margin-top: 4px; }
.oa .o-bst.r { align-self: flex-end; } .oa .o-bst.l { align-self: flex-start; }
.oa .o-typing { align-self: flex-start; display: flex; gap: 5px; padding: 12px 15px; border-radius: 17px; background: #fff; border: 1px solid var(--s200); }
.oa .o-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--s400); display: block; }
.oa .o-booked { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: #e5f5ea; color: #16833a; font-size: 12.5px; font-weight: 700; }
.oa .o-booked svg { width: 14px; height: 14px; stroke: currentColor; }
.oa .o-comp { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--s200); }
.oa .o-field { flex: 1; min-height: 40px; padding: 9px 12px; border: 1px solid var(--s300); border-radius: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.oa .o-field:empty::before { content: "Type a message…"; color: var(--s400); }
.oa .o-tpl { position: absolute; right: 16px; top: 52px; z-index: 30; width: 250px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--s200); box-shadow: 0 20px 44px rgba(13,30,51,.22); opacity: 0; transform-origin: 90% 0; }
.oa .o-tpl div { padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.oa .o-tpl div small { display: block; color: var(--s500); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa .o-tpl .is-hot { background: #eef4fb; }

/* ==========================================================================
   O6 Automations
   ========================================================================== */
.oa .o-agrid { display: grid; grid-template-columns: 238px 1fr; gap: 14px; margin-top: 14px; height: 476px; }
.oa .o-flows { padding: 14px 10px; }
.oa .o-flows .o-lbl { padding: 0 6px 8px; }
.oa .o-frow { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; margin-top: 4px; }
.oa .o-frow::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--b500); opacity: var(--sel, 0); }
.oa .o-frow .o-selbg { position: absolute; inset: 0; border-radius: 10px; background: #eef4fb; opacity: var(--sel, 0); }
.oa .o-frow > *:not(.o-selbg) { position: relative; }
.oa .o-fi { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--c); color: #fff; flex: none; }
.oa .o-fi svg { width: 16px; height: 16px; stroke: currentColor; }
.oa .o-frow b { display: block; font-size: 13px; white-space: nowrap; }
.oa .o-frow small { display: block; font-size: 11px; color: var(--s500); }
.oa .o-frow .o-fcount { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--s600); background: var(--s100); border-radius: 999px; padding: 1px 7px; }
.oa .o-fnote { margin: 14px 6px 0; padding: 10px; border-radius: 10px; background: var(--s100); font-size: 11.5px; color: var(--s600); line-height: 1.45; }
.oa .o-fnote b { color: var(--ink); }
.oa .o-fdet { position: relative; overflow: hidden; }
.oa .o-fd { position: absolute; inset: 0; padding: 16px 18px; opacity: 0; }
.oa .o-fd .o-fh { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
.oa .o-fd .o-fsub { font-size: 11.5px; color: var(--s500); margin-top: 3px; }
.oa .o-fstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.oa .o-fstat { padding: 8px 11px; border-radius: 9px; background: #f7f9fc; border: 1px solid var(--s200); }
.oa .o-fstat .o-lbl { font-size: 9.5px; }
.oa .o-fstat b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.oa .o-steps { position: absolute; left: 18px; right: 18px; top: 132px; bottom: 10px; }
.oa .o-rail { position: absolute; left: 75px; width: 2px; background: var(--s200); border-radius: 1px; }
.oa .o-rail i { position: absolute; left: 0; top: 0; width: 2px; height: 100%; border-radius: 1px; background: var(--b400); transform-origin: 0 0; transform: scaleY(0); display: block; }
.oa .o-step { position: absolute; left: 0; right: 0; height: 40px; }
.oa .o-when { position: absolute; left: 0; top: 0; width: 62px; height: 40px; display: flex; align-items: center; justify-content: flex-end; font-size: 11.5px; font-weight: 700; color: var(--s500); white-space: nowrap; }
.oa .o-rdot { position: absolute; left: 70px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--s300); }
.oa .o-node { position: absolute; left: 92px; top: 0; width: 266px; height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 10px; background: #fff; border: 1px solid var(--s300); box-shadow: 0 1px 3px rgba(13,30,51,.06); }
.oa .o-node .o-ni { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: none; }
.oa .o-node .o-ni svg { width: 13px; height: 13px; stroke: currentColor; }
.oa .o-node .k { display: block; font-size: 8.5px; letter-spacing: .14em; font-weight: 750; color: var(--s400); }
.oa .o-node .x { display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 206px; }
.oa .o-node.trig { border-color: #9dc2e8; } .oa .o-node.trig .o-ni { background: var(--b600); }
.oa .o-node.sms .o-ni { background: var(--b500); }
.oa .o-node.email .o-ni { background: #6d4fd6; }
.oa .o-node.task .o-ni { background: #1d8a3b; }
.oa .o-node.goal { background: #f3fbf5; border-color: #bfe3c9; } .oa .o-node.goal .o-ni { background: var(--g); }
.oa .o-node .o-ring { position: absolute; inset: -4px; border-radius: 13px; border: 2px solid rgba(79,147,214,.85); opacity: 0; }
.oa .o-prev { position: absolute; left: 372px; top: -6px; width: 166px; padding: 7px 10px; border-radius: 12px; font-size: 11px; line-height: 1.38; opacity: 0; box-shadow: 0 10px 24px -8px rgba(13,30,51,.3); }
.oa .o-prev.sms { background: linear-gradient(#2b74ba, #1f63a6); color: #fff; border-bottom-left-radius: 4px; }
.oa .o-prev.email { background: #fff; border: 1px solid #ddd3f7; }
.oa .o-prev.email em { display: block; font-style: normal; font-size: 9px; letter-spacing: .12em; font-weight: 750; color: #6d4fd6; text-transform: uppercase; }
.oa .o-prev.task { background: #fff; border: 1px solid #bfe3c9; }
.oa .o-prev.task em { display: block; font-style: normal; font-size: 9px; letter-spacing: .12em; font-weight: 750; color: #1d7a37; text-transform: uppercase; }
.oa .o-prev.goal { background: #e5f5ea; color: #16833a; font-weight: 700; }
.oa .o-prev.reply { background: #fff; border: 1px solid var(--s200); }

/* ==========================================================================
   O7 Odin AI
   ========================================================================== */
.oa .o-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.oa .o-kpi { padding: 13px 14px; display: flex; gap: 11px; align-items: flex-start; }
.oa .o-kpi .o-ki { width: 32px; height: 32px; border-radius: 9px; background: #eef3f9; color: var(--b600); display: grid; place-items: center; flex: none; }
.oa .o-kpi .o-ki svg { width: 16px; height: 16px; stroke: currentColor; }
.oa .o-kpi .o-lbl { font-size: 9.5px; color: var(--s500); }
.oa .o-kpi .v { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.oa .o-kpi .s { font-size: 11px; color: var(--s500); }
.oa .o-brief { margin-top: 14px; overflow: hidden; }
.oa .o-brief .bh { height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 16px; background: #f6f8fb; border-bottom: 1px solid var(--s200); font-size: 11.5px; font-weight: 750; letter-spacing: .14em; }
.oa .o-brief .bh img { width: 20px; }
.oa .o-brief .bh small { margin-left: auto; font-weight: 500; letter-spacing: 0; color: var(--s500); }
.oa .o-brief .bb { padding: 15px 18px 18px; }
.oa .o-brief .bl { font-size: 14.5px; font-weight: 600; line-height: 1.45; min-height: 42px; }
.oa .o-brief .pr { display: flex; gap: 11px; align-items: flex-start; margin-top: 11px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.oa .o-brief .pr .n { width: 22px; height: 22px; border-radius: 7px; background: var(--b500); color: #fff; font-weight: 800; font-size: 11px; display: grid; place-items: center; flex: none; }
.oa .o-askbtn { position: absolute; right: 20px; bottom: 20px; z-index: 20; height: 46px; padding: 0 18px 0 12px; border-radius: 999px; display: flex; align-items: center; gap: 9px; background: linear-gradient(#26558f, #173d6b); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 12px 28px rgba(13,30,51,.35); }
.oa .o-askbtn img { width: 25px; }
.oa .o-askp { position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; width: 392px; display: flex; flex-direction: column; background: #fff; box-shadow: -24px 0 50px rgba(13,30,51,.22); transform: translateX(410px); }
.oa .o-askp .ah { height: 60px; flex: none; display: flex; align-items: center; gap: 11px; padding: 0 16px; background: linear-gradient(90deg, #1b447a, #13335c); color: #fff; }
.oa .o-askp .ah img { width: 24px; }
.oa .o-askp .ah b { display: block; font-size: 14.5px; }
.oa .o-askp .ah small { display: block; font-size: 11.5px; opacity: .8; }
.oa .o-askp .chips { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--s200); flex: none; }
.oa .o-askp .chips span { position: relative; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: var(--s600); background: var(--s100); }
.oa .o-askp .chips span i { position: absolute; inset: 0; border-radius: 999px; background: var(--b600); opacity: 0; }
.oa .o-askp .chips span em { position: relative; font-style: normal; }
.oa .o-askp .am { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 16px 14px; background: #f8fafc; overflow: hidden; }
.oa .o-askp .o-bub { max-width: 320px; font-size: 13px; }
.oa .o-askp .o-bub.ai { align-self: flex-start; background: #fff; border: 1px solid var(--s200); border-bottom-left-radius: 5px; }
.oa .o-askp .o-bub.ai .who { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 750; letter-spacing: .12em; color: var(--b600); margin-bottom: 4px; }
.oa .o-askp .o-bub.ai .who img { width: 14px; }
.oa .o-askp .ain { flex: none; padding: 12px; border-top: 1px solid var(--s200); }
.oa .o-askp .ain div { min-height: 40px; padding: 10px 12px; border: 1.5px solid var(--b400); border-radius: 10px; font-size: 13px; color: var(--ink); }
.oa .o-askp .ain div:empty::before { content: "Message Ask Odin…"; color: var(--s400); }

/* ==========================================================================
   O8 Test drive on the phone
   ========================================================================== */
.oa .o-phone { position: absolute; inset: 0; border-radius: 54px; background: #0b0f16; padding: 14px; box-shadow: 0 50px 80px -24px rgba(13,30,51,.55), inset 0 0 0 2px #2a3240; }
.oa .o-scr { position: relative; width: 100%; height: 100%; border-radius: 41px; overflow: hidden; background: #f2f5f9; }
.oa .o-notch { position: absolute; top: 11px; left: 50%; z-index: 10; width: 112px; height: 32px; margin-left: -56px; border-radius: 18px; background: #0b0f16; }
.oa .o-sbar { position: relative; z-index: 6; height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 6px 28px 0; font-size: 14px; font-weight: 700; background: #f2f5f9; }
.oa .o-pc { position: absolute; top: 50px; left: 0; right: 0; }
.oa .o-pf { padding: 6px 22px 22px; }
.oa .o-pf .logo { display: block; width: 50px; margin: 4px auto 0; }
.oa .o-pf h3 { text-align: center; font-size: 23px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }
.oa .o-pf .dn { text-align: center; font-size: 13px; color: var(--s500); }
.oa .o-pf .fc { margin-top: 14px; padding: 15px 16px; border-radius: 17px; background: #fff; border: 1px solid var(--s200); }
.oa .o-pf .fl { margin: 11px 0 5px; font-size: 12.5px; font-weight: 600; color: var(--s600); }
.oa .o-pf .fl:first-child { margin-top: 0; }
.oa .o-pf .fi { height: 39px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--s300); border-radius: 10px; font-size: 14.5px; }
.oa .o-pf .fi.is-on { border-color: var(--b400); box-shadow: 0 0 0 3px rgba(79,147,214,.18); }
.oa .o-pf .veh { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 7px 9px; border-radius: 10px; background: #eef4fb; font-size: 12.5px; font-weight: 650; color: var(--b700); opacity: 0; }
.oa .o-lic { position: relative; height: 110px; display: grid; place-items: center; border: 1.5px dashed var(--s300); border-radius: 12px; color: var(--s400); font-size: 12.5px; overflow: hidden; }
.oa .o-lic .ph0 { display: flex; gap: 7px; align-items: center; }
.oa .o-lic .ph0 svg { width: 17px; height: 17px; stroke: currentColor; }
.oa .o-lic .card2 { position: absolute; inset: 8px; display: flex; gap: 11px; padding: 11px; border-radius: 9px; background: linear-gradient(135deg, #e4efe0, #cfe3d6); opacity: 0; }
.oa .o-lic .card2 .pp { width: 58px; border-radius: 6px; background: #b7c9bd; display: grid; place-items: end center; overflow: hidden; }
.oa .o-lic .card2 .pp i { width: 30px; height: 40px; border-radius: 15px 15px 4px 4px; background: #8fa79a; display: block; }
.oa .o-lic .card2 .ln { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.oa .o-lic .card2 .ln b { font-size: 9px; letter-spacing: .14em; color: #3c5a48; }
.oa .o-lic .card2 .ln i { display: block; height: 6px; border-radius: 3px; background: rgba(60,90,72,.3); }
.oa .o-lic .flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.oa .o-sig { position: relative; height: 118px; border: 1px solid var(--s300); border-radius: 12px; background: #fff; }
.oa .o-sig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.oa .o-chk { display: flex; gap: 9px; align-items: center; margin-top: 13px; font-size: 12.5px; color: var(--s600); }
.oa .o-chk .bx { width: 21px; height: 21px; border-radius: 6px; border: 1.5px solid var(--s300); display: grid; place-items: center; flex: none; color: #fff; }
.oa .o-chk .bx svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 3; }
.oa .o-pf .sub2 { width: 100%; height: 46px; margin-top: 13px; font-size: 15px; }
.oa .o-done { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 26px; text-align: center; background: #f2f5f9; opacity: 0; }
.oa .o-done .big { width: 76px; height: 76px; border-radius: 50%; background: var(--g); color: #fff; display: grid; place-items: center; }
.oa .o-done .big svg { width: 40px; height: 40px; stroke: currentColor; stroke-width: 3; }
.oa .o-done h4 { font-size: 23px; font-weight: 800; margin-top: 18px; }
.oa .o-done p { font-size: 13.5px; color: var(--s500); margin-top: 6px; line-height: 1.5; }
.oa .o-done .rows { width: 100%; margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.oa .o-done .rows div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--s200); font-size: 12.5px; font-weight: 650; text-align: left; opacity: 0; }
.oa .o-banner { position: absolute; left: 10px; right: 10px; top: 8px; z-index: 12; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 16px 34px rgba(13,30,51,.3); opacity: 0; }
.oa .o-banner img { width: 30px; height: 30px; padding: 5px; border-radius: 8px; background: #0d1e33; flex: none; }
.oa .o-banner b { display: block; font-size: 12.5px; }
.oa .o-banner small { display: block; font-size: 11.5px; color: var(--s500); line-height: 1.35; }

/* ==========================================================================
   O9 Stock: DMS -> Odin -> Carsales and website
   ========================================================================== */
.oa .o-stock-in { position: absolute; inset: 0; }
.oa .o-stockw { position: absolute; left: 0; top: 110px; width: 560px; height: 530px; }
.oa .o-dms { position: absolute; left: 30px; top: 0; z-index: 5; width: 262px; height: 56px; display: flex; align-items: center; gap: 11px; padding: 0 14px 0 10px; border-radius: 13px; background: #0d1e33; color: #fff; box-shadow: 0 16px 34px -10px rgba(10,22,40,.55); }
.oa .o-dms .o-ci { background: rgba(79,147,214,.3); }
.oa .o-dms b { display: block; font-size: 13.5px; }
.oa .o-dms small { display: block; font-size: 11px; color: var(--b300); }
.oa .o-flowsvg { position: absolute; left: 0; top: 0; width: 880px; height: 640px; z-index: 4; overflow: visible; }
.oa .o-flowsvg path { fill: none; stroke: rgba(43,116,186,.45); stroke-width: 2; stroke-dasharray: 5 6; }
.oa .o-pk { position: absolute; left: -7px; top: -7px; z-index: 6; width: 14px; height: 14px; border-radius: 50%; background: #4f93d6; box-shadow: 0 0 0 5px rgba(79,147,214,.22), 0 0 14px rgba(43,116,186,.7); opacity: 0; }
.oa .o-sync { display: inline-flex; margin-top: 8px; }
.oa .o-vtab { margin-top: 12px; overflow: hidden; }
.oa .o-vrow { display: grid; grid-template-columns: 1fr 54px 78px 70px; gap: 8px; align-items: center; height: 50px; padding: 0 12px; border-bottom: 1px solid var(--s100); font-size: 12px; }
.oa .o-vrow.vh { height: 32px; font-size: 9.5px; letter-spacing: .12em; color: var(--s500); font-weight: 650; background: #fafbfd; border-bottom: 1px solid var(--s200); }
.oa .o-vrow .vn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.oa .o-vrow .vn b { display: block; font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa .o-vrow .vn small { display: block; font-size: 10.5px; color: var(--s500); }
.oa .o-thumb { width: 52px; height: 32px; border-radius: 6px; background: #eef2f6; display: grid; place-items: center; flex: none; }
.oa .o-tp { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; padding: 2px 6px; border-radius: 5px; }
.oa .o-tp.n { background: #e8f0fb; color: #1f5fa3; } .oa .o-tp.u { background: #fdf1dc; color: #a2640c; } .oa .o-tp.d { background: #f3e8ff; color: #7e22ce; }
.oa .o-vrow .pr { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.oa .o-vrow .st { position: relative; height: 22px; }
.oa .o-vrow .st .o-pill { position: absolute; left: 0; top: 0; }
.oa .o-dest { position: absolute; left: 640px; width: 240px; z-index: 5; border-radius: 14px; background: #fff; border: 1px solid var(--s200); box-shadow: 0 30px 50px -24px rgba(13,30,51,.45); overflow: hidden; }
.oa .o-dest .dh { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--s100); font-size: 13px; font-weight: 750; }
.oa .o-dest .dh svg { width: 16px; height: 16px; stroke: var(--b600); }
.oa .o-dest .dh small { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--s500); }
.oa .o-lst .li { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid var(--s100); }
.oa .o-lst b { display: block; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.oa .o-lst small { display: block; font-size: 10.5px; color: var(--s500); }
.oa .o-lst .o-pill { margin-left: auto; height: 19px; font-size: 10px; padding: 0 7px; }
.oa .o-mini { background: #fff; }
.oa .o-mini .bar { height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 9px; background: #eef1f5; border-bottom: 1px solid var(--s200); }
.oa .o-mini .bar i { width: 7px; height: 7px; border-radius: 50%; background: #cfd6df; display: block; }
.oa .o-mini .bar span { margin-left: 6px; font-size: 9.5px; color: var(--s500); }
.oa .o-mini .nav { height: 30px; display: flex; align-items: center; padding: 0 11px; background: #1a1a1a; color: #fff; font-size: 9.5px; letter-spacing: .26em; }
.oa .o-mini .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 9px; }
.oa .o-mini .vc { position: relative; border: 1px solid #e5e7eb; border-radius: 5px; overflow: hidden; }
.oa .o-mini .vc .im { height: 40px; display: grid; place-items: center; background: linear-gradient(180deg, #f3f4f6, #e5e7eb); }
.oa .o-mini .vc .in { padding: 5px 6px 6px; }
.oa .o-mini .vc b { display: block; font-size: 9.5px; font-weight: 650; white-space: nowrap; }
.oa .o-mini .vc small { display: block; font-size: 10px; font-weight: 750; }
.oa .o-mini .vc .badge { position: absolute; left: 4px; top: 4px; padding: 1px 5px; border-radius: 4px; font-size: 8px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--g); opacity: 0; }
.oa .o-mini .vc .sold { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.82); color: #b42323; font-size: 11px; font-weight: 800; letter-spacing: .14em; opacity: 0; }

/* ==========================================================================
   O10 Sales Tracker
   ========================================================================== */
.oa .o-subtabs { display: flex; gap: 3px; width: max-content; margin-top: 12px; padding: 3px; border-radius: 9px; background: #e6ebf1; }
.oa .o-subtabs span { padding: 5px 11px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--s600); }
.oa .o-subtabs span.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.oa .o-trk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.oa .o-tk { position: relative; padding: 11px 12px; }
.oa .o-tk .o-lbl { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--s500); }
.oa .o-tk .v { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.oa .o-tk .s { font-size: 10.5px; color: var(--s500); font-variant-numeric: tabular-nums; }
.oa .o-tk .fl { position: absolute; inset: -1px; border-radius: 12px; border: 2px solid rgba(34,160,69,.65); background: rgba(34,160,69,.06); opacity: 0; }
.oa .o-tcols { display: grid; grid-template-columns: 1fr 328px; gap: 12px; margin-top: 12px; }
.oa .o-chart { position: relative; height: 330px; padding: 14px 16px; }
.oa .o-chart .tot { position: absolute; right: 16px; top: 10px; text-align: right; }
.oa .o-chart .tot b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.oa .o-bars { position: absolute; left: 16px; right: 16px; bottom: 34px; height: 210px; display: flex; align-items: flex-end; gap: 5px; }
.oa .o-bars i { flex: 1; height: 100%; display: block; border-radius: 3px 3px 0 0; background: linear-gradient(#4f93d6, #2b74ba); transform-origin: 50% 100%; }
.oa .o-bars i.today { background: linear-gradient(#5fd07d, #22a045); }
.oa .o-bars i.fut { background: #e8edf3; }
.oa .o-tgt { position: absolute; left: 16px; right: 16px; border-top: 2px dashed #f0a43a; }
.oa .o-tgt span { position: absolute; right: 0; top: -18px; font-size: 10px; font-weight: 700; color: #a2640c; }
.oa .o-ax { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; justify-content: space-between; font-size: 10px; color: var(--s400); }
.oa .o-feed { height: 330px; padding: 12px 12px 0; overflow: hidden; }
.oa .o-feed .fh { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px; }
.oa .o-fe .li { display: flex; gap: 9px; align-items: flex-start; padding: 8px 4px; border-bottom: 1px solid var(--s100); }
.oa .o-fe .dep { width: 8px; height: 30px; border-radius: 3px; flex: none; margin-top: 2px; }
.oa .o-fe .tx { flex: 1; min-width: 0; }
.oa .o-fe .tx em { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .1em; font-weight: 750; text-transform: uppercase; }
.oa .o-fe .tx b { display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa .o-fe .tx small { display: block; font-size: 10.5px; color: var(--s500); }
.oa .o-fe .amt { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: #16833a; }
.oa .o-fe .is-fresh { background: #f1faf3; }

/* ==========================================================================
   O11 Insights
   ========================================================================== */
.oa .o-dchips { display: flex; gap: 3px; width: max-content; margin-top: 10px; padding: 3px; border-radius: 9px; background: #e6ebf1; }
.oa .o-dchips span { padding: 4px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: var(--s600); }
.oa .o-dchips span.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.oa .o-ikpis .o-kpi .s .up { color: #16833a; font-weight: 700; }
.oa .o-itabs { position: relative; display: flex; gap: 6px; margin-top: 14px; }
.oa .o-itabs span { position: relative; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--s600); background: #fff; border: 1px solid var(--s200); }
.oa .o-itabs span i { position: absolute; inset: -1px; border-radius: 8px; background: #122a47; opacity: 0; }
.oa .o-itabs span em { position: relative; font-style: normal; }
.oa .o-ipanel { position: relative; margin-top: 10px; height: 300px; }
.oa .o-ip { position: absolute; inset: 0; display: grid; gap: 12px; opacity: 0; }
.oa .o-ip .o-card { padding: 13px 16px; overflow: hidden; }
.oa .o-ctitle { display: flex; justify-content: space-between; align-items: baseline; font-size: 10.5px; letter-spacing: .13em; font-weight: 750; color: var(--s600); text-transform: uppercase; }
.oa .o-ctitle small { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--s500); }
.oa .o-rt { margin-top: 8px; }
.oa .o-rr2 { position: relative; display: grid; align-items: center; gap: 10px; height: 31px; font-size: 12px; }
.oa .o-rr2.hd { height: 22px; font-size: 9.5px; letter-spacing: .12em; color: var(--s500); font-weight: 650; }
.oa .o-rr2 .tr { height: 12px; border-radius: 4px; background: var(--s100); overflow: hidden; }
.oa .o-rr2 .tr i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2b74ba, #4f93d6); transform-origin: 0 50%; transform: scaleX(0); }
.oa .o-rr2 .pc { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.oa .o-rr2 .nm { font-weight: 600; white-space: nowrap; }
.oa .o-rr2 .n { color: var(--s600); text-align: right; font-variant-numeric: tabular-nums; }
.oa .o-rr2 .hl { position: absolute; inset: 0 -8px; border-radius: 8px; background: #eef4fb; opacity: 0; z-index: -1; }
.oa .o-rr2.tot { border-top: 1px solid var(--s200); font-weight: 750; }
.oa .o-rt { position: relative; z-index: 0; }

/* rows in bottom-anchored message lists must keep their height (older ones scroll off the top) */
.oa .o-msgs > *, .oa .o-askp .am > * { flex-shrink: 0; }
.oa .o-stockw .o-search { flex-basis: 190px; }
.oa .o-stockw .o-ttl { min-width: 0; }