/* Scene "analytics": accounts connect, totals count up, campaigns and flows ranked together, one row opens. */
.analytics { --rh: 30px; --dh: 90px; --blue: #4C75FF; --teal: #2CC3A8; --nv: #060A18; --bd: rgba(255,255,255,.09); --tx: #EEF1F8; --tm: #AAB2C7; --tf: #737D94;
  width: 100%; max-width: 530px; margin: 0 auto; display: grid; gap: 14px; justify-items: center; font-family: var(--sans); }
.analytics-reset, .analytics-reset * { transition: none !important; }
.analytics svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* browser window */
.analytics-win { width: 100%; border-radius: 14px; overflow: hidden; background: var(--nv); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-lg); }
.analytics-bar-top { height: 30px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #1B1D26; border-bottom: 1px solid rgba(255,255,255,.07); }
.analytics-dots { display: flex; gap: 6px; flex: none; } .analytics-dots i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; } .analytics-dots i:nth-child(2) { background: #FEBC2E; } .analytics-dots i:nth-child(3) { background: #28C840; }
.analytics-url { flex: 1; max-width: 260px; margin: 0 auto; height: 18px; border-radius: 6px; background: rgba(255,255,255,.07); color: var(--tm); font-size: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; overflow: hidden; transform: translateX(-18px); }
.analytics-url svg { width: 10px; height: 10px; flex: none; }
.analytics-nav { height: 36px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--bd); color: var(--tx); font-size: 11px; background: radial-gradient(300px 80px at 10% 0, rgba(76,117,255,.16), transparent 70%); }
.analytics-nav b { font-weight: 600; display: flex; align-items: center; gap: 7px; letter-spacing: -.01em; white-space: nowrap; }
.analytics-nav b i { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(180deg, #4C75FF, #1A4FFF); }
.analytics-nav > span { display: flex; gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid var(--bd); background: rgba(255,255,255,.03); }
.analytics-nav em { font-style: normal; font-size: 9.5px; color: var(--tm); padding: 3px 9px; border-radius: 999px; }
.analytics-nav em.on { color: #fff; background: linear-gradient(180deg, #4C75FF, #1A4FFF); }

.analytics-body { padding: 12px; display: grid; gap: 10px; }
.analytics small { display: block; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tf); white-space: nowrap; }

/* account chips */
.analytics-acc { display: grid; gap: 7px; min-width: 0; }
.analytics-acc > p { display: flex; align-items: center; justify-content: space-between; }
.analytics-cnt { display: inline-grid; justify-items: end; font-size: 9px; color: var(--tf); white-space: nowrap; }
.analytics-cnt b { grid-area: 1 / 1; font-weight: 400; display: inline-flex; align-items: center; gap: 3px; transition: opacity .4s; } .analytics-cnt b + b { color: var(--ok); opacity: 0; } .analytics-cnt svg { width: 10px; height: 10px; stroke-width: 2.2; }
.is-c4 .analytics-cnt b { opacity: 0; } .is-c4 .analytics-cnt b + b { opacity: 1; }
.analytics-acc > div { display: flex; gap: 4px; min-width: 0; justify-content: space-between; }
.analytics-chip { display: inline-flex; align-items: center; gap: 4px; height: 25px; padding: 0 5px 0 4px; border-radius: 999px; border: 1px solid var(--bd); background: rgba(255,255,255,.025); color: var(--tf); font-size: 9px; white-space: nowrap; min-width: 0; transition: color .4s, border-color .4s, background .4s; }
.analytics-chip > i { width: 15px; height: 15px; border-radius: 50%; flex: none; color: #0B0F1E; font: 700 8.5px/15px var(--sans); text-align: center; font-style: normal; filter: grayscale(1) brightness(.6); transition: filter .4s; }
.analytics-chip b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.analytics-chip em { position: relative; width: 11px; height: 11px; flex: none; border-radius: 50%; border: 1.4px solid rgba(255,255,255,.18); display: grid; place-items: center; transition: border-color .3s, background .3s; }
.analytics-chip em svg { width: 9px; height: 9px; color: #06210F; stroke-width: 2.6; opacity: 0; transform: scale(.3); transition: opacity .25s, transform .4s var(--ease); }
.is-w0 .analytics-ch0, .is-w1 .analytics-ch1, .is-w2 .analytics-ch2, .is-w3 .analytics-ch3, .is-w4 .analytics-ch4 { color: var(--tm); border-color: rgba(76,117,255,.55); }
.is-w0 .analytics-ch0 em, .is-w1 .analytics-ch1 em, .is-w2 .analytics-ch2 em, .is-w3 .analytics-ch3 em, .is-w4 .analytics-ch4 em { border-color: rgba(76,117,255,.3); border-top-color: #9DB3FF; animation: analytics-spin .6s linear infinite; }
.is-c0 .analytics-ch0, .is-c1 .analytics-ch1, .is-c2 .analytics-ch2, .is-c3 .analytics-ch3, .is-c4 .analytics-ch4 { color: var(--tx); border-color: rgba(61,214,140,.4); background: rgba(61,214,140,.07); }
.is-c0 .analytics-ch0 > i, .is-c1 .analytics-ch1 > i, .is-c2 .analytics-ch2 > i, .is-c3 .analytics-ch3 > i, .is-c4 .analytics-ch4 > i { filter: none; }
.is-c0 .analytics-ch0 em, .is-c1 .analytics-ch1 em, .is-c2 .analytics-ch2 em, .is-c3 .analytics-ch3 em, .is-c4 .analytics-ch4 em { animation: none; border-color: var(--ok); background: var(--ok); }
.is-c0 .analytics-ch0 em svg, .is-c1 .analytics-ch1 em svg, .is-c2 .analytics-ch2 em svg, .is-c3 .analytics-ch3 em svg, .is-c4 .analytics-ch4 em svg { opacity: 1; transform: none; }
@keyframes analytics-spin { to { transform: rotate(360deg); } }

/* KPI tiles */
.analytics-kpi small span + span { display: none; }
.analytics-kpis { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; }
.analytics-kpi { padding: 9px 11px 10px; border-radius: 10px; border: 1px solid var(--bd); background: linear-gradient(180deg, rgba(20,24,44,.7), rgba(10,12,24,.7)); display: grid; gap: 5px; min-width: 0; }
.analytics-kpi b { font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: -.03em; color: var(--tx); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ranked table */
.analytics-table { border-radius: 10px; border: 1px solid var(--bd); background: linear-gradient(180deg, rgba(20,24,44,.55), rgba(10,12,24,.6)); overflow: hidden; }
.analytics-th { height: 30px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--bd); font-size: 10.5px; color: var(--tx); white-space: nowrap; }
.analytics-th b { font-weight: 600; margin-right: auto; }
.analytics-lg { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; color: var(--tm); } .analytics-lg i { width: 7px; height: 7px; border-radius: 2px; margin-left: 5px; }
.analytics-lg i.analytics-ty-c { background: var(--blue); } .analytics-lg i.analytics-ty-f { background: var(--teal); }
.analytics-sort { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 9px; color: var(--tf); border: 1px solid var(--bd); transition: color .4s, border-color .4s, background .4s; } .analytics-sort svg { width: 10px; height: 10px; }
.is-sorted .analytics-sort { color: #C9D4FF; border-color: rgba(76,117,255,.55); background: rgba(76,117,255,.14); }

.analytics-rows { position: relative; height: calc(var(--rh) * 6); overflow: hidden; }
.analytics-row { --p: var(--p0); position: absolute; left: 0; right: 0; top: 0; height: var(--rh); padding: 0 10px; display: grid; grid-template-columns: 14px 62px minmax(0, 1fr) 27% 50px 10px; align-items: center; gap: 8px; font-size: 10.5px; color: var(--tx); border-bottom: 1px solid rgba(255,255,255,.05); opacity: 0; transform: translateY(calc(var(--p) * var(--rh)));
  transition: opacity .45s, transform .9s cubic-bezier(.5,0,.15,1), background .3s; transition-delay: 0s, calc(var(--p1) * 45ms), 0s; }
.is-sorted .analytics-row { --p: var(--p1); }
.is-c0 .analytics-s0, .is-c1 .analytics-s1, .is-c2 .analytics-s2, .is-c3 .analytics-s3, .is-c4 .analytics-s4 { opacity: 1; }
.analytics-rk { font: 500 9.5px/1 var(--mono); color: var(--tf); text-align: right; opacity: 0; transition: opacity .4s .7s, color .3s; } .is-sorted .analytics-rk { opacity: 1; }
.analytics-top .analytics-rk { color: var(--amber); }
.analytics-ty { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: var(--tm); white-space: nowrap; } .analytics-ty u { text-decoration: none; }
.analytics-ty i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.analytics-ty-c i { background: var(--blue); } .analytics-ty-f i { background: var(--teal); }
.analytics-nm { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.analytics-nm b { font-weight: 500; } .analytics-nm small { letter-spacing: 0; text-transform: none; font-size: 9px; overflow: hidden; text-overflow: ellipsis; }
.analytics-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.analytics-bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .15s; }
.analytics-bar.analytics-ty-c i { background: linear-gradient(90deg, #2F55E8, #6F8FFF); } .analytics-bar.analytics-ty-f i { background: linear-gradient(90deg, #1B8F7C, #3FDCC0); }
.is-c0 .analytics-s0 .analytics-bar i, .is-c1 .analytics-s1 .analytics-bar i, .is-c2 .analytics-s2 .analytics-bar i, .is-c3 .analytics-s3 .analytics-bar i, .is-c4 .analytics-s4 .analytics-bar i { transform: none; }
.analytics-rv { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.analytics-chev { width: 10px; height: 10px; color: var(--tf); transition: transform .4s var(--ease), color .3s; }
.is-hover .analytics-top { background: rgba(76,117,255,.12); } .is-hover .analytics-top .analytics-chev { color: var(--tx); }
.is-open .analytics-top .analytics-chev { transform: rotate(90deg); }
.is-open .analytics-row:not(.analytics-top) { transform: translateY(calc(var(--p) * var(--rh) + var(--dh))); transition-delay: 0s; transition-duration: .45s, .7s, .3s; }

/* opened row */
.analytics-detail { position: absolute; left: 0; right: 0; top: var(--rh); height: var(--dh); padding: 9px 12px 9px 32px; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: rgba(76,117,255,.07); border-bottom: 1px solid rgba(76,117,255,.3); opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity .4s, clip-path .7s cubic-bezier(.5,0,.15,1); }
.is-open .analytics-detail { opacity: 1; clip-path: inset(0); }
.analytics-mail { height: 72px; border-radius: 4px; background: #fff; overflow: hidden; display: grid; grid-template-rows: 8px 38px 3px 3px 7px; gap: 3px; justify-items: center; align-content: start; box-shadow: 0 6px 16px -6px #000; transform: translateY(8px); opacity: 0; transition: transform .6s var(--ease) .25s, opacity .4s .25s; }
.is-open .analytics-mail { transform: none; opacity: 1; }
.analytics-mail i { width: 100%; background: #1F4D3A; } .analytics-mail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.analytics-mail u { width: 70%; border-radius: 2px; background: #C9D3C4; } .analytics-mail u + u { width: 50%; } .analytics-mail s { width: 44%; border-radius: 4px; background: #1F4D3A; }
.analytics-sub { display: grid; gap: 4px; min-width: 0; }
.analytics-sub b { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analytics-sub span { font-size: 9px; color: var(--tm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analytics-stats { display: flex; gap: 12px; } .analytics-stats p { display: grid; gap: 4px; }
.analytics-stats b { font-size: 12.5px; font-weight: 600; color: var(--tx); font-variant-numeric: tabular-nums; } .analytics-stats b.analytics-g { color: var(--ok); }

/* outcome */
.analytics-out { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 18px 0 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--mute); font-size: .9rem; letter-spacing: -.01em; white-space: nowrap; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .7s var(--ease), border-color .6s; }
.analytics-out b { color: var(--ink); font-weight: 600; }
.analytics-out span { width: 24px; height: 24px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; } .analytics-out span svg { width: 14px; height: 14px; stroke-width: 2.2; }
.is-out .analytics-out { opacity: 1; transform: none; border-color: rgba(61,214,140,.4); }

@media (max-width: 600px) {
  .analytics { --rh: 29px; --dh: 87px; }
  .analytics-body { padding: 10px; gap: 8px; }
  .analytics-lg, .analytics-ty u, .analytics-nm small, .analytics-sub span { display: none; }
  .analytics-acc > div { flex-wrap: wrap; justify-content: center; gap: 5px; }
  .analytics-chip { height: 24px; font-size: 9px; }
  .analytics-kpis { gap: 6px; grid-template-columns: 1.3fr 1fr 1fr; } .analytics-kpi { padding: 8px 8px 9px; } .analytics-kpi b { font-size: 15.5px; }
  .analytics-kpi small { font-size: 7.5px; letter-spacing: .06em; } .analytics-kpi small span { display: none; } .analytics-kpi small span + span { display: inline; }
  .analytics-row { grid-template-columns: 12px 7px minmax(0, 1fr) 22% 46px 9px; gap: 6px; padding: 0 8px; font-size: 10px; }
  .analytics-detail { padding: 8px 10px 8px 10px; grid-template-columns: 50px minmax(0, 1fr); gap: 4px 10px; align-content: center; }
  .analytics-mail { grid-row: 1 / 3; height: 68px; }
  .analytics-stats { grid-column: 2; gap: 10px; } .analytics-sub b { font-size: 11.5px; } .analytics-stats b { font-size: 11.5px; }
  .analytics-nav > span em:not(.on) { display: none; }
  .analytics-url { transform: none; }
  .analytics-out { font-size: .8rem; padding-right: 14px; }
}