/* Sentiment dashboard — Leader brief and Team workspace.
   Colour meaning is fixed everywhere: green = for the leader, red = against, grey = no clear side.
   Built on the app's own tokens so light and dark themes both work. */

body.sentiment-focus .main { background: var(--bg); }
.sb-wrap { height: 100%; overflow: auto; background: var(--bg); scroll-behavior: smooth; }
.sx {
  --for: #0f9f6e; --against: #e5484d; --neutral: #9aa7b8; --mixed: #d99a1e; --blue: var(--primary);
  --for-soft: rgba(15,159,110,.1); --against-soft: rgba(229,72,77,.1); --blue-soft: var(--primary-soft);
  --rad: 14px;
  font-size: 14px; line-height: 1.5; color: var(--text); padding-bottom: 48px;
}
.sx .lang-ta { font-family: var(--font); }
.sx h1, .sx h2, .sx h3 { letter-spacing: -.015em; }
.sx .nowrap { white-space: nowrap; }
.sx .mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
.sx-page { max-width: 1360px; margin: 0 auto; padding: 22px 28px 0; }
.sx-page > * + * { margin-top: 18px; }

/* ---------- toolbar ---------- */
.sx-bar { position: sticky; top: 0; z-index: 15; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line); padding: 10px 28px 8px; }
.sx-bar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 1360px; margin: 0 auto; }
.sx-crumb { max-width: 1360px; margin: 6px auto 0; font-size: 12px; color: var(--text-3); }
.sx-pick { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sx-pick:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.sx-pick:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.sx-pick select { appearance: none; border: 0; background: none; font: inherit; font-weight: 650; color: var(--text); padding-right: 4px; cursor: pointer; outline: none; max-width: 220px; }
.sx-seg { display: inline-flex; background: var(--surface-3); border-radius: 9px; padding: 3px; gap: 2px; }
.sx-seg button { border: 0; background: none; height: 28px; padding: 0 11px; border-radius: 7px; font-size: 12.5px; font-weight: 650; color: var(--text-2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background .15s, color .15s, box-shadow .15s; }
.sx-seg button:hover { color: var(--text); }
.sx-seg button.on { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.sx-seg.sm button { height: 24px; padding: 0 9px; font-size: 12px; }
.sx-dates { display: inline-flex; align-items: center; gap: 6px; }
.sx-dates .input { width: 140px; }
.sx-viewtoggle { display: inline-flex; padding: 3px; border-radius: 10px; background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); gap: 2px; }
.sx-viewtoggle button { border: 0; background: none; height: 30px; padding: 0 13px; border-radius: 8px; font-weight: 700; font-size: 12.5px; color: var(--text-2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .18s ease; }
.sx-viewtoggle button.on { background: var(--surface); color: var(--primary); box-shadow: 0 2px 6px rgba(79,70,229,.18); }

/* ---------- common ---------- */
.sx-grid { display: grid; gap: 18px; }
.sx-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-grid.g21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sx .mt { margin-top: 18px; }
.sx-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); min-width: 0; box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: box-shadow .2s ease, border-color .2s ease; }
.sx-card:hover { box-shadow: 0 6px 18px rgba(16,24,40,.07); }
.sx-card > header { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 4px; }
.sx-card > header h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sx-card > header p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.sx-card-b { padding: 12px 18px 18px; }
.sx-empty { padding: 22px 10px; text-align: center; color: var(--text-3); font-size: 13px; }
.sx-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.sx-note.info { background: var(--primary-soft); border-color: transparent; color: var(--text); }
.sx-note.warn { background: var(--warn-soft); border-color: transparent; color: var(--text); }
.sx-note.rival { background: var(--primary-soft); border-color: transparent; color: var(--text); margin-bottom: 14px; }
.sx-note .ic { margin-top: 2px; }
.sx-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sx-dot.for { background: var(--for); } .sx-dot.against { background: var(--against); } .sx-dot.blue { background: var(--primary); margin-right: 6px; }
.sx-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 650; background: var(--surface-3); color: var(--text-2); white-space: nowrap; text-decoration: none; }
.sx-pill.for, .sx-pill.ok { background: var(--for-soft); color: var(--for); }
.sx-pill.against { background: var(--against-soft); color: var(--against); }
.sx-pill.blue { background: var(--primary-soft); color: var(--primary); }
.sx-pill.warn { background: var(--warn-soft); color: var(--warn); }
.sx-count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 700; }
.sx-info { display: inline-grid; color: var(--text-3); margin-left: 4px; cursor: help; position: relative; vertical-align: -2px; }
.sx-info:hover::after, .sx-info:focus::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 240px;
  background: #0f172a; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.45; text-transform: none; letter-spacing: 0; padding: 8px 10px; border-radius: 8px; z-index: 30; box-shadow: var(--shadow-lg); }
