.tw-navband-sticky {
  width: min(100%, 1200px);
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  box-shadow: none;
  transition: box-shadow 0.16s ease;
}

.tw-navband-wrap.is-stuck .tw-navband-sticky {
  box-shadow: 0 8px 18px rgba(0,0,0,0.24);
}

.tw-navband-wrap {
  position: sticky;
  top: 0;
  z-index: 90;
}

.tw-navband-sticky > .flex {
  min-width: 0;
  padding-inline: 10px;
}

.tw-navband-sticky nav {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

/* Toggle sticky shadow only when nav is pinned to top */
.tw-navband-wrap::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Pulse animation for bullhorn icon */
.tw-pulse-icon {
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.1);
  }
}

/* FLASH SWEEP ANIMATION + NAV HOVER */
.flash-sweep {
  position: relative;
  overflow: hidden;
}
.flash-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 58%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 80%, transparent 100%);
  transform: skewX(-20deg);
  animation: flashSweep 4.8s linear infinite;
  pointer-events: none;
}
@keyframes flashSweep {
  0% { left: -120%; }
  100% { left: 160%; }
}

/* Nav link - FORGE: Roboto Bold, CAPS, vit text, underline */
.fnav-link {
  font-family: 'Roboto', 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
  transition: all 0.2s ease;
}
.fnav-link:hover {
  color: var(--primary) !important;
}
.fnav-link:hover .fnav-hover-line {
  opacity: 1 !important;
}
/* Icon - no border, no box, just icon */
.fnav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 11px;
  opacity: 0.7;
}
.fnav-link:hover .fnav-ico {
  opacity: 1;
}
.fnav-link.active .fnav-ico {
  opacity: 1;
}
.fnav-ico i {
  font-size: 11px;
}

/* Underline */
.fnav-line {
  transition: all 0.2s ease;
  box-shadow: 0 0 5px rgba(39,150,242,0.5);
}
.fnav-hover-line {
  transition: opacity 0.2s ease;
  box-shadow: 0 0 5px rgba(39,150,242,0.5);
}

/* Nav separator - thin 1px line */
.nav-sep-fg {
  display: inline-block;
  width: 1px !important;
  height: 24px;
  background: rgba(255,255,255,0.1) !important;
  flex-shrink: 0;
}

.tw-nav-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 14px rgba(220, 38, 38, 0.32);
}

.fnav-link:hover .tw-nav-count-badge {
  background: #ef4444;
}

.tw-nav-live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  min-width: 30px;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #dc2626;
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.26), 0 0 16px rgba(220, 38, 38, 0.34);
  animation: twNavLivePulse 1.4s ease-in-out infinite;
}

@keyframes twNavLivePulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.26), 0 0 10px rgba(220, 38, 38, 0.28);
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.08);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45), 0 0 18px rgba(239, 68, 68, 0.45);
  }
}

.tw-mobile-bottom-badge-lfg {
  background: #dc2626;
  color: #ffffff;
}

.tw-nav-notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px rgba(18, 18, 18, 0.95);
}

.unread-badge--notifications {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(39, 150, 242, 0.42);
}

.unread-badge--messages {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(39, 150, 242, 0.46);
}

.unread-badge--friends {
  background: var(--success);
  color: #08150c;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.46);
}

.tw-icon-btn--notifications-active {
  color: var(--primary) !important;
  border-color: rgba(39, 150, 242, 0.55) !important;
  background: rgba(39, 150, 242, 0.08) !important;
}

.tw-icon-btn--messages-active {
  color: var(--primary) !important;
  border-color: rgba(39, 150, 242, 0.55) !important;
}

.tw-icon-btn--messages-new {
  animation: tw-messenger-new-flash 0.9s ease-out 4;
}

@keyframes tw-messenger-new-flash {
  0%, 100% {
    background: var(--surface-3);
    box-shadow: none;
  }
  50% {
    background: rgba(39, 150, 242, 0.24);
    box-shadow: 0 0 18px var(--primary-glow);
  }
}

/* New notification arrival flash (blue) — mirrors the messages flash so the eye
   is drawn to the bell the moment a new notis lands, without a page reload. */
.tw-icon-btn--notifications-new {
  animation: tw-notifications-new-flash 0.9s ease-out 4;
}

@keyframes tw-notifications-new-flash {
  0%, 100% {
    background: #1b1b1b;
    box-shadow: none;
  }
  50% {
    background: rgba(39, 150, 242, 0.24);
    box-shadow: 0 0 18px var(--primary-glow);
  }
}

/* New friend request arrival flash (green) — green to match the friends accent. */
.tw-icon-btn--friends-new {
  animation: tw-friends-new-flash 0.9s ease-out 4;
}

@keyframes tw-friends-new-flash {
  0%, 100% {
    background: #1b1b1b;
    box-shadow: none;
  }
  50% {
    background: rgba(34, 197, 94, 0.24);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.45);
  }
}

.tw-icon-btn--friends-active {
  color: var(--success) !important;
  border-color: rgba(34, 197, 94, 0.55) !important;
}

.fnav-attention {
  position: relative;
}

.fnav-attention::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 7px;
  opacity: 0.8;
  animation: fnavPulse 1.6s ease-in-out infinite;
  pointer-events: none;
}

.fnav-attention-red::after {
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45), 0 0 14px rgba(239, 68, 68, 0.28);
}

.fnav-attention-blue::after {
  box-shadow: 0 0 0 1px rgba(39, 150, 242, 0.45), 0 0 14px rgba(39, 150, 242, 0.28);
}

.fnav-attention-yellow::after {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.55), 0 0 14px rgba(245, 158, 11, 0.28);
}

.fnav-attention-green::after {
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.55), 0 0 14px rgba(34, 197, 94, 0.28);
}

