/* Event impact (events-impact.js): the event's own three days. It deliberately shares Home's warm canvas,
   gold interaction language and calm card hierarchy. Green/red remain reserved for measured sentiment. */
.im { display: grid; gap: 22px; isolation: isolate; }
.im-jump { position: sticky; top: 8px; z-index: 8; display: flex; gap: 4px; align-items: center; padding: 5px; width: fit-content; max-width: 100%; overflow-x: auto; border: 1px solid var(--hm-line, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: var(--hm-shadow, 0 8px 24px rgb(0 0 0 / .06)); backdrop-filter: blur(16px) saturate(1.25); scrollbar-width: none; }
.im-jump::-webkit-scrollbar { display: none; }
.im-jump button { flex: none; padding: 7px 12px; border: 0; border-radius: 999px; color: var(--text-2, var(--muted)); background: transparent; cursor: pointer; font: 650 12px/1.25 var(--font); transition: color .2s, background .2s, transform .25s var(--hm-ease, ease), box-shadow .2s; }
.im-jump button:hover, .im-jump button:focus-visible { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent-ink); outline: none; transform: translateY(-1px); }
.im-jump button.on { color: var(--hm-on-gold, #2a1c05); background: linear-gradient(135deg, var(--accent), var(--accent-strong)); box-shadow: 0 7px 18px -12px color-mix(in srgb, var(--accent) 76%, #000); }
.im-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; padding: 28px; border-radius: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); box-shadow: var(--hm-shadow);
  background: radial-gradient(520px 260px at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, var(--surface)), var(--surface) 62%); transition: transform .3s var(--hm-ease, ease), box-shadow .3s var(--hm-ease, ease), border-color .3s; }