.sx-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.sx-delta.good { background: var(--for-soft); color: var(--for); }
.sx-delta.bad { background: var(--against-soft); color: var(--against); }
.sx-delta.flat, .sx-delta.none { background: var(--surface-3); color: var(--text-3); }

/* stacked bar */
.sx-stack { display: flex; border-radius: 99px; overflow: hidden; background: var(--surface-3); min-width: 60px; }
.sx-stack span { display: block; height: 100%; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.sx-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.sx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sx-legend i { width: 10px; height: 10px; border-radius: 3px; }
.sx-legend small { color: var(--text-3); }

/* gauge */
.sx-gauge { position: relative; margin: 0 auto; }
.sx-gauge svg { width: 100%; display: block; overflow: visible; }
.sx-gauge-arc { animation: sx-arc 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sx-arc { from { stroke-dasharray: 0 var(--len); } }
.sx-gauge-v { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.sx-gauge-v b { font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.sx-gauge.big .sx-gauge-v b { font-size: 52px; }
.sx-gauge-v span { font-size: 12px; color: var(--text-3); margin-top: 4px; }

.sx-face { border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-3); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--primary) 30%, transparent); }
.sx-face.x { display: grid; place-items: center; font-weight: 800; font-size: 30px; color: var(--primary); background: var(--primary-soft); }
.sx-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-3); }
.sx-thumb.x { background: linear-gradient(135deg, var(--surface-3), var(--line)); }
.sx-verdict { font-weight: 800; font-size: 15px; }
.sx-verdict.big { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.sx-verdict.up, .sx-verdict.up2 { color: var(--for); } .sx-verdict.down, .sx-verdict.down2 { color: var(--against); }
.sx-verdict.even { color: var(--mixed); } .sx-verdict.none { color: var(--text-3); }

/* ---------- leader brief ---------- */
.sx-hero { display: grid; grid-template-columns: minmax(230px, 1fr) auto minmax(300px, 1.3fr); gap: 28px; align-items: center; padding: 26px 30px;
  border-radius: 20px; border: 1px solid var(--line); background:
    radial-gradient(1200px 300px at 0% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 60%),
    radial-gradient(800px 260px at 100% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--surface);
  box-shadow: 0 10px 30px rgba(16,24,40,.06); }
.sx-id { display: flex; gap: 16px; align-items: center; min-width: 0; }
.sx-id h1 { font-size: 26px; line-height: 1.15; }
.sx-verified { color: var(--primary); vertical-align: -2px; }
.sx-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.sx-tags span { font-size: 11.5px; padding: 2px 9px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); }
.sx-hero-g { text-align: center; }
.sx-hero-d { margin-top: 10px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.sx-kicker { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--primary); margin-bottom: 6px; }
.sx-lead { color: var(--text-2); font-size: 15px; margin: 10px 0 0; line-height: 1.55; }
.sx-lead.small { font-size: 13px; }
.sx-hero-stats { display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap; }
.sx-hero-stats div { display: flex; flex-direction: column; }
.sx-hero-stats b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.sx-hero-stats span { font-size: 12px; color: var(--text-3); }