.messenger-dropdown-v2 .dd-row.unread-latest,
.messenger-dropdown-v2 .messenger-dropdown-item.unread-latest {
  background: rgba(39, 150, 242, 0.16) !important;
  border-left: 3px solid var(--primary) !important;
  box-shadow: inset 0 0 0 1px rgba(39, 150, 242, 0.30), 0 0 16px rgba(39, 150, 242, 0.18);
}

.messenger-dropdown-v2 .dd-row.unread-latest .dd-name,
.messenger-dropdown-v2 .messenger-dropdown-item.unread-latest .dropdown-item-name {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(39, 150, 242, 0.35);
}

/* Kaffe-CTA — solid yta som "fylls" med kaffe vid hover (Förslag E).
   Inga gradient-ytor (UI-facit). Amber = warning-accent för stöd/support. */
.tw-coffee-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-primary);
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  overflow: hidden;
  transition: border-color 0.14s ease, transform 0.14s ease, color 0.2s ease;
}

.tw-coffee-cta-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: var(--warning);
  transition: height 0.32s ease;
  z-index: 0;
}

.tw-coffee-cta-ico,
.tw-coffee-cta-text {
  position: relative;
  z-index: 1;
}

.tw-coffee-cta-ico {
  color: var(--warning);
  font-size: 13px;
  transition: color 0.2s ease;
}

.tw-coffee-cta:hover {
  color: #1a1a1a;
  border-color: var(--warning);
  transform: translateY(-1px);
}

.tw-coffee-cta:hover .tw-coffee-cta-fill {
  height: 100%;
}

.tw-coffee-cta:hover .tw-coffee-cta-ico {
  color: #1a1a1a;
}

body.tw-page-messenger .tw-xp-side-ctas .tw-coffee-cta,
body.tw-page-messenger .tw-xp-side-cta.tw-coffee-cta {
  display: none !important;
}

.tw-fort-status-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid #333333;
  background: #1b1b1b;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.tw-fort-status-cta:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.tw-fort-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.tw-fort-status-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.tw-fort-status-cta.is-up {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.18);
}

.tw-fort-status-cta.is-up .tw-fort-status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: twFortUpPulse 1.6s ease-in-out infinite;
}

.tw-fort-status-cta.is-up .tw-fort-status-pill {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.45);
  color: #bbf7d0;
}

.tw-fort-status-cta.is-down {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.18);
}

.tw-fort-status-cta.is-down .tw-fort-status-dot {
  background: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45);
  animation: none;
}

.tw-fort-status-cta.is-down .tw-fort-status-pill {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fecaca;
}

@keyframes twFortUpPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
}

.tw-cta-lift {
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}

.tw-cta-lift:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.28);
}

.tw-token-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid #333333;
  background: #1b1b1b;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tw-token-health-label {
  color: rgba(255, 255, 255, 0.78);
}

.tw-token-health-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5);
}

.tw-token-health-dot.is-ok {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: twTokenLedPulse 1.6s ease-in-out infinite;
}

.tw-token-health-dot.is-down {
  background: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.5);
  animation: none;
}

.tw-token-health-dot.is-loading {
  background: #38bdf8;
  box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.45);
  animation: twTokenLedPulseWarn 1.4s ease-in-out infinite;
}

.tw-token-health-text {
  color: rgba(255, 255, 255, 0.85);
  min-width: 22px;
}

@keyframes twTokenLedPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
}

@keyframes twTokenLedPulseWarn {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.45);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(56, 189, 248, 0);
  }
}

.tw-shout-ticker-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  /* Left & right fade masks */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  );
}

.tw-shout-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  /* Duplicate content so we scroll half-way and loop seamlessly */
  animation: twShoutTickerMove 52s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.tw-shout-ticker-viewport:hover .tw-shout-ticker-track {
  animation-play-state: paused;
}

/* Separator dot between shout items */
.tw-shout-ticker-item + .tw-shout-ticker-item::before {
  content: '\b7';
  padding-right: 4px;
  color: rgba(255,255,255,0.2);
  pointer-events: none;
}

.tw-shout-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Avatar Ticker — per-shout avatar + category icon */
.tw-shout-ticker-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cat-color, var(--primary));
}

.tw-shout-ticker-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tw-shout-ticker-av-i {
  font-size: 10px;
  font-weight: 900;
  color: var(--cat-ink, #ffffff);
  line-height: 1;
}

.tw-shout-cat-ico {
  font-size: 11px;
  flex-shrink: 0;
}

/* Shoutbox shell — flat bar + icon-only speaker label (variant B) */
#shoutboxToggle.tw-shout-shell {
  border: 1px solid #2a2b30;
  border-radius: 7px;
  background: #0e0e11;
}

#shoutboxToggle.tw-shout-shell:hover {
  border-color: rgba(39,150,242,0.45);
}

.tw-shout-badge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #26272c;
}

#shoutContent.tw-shout-content {
  background: transparent;
  padding-left: 52px;
}

.tw-shout-ticker-item.is-auto {
  animation: twShoutAutoPulse 1.8s ease-in-out infinite;
}

.tw-shout-ticker-user {
  color: var(--primary);
  font-weight: 800;
  cursor: pointer;
}

.tw-shout-ticker-user:hover {
  color: #61c2ff;
}

.tw-shout-ticker-sep {
  color: rgba(255, 255, 255, 0.55);
}

.tw-shout-ticker-text {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 700;
}

.tw-shout-auto-pill {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(97, 194, 255, 0.8);
  background: rgba(23, 143, 219, 0.22);
  color: #cdeeff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.tw-shout-dropdown-auto {
  border-left: 2px solid rgba(23, 143, 219, 0.65);
  background: rgba(23, 143, 219, 0.08);
}

.tw-shout-auto-inline {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 900;
  color: #61c2ff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tw-shout-hover-card {
  position: fixed;
  z-index: 1200;
  min-width: 180px;
  border: 1px solid rgba(67,67,67,0.92);
  border-radius: 8px;
  background: rgba(20,20,20,0.97);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

.tw-shout-hover-card.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tw-shout-hover-name {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.tw-topbar-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 340px;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-navbar);
  z-index: 1200;
}

