/* ── RAVEN SUITE NAV ── */
.raven-suite-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 58px;
  display: flex;
  align-items: stretch;
  background: rgba(8, 8, 20, 0.97);
  border-bottom: 0.5px solid rgba(167, 139, 250, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* 1. Escape */
.rsn-escape {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-right: 0.5px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.15s;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.07em;
}
.rsn-escape svg { color: rgba(255, 255, 255, 0.2); }
.rsn-escape:hover {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.5);
}

/* 2. Raven identity */
.rsn-raven {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  z-index: 2;
  transition: background 0.15s;
}
.rsn-raven:hover { background: rgba(167, 139, 250, 0.05); }

.rsn-eye-svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  flex-shrink: 0;
}

.rsn-raven-label {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
  white-space: nowrap;
}
.rsn-raven-label sup { color: #4ade80; }

/* 3. Suite items container */
.rsn-suite {
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 2;
}

.rsn-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
  text-decoration: none;
  border-right: 0.5px solid rgba(255, 255, 255, 0.04);
}
.rsn-item:last-child { border-right: none; }
.rsn-item:hover { background: rgba(255, 255, 255, 0.03); }

.rsn-item-icon { width: 15px; height: 15px; flex-shrink: 0; }

.rsn-item-name {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
  transition: color 0.15s;
}
.rsn-item:hover .rsn-item-name { color: rgba(255, 255, 255, 0.55); }