.sx-head { position: relative; overflow: hidden; }
.sx-head::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; }
.sx-head.for::before { background: var(--for); } .sx-head.against::before { background: var(--against); } .sx-head.blue::before { background: var(--primary); }
.sx-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sx-points li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; position: relative; font-size: 14px; }
.sx-points li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.sx-head.for .sx-points li::before { background: var(--for); } .sx-head.against .sx-points li::before { background: var(--against); } .sx-head.blue .sx-points li::before { background: var(--primary); }
.sx-points small { color: var(--text-3); font-size: 12.5px; }

.sx-chart { position: relative; }
.sx-src { padding: 11px 0; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 7px; }
.sx-src:last-child { border-bottom: 0; }

.sx-div-h { display: grid; grid-template-columns: 140px 1fr 1fr 52px; gap: 0; font-size: 11px; color: var(--text-3); margin-bottom: 6px; }
.sx-div-h span:nth-child(2) { text-align: right; padding-right: 8px; } .sx-div-h span:nth-child(3) { padding-left: 8px; }
.sx-div-row { display: grid; grid-template-columns: 140px 1fr 1fr 52px; align-items: center; padding: 6px 0; color: var(--text); text-decoration: none; border-radius: 8px; }
.sx-div-row:hover { background: var(--surface-2); text-decoration: none; }
.sx-div-row .lbl { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }
.sx-div-row .bar { height: 14px; display: flex; }
.sx-div-row .bar.l { justify-content: flex-end; border-right: 2px solid var(--line); }
.sx-div-row .bar i { display: block; height: 100%; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.sx-div-row .bar.l i { background: var(--against); border-radius: 6px 0 0 6px; }
.sx-div-row .bar.r i { background: var(--for); border-radius: 0 6px 6px 0; }
.sx-div-row .v { text-align: right; font-weight: 800; font-size: 13px; }

.sx-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.sx-vs > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sx-vs b { font-size: 13.5px; margin-top: 8px; } .sx-vs small { color: var(--text-3); font-size: 12px; }
.sx-vs-mid { font-weight: 800; color: var(--text-3); font-size: 13px; }

.sx-quote { display: block; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--neutral); color: var(--text); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.sx-quote + .sx-quote { margin-top: 10px; }
.sx-quote:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,24,40,.08); }
.sx-quote.for { border-left-color: var(--for); background: var(--for-soft); }
.sx-quote.against { border-left-color: var(--against); background: var(--against-soft); }
.sx-quote .t { font-size: 14.5px; line-height: 1.55; }
.sx-quote .m { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 8px; font-size: 12px; color: var(--text-3); align-items: center; }
.sx-quote .m span { display: inline-flex; align-items: center; gap: 4px; }

.sx-post { display: flex; gap: 14px; color: var(--text); text-decoration: none; }
.sx-post:hover { text-decoration: none; }
.sx-post .sx-thumb { width: 84px; height: 84px; }
.sx-post-m { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: var(--text-3); }

.sx-watch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sx-watch-i { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.sx-watch-i > .ic { padding: 7px; box-sizing: content-box; border-radius: 10px; background: var(--surface-3); color: var(--text-2); }
.sx-watch-i.danger > .ic { background: var(--against-soft); color: var(--against); }
.sx-watch-i.warn > .ic { background: var(--warn-soft); color: var(--warn); }
.sx-watch-i.blue > .ic { background: var(--primary-soft); color: var(--primary); }
.sx-watch-i div { display: flex; flex-direction: column; }
.sx-watch-i b { font-size: 22px; font-weight: 800; line-height: 1.1; }
.sx-watch-i span { font-weight: 650; font-size: 13px; }
.sx-watch-i small { color: var(--text-3); font-size: 12px; }
.sx-conf { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--line); color: var(--text-3); font-size: 12.5px; line-height: 1.55; }
.sx-conf .ic { color: var(--for); margin-top: 2px; }

/* all leaders */
.sx-h1 h1 { font-size: 24px; } .sx-h1 p { color: var(--text-3); margin: 4px 0 0; max-width: 760px; }
.sx-leaders { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sx-leader { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--rad); border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; text-align: center; font: inherit; color: inherit; transition: transform .18s, box-shadow .18s, border-color .18s; }
.sx-leader:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,24,40,.1); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.sx-leader b { display: block; font-size: 15px; } .sx-leader small { color: var(--text-3); }