.tw-topbar-search-empty {
  padding: 10px 12px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tw-topbar-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s ease, border-left-color 0.12s ease;
  border-left: 3px solid transparent;
}

.tw-topbar-search-item:hover {
  background: rgba(39, 150, 242, 0.08);
  border-left-color: var(--primary);
}

.tw-topbar-search-item:last-child {
  border-bottom: 0;
}

.tw-topbar-search-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface-1);
}

.tw-topbar-search-main {
  min-width: 0;
  flex: 1;
}

.tw-topbar-search-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tw-topbar-search-name {
  font-size: 12px;
  font-weight: 900;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-topbar-search-handle {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-topbar-search-stats {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

.tw-topbar-search-stat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  white-space: nowrap;
}

.tw-topbar-search-stat strong {
  color: var(--primary);
  font-size: 11px;
  margin-left: 4px;
}

.tw-topbar-search-stat span {
  color: var(--text-primary);
  margin-left: 3px;
}

.tw-topbar-search-chevron {
  color: rgba(255, 255, 255, 0.26);
  font-size: 10px;
}

.tw-shout-hover-actions {
  display: flex;
  gap: 6px;
}

.tw-shout-hover-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2c2f37;
  border-radius: 6px;
  background: #22252c;
  color: #9aa3b1;
  text-decoration: none;
  transition: all 0.12s ease;
}

.tw-shout-hover-btn:hover {
  color: #ffffff;
  border-color: var(--primary);
  background: rgba(23, 143, 219, 0.32);
}

.tw-prof-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-4);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  transition: var(--transition-speed);
}

.tw-prof-settings-toggle:hover,
.tw-prof-settings-toggle.is-open {
  color: var(--primary);
  border-color: rgba(39, 150, 242, 0.45);
  box-shadow: var(--shadow-glow-blue);
}

.tw-prof-settings-toggle:focus-visible,
.tw-prof-panel button:focus-visible,
.tw-prof-panel input:focus-visible,
.tw-prof-panel textarea:focus-visible,
.tw-prof-panel select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.tw-prof-panel {
  position: fixed;
  z-index: 1600;
  width: min(100vw - 24px, 460px);
  height: min(94vh, 980px);
  max-height: min(94vh, 980px);
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-2);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition-speed), transform var(--transition-speed), visibility var(--transition-speed);
  font-family: var(--font-family);
}

.tw-prof-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tw-prof-panel-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(94vh, 980px);
  max-height: min(94vh, 980px);
}

.tw-prof-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-5);
}

.tw-prof-panel-title {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.tw-prof-panel-close {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
}

.tw-prof-panel-close:hover {
  color: var(--danger);
  border-color: rgba(231, 76, 60, 0.45);
}

.tw-prof-panel-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px 7px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}

.tw-prof-tab {
  position: relative;
  flex: 1;
  height: 30px;
  border: 1px solid var(--border-light);
  background: var(--surface-4);
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition-speed);
}

.tw-prof-tab:hover {
  border-color: rgba(39, 150, 242, 0.35);
  color: var(--text-primary);
}

.tw-prof-tab.is-active {
  color: var(--primary);
  border-color: rgba(39, 150, 242, 0.45);
  background: rgba(39, 150, 242, 0.12);
}

.tw-prof-tab.is-active::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 2px;
  background: var(--primary);
}

.tw-prof-panel-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  background: var(--surface-2);
}

.tw-prof-section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.tw-prof-section-title {
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tw-prof-field {
  display: block;
  margin-bottom: 4px;
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.tw-prof-input {
  width: 100%;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-4);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 0 8px;
}

.tw-prof-input.is-error {
  border-color: var(--danger);
}

.tw-prof-textarea {
  min-height: 56px;
  height: 56px;
  padding-top: 6px;
  resize: vertical;
}

.tw-prof-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tw-prof-inline-grid-grow {
  grid-template-columns: minmax(0, 1fr) auto;
}

.tw-prof-charcount,
.tw-prof-hint,
.tw-prof-subtle {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.15);
  font-size: 8px;
}

.tw-prof-charcount.is-warn {
  color: var(--warning);
}

.tw-prof-save-status.is-dirty .tw-prof-save-text {
  color: rgba(147, 197, 253, 0.95);
}

.tw-prof-charcount.is-danger,
.tw-prof-error {
  color: var(--danger);
}

.tw-prof-inline-msg {
  margin-top: 4px;
  min-height: 12px;
  font-size: 8px;
  color: var(--success);
}

.tw-prof-avatar-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.tw-prof-avatar-preview {
  position: relative;
  width: 50px;
  height: 50px;
  border: 2px solid var(--border);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  overflow: hidden;
  cursor: pointer;
}

.tw-prof-avatar-preview:hover { border-color: var(--primary); }

.tw-prof-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tw-prof-avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: var(--transition-speed);
}

.tw-prof-avatar-preview:hover .tw-prof-avatar-overlay { opacity: 1; }

.tw-prof-avatar-actions { flex: 1; }

.tw-prof-hidden-input { display: none; }

.tw-prof-btn {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-3);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
}

.tw-prof-btn:hover { border-color: var(--primary); color: var(--primary); }

.tw-prof-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.tw-prof-btn-danger {
  border-color: rgba(231, 76, 60, 0.45);
  background: rgba(231, 76, 60, 0.12);
  color: var(--danger);
}

.tw-prof-btn-danger:hover {
  border-color: var(--danger);
  color: #ffd8d3;
  background: rgba(231, 76, 60, 0.30);
}

.tw-prof-btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
}

.tw-prof-btn-primary:hover {
  color: var(--text-primary);
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: var(--shadow-glow-blue);
}

.tw-prof-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 58%;
  height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  animation: flashSweep 4.8s linear infinite;
}