.im-hero::before { content: ''; position: absolute; inset: -60% auto -60% -30%; width: 35%; pointer-events: none; transform: rotate(16deg) translateX(-140%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 13%, transparent), transparent); transition: transform .85s var(--hm-ease, ease); }
.im-hero:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); box-shadow: var(--hm-shadow-h); }
.im-hero:hover::before { transform: rotate(16deg) translateX(470%); }
.im-hero h2 { font: 380 clamp(27px, 2.4vw, 39px)/1.13 var(--font); letter-spacing: -.032em; margin: 8px 0 12px; text-wrap: balance; }
.im-hero p { color: var(--muted); margin: 0 0 6px; max-width: 62ch; }
.im-hero > div:first-child > small { display: inline-flex; padding: 5px 12px; border-radius: 999px; color: var(--accent-ink); font-weight: 650; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.im-window { display: flex; gap: 6px; align-items: center; font-size: 12.5px; }
.im-hero-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.im-kpi { position: relative; padding: 14px 16px; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--hm-line, var(--line)); min-width: 0; box-shadow: 0 10px 22px -22px rgb(0 0 0 / .32); transition: transform .28s var(--hm-ease, ease), border-color .25s, box-shadow .28s; }
.im-kpi::after { content: ''; position: absolute; right: -38px; bottom: -54px; width: 110px; height: 110px; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%); transition: opacity .3s; }
.im-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 18px 28px -24px color-mix(in srgb, var(--accent) 52%, #000); }
.im-kpi:hover::after { opacity: 1; }
.im-kpi small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-kpi b { display: block; font-size: 24px; font-weight: 420; letter-spacing: -.03em; line-height: 1.22; font-variant-numeric: tabular-nums; }
.im-kpi span { color: var(--muted); font-size: 11.5px; }
.im-card { position: relative; padding: 20px 22px; border-radius: 22px; border: 1px solid var(--hm-line, var(--line)); background: var(--surface); min-width: 0; overflow: hidden; box-shadow: var(--hm-shadow); transition: transform .3s var(--hm-ease, ease), box-shadow .3s var(--hm-ease, ease), border-color .3s; }
.im-card::before { content: ''; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: scaleX(0); transition: transform .45s var(--hm-ease, ease); }
.im-card:hover { transform: translateY(-3px); box-shadow: var(--hm-shadow-h); border-color: color-mix(in srgb, var(--accent) 43%, var(--line)); }
.im-card:hover::before { transform: scaleX(1); }
.im [id^="event-"] { scroll-margin-top: 72px; }
.im-reading { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 22px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--hm-shadow); background: radial-gradient(420px 160px at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%), linear-gradient(105deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); transition: transform .3s var(--hm-ease, ease), box-shadow .3s, border-color .3s; }
.im-reading:hover { transform: translateY(-2px); box-shadow: var(--hm-shadow-h); border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); }
.im-reading-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--accent-ink); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 28%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface))); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); transition: transform .35s var(--hm-ease, ease), background .3s; }
.im-reading:hover .im-reading-icon { transform: rotate(-7deg) scale(1.08); background: linear-gradient(145deg, var(--accent), var(--accent-strong)); }
.im-reading small { color: var(--accent-ink); font-weight: 700; }
.im-reading h3 { margin: 2px 0 4px; font-size: 20px; font-weight: 600; }
.im-reading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.im-reading > a { color: var(--accent-ink); text-decoration: none; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.im-card-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.im-card-h h3 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; margin: 0; display: flex; gap: 7px; align-items: center; }
.im-sec { display: flex; gap: 11px; align-items: center; font-size: 18px; font-weight: 650; letter-spacing: -.012em; margin: 14px 0 -5px; flex-wrap: wrap; }
.im-sec > svg { box-sizing: content-box; width: 18px; height: 18px; padding: 9px; border-radius: 12px; color: var(--accent-ink); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 25%, var(--surface)), color-mix(in srgb, var(--accent) 10%, var(--surface))); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); transition: transform .35s var(--hm-ease, ease), background .3s; }
.im-sec:hover > svg { transform: rotate(-6deg) scale(1.06); background: linear-gradient(145deg, var(--accent), var(--accent-strong)); }
.im-sec.ours svg { color: var(--pos-ink); } .im-sec.theirs svg { color: var(--neg-ink); }
.im-days { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 14px; }
.im-day.day { border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), var(--hm-shadow); background: radial-gradient(240px 130px at 100% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%), var(--surface); }
.im-g-k { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 10px; }
.im-g-k .im-kpi { padding: 8px 10px; border-radius: 10px; background: var(--bg); }
.im-g-k .im-kpi b { font-size: 17px; }
.im-grid2, .im-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.im-two { gap: 12px; }
.im-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.im-group.ours { --im-c: var(--pos); } .im-group.theirs { --im-c: var(--neg); } .im-group.media { --im-c: var(--accent); } .im-group.public { --im-c: var(--neu); }
.im-group:not(.empty)::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--im-c), transparent 78%); opacity: .9; }
.im-group.empty { opacity: .65; border-top-width: 1px; }
.im-nets { display: flex; gap: 8px; align-items: center; font-size: 12px; margin-bottom: 8px; }
.im-net { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 70%, var(--text)); vertical-align: middle; }
.im-mood { margin: 6px 0; min-width: 0; }
.im-mood > small, .im-l { display: block; color: var(--muted); font-size: 11.5px; margin-bottom: 4px; }
.im-bar { display: flex; height: 9px; border-radius: 99px; overflow: hidden; background: var(--bg); }
.im-bar.tall { height: 14px; }
.im-bar i { display: block; min-width: 0; } .im-bar .pos { background: var(--pos); } .im-bar .neg { background: var(--neg); } .im-bar .neu { background: var(--neu); }
.im-barl { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 3px; }
.im-barl b { font-weight: 600; } .im-barl .pos, b.pos { color: var(--pos-ink); } .im-barl .neg, b.neg { color: var(--neg-ink); }
.im-pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--bg); color: var(--muted); }
.im-pill.pos { background: color-mix(in srgb, var(--pos) 35%, transparent); color: var(--pos-ink); } .im-pill.neg { background: color-mix(in srgb, var(--neg) 35%, transparent); color: var(--neg-ink); } .im-pill.neu { background: color-mix(in srgb, var(--neu) 40%, transparent); color: var(--text); }
.im-thumb { position: relative; flex: none; width: 64px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.im-thumb.wide { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; }
.im-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.im-thumb em { position: absolute; right: 6px; bottom: 6px; font-style: normal; font-size: 10px; padding: 2px 6px; border-radius: 99px; background: rgb(0 0 0 / .55); color: #fff; }
.im-post { display: flex; gap: 12px; padding: 10px; border-radius: 15px; border: 1px solid var(--hm-line, var(--line)); background: color-mix(in srgb, var(--surface) 82%, transparent); color: inherit; text-decoration: none; min-width: 0; transition: border-color .2s, transform .25s var(--hm-ease, ease), box-shadow .25s, background .2s; }
.im-post:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--surface); transform: translateY(-2px); box-shadow: 0 14px 26px -22px rgb(0 0 0 / .5); }
.im-post .im-thumb img { transition: transform .55s var(--hm-ease, ease); }
.im-post:hover .im-thumb img { transform: scale(1.08); }
.im-post > div { min-width: 0; flex: 1; }
.im-post-h { display: flex; gap: 6px; align-items: center; font-size: 12.5px; flex-wrap: wrap; }
.im-post p { margin: 4px 0; font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.im-post-m { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.im-best > small { display: block; color: var(--accent-ink); font-weight: 600; font-size: 11.5px; margin: 6px 0 4px; }
.im-more summary { cursor: pointer; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.im-posts { display: grid; gap: 8px; margin-top: 10px; }
.im-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.im-table-wrap { max-width: 100%; overflow-x: auto; overflow-y: visible; }
.im-table-wrap .im-table { min-width: 620px; }
.im-table-wrap .im-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.im-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.im-table td { padding: 9px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: middle; transition: background .18s; }
.im-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.im-table td .im-mood { margin: 0; min-width: 120px; }
.im-yt-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.im-yt-tools .input { flex: 1; min-width: 260px; max-width: 520px; }
.im-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.im-video { position: relative; display: grid; gap: 10px; align-content: start; text-align: left; padding: 11px; border-radius: 20px; overflow: hidden; border: 1px solid var(--hm-line, var(--line)); background: var(--surface); color: inherit; cursor: pointer; font: inherit; box-shadow: var(--hm-shadow); transition: border-color .25s, transform .3s var(--hm-ease, ease), box-shadow .3s; }
.im-video::after { content: ''; position: absolute; right: -55px; bottom: -70px; width: 150px; height: 150px; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); transition: opacity .35s; }
.im-video:hover { border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); transform: translateY(-4px); box-shadow: var(--hm-shadow-h); }
.im-video:hover::after { opacity: 1; }
.im-video .im-thumb img { transition: transform .65s var(--hm-ease, ease); }
.im-video:hover .im-thumb img { transform: scale(1.06); }
.im-rank { position: absolute; top: 16px; left: 16px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--primary); color: var(--on-primary); }
.im-video-b b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 600; }
.im-video-b > small { display: block; color: var(--muted); font-size: 11.5px; margin: 3px 0 6px; }
.im-video-s { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.im-video-s small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.im-video-s .im-mood { margin: 0; }
.im-min { margin-top: 8px; font-size: 11.5px; color: var(--muted); display: grid; gap: 3px; }
.im-voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.im-voice { padding: 13px 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 6px; transition: transform .25s var(--hm-ease, ease), border-color .2s, box-shadow .25s; }
.im-voice:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow: 0 15px 24px -22px rgb(0 0 0 / .45); }
.im-voice.pos { background: color-mix(in srgb, var(--pos) 16%, var(--surface)); } .im-voice.neg { background: color-mix(in srgb, var(--neg) 16%, var(--surface)); }
.im-voice b { font-size: calc(12.5px * var(--s, 1)); font-weight: 600; line-height: 1.3; }
.im-voice small { color: var(--muted); font-size: 11.5px; }
.im-voice q { font-size: 12px; color: var(--muted); quotes: '“' '”'; }
.im-stories { display: grid; gap: 6px; }
.im-stories a { display: block; padding: 10px 12px; border-radius: 13px; color: inherit; text-decoration: none; border: 1px solid transparent; transition: transform .25s var(--hm-ease, ease), background .2s, border-color .2s; }
.im-stories a:hover { border-color: var(--hm-line, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); transform: translateX(3px); }
.im-stories b { display: block; font-size: 13px; font-weight: 500; } .im-stories small { color: var(--muted); font-size: 11.5px; }
.im-vd { display: grid; gap: 14px; }
.im-vd h4 { font-size: 14px; font-weight: 600; margin: 4px 0 0; }
.im-vd-top { display: grid; grid-template-columns: 300px 1fr; gap: 16px; color: inherit; text-decoration: none; }
.im-vd-top b { font-size: 16px; font-weight: 600; } .im-vd-top small { display: block; color: var(--muted); margin: 4px 0 10px; }
.im-claim { margin: 8px 0; font-size: 13px; }
.im-chips { display: flex; gap: 6px; flex-wrap: wrap; } .im-chips span { padding: 2px 9px; border-radius: 99px; background: var(--bg); font-size: 11.5px; }
.im-stmts { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.im-stmts a { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 12.5px; }
.im-stmts a.pos { background: color-mix(in srgb, var(--pos) 18%, var(--surface)); } .im-stmts a.neg { background: color-mix(in srgb, var(--neg) 18%, var(--surface)); }
.im-stmts em { font-style: normal; font-family: var(--mono, monospace); color: var(--muted); }
.im-q { padding: 8px 10px; border-radius: 10px; margin-bottom: 6px; font-size: 12.5px; }
.im-q.pos { background: color-mix(in srgb, var(--pos) 16%, var(--surface)); } .im-q.neg { background: color-mix(in srgb, var(--neg) 16%, var(--surface)); }
.im-q p { margin: 0 0 2px; } .im-q small { color: var(--muted); font-size: 11px; }
.im-foot { display: flex; gap: 7px; align-items: flex-start; padding: 4px 2px; line-height: 1.55; }
@media (max-width: 1000px) { .im-hero, .im-days, .im-grid2, .im-vd-top { grid-template-columns: 1fr; } .im-hero-k { grid-template-columns: repeat(3, minmax(0, 1fr)); } .im-reading { grid-template-columns: auto 1fr; } .im-reading > a { grid-column: 2; } }
@media (max-width: 720px) { .im.lx.hm { padding: 18px 16px; border-radius: 22px; } .im-hero { padding: 22px 18px; } .im-hero-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .im-card { padding: 17px; } .im-sec { margin-top: 10px; } }
@media (max-width: 560px) { .im-two { grid-template-columns: 1fr; } .im-groups { grid-template-columns: minmax(0, 1fr); } .im-jump { width: 100%; } .im-reading { grid-template-columns: 1fr; } .im-reading-icon { display: none; } .im-reading > a { grid-column: 1; } .im-hero-k { grid-template-columns: 1fr 1fr; } .im-kpi { padding: 12px; } .im-yt-tools .input { min-width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .im *, .im *::before, .im *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* An issue's key dates and day-by-day timeline (7 Oct 2026) */
.im-chips-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.im-chip { display: grid; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; max-width: 240px; }
.im-chip b { font-size: 12.5px; font-weight: 600; } .im-chip small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-chip.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .im-chip.on small { color: inherit; opacity: .75; }
.im-tl-bars { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 8px; }
.im-tl-b { flex: 1; min-width: 8px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4px; color: inherit; text-decoration: none; }
.im-tl-b span { display: flex; flex-direction: column; border-radius: 6px 6px 2px 2px; overflow: hidden; background: var(--neu); transition: filter .15s, transform .15s; }
.im-tl-b:hover span { filter: brightness(.94); transform: scaleX(1.12); }
.im-tl-b i { display: block; min-height: 0; } .im-tl-b .pos { background: var(--pos); } .im-tl-b .neg { background: var(--neg); } .im-tl-b .neu { background: var(--neu); }
.im-tl-b small { font-size: 10px; color: var(--muted); text-align: center; }
.im-tl-b.key small { color: var(--accent-ink); font-weight: 700; } .im-tl-b.key span { outline: 2px solid var(--accent); outline-offset: 1px; }
.im-tl-keys { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.im-tl-keys b { color: var(--accent-ink); font-weight: 600; margin-right: 4px; }

/* ---- Event report redesign (7 Oct 2026): verdict, scorecard, the leader's own posts, right / wrong, who spoke ---- */
.iv-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.iv-verdict { margin: 12px 0; padding: 14px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); max-width: 62ch; }
.iv-verdict b { display: block; font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.iv-verdict p { margin: 6px 0 0; font-size: 14.5px; color: var(--text); line-height: 1.55; }
.iv-verdict.is-pos { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 14%, var(--surface)); } .iv-verdict.is-pos b { color: var(--pos-ink); }
.iv-verdict.is-neg { border-color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, var(--surface)); } .iv-verdict.is-neg b { color: var(--neg-ink); }
.iv-rings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.iv-ring { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px; border-radius: 20px; background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line); }
.iv-ring svg { width: 132px; height: 132px; } .iv-ring circle { fill: none; stroke-width: 12; } .iv-ring .bg { stroke: var(--line); } .iv-ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray 1s cubic-bezier(.2, .8, .2, 1); }
.iv-ring.pos .fg { stroke: var(--pos); } .iv-ring.neg .fg { stroke: var(--neg); }
.iv-ring > div { position: absolute; top: 14px; height: 132px; display: grid; place-content: center; text-align: center; }
.iv-ring > div b { font-size: 34px; font-weight: 500; letter-spacing: -.03em; line-height: 1; } .iv-ring em { font-style: normal; font-size: 16px; } .iv-ring > div small { font-size: 11px; color: var(--muted); }
.iv-ring > span { font-size: 13px; font-weight: 600; text-align: center; } .iv-ring > span i { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.iv-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.iv-scores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.iv-score { position: relative; display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); border-top: 4px solid var(--neu); min-width: 0; }
.iv-score.is-pos { border-top-color: var(--pos); } .iv-score.is-neg { border-top-color: var(--neg); }
.iv-score-ic { position: absolute; top: 12px; right: 14px; color: var(--muted); }
.iv-score small { font-size: 12px; font-weight: 600; padding-right: 24px; } .iv-score b { font-size: 30px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.iv-score.is-pos b { color: var(--pos-ink); } .iv-score.is-neg b { color: var(--neg-ink); }
.iv-score em { font-style: normal; font-size: 11.5px; color: var(--muted); } .iv-score > span:last-child { font-size: 11px; color: var(--muted); }
.iv-own-top { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 280px); gap: 18px; align-items: center; margin-bottom: 14px; }
.iv-own-k { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; }
.iv-nets { display: flex; gap: 10px; flex-wrap: wrap; }
.iv-net { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 6px; align-items: baseline; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); min-width: 150px; }
.iv-net b { font-size: 18px; font-weight: 500; } .iv-net small, .iv-net span { font-size: 11px; color: var(--muted); } .iv-net span, .iv-net .im-mood { grid-column: 1 / -1; margin: 0; }
.iv-days { display: grid; gap: 12px; }
.iv-dayrow { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.iv-daytag { position: relative; padding-left: 14px; } .iv-daytag::before { content: ''; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--neu); }
.iv-dayrow.key .iv-daytag::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.iv-daytag b { display: block; font-size: 13px; font-weight: 600; } .iv-daytag small { font-size: 11px; color: var(--muted); }
.iv-dayposts { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.iv-own { flex: none; width: 250px; display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 8px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); background: color-mix(in srgb, var(--c) 8%, var(--surface)); color: inherit; text-decoration: none; scroll-snap-align: start; transition: transform .2s, box-shadow .2s; }
.iv-own:hover { transform: translateY(-3px); box-shadow: 0 12px 26px color-mix(in srgb, var(--c) 28%, transparent); }
.iv-own .im-thumb { width: 76px; } .iv-own-b { min-width: 0; }
.iv-own-h { display: flex; gap: 6px; align-items: center; font-size: 12px; } .iv-own-h em { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 99px; background: var(--primary); color: var(--on-primary); }
.iv-own p { margin: 4px 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.iv-own-m { display: flex; gap: 8px; font-size: 11px; color: var(--muted); } .iv-own-m span { display: inline-flex; gap: 3px; align-items: center; }
.iv-own .im-mood { margin: 4px 0 0; } .iv-own .im-barl { font-size: 10px; }
.iv-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.iv-lane { --c: var(--pos); --ink: var(--pos-ink); display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--surface) 42%); min-width: 0; }
.iv-lane.is-neg { --c: var(--neg); --ink: var(--neg-ink); }
.iv-lane header { display: flex; gap: 12px; align-items: center; } .iv-lane header > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: color-mix(in srgb, var(--c) 40%, transparent); color: var(--ink); }
.iv-lane h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); } .iv-lane header small { font-size: 12px; color: var(--muted); }
.iv-l, .iv-says > small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.iv-says { display: grid; gap: 6px; } .iv-say { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, var(--c) 20%, var(--surface)); }
.iv-say b { font-size: 13px; font-weight: 600; } .iv-say i { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
.iv-posts { display: grid; gap: 8px; }
.iv-acc, .iv-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.iv-acc span { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; } .iv-acc i { font-style: normal; color: var(--muted); font-size: 11px; }
.iv-tags span { font-size: calc(12px * var(--s, 1)); font-weight: 600; color: var(--ink); padding: 3px 10px; border-radius: 10px; background: color-mix(in srgb, var(--c) 18%, transparent); } .iv-tags i { font-style: normal; font-weight: 400; font-size: 10.5px; color: var(--muted); margin-left: 5px; }
.iv-bf { display: grid; gap: 4px; }
.iv-bf-h, .iv-bf-r { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 1fr) minmax(140px, 1.2fr) minmax(140px, 1.2fr); gap: 14px; align-items: center; }
.iv-bf-h { font-size: 11.5px; color: var(--muted); padding: 0 10px 4px; }
.iv-bf-r { padding: 9px 10px; border-radius: 12px; color: inherit; text-decoration: none; border-left: 4px solid var(--neu); transition: background .15s; }
.iv-bf-r:hover { background: var(--bg); } .iv-bf-r.ours { border-left-color: var(--pos); } .iv-bf-r.theirs { border-left-color: var(--neg); } .iv-bf-r.media { border-left-color: var(--accent); }
.iv-bf-r > span:first-child b { display: block; font-size: 13px; font-weight: 600; } .iv-bf-r small { font-size: 11px; color: var(--muted); }
.iv-bf-vol { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; } .iv-bf-vol i { display: block; height: 8px; border-radius: 99px; background: var(--primary); opacity: .75; justify-self: start; } .iv-bf-vol b { font-size: 13px; font-weight: 600; }
.iv-bf-m { display: grid; gap: 2px; } .iv-bf-m em { display: flex; justify-content: space-between; font-style: normal; font-size: 11px; } .iv-bf-none { font-size: 11.5px; color: var(--muted); }
.iv-field .sv-b { cursor: default; }
@media (max-width: 1100px) { .iv-scores { grid-template-columns: repeat(2, 1fr); } .iv-lanes, .iv-hero { grid-template-columns: 1fr; } .iv-own-top { grid-template-columns: 1fr; } .iv-bf-h { display: none; } .iv-bf-r { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .iv-rings { grid-template-columns: 1fr; } .iv-facts { grid-template-columns: repeat(2, 1fr); } .iv-dayrow { grid-template-columns: 1fr; } }
.iv-net { min-width: 210px; flex: 1 1 210px; max-width: 280px; }
.iv-own-top { grid-template-columns: auto minmax(0, 1fr); } .iv-own-mood { grid-column: 1 / -1; max-width: 520px; }

/* ---- 7 Oct 2026 (second pass): bigger numbers, 4:5 previews, hover preview, post detail, tabs ---- */
.iv [hidden] { display: none !important; }
.iv .im-kpi b { font-size: 26px; } .iv .im-hero-k .im-kpi b, .iv-facts .im-kpi b { font-size: 30px; } .iv .im-g-k .im-kpi b { font-size: 22px; }
.iv-ring svg { width: 168px; height: 168px; } .iv-ring > div { height: 168px; } .iv-ring > div b { font-size: 48px; } .iv-ring em { font-size: 20px; } .iv-ring > span { font-size: 14.5px; }
.iv-score b { font-size: 42px; } .iv-score small { font-size: 13px; } .iv-score { padding: 18px 20px; gap: 6px; }
.iv .im-barl { font-size: 12.5px; } .iv .im-bar { height: 11px; }
.iv .im-thumb { width: 96px; aspect-ratio: 4 / 5; border-radius: 12px; } .iv .im-thumb.wide { width: 100%; aspect-ratio: 4 / 5; }
.iv .im-videos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.iv .im-post p { font-size: 13px; -webkit-line-clamp: 4; } .iv .im-post-h { font-size: 13.5px; }
.iv-own { width: 300px; grid-template-columns: 104px 1fr; } .iv-own .im-thumb { width: 104px; } .iv-own p { font-size: 12.5px; -webkit-line-clamp: 4; }
.iv-own-k .im-kpi b { font-size: 30px; } .iv-net b { font-size: 26px; }
.iv-lane h3 { font-size: 24px; } .iv-say b { font-size: 14px; }
.iv-bf-r > span:first-child b { font-size: 14.5px; } .iv-bf-vol b { font-size: 18px; } .iv-bf-r { padding: 12px; } .iv-bf-m em { font-size: 12.5px; }
.iv .im-groups { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.iv .im-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } .iv-lanes .iv-posts { grid-template-columns: 1fr; }
#iv-pop { position: fixed; z-index: 380; width: 340px; display: grid; gap: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 24px 60px rgb(0 0 0 / .22); opacity: 0; pointer-events: none; transform: translateY(8px) scale(.97); transform-origin: top left; transition: opacity .18s, transform .22s cubic-bezier(.2, .9, .2, 1.1); }
#iv-pop.on { opacity: 1; transform: none; }
.iv-pop-pic { position: relative; aspect-ratio: 4 / 5; max-height: 250px; width: 100%; background: var(--bg); display: grid; place-items: center; color: var(--muted); overflow: hidden; } .iv-pop-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iv-pop-b { padding: 12px 14px; display: grid; gap: 8px; } .iv-pop-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; } .iv-pop-h small { color: var(--muted); font-size: 11.5px; }
.iv-pop-b p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.iv-pop-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .iv-pop-k span { display: grid; text-align: center; padding: 6px 4px; border-radius: 10px; background: var(--bg); } .iv-pop-k b { font-size: 17px; font-weight: 500; } .iv-pop-k small { font-size: 10px; color: var(--muted); }
.iv-pop-f { font-size: 11px; color: var(--accent-ink); font-weight: 600; }
.iv-pd { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.iv-pd-pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--bg); color: var(--muted); } .iv-pd-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iv-pd-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .iv-pd-r { display: grid; gap: 12px; min-width: 0; }
.iv-pd-t { margin: 0; font-size: 14px; line-height: 1.6; max-height: 150px; overflow: auto; } .iv-pd-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .iv-pd-k .im-kpi b { font-size: 26px; }
.iv-pd-c { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .iv-pd-c h4 { margin: 0 0 8px; font-size: 14px; } .iv-pd-c h4.pos { color: var(--pos-ink); } .iv-pd-c h4.neg { color: var(--neg-ink); }
.iv-pd-c > div { max-height: 420px; overflow: auto; padding-right: 4px; }
.iv-c { padding: 10px 12px; border-radius: 14px; margin-bottom: 8px; background: var(--bg); } .iv-c.pos { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); } .iv-c.neg { background: color-mix(in srgb, var(--neg) 14%, var(--surface)); }
.iv-c p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; } .iv-c footer { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; } .iv-c small { font-size: 11px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.iv-c-act { display: inline-flex; gap: 6px; flex-wrap: wrap; } .iv-c-act a { display: inline-flex; gap: 4px; align-items: center; padding: 3px 9px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; color: inherit; text-decoration: none; }
.iv-c-act a:hover { border-color: var(--accent); }
@media (max-width: 900px) { .iv-pd, .iv-pd-c { grid-template-columns: 1fr; } .iv .im-days { grid-template-columns: 1fr; } .iv .im-groups { grid-template-columns: 1fr; } }
.iv-facts .im-kpi b { font-size: 24px; white-space: nowrap; }