/* ---------- team workspace ---------- */
.sx-team-head { display: flex; flex-direction: column; gap: 10px; }
.sx-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.sx-tabs button { border: 0; background: none; padding: 10px 14px 11px; font-weight: 650; font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; transition: color .15s, border-color .15s; }
.sx-tabs button:hover { color: var(--text); }
.sx-tabs button.on { color: var(--primary); border-bottom-color: var(--primary); }
.sx-tabs button.on .sx-count { background: var(--primary); color: #fff; }
.sx-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#sx-tab.sx-in { animation: sx-in .28s ease both; }
@keyframes sx-in { from { opacity: 0; transform: translateY(6px); } }

.sx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.sx-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; }
.sx-kpi .k { font-size: 12px; font-weight: 650; color: var(--text-2); display: flex; align-items: center; }
.sx-kpi .v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; line-height: 1.15; }
.sx-kpi .d { margin-top: 4px; }
.sx-kpi .d:empty { display: none; }
.sx-kpi .n { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.sx-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.sx-mini-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-mini-grid div { display: flex; flex-direction: column; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); }
.sx-mini-grid b { font-size: 18px; font-weight: 800; }
.sx-mini-grid span { font-size: 12px; color: var(--text-3); }
.sx-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sx-insight { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); }
.sx-insight .k { flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; height: fit-content; background: var(--surface-3); color: var(--text-2); }
.sx-insight.risk .k { background: var(--against-soft); color: var(--against); }
.sx-insight.strength .k { background: var(--for-soft); color: var(--for); }
.sx-insight.signal .k { background: var(--primary-soft); color: var(--primary); }
.sx-insight.moderate .k { background: var(--warn-soft); color: var(--warn); }
.sx-insight a { color: var(--text); }

.sx-scroll { overflow: auto; max-height: 640px; border-radius: 10px; }
.sx-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.sx-tbl th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); text-align: left; font-size: 11.5px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; }
.sx-tbl th.sortable { cursor: pointer; } .sx-tbl th.sortable:hover { color: var(--text); }
.sx-tbl th.desc::after { content: ' ↓'; color: var(--primary); } .sx-tbl th.asc::after { content: ' ↑'; color: var(--primary); }
.sx-tbl td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.sx-tbl tbody tr { transition: background .12s; }
.sx-tbl tbody tr:hover td { background: var(--surface-2); }
.sx-tbl tr.click { cursor: pointer; }
.sx-tbl .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-tbl.compact td, .sx-tbl.compact th { padding: 7px 8px; }
.sx-tbl-tools { display: flex; justify-content: flex-end; margin: -6px 0 6px; }
.sx-foot { padding: 8px 4px 0; }
.sx-acct { display: flex; align-items: center; gap: 9px; min-width: 160px; }
.sx-acct .sx-face { box-shadow: none; font-size: 13px; }
.sx-acct b { display: block; font-size: 13px; } .sx-acct small { color: var(--text-3); font-size: 11.5px; }
.sx-post-cell { display: flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; min-width: 280px; max-width: 460px; }
.sx-post-cell:hover { text-decoration: none; }
.sx-post-cell .sx-thumb { width: 44px; height: 44px; border-radius: 8px; }
.sx-post-cell small { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 2px; }