.tw-prof-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tw-prof-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-4);
  color: rgba(255, 255, 255, 0.30);
  padding: 0 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.tw-prof-chip .tw-prof-dot {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.10);
}

.tw-prof-chip.is-on,
.tw-prof-chip[aria-selected='true'] {
  border-color: rgba(39, 150, 242, 0.4);
  background: rgba(39, 150, 242, 0.10);
  color: var(--primary);
}

.tw-prof-chip.is-on .tw-prof-dot,
.tw-prof-chip[aria-selected='true'] .tw-prof-dot {
  background: var(--success);
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.40);
}

.tw-prof-drawer-toggle {
  margin-top: 8px;
  width: 100%;
  height: 26px;
  border: 1px dashed var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.tw-prof-drawer-toggle:hover { border-style: solid; border-color: var(--primary); color: var(--primary); }

.tw-prof-social-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.tw-prof-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 4px 0;
  border-top: 1px solid rgba(51, 51, 51, 0.20);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
}

.tw-prof-toggle-row:first-of-type { border-top: 0; }

.tw-prof-switch {
  width: 34px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-1);
  position: relative;
}

.tw-prof-switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.25);
  transition: var(--transition-speed);
}

.tw-prof-switch.is-on {
  background: rgba(39, 150, 242, 0.12);
  border-color: rgba(39, 150, 242, 0.35);
}

.tw-prof-switch.is-on span {
  left: 20px;
  background: var(--primary);
}

.tw-prof-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  margin-bottom: 6px;
}

.tw-prof-segment-btn {
  height: 26px;
  border: 0;
  border-radius: 0;
  background: var(--surface-4);
  color: rgba(255, 255, 255, 0.35);
  font-size: 9px;
  font-weight: 600;
}

.tw-prof-segment-btn.is-on {
  background: rgba(39, 150, 242, 0.10);
  color: var(--primary);
}

.tw-prof-lfg-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(39, 150, 242, 0.15);
  background: rgba(39, 150, 242, 0.06);
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
}

.tw-prof-live-dot {
  width: 6px;
  height: 6px;
  background: var(--success);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.45);
  animation: twProfilePulse 2s ease-in-out infinite;
}

@keyframes twProfilePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.tw-prof-blocked-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.tw-prof-blocked-avatar {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tw-prof-blocked-avatar img { width: 100%; height: 100%; object-fit: cover; }

.tw-prof-name-status {
  min-height: 24px;
  margin-bottom: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  background: var(--surface-1);
  color: rgba(255, 255, 255, 0.30);
  font-size: 9px;
}

.tw-prof-name-label {
  color: var(--text-primary);
  font-weight: 600;
}

.tw-prof-name-id {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.tw-prof-name-status.is-pending { color: rgba(147, 197, 253, 0.98); }
.tw-prof-name-status.is-approved { color: var(--success); }

.tw-prof-gdpr-actions { margin-top: 8px; }

.tw-prof-delete-confirm {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(231, 76, 60, 0.15);
  background: rgba(231, 76, 60, 0.06);
  animation: twSlideDown 0.2s ease;
}

.tw-prof-delete-confirm p {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.tw-prof-check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 10px;
  margin: 8px 0;
}

.tw-prof-link-btn {
  display: inline-block;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 9px;
  margin-top: 4px;
}

.tw-prof-link-btn:hover { color: var(--text-secondary); }

@keyframes twSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.tw-prof-savebar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-5);
}

.tw-prof-save-status {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 14px;
}

.tw-prof-save-dot {
  width: 5px;
  height: 5px;
  background: transparent;
}

.tw-prof-save-status.is-dirty .tw-prof-save-dot {
  background: rgba(56, 189, 248, 0.95);
}

.tw-prof-save-status.is-saving .tw-prof-save-dot {
  background: var(--primary);
  animation: twProfilePulse 1.2s ease-in-out infinite;
}

.tw-prof-save-status.is-success .tw-prof-save-dot {
  background: var(--success);
}

.tw-prof-save-status.is-error .tw-prof-save-dot {
  background: var(--danger);
}

.tw-prof-save-status.is-saving .tw-prof-save-text { color: var(--primary); }
.tw-prof-save-status.is-success .tw-prof-save-text { color: var(--success); }
.tw-prof-save-status.is-error .tw-prof-save-text { color: var(--danger); }

.tw-prof-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
  z-index: 1601;
}

.tw-prof-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: min(260px, 82vw);
  height: 100%;
  border: 1px solid var(--border);
  border-left: 0;
  background: var(--surface-2);
  box-shadow: var(--shadow-hover);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 1602;
  display: flex;
  flex-direction: column;
}

.tw-prof-drawer.is-open {
  transform: translateX(0);
}

.tw-prof-drawer-header,
.tw-prof-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-5);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tw-prof-drawer-footer {
  border-top: 1px solid var(--border);
  border-bottom: 0;
  justify-content: flex-end;
  margin-top: auto;
}

.tw-prof-drawer-body {
  padding: 12px;
  overflow-y: auto;
}

.tw-prof-social-edit-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  gap: 8px;
  margin-bottom: 10px;
  align-items: start;
}

.tw-prof-social-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  background: var(--surface-1);
  color: var(--text-tertiary);
  margin-top: 0;
}

.tw-prof-social-field {
  display: flex;
  flex-direction: column;
}

.tw-prof-social-field .tw-prof-input {
  height: 30px;
}

.tw-prof-social-field .tw-prof-inline-msg {
  margin-top: 2px;
  min-height: 10px;
}

.tw-prof-social-icon.is-twitch {
  background: #9146FF10;
  border-color: #9146FF33;
  color: #9146FF;
}

.tw-prof-social-icon.is-snapchat {
  background: #FFFC0010;
  border-color: #FFFC0033;
  color: #FFFC00;
}

