/* ======================================================
   APP SHELL: grid 50/50
====================================================== */
.app {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 44px 1fr 28px;
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* ======================================================
   TOP BAR
====================================================== */
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  z-index: 100;
  position: relative;
}
.topbar-l { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 24px;
  height: 24px;
  background: var(--o);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 9px;
  color: #000;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
  cursor: pointer;
  flex-shrink: 0;
}
.logo-mark:hover { transform: rotate(90deg) scale(1.15); }

/* GLITCH TITLE */
.glitch-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t);
  position: relative;
}
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}
.glitch-title::before {
  left: 2px;
  text-shadow: -1px 0 var(--o);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  animation: glitch-1 3s infinite linear alternate-reverse;
}
.glitch-title::after {
  left: -2px;
  text-shadow: -1px 0 var(--l);
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation: glitch-2 2.5s infinite linear alternate-reverse;
}
@keyframes glitch-1 {
  0% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); transform: skew(0.3deg); }
  25% { clip-path: polygon(0 50%, 100% 50%, 100% 60%, 0 60%); transform: skew(-0.2deg); }
  50% { clip-path: polygon(0 30%, 100% 30%, 100% 40%, 0 40%); transform: skew(0.5deg); }
  75% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); transform: skew(-0.3deg); }
  100% { clip-path: polygon(0 5%, 100% 5%, 100% 15%, 0 15%); transform: skew(0.1deg); }
}
@keyframes glitch-2 {
  0% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); transform: skew(-0.4deg); }
  50% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); transform: skew(0.2deg); }
  100% { clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%); transform: skew(-0.1deg); }
}

.topbar-sep { width: 1px; height: 16px; background: var(--s3); margin: 0 4px; }
.sub-label { font-size: 9px; color: var(--t3); letter-spacing: 0.1em; font-family: var(--m); text-transform: uppercase; }
.topbar-r { display: flex; align-items: center; gap: 16px; }
.live-dot {
  width: 6px; height: 6px;
  background: var(--l);
  border-radius: 50%;
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--l); }
  50% { opacity: 0.2; box-shadow: none; }
}
.live-label { font-size: 9px; color: var(--l); font-family: var(--m); letter-spacing: 0.1em; }
.time-display { font-family: var(--m); font-size: 10px; color: var(--t2); }
.status-chips { display: flex; gap: 6px; }
.chip {
  font-family: var(--m);
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  background: var(--s2);
  color: var(--t3);
}
.chip.on { background: var(--og); color: var(--o); }