/* Active tab — filled background with black text */
.rsn-active-watch .rsn-watch {
  background: #c084fc;
}
.rsn-active-watch .rsn-watch .rsn-item-name { color: #000; }
.rsn-active-watch .rsn-watch .rsn-item-icon { stroke: #000; }
.rsn-active-watch .rsn-watch .rsn-item-icon circle { fill: #000; }

.rsn-active-study .rsn-study {
  background: #d4a853;
}
.rsn-active-study .rsn-study .rsn-item-name { color: #000; }
.rsn-active-study .rsn-study .rsn-item-icon { stroke: #000; }

.rsn-active-trade .rsn-trade {
  background: #ff2d55;
}
.rsn-active-trade .rsn-trade .rsn-item-name { color: #000; }
.rsn-active-trade .rsn-trade .rsn-item-icon { stroke: #000; }
.rsn-active-trade .rsn-trade .rsn-item-icon rect { fill: rgba(0,0,0,0.15); }

/* Override hover on active tab — keep it solid */
.rsn-active-watch .rsn-watch:hover,
.rsn-active-study .rsn-study:hover,
.rsn-active-trade .rsn-trade:hover {
  background: inherit;
}
.rsn-active-watch .rsn-watch:hover { background: #c084fc; }
.rsn-active-study .rsn-study:hover { background: #d4a853; }
.rsn-active-trade .rsn-trade:hover { background: #ff2d55; }

/* Mobile label swap */
.rsn-trade-label-short { display: none; }
@media (max-width: 600px) {
  .rsn-trade-label-full  { display: none; }
  .rsn-trade-label-short { display: inline; }
  .rsn-item-name { font-size: 9px; letter-spacing: 0.05em; }
  .rsn-escape span { display: none; }
  .rsn-raven-label { display: none; }
}

/* 4. Line SVG overlay */
.rsn-line-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 58px;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

/* 5. Auth slot */
.rsn-auth {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-left: 0.5px solid rgba(255, 255, 255, 0.06);
  margin-left: auto;
  flex-shrink: 0;
}

/* Auth avatar styles */
.rsn-auth .auth-avatar {
  display: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #4ade80;
  color: #000;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border: none;
}
body.logged-in .rsn-auth .auth-avatar { display: flex; }
.rsn-auth .auth-avatar:hover { background: #a78bfa; }

.rsn-auth .auth-avatar-loggedout {
  display: flex;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
body.logged-in .rsn-auth .auth-avatar-loggedout { display: none; }
.rsn-auth .auth-avatar-loggedout:hover { background: rgba(255,255,255,0.14); }

.rsn-auth .auth-dropdown {
  position: absolute;
  top: 44px;
  right: 8px;
  background: rgba(15, 15, 30, 0.98);
  border: 1px solid rgba(167, 139, 250, 0.15);
  border-radius: 10px;
  padding: 6px 0;
  min-width: 160px;
  display: none;
  z-index: 2000;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.rsn-auth .auth-dropdown.active { display: block; }

.rsn-auth .auth-dropdown a,
.rsn-auth .auth-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.rsn-auth .auth-dropdown a:hover,
.rsn-auth .auth-dropdown button:hover {
  background: rgba(167, 139, 250, 0.08);
  color: #fff;
}
.rsn-auth .auth-dropdown .auth-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 0;
}

/* Back-to-hub link for sub-pages */
.rsn-back-to-hub {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: rgba(192, 132, 252, 0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  transition: color 0.2s;
}
.rsn-back-to-hub:hover { color: #c084fc; }

/* ── WATCH SUB-NAV ── */
.watch-sub-nav {
  position: fixed;
  top: 58px;
  left: 0; right: 0;
  z-index: 999;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 0 0 0;
  background: rgba(3, 3, 16, 0.97);
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  gap: 2px;
  font-family: 'Space Mono', monospace;
  justify-content: flex-start;
  opacity: 0;
  transform: translateY(-10px);
}
.watch-sub-nav.wsn-animate {
  animation: watchSubNavDrop 0.3s cubic-bezier(0.2, 0, 0, 1) both;
}
.watch-sub-nav::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #c084fc 0%, rgba(192, 132, 252, 0.15) 100%);
}
.wsn-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: #0a0014;
  background: #c084fc;
  padding: 4px 12px 4px 8px;
  border-radius: 3px;
  margin-right: 10px;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.wsn-label:hover { background: #a855f7; }
.wsn-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  color: rgba(148, 163, 184, 0.28);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.wsn-item:hover {
  color: rgba(148, 163, 184, 0.65);
  background: rgba(255, 255, 255, 0.03);
}
.wsn-item.wsn-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.wsn-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wsn-active .wsn-dot { filter: drop-shadow(0 0 3px currentColor); }
.wsn-keep-dot   { background: #4ade80; color: #4ade80; }
.wsn-eye-dot    { background: #c084fc; color: #c084fc; }
.wsn-river-dot  { background: #22d3ee; color: #22d3ee; }
.wsn-terrain-dot { background: #fbbf24; color: #fbbf24; }
.wsn-chase-dot  { background: #ff2d55; color: #ff2d55; }
.wsn-div {
  width: 1px;
  height: 13px;
  background: rgba(148, 163, 184, 0.07);
  margin: 0 1px;
  flex-shrink: 0;
}
body.has-watch-subnav {
  padding-top: 94px !important;
}
@keyframes watchSubNavDrop {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.wsn-animate .wsn-label,
.wsn-animate .wsn-item,
.wsn-animate .wsn-div {
  opacity: 0;
  animation: wsnFanOut 0.28s cubic-bezier(0.2, 0, 0, 1) both;
  will-change: opacity, transform;
}
.wsn-animate .wsn-label         { animation-delay: 0.2s; }
.wsn-animate .wsn-item:nth-child(2)  { animation-delay: 0.26s; }
.wsn-animate .wsn-div:nth-child(3)   { animation-delay: 0.30s; }
.wsn-animate .wsn-item:nth-child(4)  { animation-delay: 0.34s; }
.wsn-animate .wsn-div:nth-child(5)   { animation-delay: 0.38s; }
.wsn-animate .wsn-item:nth-child(6)  { animation-delay: 0.42s; }
.wsn-animate .wsn-div:nth-child(7)   { animation-delay: 0.46s; }
.wsn-animate .wsn-item:nth-child(8)  { animation-delay: 0.50s; }
.wsn-animate .wsn-div:nth-child(9)   { animation-delay: 0.54s; }
.wsn-animate .wsn-item:nth-child(10) { animation-delay: 0.58s; }

@keyframes wsnFanOut {
  0%   { opacity: 0; transform: translateX(-16px); }
  50%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

@media (max-width: 600px) {
  .wsn-label { display: none; }
  .wsn-item { padding: 4px 7px; font-size: 9px; letter-spacing: 0.08em; }
}

@media (max-width: 768px) {
  .rsn-suite {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .rsn-suite::-webkit-scrollbar { display: none; }
  .rsn-item { flex-shrink: 0; }
}