.tw-prof-social-clear {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  background: var(--surface-4);
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.tw-prof-social-clear:hover {
  color: var(--danger);
  border-color: rgba(231, 76, 60, 0.45);
}

.tw-prof-oauth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tw-prof-oauth-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.tw-prof-oauth-status::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--text-muted);
  box-shadow: none;
}

.tw-prof-oauth-status.is-connected {
  color: var(--success);
}

.tw-prof-oauth-status.is-connected::before {
  background: var(--success);
  box-shadow: 0 0 7px rgba(34, 197, 94, 0.55);
}

.tw-prof-oauth-status.is-disconnected {
  color: var(--text-tertiary);
}

.tw-prof-oauth-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tw-prof-oauth-actions .tw-prof-btn {
  min-width: 95px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  line-height: 1;
}

.tw-prof-section--oauth {
  padding-top: 10px;
}

@media (max-width: 768px) {
  .tw-prof-panel {
    width: calc(100vw - 16px);
    height: 88vh;
    max-height: 88vh;
    left: 8px !important;
    right: auto !important;
  }

  .tw-prof-drawer {
    position: fixed;
    right: 8px;
    top: 6vh;
    height: 82vh;
    width: calc(100vw - 16px);
    border-left: 1px solid var(--border);
  }

  .tw-prof-drawer-body {
    overflow-y: auto;
  }
}

@media (max-width: 480px) {
  .tw-prof-panel {
    width: 100vw;
    left: 0 !important;
    top: 0 !important;
    max-height: 100vh;
    height: 100vh;
  }

  .tw-prof-drawer {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100vw;
    height: 72vh;
    transform: translateY(100%);
  }

  .tw-prof-drawer.is-open {
    transform: translateY(0);
  }
}

@keyframes twShoutTickerMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes twShoutAutoPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

@keyframes fnavPulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* ===== FORRE NAV — Bubble style ===== */
.tw-nav-wrap {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid rgba(51,51,51,0.9);
  background: #141416;
  overflow: hidden;
  min-width: 0;
}

.tw-nav-bubble-active,
.tw-nav-bubble-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 40px;
  pointer-events: none;
  z-index: 1;
}

/* Transition aktiveras efter positionering */
.tw-nav-bubble-active.transition-on,
.tw-nav-bubble-hover.transition-on {
  transition: left 0.2s ease, width 0.2s ease, opacity 0.15s ease;
}

.tw-nav-bubble-active {
  background: transparent;
  border: none;
  z-index: 1;
  opacity: 0;
}

/* Pill Group: active link sits on a filled primary pill */
.tw-nav-bubble-active::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 5px;
  bottom: 5px;
  background: var(--primary);
  box-shadow: 0 2px 14px rgba(39,150,242,0.45);
  border-radius: 6px;
}

.tw-nav-bubble-hover {
  background: transparent;
  z-index: 0;
  opacity: 0;
}

.tw-nav-bubble-hover::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 5px;
  bottom: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
}

.tw-forre-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  min-width: 0;
}

.tw-forre-link {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  color: #d2d2d2;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.tw-forre-link i {
  font-size: 11px;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  text-align: center;
}

.tw-forre-link:hover {
  color: #ffffff;
}

.tw-forre-link:hover i {
  opacity: 1;
}

/* Sprites gets a small collector-style signal; the nav label deliberately stays neutral. */
.tw-forre-link i.tw-sprites-nav-icon {
  position: relative;
  isolation: isolate;
  animation: tw-sprites-nav-icon-pulse 10s ease-in-out infinite !important;
  color: var(--primary);
  opacity: 0.88;
  transform-origin: center;
}

.tw-forre-link i.tw-sprites-nav-icon::after {
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: 50%;
  background: currentColor;
  content: '';
  filter: blur(7px);
  opacity: 0.14;
  animation: tw-sprites-nav-icon-glow 10s ease-in-out infinite !important;
}

@keyframes tw-sprites-nav-icon-pulse {
  0%, 5%, 24% {
    color: var(--primary);
    filter: drop-shadow(0 0 0 transparent);
    opacity: 0.88;
    transform: scale(1);
  }
  8% {
    color: var(--primary);
    filter: drop-shadow(0 0 9px var(--primary-glow));
    opacity: 1;
    transform: scale(1.22);
  }
  25%, 30%, 49% {
    color: var(--rank-unreal, var(--primary));
    filter: drop-shadow(0 0 0 transparent);
    opacity: 0.88;
    transform: scale(1);
  }
  33% {
    color: var(--rank-unreal, var(--primary));
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--rank-unreal, var(--primary)) 64%, transparent));
    opacity: 1;
    transform: scale(1.22);
  }
  50%, 55%, 74% {
    color: color-mix(in srgb, var(--warning) 74%, var(--danger));
    filter: drop-shadow(0 0 0 transparent);
    opacity: 0.88;
    transform: scale(1);
  }
  58% {
    color: color-mix(in srgb, var(--warning) 74%, var(--danger));
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--warning) 74%, var(--danger) 64%, transparent));
    opacity: 1;
    transform: scale(1.22);
  }
  75%, 80%, 100% {
    color: var(--warning);
    filter: drop-shadow(0 0 0 transparent);
    opacity: 0.88;
    transform: scale(1);
  }
  83% {
    color: var(--warning);
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--warning) 64%, transparent));
    opacity: 1;
    transform: scale(1.22);
  }
}

