/* Panel frame, logo tiles, chips, bars, tags, ribbon, avatars */

.panel {
  position: relative; isolation: isolate; overflow: hidden; margin: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(14, 23, 40, .94), rgba(8, 13, 24, .97));
  border: 1px solid var(--line-2);
  box-shadow: 0 50px 120px -50px rgba(0, 70, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* Soft radial gradients only: no filter: blur(), which is expensive and can blank the compositor. */
.panel__wash { position: absolute; inset: -25%; z-index: -2; pointer-events: none; opacity: .55; }
.panel__wash i { position: absolute; width: 52%; aspect-ratio: 1; border-radius: 50%; }
.panel__wash i:nth-child(1) { left: 2%; top: 0; background: radial-gradient(closest-side, rgba(0, 102, 255, .5), rgba(0, 102, 255, .18) 45%, transparent); animation: drift-a 24s ease-in-out infinite alternate; }
.panel__wash i:nth-child(2) { right: 0; top: 18%; background: radial-gradient(closest-side, rgba(124, 123, 245, .4), rgba(124, 123, 245, .12) 45%, transparent); animation: drift-b 30s ease-in-out infinite alternate; }
.panel__wash i:nth-child(3) { left: 30%; bottom: -4%; background: radial-gradient(closest-side, rgba(45, 212, 191, .26), rgba(45, 212, 191, .08) 45%, transparent); animation: drift-c 27s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(28%, 18%) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-30%, 14%) scale(.9); } }
@keyframes drift-c { to { transform: translate(-18%, -26%) scale(1.2); } }

.panel__tex { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.panel__tex--dots {
  background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 20%, transparent 80%);
}
.panel__tex--grid {
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 25%, transparent 85%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 25%, transparent 85%);
}
.tick { position: absolute; width: 9px; height: 9px; border: 0 solid rgba(255, 255, 255, .32); pointer-events: none; }
.tick--tl { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.tick--tr { top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; }
.tick--bl { bottom: 8px; left: 8px; border-bottom-width: 1px; border-left-width: 1px; }
.tick--br { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }

.panel__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 24px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .015);
}
.panel__label { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #93A6C2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel__meta { display: inline-flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.panel__dots { display: inline-flex; gap: 5px; }
.panel__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.panel__dots i:first-child { background: var(--teal); box-shadow: 0 0 10px var(--teal); animation: blink 3.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.panel__body { position: relative; padding: 26px; }
@media (max-width: 480px) {
  .panel__bar { padding: 14px 18px; }
  .panel__meta { font-size: 0; gap: 0; } /* keep the status dots, drop the meta text */
  .panel__meta > * { font-size: 11.5px; }
  .panel__meta > :not(.panel__dots) { display: none; }
  .panel__body { padding: 20px 16px; }
}
.panel:not(.is-live) *, .panel:not(.is-live)::before, .panel:not(.is-live)::after { animation-play-state: paused !important; }

/* Logo tiles */
.logo {
  --s: 32px;
  width: var(--s); height: var(--s); flex: none;
  display: inline-grid; place-items: center;
  border-radius: calc(var(--s) * .27);
  background: var(--tile); color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 22px -10px var(--glow);
}
.logo svg { width: 64%; height: 64%; }
.logo__mono { font-weight: 800; font-size: calc(var(--s) * .38); letter-spacing: -.04em; line-height: 1; }

.chip {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 7px 16px 7px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .035); border: 1px solid var(--line);
  color: #DCE5F2; font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
.chip .logo { --s: 26px; border-radius: 999px; }
.chip--sm { padding: 5px 12px 5px 5px; font-size: 12.5px; gap: 8px; }
.chip--sm .logo { --s: 20px; }

/* Tags & pills */
.tag {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #CFE0FF; white-space: nowrap;
  background: rgba(0, 102, 255, .12); border: 1px solid rgba(80, 150, 255, .28);
}
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.tag--teal { color: #C8F7EE; background: rgba(45, 212, 191, .1); border-color: rgba(45, 212, 191, .28); }
.tag--teal::before { background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.tag--violet { color: #DCDBFF; background: rgba(124, 123, 245, .12); border-color: rgba(124, 123, 245, .3); }
.tag--violet::before { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.tag--plain::before { display: none; }

.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2);
  font-size: 13px; font-weight: 600; color: #DDE7F5;
}
.pill__badge { padding: 3px 10px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; }

/* Score bars */
.bar { position: relative; display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bar i {
  position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit;
  background: linear-gradient(90deg, #0B4FD6, #0066FF 50%, #38BDF8);
  transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) .25s;
}
.bar i::after { content: ''; position: absolute; right: 0; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(40%, -50%); background: #9BE3FF; box-shadow: 0 0 12px #38BDF8; }
.bar.teal i { background: linear-gradient(90deg, #0E7C86, #2DD4BF); }
.bar.violet i { background: linear-gradient(90deg, #4E4BC9, #7C7BF5); }
.in .bar i, .bar.in i { transform: scaleX(1); }

/* Avatars: initials on gradient discs */
.avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.avatar--0 { background: linear-gradient(135deg, #2B7BFF, #0B4FD6); }
.avatar--1 { background: linear-gradient(135deg, #7C7BF5, #4C3FD1); }
.avatar--2 { background: linear-gradient(135deg, #2DD4BF, #0E7C86); }

.check-ico, .cross-ico { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.check-ico { color: #05221D; background: var(--teal); }
.cross-ico { color: #FFD5D5; background: rgba(248, 113, 113, .16); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .4); }
.check-ico svg, .cross-ico svg { width: 12px; height: 12px; }

/* Logo ribbon */
.ribbon {
  position: relative; overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ribbon__row { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.ribbon__row + .ribbon__row { margin-top: 12px; animation-direction: reverse; animation-duration: 84s; }
.ribbon__group { display: flex; gap: 12px; padding-right: 12px; }
.ribbon:hover .ribbon__row, .ribbon:focus-within .ribbon__row, .ribbon:not(.is-live) .ribbon__row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ribbon { overflow-x: auto; }
  .ribbon__group[aria-hidden] { display: none; }
}