/* Scene "rebrand" — a report that re-skins itself into the agency's brand */
.rb { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 14px; }
.rb-card { --rb: #5b8cff; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--line-2); background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--rb) 22%, transparent), transparent 60%), #0a1233; transition: background 0.8s; overflow: hidden; }
.rb-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.rb-logo { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: #050a1c; background: var(--rb); box-shadow: 0 0 22px -4px var(--rb); transition: background 0.6s, box-shadow 0.6s; }
.rb-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rb-name { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; min-height: 1.2em; }
.rb-card.is-swapping .rb-name::after { content: ""; display: inline-block; width: 2px; height: 0.95em; margin-left: 2px; vertical-align: -0.1em; background: var(--rb); animation: blink 0.8s steps(1) infinite; }
.rb-period { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.rb-client { font-size: 10.5px; color: var(--muted); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); white-space: nowrap; }
.rb-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rb-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(140, 165, 255, 0.06); border: 1px solid var(--line); border-top: 2px solid var(--rb); transition: border-color 0.6s; }
.rb-kpi b { font-size: 24px; letter-spacing: -0.03em; line-height: 1.1; }
.rb-kpi span { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.rb-chart { position: relative; flex: 1; min-height: 70px; border-radius: 10px; background: rgba(140, 165, 255, 0.04); border: 1px solid var(--line); overflow: hidden; }
.rb-chart svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%; }
.rb-chart-k { position: absolute; left: 10px; top: 8px; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.rb-area { fill: var(--rb); opacity: 0.16; transition: fill 0.6s; }
.rb-line { fill: none; stroke: var(--rb); stroke-width: 2.5; vector-effect: non-scaling-stroke; transition: stroke 0.6s; filter: drop-shadow(0 0 6px var(--rb)); }
.rb-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; color: var(--dim); }
.rb-by b { color: var(--text); font-weight: 500; }
.rb-credit { position: relative; color: var(--muted); transition: opacity 0.5s 0.3s, color 0.3s; white-space: nowrap; }
.rb-credit::after { content: ""; position: absolute; left: 0; top: 50%; height: 1.5px; width: 100%; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.rb.is-white .rb-credit { opacity: 0; color: var(--rose); }
.rb.is-white .rb-credit::after { transform: scaleX(1); }
.rb-switch { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.rb-toggle { position: relative; width: 38px; height: 22px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(5, 10, 28, 0.7); transition: background 0.4s, border-color 0.4s; }
.rb-toggle i { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--dim); transition: transform 0.45s var(--ease), background 0.4s; }
.rb.is-white .rb-toggle { background: rgba(87, 242, 176, 0.18); border-color: rgba(87, 242, 176, 0.6); }
.rb.is-white .rb-toggle i { transform: translateX(16px); background: var(--mint); }
.rb.is-white .rb-sw-label { color: var(--mint); }
@media (max-width: 560px) {
  .rb { padding: 12px 12px 10px; gap: 10px; }
  .rb-card { padding: 12px; gap: 10px; }
  .rb-top { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .rb-client { display: none; }
  .rb-logo { width: 34px; height: 34px; font-size: 12px; }
  .rb-name { font-size: 16px; }
  .rb-kpi { padding: 8px; }
  .rb-kpi b { font-size: 20px; }
  .rb-kpi span { font-size: 8.5px; }
}