@keyframes tw-sprites-nav-icon-glow {
  0%, 5%, 24%, 25%, 30%, 49%, 50%, 55%, 74%, 75%, 80%, 100% {
    opacity: 0.12;
    transform: scale(0.92);
  }
  8%, 33%, 58%, 83% {
    opacity: 0.68;
    transform: scale(1.38);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tw-forre-link i.tw-sprites-nav-icon {
    animation: none;
    color: var(--primary);
    opacity: 1;
  }
}

.tw-forre-link.active {
  color: #ffffff;
  text-shadow: none;
}

.tw-forre-link.active i,
.tw-forre-link.active svg {
  opacity: 1;
  color: #ffffff;
  filter: none;
}

.tw-forre-link svg {
  transition: filter 0.15s, opacity 0.15s;
  opacity: 0.5;
}

.tw-forre-sep {
  position: relative;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  height: 40px;
  color: #4f4f4f;
  font-size: 12px;
  padding: 0 2px;
  user-select: none;
}

/* Desktop rail: keep the primary navigation on a single intentional row. */
@media (min-width: 1200px) {
  /* Later layout CSS owns the generic wrap rule; desktop must keep this rail single-line. */
  body:not(.builder-edit-mode) .tw-forre-nav {
    flex-wrap: nowrap !important;
  }

  body:not(.builder-edit-mode) .tw-forre-link {
    gap: 5px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 12px !important;
  }

  body:not(.builder-edit-mode) .tw-forre-sep {
    padding-left: 1px !important;
    padding-right: 1px !important;
  }
}

.tw-nav-live-strip-wrap {
  width: 100%;
  background: color-mix(in srgb, var(--surface-5) 82%, var(--surface-1) 18%);
  border-top: 1px solid color-mix(in srgb, var(--border) 46%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 36%, transparent);
}

.tw-nav-live-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  min-height: 35px;
  padding: 0;
  max-width: 1200px;
  overflow: visible;
}

.tw-nav-live-strip--dashboard {
  grid-template-columns: minmax(260px, 1.05fr) minmax(180px, 0.72fr) minmax(210px, 0.82fr) minmax(260px, 0.78fr);
  align-items: center;
}

.tw-nav-live-strip-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: visible;
}

.tw-nav-live-strip--dashboard .tw-nav-live-strip-group {
  min-height: 35px;
}

.tw-nav-live-strip-label {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.tw-nav-live-strip-label b {
  color: var(--primary);
  font-size: 10px;
}

.tw-nav-live-strip-label--white {
  color: var(--text-primary);
}

.tw-nav-live-strip-label--fortnite {
  color: var(--primary);
  text-shadow: 0 0 8px color-mix(in srgb, var(--primary) 34%, transparent);
}

.tw-nav-live-strip-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.tw-nav-live-playing-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
}

.tw-nav-live-playing-dropdown {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  left: 0;
  display: none;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px 12px;
  width: min(340px, 80vw);
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface-5) 90%, var(--surface-2) 10%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--surface-5) 72%, transparent);
}

.tw-nav-live-playing-wrap.has-overflow:hover .tw-nav-live-playing-dropdown,
.tw-nav-live-playing-wrap.has-overflow:focus-within .tw-nav-live-playing-dropdown {
  display: grid;
}

.tw-nav-live-playing-wrap:not(.has-overflow) .tw-nav-live-playing-dropdown {
  display: none;
}

.tw-nav-live-playing-dropdown .tw-nav-live-chip {
  max-width: none;
}

.tw-nav-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  min-width: 0;
  max-width: 112px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 0.12s ease-out, border-color 0.12s ease-out, color 0.12s ease-out, background 0.12s ease-out;
  flex: 0 0 auto;
}

.tw-nav-live-chip > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-nav-live-chip.is-playing {
  color: var(--text-secondary);
}

.tw-nav-live-chip--visitor {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  max-width: none;
  width: 100%;
  height: 24px;
  padding: 0;
}

.tw-nav-live-chip-text {
  display: grid;
  min-width: 0;
  line-height: 1;
}

.tw-nav-live-chip-text strong,
.tw-nav-live-chip-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-nav-live-chip-text strong {
  color: var(--text-primary);
  font-size: 9px;
  font-weight: 950;
}

.tw-nav-live-chip-text small {
  color: var(--primary);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.tw-nav-live-chip:hover {
  transform: none;
  color: var(--text-primary);
}

.tw-nav-live-chip.is-playing:hover {
  color: var(--text-primary);
}

.tw-nav-live-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 8px color-mix(in srgb, var(--success) 56%, transparent);
}

.tw-nav-live-dot.is-playing {
  background: var(--danger);
  box-shadow: 0 0 9px color-mix(in srgb, var(--danger) 60%, transparent);
  animation: twNavLiveDotPulse 1.5s ease-in-out infinite;
}

.tw-nav-live-empty {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tw-nav-live-visitors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.tw-nav-live-visitors-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 30px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-3);
  color: var(--primary);
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  cursor: default;
}

.tw-nav-live-visitors-tooltip {
  position: absolute;
  z-index: 10010;
  top: calc(100% + 6px);
  left: 0;
  display: none;
  min-width: 132px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-2);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  color: var(--text-primary);
  text-align: left;
}

.tw-nav-live-visitors-tooltip span {
  display: block;
  overflow: hidden;
  padding: 2px 0;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-nav-live-visitors-more:hover .tw-nav-live-visitors-tooltip,
.tw-nav-live-visitors-more:focus-visible .tw-nav-live-visitors-tooltip {
  display: block;
}

.tw-nav-live-visitor {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 28px;
  padding: 2px 6px 2px 3px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--primary) 42%, transparent);
  background: color-mix(in srgb, var(--surface-2) 94%, var(--text-primary) 6%);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--transition-speed), border-color var(--transition-speed), transform var(--transition-speed);
}

.tw-nav-live-visitor:hover {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border) 52%);
  background: color-mix(in srgb, var(--surface-2) 88%, var(--primary) 12%);
  transform: translateY(-1px);
}

.tw-nav-live-visitor-avatar,
.tw-nav-live-visitor-avatar img,
.tw-nav-live-visitor-avatar span {
  width: 22px;
  height: 22px;
}

.tw-nav-live-chip--visitor .tw-nav-live-visitor-avatar,
.tw-nav-live-chip--visitor .tw-nav-live-visitor-avatar img,
.tw-nav-live-chip--visitor .tw-nav-live-visitor-avatar span {
  width: 20px;
  height: 20px;
}

.tw-nav-live-visitor-avatar {
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border) 58%);
  background: var(--surface-1);
}