.sx-heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.sx-heat .h { font-size: 10px; color: var(--text-3); text-align: left; white-space: nowrap; overflow: visible; }
.sx-heat .d { font-size: 11px; color: var(--text-2); font-weight: 600; }
.sx-heat i { display: block; aspect-ratio: 1; border-radius: 4px; transition: transform .12s; }
.sx-heat i:hover { transform: scale(1.35); box-shadow: 0 0 0 2px var(--surface), 0 2px 6px rgba(0,0,0,.2); position: relative; z-index: 1; }
.sx-type { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.sx-type:last-child { border-bottom: 0; }
.sx-rise { display: grid; grid-template-columns: 1fr auto 52px; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--line-2); color: var(--text); align-items: center; text-decoration: none; }
.sx-rise:hover { background: var(--surface-2); text-decoration: none; }
.sx-rise span:last-child { text-align: right; font-weight: 800; }
.sx-gaps { display: flex; flex-direction: column; gap: 4px; }
.sx-gap-row { display: grid; grid-template-columns: 170px minmax(120px, 1fr) 54px 190px; gap: 12px; align-items: center; padding: 6px 0; font-size: 13px; }
.sx-gap-row .lbl { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-gap { position: relative; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--against-soft), var(--surface-3), var(--for-soft)); }
.sx-gap .mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--line); }
.sx-gap .pt { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--surface); }
.sx-gap-row .v { font-weight: 800; text-align: right; }
.sx-cross { display: grid; grid-template-columns: 110px 1fr 54px 54px; gap: 12px; align-items: center; padding: 7px 0; font-size: 13px; }
.sx-cross .lbl { font-weight: 600; } .sx-cross .n { text-align: right; font-variant-numeric: tabular-nums; }
.sx-list { max-height: 440px; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
.sx-list.tall { max-height: 720px; }
.sx-list .sx-quote + .sx-quote { margin-top: 0; }
.sx-sub { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-top: 6px; }

.sx-q { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); border-left: 4px solid var(--neutral); transition: opacity .2s, background .2s; }
.sx-q.against { border-left-color: var(--against); } .sx-q.warn { border-left-color: var(--mixed); }
.sx-q.done { opacity: .6; }
.sx-q .t { font-size: 14px; line-height: 1.5; }
.sx-q .m { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; font-size: 12px; color: var(--text-3); align-items: center; }
.sx-q .m span { display: inline-flex; align-items: center; gap: 4px; }
.sx-q .a { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.sx-q .a .btn { height: 26px; font-size: 11.5px; padding: 0 8px; }
.sx-q .a .btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.sx-q-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr 110px; gap: 12px; align-items: center; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--line-2); }
.sx-q-row b { text-align: right; font-variant-numeric: tabular-nums; }
.sx-bar-in { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.sx-bar-in i { display: block; height: 100%; border-radius: 99px; background: var(--neutral); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.sx-bar-in i.for { background: var(--for); } .sx-bar-in i.against { background: var(--against); } .sx-bar-in i.blue { background: var(--primary); } .sx-bar-in i.warn { background: var(--mixed); }
.sx-defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.sx-defs div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.sx-defs span { color: var(--text-3); }

/* skeleton */
.sx-skel { display: flex; flex-direction: column; gap: 18px; }
.sk { border-radius: var(--rad); background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: sk 1.2s ease-in-out infinite; }
.sk-hero { height: 220px; border-radius: 20px; } .sk-card { height: 150px; } .sk-chart { height: 280px; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1250px) {
  .sx-hero { grid-template-columns: 1fr auto; }
  .sx-hero-t { grid-column: 1 / -1; }
  .sx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .sx-grid.g3, .sx-grid.g21, .sx-grid.g2, .sx-insights, .sx-defs { grid-template-columns: minmax(0, 1fr); }
  .sx-watch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-gap-row { grid-template-columns: 130px 1fr 50px; } .sx-gap-row > span:last-child { display: none; }
}
@media (max-width: 700px) {
  .sx-page { padding: 14px 14px 0; }
  .sx-bar { padding: 8px 14px; }
  .sx-hero { grid-template-columns: 1fr; padding: 20px; }
  .sx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-watch { grid-template-columns: 1fr; }
  .sx .hide-sm { display: none; }
  .sx-div-row, .sx-div-h { grid-template-columns: 100px 1fr 1fr 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx *, .sx *::before { animation: none !important; transition: none !important; }
}

/* ---------- print / save as PDF: the leader brief as a clean document ---------- */
@media print {
  body { overflow: visible !important; background: #fff !important; }
  #app { display: block !important; height: auto !important; }
  .rail, .subnav, .sx-bar, .sx-team-head .sx-filters, .sx-q .a, .sx-tbl-tools, #toasts { display: none !important; }
  .main, .sb-wrap { overflow: visible !important; height: auto !important; background: #fff !important; }
  .sx-page { max-width: none; padding: 0; }
  .sx-card, .sx-hero, .sx-watch-i { box-shadow: none !important; break-inside: avoid; }
  .sx-scroll, .sx-list { max-height: none !important; overflow: visible !important; }
}
@media (max-width: 700px) { .sx-gauge.big .sx-gauge-v b { font-size: 40px; } .sx-vs b { font-size: 12px; } .sx-gauge-v b { font-size: 26px; } }

/* ---------- Instagram-style comment cards ---------- */
.igc { background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--line); border-radius: 12px; padding: 12px 12px 8px; transition: opacity .2s, box-shadow .15s; }
.igc:hover { box-shadow: 0 4px 14px rgba(16,24,40,.07); }
.igc.against { border-left-color: var(--against); } .igc.for { border-left-color: var(--for); } .igc.warn { border-left-color: var(--mixed); } .igc.blue { border-left-color: var(--blue); }
.igc.bg-against { background-color: var(--against-soft); border-color: rgba(229,72,77,.2); }
.igc.bg-for { background-color: var(--for-soft); border-color: rgba(15,159,110,.2); }
.igc.done { opacity: .62; }
.igc-row { display: flex; gap: 10px; align-items: flex-start; }
.igc-av { position: relative; width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--h), color-mix(in srgb, var(--h) 55%, #fff)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--h) 45%, transparent); }
.igc-av i { font-style: normal; color: #fff; font-weight: 800; font-size: 14px; }
.igc-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.igc-body { flex: 1; min-width: 0; }
.igc-text { font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.igc-name { font-weight: 700; margin-right: 4px; }
.igc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 12px; color: var(--text-3); align-items: center; }
.igc-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--text-3); cursor: pointer; }
.igc-link:hover { color: var(--text); }
.igc-verdict { font-weight: 700; padding: 0 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); }
.igc-verdict.for { background: var(--for-soft); color: var(--for); } .igc-verdict.against { background: var(--against-soft); color: var(--against); }
.igc-verdict.rival { background: var(--primary-soft); color: var(--primary); }
.igc-cluster { font-weight: 700; color: var(--text-2); }
.igc-state { display: inline-flex; gap: 3px; align-items: center; font-weight: 700; color: var(--for); }
.igc-heart { border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: 50%; transition: transform .15s, color .15s; flex: none; }
.igc-heart:hover { color: var(--against); transform: scale(1.12); }
.igc-heart.on { color: var(--against); } .igc-heart.on svg { fill: currentColor; }
.igc-bar { display: flex; flex-wrap: wrap; gap: 2px; margin: 8px 0 0 0; }
.igc-bar > * { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 3px 8px; border-radius: 7px; cursor: pointer; text-decoration: none; }
.igc-bar > *:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.igc-bar > .on { background: var(--primary-soft); color: var(--primary); }
.igc-why, .igc-reply { margin: 8px 0 2px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); }
.igc-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.igc-why-grid span { display: block; font-size: 11px; color: var(--text-3); } .igc-why-grid b { font-size: 13px; }
.igc-why .btn.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.igc-reply-in { display: flex; flex-direction: column; gap: 6px; }
.sx-list .igc + .igc { margin-top: 0; }
@media (max-width: 700px) { .igc-bar, .igc-why, .igc-reply { margin-left: 0; } .igc-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-qtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sx-qtabs button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-weight: 700; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.sx-qtabs button.on { color: var(--text); border-color: var(--primary); background: var(--primary-soft); }
.sx-qtabs button.against.on { border-color: var(--against); background: var(--against-soft); }
.sx-qtabs button.warn.on { border-color: var(--mixed); background: var(--warn-soft); }
.sx-qtabs button.blue.on { border-color: var(--blue); background: var(--blue-soft); }
.sx-qlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 1100px) { .sx-qlist { grid-template-columns: minmax(0, 1fr); } }