/* Command Bar — matches DeepTape_CommandBar_Final_v2_08_10_26.html (+ site wiring) */

.command-bar {
  position: relative;
  background: linear-gradient(120deg, #0a1428 0%, #060a14 55%, #050810 100%);
  overflow: visible;
  font-family: 'Inter', sans-serif;
}

.command-bar::before,
.command-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30,144,255,.8), rgba(0,212,255,.9), rgba(30,144,255,.8), transparent);
  box-shadow: 0 0 6px rgba(30,144,255,.5);
}
.command-bar::before { top: 0; }
.command-bar::after { bottom: 0; }

.command-bar .streak {
  position: absolute;
  top: -70px; left: -40px;
  width: 780px; height: 240px;
  background: linear-gradient(115deg, transparent 45%, rgba(30,144,255,.14) 51%, rgba(0,212,255,.2) 53%, rgba(30,144,255,.13) 55%, transparent 64%);
  pointer-events: none;
}
.command-bar .streak-glow {
  position: absolute;
  top: -25px; left: 50px;
  width: 220px; height: 110px;
  background: radial-gradient(ellipse, rgba(30,144,255,.32) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.command-bar .streak-glow2 {
  position: absolute;
  top: -10px; left: 420px;
  width: 260px; height: 100px;
  background: radial-gradient(ellipse, rgba(30,144,255,.14) 0%, transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}

.command-bar .main-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 16px 28px;
  gap: 20px;
  flex-wrap: nowrap;
}

.command-bar .logo-block {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.command-bar .logo-block img {
  height: 42px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(30,144,255,.45));
}
.command-bar .logo-dot {
  position: absolute;
  top: 10px;
  right: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00D4FF;
  box-shadow: 0 0 6px #00D4FF, 0 0 14px rgba(30,144,255,.55);
  animation: cb-logo-pulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cb-logo-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(1.15)} }

.command-bar .status-cluster {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 12px;
  margin-left: clamp(12px, 8vw, 150px);
  gap: 12px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.command-bar .time-display {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  /* Reserve width for "12:59:59 PM ET" so the cluster doesn't jump on first paint. */
  min-width: 11.5rem;
  display: inline-block;
}
.command-bar .time-display .tz {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  margin-left: 4px;
}

.command-bar .market-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(0,224,96,.08);
  border: 1px solid rgba(0,224,96,.4);
  white-space: nowrap;
  flex-shrink: 0;
}
.command-bar .market-pill.closed {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.18);
}
.command-bar .market-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00e060;
  box-shadow: 0 0 8px rgba(0,224,96,.8);
  animation: cb-pulse 2s ease-in-out infinite;
}
.command-bar .market-pill.closed .dot {
  background: #888;
  box-shadow: none;
  animation: none;
}
.command-bar .market-pill .txt {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #00e060;
}
.command-bar .market-pill.closed .txt {
  color: rgba(255,255,255,.55);
}
@keyframes cb-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.command-bar .event-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 30px;
  border-radius: 6px;
  background: rgba(255,179,0,.06);
  border: 1px solid rgba(255,179,0,.35);
  line-height: 1.35;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 220px;
  box-sizing: border-box;
}
.command-bar .event-pill .label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .1em;
  color: rgba(255,179,0,.7);
}
.command-bar .event-pill .value {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #FFB300;
  text-transform: uppercase;
}