.tw-nav-live-visitor-avatar img {
  display: block;
  object-fit: cover;
}

.tw-nav-live-visitor-avatar span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 8px;
  font-weight: 950;
}

.tw-nav-live-visitor-main {
  display: grid;
  min-width: 0;
  line-height: 1.05;
}

.tw-nav-live-visitor-main strong,
.tw-nav-live-visitor-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-nav-live-visitor-main strong {
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 950;
}

.tw-nav-live-visitor-main small {
  color: var(--primary);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.tw-nav-live-strip-stats {
  display: grid;
  grid-template-columns: 76px 76px minmax(116px, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 35px;
}

.tw-nav-live-stat {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 24px;
  padding: 1px 6px;
  border: 0;
  border-left: 1px solid var(--primary);
  background: transparent;
}

.tw-nav-live-stat > i { color: var(--primary); font-size: 10px; text-align: center; }
.tw-nav-live-stat--week { border-left-color: var(--warning); }
.tw-nav-live-stat--week > i { color: var(--warning); }
.tw-nav-live-stat--wide { border-left-color: var(--success); }
.tw-nav-live-stat--wide > i { color: var(--success); }
.tw-nav-live-stat > div { display: grid; min-width: 0; gap: 1px; }

.tw-nav-live-stat span,
.tw-nav-live-stat strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-nav-live-stat span {
  color: var(--text-tertiary);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.tw-nav-live-stat strong {
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.15;
}

.tw-nav-live-stat--wide strong {
  color: var(--text-primary);
  font-size: 9px;
}

.tw-nav-live-marquee {
  width: 100%;
}

.tw-nav-live-marquee-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.tw-nav-live-marquee.is-overflow .tw-nav-live-marquee-viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.tw-nav-live-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
}

.tw-nav-live-marquee-seq {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tw-nav-live-marquee-seq.is-dup {
  display: none;
}

.tw-nav-live-marquee.is-overflow .tw-nav-live-marquee-track {
  animation: twNavLiveTicker 40s linear infinite;
  will-change: transform;
}

.tw-nav-live-marquee.is-overflow .tw-nav-live-marquee-seq.is-dup {
  display: inline-flex;
}

.tw-nav-live-marquee.is-overflow:hover .tw-nav-live-marquee-track {
  animation-play-state: paused;
}

@keyframes twNavLiveTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes twNavLiveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .tw-nav-live-marquee.is-overflow .tw-nav-live-marquee-track {
    animation: none;
  }
}

@media (max-width: 900px) {
  .tw-nav-live-strip,
  .tw-nav-live-strip--dashboard {
    grid-template-columns: minmax(0, 1fr);
  }

  .tw-nav-live-visitors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tw-nav-live-strip-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .tw-nav-live-strip-group {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }

  .tw-nav-live-visitors {
    grid-template-columns: minmax(0, 1fr);
  }

  .tw-nav-live-visitor:nth-of-type(n+3) {
    display: none;
  }

  .tw-nav-live-strip-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tw-nav-live-stat--wide {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   FORRE IDAG — live-status strip (förslag I)
   Namespace: tw-fid-*  (ersätter inre markup i nav-live-strip.php)
   ============================================================ */
.tw-fid-wrap {
  width: 100%;
  background: color-mix(in srgb, var(--surface-5) 82%, var(--surface-1) 18%);
  border-top: 1px solid color-mix(in srgb, var(--border) 46%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 36%, transparent);
}

.tw-fid {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 38px;
  max-width: 1200px;
  padding: 0 4px;
}

.tw-fid-brand {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 9px;
  border-left: 3px solid var(--primary);
  line-height: 1;
}
.tw-fid-brand b {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.tw-fid-brand span {
  color: var(--primary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tw-fid-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.tw-fid-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  outline: none;
}
.tw-fid-haspop { cursor: default; }

.tw-fid-num {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tw-fid-lab {
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tw-fid-lab i { color: var(--primary); font-style: normal; }
.tw-fid-lab--col { line-height: 1.05; }

.tw-fid-stat--playing .tw-fid-num { color: var(--text-primary); }

.tw-fid-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
}
.tw-fid-dot--online {
  background: var(--success);
  box-shadow: 0 0 8px color-mix(in srgb, var(--success) 60%, transparent);
}
.tw-fid-dot--playing {
  background: var(--danger);
  box-shadow: 0 0 9px color-mix(in srgb, var(--danger) 62%, transparent);
  animation: twNavLiveDotPulse 1.5s ease-in-out infinite;
}

/* Klassisk besöksräknare — odometer (total) + idag-chip */
.tw-fid-stat--besok {
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.tw-fid-stat--besok > i {
  color: var(--primary);
  font-size: 12px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--primary) 45%, transparent));
}
.tw-fid-odo {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: #000;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.tw-fid-odo-d {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 19px;
  background: #000;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--primary);
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px color-mix(in srgb, var(--primary) 55%, transparent);
}
.tw-fid-besok-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  line-height: 1.05;
}
.tw-fid-besok-meta .tw-fid-lab { color: var(--text-tertiary); }
.tw-fid-today {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tw-fid-today b {
  color: var(--success);
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.tw-fid-today .tw-fid-dot { width: 6px; height: 6px; }

/* Hover-popover (online + spelar) */
.tw-fid-pop {
  position: absolute;
  z-index: 10020;
  top: calc(100% + 6px);
  left: 0;
  display: none;
  min-width: 180px;
  max-width: 280px;
  padding: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 96%, var(--surface-5) 4%);
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}
.tw-fid-pop--left { left: auto; right: 0; }
.tw-fid-haspop:hover > .tw-fid-pop,
.tw-fid-haspop:focus-within > .tw-fid-pop,
.tw-fid-av-more:hover > .tw-fid-pop,
.tw-fid-av-more:focus-within > .tw-fid-pop {
  display: block;
}
.tw-fid-pop-head {
  margin-bottom: 7px;
  color: var(--text-tertiary);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tw-fid-pop-list { display: flex; flex-direction: column; gap: 4px; }
.tw-fid-pop-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
  border-left: 2px solid transparent;
  color: var(--text-primary);
  text-decoration: none;
}
a.tw-fid-pop-row:hover {
  background: color-mix(in srgb, var(--surface-2) 84%, var(--primary) 16%);
  border-left-color: var(--primary);
}
.tw-fid-pop-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-fid-pop-meta {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.tw-fid-pop-more {
  padding: 4px 5px 1px;
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

/* Profilbesökare — avatarer + hover-tooltip */
.tw-fid-visitors {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 14px;
  border-left: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.tw-fid-av-row { display: flex; align-items: center; }
.tw-fid-av-link {
  position: relative;
  display: block;
  margin-left: -7px;
  transition: transform 0.12s ease;
}
.tw-fid-av-link:first-child { margin-left: 0; }
.tw-fid-av-link:hover { transform: translateY(-2px); z-index: 5; }
.tw-fid-av {
  display: block;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--surface-5);
  background: var(--surface-3);
}
.tw-fid-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tw-fid-av > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--primary);
  font-size: 9px;
  font-weight: 900;
}
.tw-fid-av-tip {
  position: absolute;
  z-index: 10020;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  min-width: 92px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  text-align: center;
}
.tw-fid-av-link:hover .tw-fid-av-tip,
.tw-fid-av-link:focus-visible .tw-fid-av-tip { display: flex; }
.tw-fid-av-tip strong { color: var(--text-primary); font-size: 10px; font-weight: 900; white-space: nowrap; }
.tw-fid-av-tip small { color: var(--primary); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.tw-fid-av-more {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: -7px;
  border-radius: 50%;
  border: 2px solid var(--surface-5);
  background: var(--surface-3);
  color: var(--primary);
  font-size: 9px;
  font-weight: 900;
  cursor: default;
  outline: none;
}

/* Höger: dagsrekord + senast inloggad */
.tw-fid-aside {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex: 0 0 auto;
}
.tw-fid-record {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 9%, transparent);
}
.tw-fid-record > i { color: var(--warning); font-size: 12px; }
.tw-fid-record-txt { display: flex; flex-direction: column; line-height: 1.1; }
.tw-fid-record-txt b { color: var(--text-primary); font-size: 10px; font-weight: 900; white-space: nowrap; }
.tw-fid-record-txt small { color: var(--text-tertiary); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.tw-fid-record.is-live {
  border-color: color-mix(in srgb, var(--success) 50%, transparent);
  background: color-mix(in srgb, var(--success) 11%, transparent);
}
.tw-fid-record.is-live > i { color: var(--success); animation: twNavLiveDotPulse 1.4s ease-in-out infinite; }

.tw-fid-login {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.tw-fid-login > i { color: var(--success); font-size: 11px; }
.tw-fid-login-txt { display: flex; flex-direction: column; line-height: 1.1; }
.tw-fid-login-txt span { color: var(--text-tertiary); font-size: 7px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.tw-fid-login-txt strong { color: var(--text-primary); font-size: 10px; font-weight: 900; white-space: nowrap; }

.tw-fid-empty {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 1040px) {
  .tw-fid-login { display: none; }
}
@media (max-width: 880px) {
  .tw-fid { flex-wrap: wrap; gap: 10px 14px; min-height: 0; padding: 6px 4px; }
  .tw-fid-aside { margin-left: 0; }
  .tw-fid-stat { height: 24px; }
}
@media (max-width: 560px) {
  .tw-fid-visitors { padding-left: 0; border-left: 0; }
  .tw-fid-stat--besok { display: none; }
  .tw-fid-record-txt small { display: none; }
}

/* ===========================================================
   @mention-länkar (forum, shoutbox, m.fl.) + @everyone
   =========================================================== */
.tw-mention {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0;
  transition: color var(--transition-speed);
}
.tw-mention:hover { color: var(--primary-hover); text-decoration: underline; }
.tw-mention--all {
  color: var(--warning);
  font-weight: 700;
  padding: 0 3px;
  background: var(--tint-warning);
}

/* ===========================================================
   Notis-dropdown: actor-avatar med typ-ikon-badge (FB-stil)
   =========================================================== */
.fnav-notif-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: block;
}
.fnav-notif-avatar-img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface-3);
  display: block;
}
.fnav-notif-avatar-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--surface-5);
  font-size: 8px;
  line-height: 1;
}

/* ===========================================================
   Notis-dropdown i FB-stil: grupp-rubriker, oläst-prick,
   läst-dämpning, tom-läge
   =========================================================== */
#notificationsDropdown .fnav-notif-group {
  padding: 8px 12px 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
}
#notificationsDropdown .dropdown-item {
  position: relative;
  padding-right: 26px;
  transition: background-color var(--transition-speed) ease;
}
/* Oläst = blå tint + blå prick till höger (som Facebook) */
#notificationsDropdown .dropdown-item.unread {
  background: var(--tint-blue);
}
#notificationsDropdown .dropdown-item.unread:hover {
  background: var(--tint-blue-strong);
}
#notificationsDropdown .dropdown-item.read {
  background: transparent;
}
#notificationsDropdown .dropdown-item.read .item-title {
  font-weight: 500;
  color: var(--text-secondary);
}
#notificationsDropdown .fnav-notif-dot {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}
#notificationsDropdown .fnav-notif-empty {
  padding: 26px 16px;
  text-align: center;
  color: var(--text-tertiary);
}
#notificationsDropdown .fnav-notif-empty i {
  font-size: 22px;
  opacity: 0.35;
  display: block;
  margin-bottom: 8px;
}
#notificationsDropdown .fnav-notif-empty p {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 2px;
}
#notificationsDropdown .fnav-notif-empty span {
  font-size: 11px;
  color: var(--text-tertiary);
}