.command-bar .live-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fixed width = longest label (RECONNECTING) — prevents header layout shift. */
  width: 138px;
  min-width: 138px;
  max-width: 138px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.command-bar .live-pill .dot {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.command-bar .live-pill .txt {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-align: center;
  width: 100%;
  padding-left: 6px;
}

/* LIVE — blue glow (client spec) */
.command-bar .live-pill.live {
  background: linear-gradient(135deg, #1E90FF, #0055CC);
  box-shadow: 0 0 14px rgba(30,144,255,.4);
}
.command-bar .live-pill.live .dot {
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,.9);
  animation: cb-pulseblue 2s ease-in-out infinite;
}
.command-bar .live-pill.live .txt {
  color: #fff;
}

/* CONNECTING / RECONNECTING — amber, pulsing glow */
.command-bar .live-pill.connecting {
  background: linear-gradient(135deg, #FFB300 0%, #e68a00 100%);
  border-color: rgba(255,220,100,.55);
  box-shadow: 0 0 18px rgba(255,179,0,.55), 0 0 32px rgba(255,140,0,.25);
  animation: cb-connecting-glow 1.8s ease-in-out infinite;
}
.command-bar .live-pill.connecting .dot {
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.95);
  animation: cb-pulseamber 1s ease-in-out infinite;
}
.command-bar .live-pill.connecting .txt {
  color: #1a1200;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

/* OFFLINE — red alert, impossible to miss */
.command-bar .live-pill.offline {
  background: linear-gradient(135deg, #ff4530 0%, #cc1a00 100%);
  border-color: rgba(255,120,100,.65);
  box-shadow: 0 0 20px rgba(255,69,48,.65), 0 0 40px rgba(255,40,20,.3);
  animation: cb-offline-glow 2s ease-in-out infinite;
}
.command-bar .live-pill.offline .dot {
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.9);
  animation: cb-pulse-red 1.2s ease-in-out infinite;
}
.command-bar .live-pill.offline .txt {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* UPDATING — amber outline (had data, feed paused) */
.command-bar .live-pill.updating {
  background: linear-gradient(135deg, rgba(255,179,0,.22) 0%, rgba(255,120,0,.12) 100%);
  border-color: rgba(255,179,0,.6);
  box-shadow: 0 0 16px rgba(255,179,0,.4);
  animation: cb-updating-glow 2.5s ease-in-out infinite;
}
.command-bar .live-pill.updating .dot {
  background: #FFB300;
  box-shadow: 0 0 10px rgba(255,179,0,.9);
  animation: cb-pulseamber 1.5s ease-in-out infinite;
}
.command-bar .live-pill.updating .txt {
  color: #FFB300;
}

@keyframes cb-pulseblue { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes cb-pulseamber { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes cb-pulse-red { 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes cb-connecting-glow { 0%,100%{box-shadow:0 0 18px rgba(255,179,0,.55),0 0 32px rgba(255,140,0,.25)} 50%{box-shadow:0 0 26px rgba(255,200,60,.75),0 0 48px rgba(255,160,0,.4)} }
@keyframes cb-offline-glow { 0%,100%{box-shadow:0 0 20px rgba(255,69,48,.65),0 0 40px rgba(255,40,20,.3)} 50%{box-shadow:0 0 28px rgba(255,90,70,.85),0 0 56px rgba(255,50,30,.45)} }
@keyframes cb-updating-glow { 0%,100%{box-shadow:0 0 16px rgba(255,179,0,.4)} 50%{box-shadow:0 0 22px rgba(255,179,0,.6)} }

.command-bar .built-badge {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.command-bar .built-badge .us { color: #ff3b30; }
.command-bar .built-badge .american { color: #ffffff; }
.command-bar .built-badge .built { color: #4dabff; }
/* Dashboard-only label — reserve space on other pages so the bar doesn't shift. */
.command-bar .built-badge.reserved {
  visibility: hidden;
  pointer-events: none;
}

.command-bar .search-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  flex: 0 1 168px;
  min-width: 96px;
  max-width: 168px;
  transition: border-color .18s ease, background .18s ease;
  position: relative;
}
.command-bar .search-block:focus-within {
  border-color: rgba(30,144,255,.5);
  background: rgba(255,255,255,.06);
  z-index: 10001;
}
.command-bar .search-block svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: rgba(255,255,255,.4);
}
.command-bar .search-block input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  width: 100%;
  letter-spacing: .01em;
}
.command-bar .search-block input::placeholder {
  color: rgba(255,255,255,.35);
  font-weight: 500;
}

.command-bar .cb-typeahead {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #0c1424;
  border: 1px solid rgba(30,144,255,.35);
  border-radius: 8px;
  max-height: 240px;
  overflow: auto;
  z-index: 9999;
  display: none;
}
.command-bar .cb-typeahead.open { display: block; }
.command-bar .cb-ta-row {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.command-bar .cb-ta-row:hover { background: rgba(30,144,255,.12); }
.command-bar .cb-ta-row .sym { font-weight: 800; color: #fff; font-size: 13px; }
.command-bar .cb-ta-row .nm { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 2px; }

.command-bar .auth-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 178px;
  justify-content: flex-end;
}
.command-bar .btn-login {
  padding: 9px 18px;
  border-radius: 6px;
  border: 1px solid rgba(30,144,255,.4);
  background: transparent;
  color: #7ec4ff;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.command-bar .btn-login:hover {
  background: rgba(30,144,255,.08);
  border-color: rgba(30,144,255,.6);
}
.command-bar .btn-signup {
  padding: 9px 20px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, #1E90FF, #0055CC);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(30,144,255,.35);
  transition: all .18s ease;
  white-space: nowrap;
}
.command-bar .btn-signup:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(30,144,255,.5);
}
.command-bar .cb-user {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sticky shell: Command Bar + nav tabs. Hides legacy nav-row-1. */
.dt-chrome {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: #050508;
}
.has-command-bar .navbar {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
}
.has-command-bar .nav-row-1 { display: none !important; }
.has-command-bar .nav-row-2 { border-top: none; }

@media (max-width: 1440px) {
  .command-bar .main-row { padding: 14px 20px; gap: 14px; }
  .command-bar .status-cluster { margin-left: 24px; gap: 10px; }
  .command-bar .event-pill { min-width: 180px; padding: 7px 14px; }
}

@media (max-width: 1366px) {
  .command-bar .status-cluster { margin-left: 12px; gap: 8px; }
  .command-bar .time-display { font-size: 17px; min-width: 9.5rem; }
  .command-bar .market-pill { padding: 6px 12px; }
  .command-bar .market-pill .txt { font-size: 12px; }
  .command-bar .event-pill { min-width: 148px; padding: 6px 12px; }
  .command-bar .event-pill .value { font-size: 12px; }
  .command-bar .live-pill { padding: 6px 10px; }
  .command-bar .live-pill .txt { font-size: 9.5px; }
  .command-bar .search-block { flex-basis: 128px; max-width: 140px; min-width: 88px; }
  .command-bar .auth-block { min-width: 148px; gap: 8px; }
  .command-bar .btn-login,
  .command-bar .btn-signup { padding: 8px 14px; font-size: 11.5px; }
}

@media (max-width: 1280px) {
  .command-bar .status-cluster { margin-left: 8px; }
  .command-bar .built-badge { display: none; }
}

@media (max-width: 1180px) {
  .command-bar .status-cluster { margin-left: clamp(8px, 2vw, 36px); gap: 8px; }
  .command-bar .event-pill { min-width: 168px; padding: 7px 14px; }
  .command-bar .event-pill .value { font-size: 12.5px; letter-spacing: 0; }
}

/* iPad landscape / 11" tablets */
@media (max-width: 1024px) {
  .command-bar .main-row { padding: 12px 14px; gap: 10px; }
  .command-bar .logo-block img { height: 36px; }
  .command-bar .status-cluster {
    margin-left: 6px;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .command-bar .time-display { font-size: 15px; min-width: 8.25rem; }
  .command-bar .market-pill { padding: 6px 10px; }
  .command-bar .market-pill .txt { font-size: 11px; }
  .command-bar .event-pill {
    min-width: 0;
    max-width: 11.5rem;
    padding: 6px 10px;
    overflow: hidden;
  }
  .command-bar .event-pill .label { font-size: 8px; }
  .command-bar .event-pill .value {
    font-size: 10.5px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .command-bar .live-pill {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    height: 32px;
  }
  .command-bar .live-pill .txt { font-size: 9px; letter-spacing: .06em; }
  .command-bar .search-block {
    flex: 1 1 120px;
    min-width: 88px;
    max-width: 150px;
  }
  .command-bar .auth-block { min-width: 0; gap: 6px; }
  .command-bar .btn-login,
  .command-bar .btn-signup { padding: 7px 12px; font-size: 11px; }
}

/* iPad portrait */
@media (max-width: 834px) {
  .command-bar .built-badge { display: none; }
  .command-bar .status-cluster { flex-wrap: wrap; row-gap: 6px; }
}

@media (max-width: 1100px) {
  .command-bar .status-cluster { margin-left: 0; gap: 8px; }
  .command-bar .main-row { padding: 12px 16px; gap: 12px; }
  .command-bar .search-block { flex-basis: 120px; max-width: 132px; }
  .command-bar .event-pill { padding: 7px 12px; min-width: 132px; }
  .command-bar .auth-block { min-width: 132px; }
}

@media (max-width: 900px) {
  .command-bar .main-row { flex-wrap: wrap; }
  .command-bar .status-cluster {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0;
  }
}

@media (max-width: 780px) {
  .command-bar .event-pill,
  .command-bar .time-display { display: none; }
}