/* ═══════════════════════════════════════════════════════════
   DASH DREAD — Social CSS  v6  · PREMIUM REDESIGN
   Friends · Chat · Clans · Profile · Ranks
   ═══════════════════════════════════════════════════════════ */

:root {
  --nc-bg: #03030a;
  --nc-surface: rgba(10, 10, 24, 0.97);
  --nc-glass: rgba(16, 14, 34, 0.92);
  --nc-border: rgba(68, 238, 255, 0.1);
  --nc-cyan: #44eeff;
  --nc-pink: #ff0066;
  --nc-purple: #aa44ff;
  --nc-green: #00ff88;
  --nc-gold: #ffd700;
  --nc-orange: #ff8844;
  --nc-text: #dde2f5;
  --nc-muted: rgba(180, 190, 230, 0.38);
  --nc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════════════
   AURORA BACKGROUND  (animated gradient blobs)
   ═══════════════════════════════════════════════════════════ */
.ncs-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ncs-aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  animation: ncsBlobIn 0.8s 0.1s forwards;
}
@keyframes ncsBlobIn {
  to {
    opacity: 1;
  }
}
.ncs-aurora-blob:nth-child(1) {
  width: 50vw;
  height: 40vh;
  background: radial-gradient(
    circle,
    rgba(68, 238, 255, 0.08),
    transparent 70%
  );
  top: -10%;
  left: -10%;
  animation:
    ncsBlobIn 0.8s 0.1s forwards,
    ncsBlob1 18s 1s ease-in-out infinite;
}
.ncs-aurora-blob:nth-child(2) {
  width: 45vw;
  height: 45vh;
  background: radial-gradient(
    circle,
    rgba(170, 68, 255, 0.09),
    transparent 70%
  );
  bottom: -15%;
  right: -10%;
  animation:
    ncsBlobIn 0.8s 0.2s forwards,
    ncsBlob2 22s 1s ease-in-out infinite;
}
.ncs-aurora-blob:nth-child(3) {
  width: 30vw;
  height: 30vh;
  background: radial-gradient(circle, rgba(255, 0, 102, 0.06), transparent 70%);
  top: 30%;
  right: 20%;
  animation:
    ncsBlobIn 0.8s 0.3s forwards,
    ncsBlob3 26s 1s ease-in-out infinite;
}
@keyframes ncsBlob1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(6vw, 4vh) scale(1.15);
  }
  66% {
    transform: translate(-3vw, 7vh) scale(0.95);
  }
}
@keyframes ncsBlob2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  40% {
    transform: translate(-5vw, -6vh) scale(1.12);
  }
  70% {
    transform: translate(4vw, 3vh) scale(0.9);
  }
}
@keyframes ncsBlob3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-8vw, 5vh) scale(1.2);
  }
}

/* Scan lines overlay */
.ncs-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.06) 3px,
    rgba(0, 0, 0, 0.06) 4px
  );
}

/* ═══════════════════════════════════════════════════════════
   PAGE OVERLAY BASE
   ═══════════════════════════════════════════════════════════ */
.ncs-page {
  position: fixed;
  inset: 0;
  z-index: 1800;
  background: rgba(2, 2, 8, 0.96);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.ncs-page.ncs-open {
  display: flex;
  animation: ncsPageIn 0.32s var(--nc-ease);
}
@keyframes ncsPageIn {
  from {
    opacity: 0;
    transform: scale(0.985) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── Top bar ─────────────────────────────────────────────── */
/* ── Top bar — Social header design ─────────────────────── */
.ncs-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 32px;
  height: 72px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(6, 8, 18, 0.95) 0%, rgba(3, 3, 12, 0.9) 100%);
  border-bottom: 1px solid rgba(68, 238, 255, 0.08);
  overflow: hidden;
}

/* Subtle top glow */
.ncs-topbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(68, 238, 255, 0.15) 50%, transparent 90%);
}

/* Glowing bottom line — softer for social feel */
.ncs-topbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(
    --ncs-line,
    linear-gradient(
      90deg,
      transparent 5%,
      var(--nc-cyan) 35%,
      rgba(100, 200, 255, 0.8) 50%,
      var(--nc-cyan) 65%,
      transparent 95%
    )
  );
  box-shadow: var(--ncs-line-glow, 0 0 15px rgba(68, 238, 255, 0.35));
}
/* large watermark letter behind topbar */
/* .ncs-topbar::before {
  content: var(--ncs-watermark,'');
  position: absolute; right: 36px; top: -10px;
  font-family: 'Orbitron', monospace;
  font-size: 90px; font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.04);
  letter-spacing: 0.1em;
  pointer-events: none; user-select: none;
  line-height: 1;
} */
.ncs-topbar-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(68, 238, 255, 0.5));
  opacity: 0.9;
}

.ncs-topbar-titles {
  flex: 1;
  min-width: 0;
}

.ncs-topbar-title {
  font-family: "Orbitron", monospace;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2em;
  background: var(
    --ncs-title-grad,
    linear-gradient(90deg, var(--nc-cyan) 0%, #88ddff 50%, var(--nc-cyan) 100%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
  text-shadow: none;
}

.ncs-topbar-sub {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(180, 200, 230, 0.5);
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.ncs-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* Close button - TOP RIGHT CORNER */
.ncs-close-btn {
  position: fixed !important;
  top: 20px !important;
  right: 24px !important;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(170, 102, 255, 0.4);
  background: rgba(12, 10, 24, 0.95);
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999 !important;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.2s ease,
    box-shadow 0.2s;
}
.ncs-close-btn:hover {
  background: rgba(20, 16, 36, 1);
  border-color: rgba(170, 102, 255, 0.7);
  color: #aa66ff;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(170, 102, 255, 0.3);
}

/* page body */
.ncs-page-body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ── Per-page colours ────────────────────────────────────── */
#ncsPageFriends {
  --ncs-line: linear-gradient(
    90deg,
    transparent,
    var(--nc-cyan) 40%,
    #88ffdd 60%,
    transparent
  );
  --ncs-line-glow: 0 0 20px rgba(68, 238, 255, 0.35);
  --ncs-title-grad: linear-gradient(90deg, var(--nc-cyan), #88ffdd);
  --ncs-watermark: "FR";
}
#ncsPageChat {
  --ncs-line: linear-gradient(
    90deg,
    transparent,
    var(--nc-green) 40%,
    var(--nc-cyan) 60%,
    transparent
  );
  --ncs-line-glow: 0 0 20px rgba(0, 255, 136, 0.35);
  --ncs-title-grad: linear-gradient(90deg, var(--nc-green), var(--nc-cyan));
  --ncs-watermark: "DM";
}
#ncsPageClans {
  --ncs-line: linear-gradient(
    90deg,
    transparent,
    var(--nc-purple) 35%,
    var(--nc-gold) 65%,
    transparent
  );
  --ncs-line-glow: 0 0 20px rgba(170, 68, 255, 0.4);
  --ncs-title-grad: linear-gradient(90deg, var(--nc-purple), var(--nc-gold));
  --ncs-watermark: "CL";
}
#ncsPageProfile {
  --ncs-line: linear-gradient(
    90deg,
    transparent,
    var(--nc-gold) 40%,
    var(--nc-orange) 60%,
    transparent
  );
  --ncs-line-glow: 0 0 20px rgba(255, 215, 0, 0.4);
  --ncs-title-grad: linear-gradient(90deg, var(--nc-gold), var(--nc-orange));
  --ncs-watermark: "PR";
}
#ncsPageRanks {
  --ncs-line: linear-gradient(
    90deg,
    transparent,
    var(--nc-pink) 40%,
    var(--nc-purple) 60%,
    transparent
  );
  --ncs-line-glow: 0 0 20px rgba(255, 0, 102, 0.4);
  --ncs-title-grad: linear-gradient(90deg, var(--nc-pink), var(--nc-purple));
  --ncs-watermark: "LB";
}

/* ═══════════════════════════════════════════════════════════
   SHARED LAYOUT: SIDEBAR + MAIN
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   SIDEBAR — SOCIAL PANEL (Friends-focused design)
   ═══════════════════════════════════════════════════════════ */
.ncs-sidebar {
  position: relative;
  width: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(68, 238, 255, 0.08);
  background: linear-gradient(180deg, rgba(6, 8, 18, 0.85) 0%, rgba(4, 4, 14, 0.9) 100%);
  overflow: hidden;
}

/* Subtle social network pattern overlay */
.ncs-sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='20' cy='20' r='2' fill='none' stroke='%2344eeff' stroke-width='0.3' opacity='0.04'/%3E%3Ccircle cx='80' cy='80' r='2' fill='none' stroke='%2344eeff' stroke-width='0.3' opacity='0.04'/%3E%3Cline x1='20' y1='20' x2='80' y2='80' stroke='%2344eeff' stroke-width='0.2' opacity='0.025'/%3E%3Ccircle cx='50' cy='50' r='3' fill='none' stroke='%2344eeff' stroke-width='0.3' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

.ncs-sidebar > * {
  position: relative;
  z-index: 1;
}
.ncs-main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: rgba(3, 3, 10, 0.3);
}

/* Subtle background pattern for main area */
.ncs-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Hex grid pattern */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z' fill='none' stroke='%2344eeff' stroke-width='0.15' opacity='0.02'/%3E%3C/svg%3E");
  background-size: 120px 104px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.ncs-main > * {
  position: relative;
  z-index: 1;
}

/* ── Search box — Social-focused clean design ───────────── */
.ncs-search-box {
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(68, 238, 255, 0.06);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.15);
}
.ncs-search-wrap {
  position: relative;
}
.ncs-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(68, 238, 255, 0.45);
  pointer-events: none;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}
.ncs-search-wrap:focus-within .ncs-search-icon {
  color: var(--nc-cyan);
}
.ncs-input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  background: rgba(68, 238, 255, 0.03);
  border: 1px solid rgba(68, 238, 255, 0.12);
  border-radius: 10px;
  color: var(--nc-text);
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  box-sizing: border-box;
}
.ncs-input:focus {
  border-color: rgba(68, 238, 255, 0.45);
  background: rgba(68, 238, 255, 0.06);
  box-shadow:
    0 0 0 3px rgba(68, 238, 255, 0.08),
    0 0 20px rgba(68, 238, 255, 0.08);
}
.ncs-input::placeholder {
  color: rgba(180, 190, 230, 0.35);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.ncs-input-plain {
  padding: 12px 16px;
}

/* ── Scrollable list — Clean social list ─────────────────── */
.ncs-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 24px;
  min-height: 0;
}

.ncs-list::-webkit-scrollbar {
  width: 4px;
}

.ncs-list::-webkit-scrollbar-track {
  background: rgba(68, 238, 255, 0.02);
  border-radius: 4px;
}

.ncs-list::-webkit-scrollbar-thumb {
  background: rgba(68, 238, 255, 0.18);
  border-radius: 4px;
  transition: background 0.2s;
}

.ncs-list::-webkit-scrollbar-thumb:hover {
  background: rgba(68, 238, 255, 0.3);
}

/* ── Section label — Clean social headers ────────────────── */
.ncs-sec-label {
  font-family: "Orbitron", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--nc-cyan);
  padding: 16px 18px 8px;
  opacity: 0.65;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}
.ncs-sec-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(68, 238, 255, 0.2), transparent 80%);
}
.ncs-sec-label-purple {
  color: var(--nc-purple);
}
.ncs-sec-label-purple::after {
  background: linear-gradient(90deg, rgba(170, 68, 255, 0.2), transparent 80%);
}
.ncs-sec-label-gold {
  color: var(--nc-gold);
}
.ncs-sec-label-gold::after {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), transparent 80%);
}
.ncs-sec-label-pink {
  color: var(--nc-pink);
}
.ncs-sec-label-pink::after {
  background: linear-gradient(90deg, rgba(255, 0, 102, 0.2), transparent 80%);
}

/* ── Empty state — Social background decorations ─────────── */
.ncs-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 28px;
  text-align: center;
  flex: 1;
  color: var(--nc-muted);
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  overflow: hidden;
}

/* Subtle social/network decorations */
.ncs-empty::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Network connection lines */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Ccircle cx='50' cy='50' r='4' fill='none' stroke='%2344eeff' stroke-width='0.5' opacity='0.06'/%3E%3Ccircle cx='250' cy='100' r='3' fill='none' stroke='%2344eeff' stroke-width='0.5' opacity='0.05'/%3E%3Ccircle cx='150' cy='200' r='5' fill='none' stroke='%2344eeff' stroke-width='0.5' opacity='0.04'/%3E%3Ccircle cx='80' cy='250' r='3' fill='none' stroke='%2344eeff' stroke-width='0.5' opacity='0.05'/%3E%3Cline x1='50' y1='50' x2='150' y2='200' stroke='%2344eeff' stroke-width='0.3' opacity='0.03'/%3E%3Cline x1='250' y1='100' x2='150' y2='200' stroke='%2344eeff' stroke-width='0.3' opacity='0.03'/%3E%3Cline x1='150' y1='200' x2='80' y2='250' stroke='%2344eeff' stroke-width='0.3' opacity='0.025'/%3E%3C/svg%3E"),
    /* Communication icon hints */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cpath d='M80 320 L80 280 L120 280 L140 260 L160 280 L200 280 L200 320 Z' fill='none' stroke='%2344eeff' stroke-width='0.4' opacity='0.025'/%3E%3Ccircle cx='320' cy='80' r='25' fill='none' stroke='%2344eeff' stroke-width='0.4' opacity='0.03'/%3E%3Ccircle cx='320' cy='80' r='15' fill='none' stroke='%2344eeff' stroke-width='0.3' opacity='0.025'/%3E%3Crect x='50' y='60' width='60' height='50' rx='8' fill='none' stroke='%2344eeff' stroke-width='0.4' opacity='0.025'/%3E%3C/svg%3E"),
    /* Geometric HUD patterns */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M10 10 L30 10 L30 15 L15 15 L15 30 L10 30 Z' fill='none' stroke='%2344eeff' stroke-width='0.4' opacity='0.035'/%3E%3Cpath d='M190 10 L170 10 L170 15 L185 15 L185 30 L190 30 Z' fill='none' stroke='%2344eeff' stroke-width='0.4' opacity='0.035'/%3E%3Cpath d='M10 190 L30 190 L30 185 L15 185 L15 170 L10 170 Z' fill='none' stroke='%2344eeff' stroke-width='0.4' opacity='0.03'/%3E%3Cpath d='M190 190 L170 190 L170 185 L185 185 L185 170 L190 170 Z' fill='none' stroke='%2344eeff' stroke-width='0.4' opacity='0.03'/%3E%3C/svg%3E");
  background-position: 0 0, 50px 100px, center;
  background-size: 600px 600px, 800px 800px, 400px 400px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

/* Radial gradient overlay */
.ncs-empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(3, 3, 10, 0.4) 100%);
  pointer-events: none;
  z-index: 0;
}

.ncs-empty > * {
  position: relative;
  z-index: 1;
}

.ncs-empty-icon {
  font-size: 52px;
  opacity: 0.3;
  filter: drop-shadow(0 0 15px rgba(68, 238, 255, 0.25));
  margin-bottom: 8px;
}

.ncs-empty-text {
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(180, 200, 230, 0.45);
  letter-spacing: 0.03em;
  max-width: 280px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   AVATAR SYSTEM — Clean social design
   ═══════════════════════════════════════════════════════════ */
.ncs-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Orbitron", monospace;
  font-size: 15px;
  font-weight: 900;
  flex-shrink: 0;
  position: relative;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Avatar hover effect */
.ncs-person-row:hover .ncs-av {
  transform: scale(1.05);
}
.ncs-av-sm {
  width: 36px;
  height: 36px;
  font-size: 12px;
}
.ncs-av-lg {
  width: 52px;
  height: 52px;
  font-size: 18px;
}
.ncs-av-xl {
  width: 78px;
  height: 78px;
  font-size: 28px;
  font-weight: 900;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border-radius: 0;
}
.ncs-av-xxl {
  width: 100px;
  height: 100px;
  font-size: 36px;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border-radius: 0;
}
/* 8 color variants */
.ncs-av[data-col="0"] {
  background: linear-gradient(135deg, #0a7a8a, #44eeff);
  box-shadow: 0 0 14px rgba(68, 238, 255, 0.4);
}
.ncs-av[data-col="1"] {
  background: linear-gradient(135deg, #6a0aaa, #aa44ff);
  box-shadow: 0 0 14px rgba(170, 68, 255, 0.4);
}
.ncs-av[data-col="2"] {
  background: linear-gradient(135deg, #aa0044, #ff0066);
  box-shadow: 0 0 14px rgba(255, 0, 102, 0.4);
}
.ncs-av[data-col="3"] {
  background: linear-gradient(135deg, #0a7a44, #00ff88);
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.35);
}
.ncs-av[data-col="4"] {
  background: linear-gradient(135deg, #aa7700, #ffd700);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.4);
}
.ncs-av[data-col="5"] {
  background: linear-gradient(135deg, #0a44aa, #4488ff);
  box-shadow: 0 0 14px rgba(68, 136, 255, 0.4);
}
.ncs-av[data-col="6"] {
  background: linear-gradient(135deg, #aa4400, #ff8844);
  box-shadow: 0 0 14px rgba(255, 136, 68, 0.35);
}
.ncs-av[data-col="7"] {
  background: linear-gradient(135deg, #0a4477, #0088ff);
  box-shadow: 0 0 14px rgba(0, 136, 255, 0.4);
}
.ncs-av.ncs-av-clan {
  background: linear-gradient(135deg, #550aaa, #aa44ff);
  box-shadow: 0 0 14px rgba(170, 68, 255, 0.45);
}

/* Online animation: spinning ring */
.ncs-av.online::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(var(--nc-green), transparent 220deg);
  animation: ncsRingSpin 3s linear infinite;
  z-index: -1;
}
.ncs-av-xl.online::before,
.ncs-av-xxl.online::before {
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border-radius: 0;
  inset: -4px;
}
.ncs-av.online::after {
  content: "";
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--nc-green);
  border: 2.5px solid #03030a;
  box-shadow: 0 0 8px rgba(0, 255, 136, 1);
  animation: ncsDotPulse 2s ease-in-out infinite;
}
.ncs-av-xl.online::after,
.ncs-av-xxl.online::after {
  bottom: 5px;
  right: 0;
  width: 13px;
  height: 13px;
}
@keyframes ncsRingSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ncsDotPulse {
  0%,
  100% {
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.8);
  }
  50% {
    box-shadow: 0 0 14px rgba(0, 255, 136, 1);
  }
}

/* ═══════════════════════════════════════════════════════════
   PERSON ROW — Friend Cards (Social-focused design)
   ═══════════════════════════════════════════════════════════ */
.ncs-person-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  cursor: pointer;
  border-radius: 12px;
  margin: 3px 10px;
  border: 1px solid transparent;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
}

/* Subtle left accent indicator */
.ncs-person-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--nc-cyan);
  box-shadow: 0 0 8px var(--nc-cyan);
  transition: height 0.2s ease;
}

.ncs-person-row::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(68, 238, 255, 0.06) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.ncs-person-row:hover {
  background: rgba(68, 238, 255, 0.05);
  border-color: rgba(68, 238, 255, 0.15);
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(68, 238, 255, 0.08);
}

.ncs-person-row:hover::before {
  height: 50%;
}

.ncs-person-row:hover::after {
  opacity: 1;
}

.ncs-person-row.selected {
  background: rgba(68, 238, 255, 0.08);
  border-color: rgba(68, 238, 255, 0.2);
}

.ncs-person-row.selected::before {
  height: 60%;
}

.ncs-person-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.ncs-person-name {
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--nc-text);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.ncs-person-sub {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  color: var(--nc-muted);
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}
/* Clan tag badge — Social identity */
.ncs-clan-tag {
  font-family: "Orbitron", monospace;
  font-size: 8px;
  font-weight: 700;
  color: var(--nc-cyan);
  letter-spacing: 0.08em;
  background: rgba(68, 238, 255, 0.1);
  border: 1px solid rgba(68, 238, 255, 0.2);
  border-radius: 5px;
  padding: 2px 7px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.ncs-person-row:hover .ncs-clan-tag {
  background: rgba(68, 238, 255, 0.15);
  border-color: rgba(68, 238, 255, 0.3);
}
/* Online/Offline status indicators */
.ncs-online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nc-green);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.8), 0 0 15px rgba(0, 255, 136, 0.4);
  animation: ncsDotPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

.ncs-offline-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(180, 190, 230, 0.2);
  border: 1px solid rgba(180, 190, 230, 0.1);
  flex-shrink: 0;
}
/* Row actions — Social interaction buttons */
.ncs-row-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.ncs-person-row:hover .ncs-row-actions {
  opacity: 1;
}

.ncs-row-actions.always {
  opacity: 1;
}
/* Icon buttons — Social interaction style */
.ncs-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(68, 238, 255, 0.12);
  background: rgba(68, 238, 255, 0.04);
  color: rgba(180, 190, 230, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.ncs-icon-btn:hover {
  background: rgba(68, 238, 255, 0.12);
  border-color: rgba(68, 238, 255, 0.4);
  color: var(--nc-cyan);
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(68, 238, 255, 0.2);
}

.ncs-icon-btn.danger:hover {
  background: rgba(255, 0, 102, 0.12);
  border-color: rgba(255, 0, 102, 0.4);
  color: var(--nc-pink);
  box-shadow: 0 0 15px rgba(255, 0, 102, 0.2);
}

.ncs-icon-btn.success:hover {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.35);
  color: var(--nc-green);
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS — PREMIUM TACTICAL INTERFACE
   ═══════════════════════════════════════════════════════════ */
.ncs-btn {
  position: relative;
  padding: 11px 22px;
  border: 1.5px solid rgba(68, 238, 255, 0.35);
  background: linear-gradient(
    135deg,
    rgba(68, 238, 255, 0.08) 0%,
    rgba(68, 238, 255, 0.02) 50%,
    rgba(68, 238, 255, 0.06) 100%
  );
  color: var(--nc-cyan);
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 0 10px rgba(68, 238, 255, 0.4);
}
/* Metallic shine sweep */
.ncs-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  transition: left 0.4s ease;
}
/* Emissive edge glow */
.ncs-btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    90deg,
    var(--nc-cyan),
    var(--nc-purple),
    var(--nc-cyan)
  );
  background-size: 200% 100%;
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
  z-index: -1;
  opacity: 0;
  animation: ncsBtnEdgeShift 4s linear infinite;
  transition: opacity 0.3s ease;
}
@keyframes ncsBtnEdgeShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.ncs-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(68, 238, 255, 0.18) 0%,
    rgba(68, 238, 255, 0.06) 50%,
    rgba(68, 238, 255, 0.14) 100%
  );
  border-color: rgba(68, 238, 255, 0.7);
  box-shadow:
    0 0 25px rgba(68, 238, 255, 0.35),
    0 0 50px rgba(68, 238, 255, 0.15),
    inset 0 0 15px rgba(68, 238, 255, 0.05);
  transform: translateY(-2px);
  text-shadow: 0 0 15px rgba(68, 238, 255, 0.8);
}
.ncs-btn:hover::before {
  left: 100%;
}
.ncs-btn:hover::after {
  opacity: 0.6;
}
.ncs-btn:active {
  transform: translateY(0) scale(0.97);
}
.ncs-btn-purple {
  border-color: rgba(170, 68, 255, 0.32);
  background: rgba(170, 68, 255, 0.07);
  color: var(--nc-purple);
}
.ncs-btn-purple:hover {
  background: rgba(170, 68, 255, 0.18);
  border-color: rgba(170, 68, 255, 0.6);
  box-shadow: 0 0 16px rgba(170, 68, 255, 0.25);
}
.ncs-btn-pink {
  border-color: rgba(255, 0, 102, 0.32);
  background: rgba(255, 0, 102, 0.07);
  color: var(--nc-pink);
}
.ncs-btn-pink:hover {
  background: rgba(255, 0, 102, 0.18);
  box-shadow: 0 0 14px rgba(255, 0, 102, 0.25);
}
.ncs-btn-sm {
  padding: 6px 14px;
  font-size: 9px;
  border-radius: 8px;
}
.ncs-btn-full-cyan {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #00bbcc, #44eeff, #0088ff);
  background-size: 200%;
  color: #001822;
  font-family: "Orbitron", monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
  cursor: pointer;
  box-shadow:
    0 0 28px rgba(68, 238, 255, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.12s var(--nc-spring),
    box-shadow 0.15s;
  animation: ncsGradShift 4s ease infinite;
}
.ncs-btn-full-cyan:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 40px rgba(68, 238, 255, 0.7),
    0 8px 24px rgba(0, 0, 0, 0.5);
}
.ncs-btn-full-purple {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #7733ee, #aa44ff, #ff44cc);
  background-size: 200%;
  color: #fff;
  font-family: "Orbitron", monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
  cursor: pointer;
  box-shadow:
    0 0 28px rgba(170, 68, 255, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.12s var(--nc-spring),
    box-shadow 0.15s;
  animation: ncsGradShift 4s ease infinite;
}
.ncs-btn-full-purple:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 40px rgba(170, 68, 255, 0.7),
    0 8px 24px rgba(0, 0, 0, 0.5);
}
@keyframes ncsGradShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.ncs-form-error {
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  color: var(--nc-pink);
  text-align: center;
  min-height: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════
   FRIENDS PAGE — Main Content Area (Communication-focused)
   ═══════════════════════════════════════════════════════════ */
.ncs-friends-right {
  position: relative;
  flex: 1;
  min-width: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid rgba(68, 238, 255, 0.08);
  background: linear-gradient(180deg, rgba(5, 6, 16, 0.7) 0%, rgba(3, 3, 12, 0.8) 100%);
}

/* Subtle social pattern for right panel */
.ncs-friends-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Ccircle cx='75' cy='75' r='40' fill='none' stroke='%2344eeff' stroke-width='0.3' opacity='0.025'/%3E%3Ccircle cx='75' cy='75' r='60' fill='none' stroke='%2344eeff' stroke-width='0.2' opacity='0.02'/%3E%3Cline x1='35' y1='75' x2='55' y2='75' stroke='%2344eeff' stroke-width='0.3' opacity='0.03'/%3E%3Cline x1='95' y1='75' x2='115' y2='75' stroke='%2344eeff' stroke-width='0.3' opacity='0.03'/%3E%3Cline x1='75' y1='35' x2='75' y2='55' stroke='%2344eeff' stroke-width='0.3' opacity='0.03'/%3E%3Cline x1='75' y1='95' x2='75' y2='115' stroke='%2344eeff' stroke-width='0.3' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.ncs-friends-right > * {
  position: relative;
  z-index: 1;
}

/* Add Friend Panel Section - Stretched layout */
.ncs-panel-section {
  padding: 28px 36px 24px;
  border-bottom: 1px solid rgba(68, 238, 255, 0.06);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.12);
}

.ncs-panel-section-title {
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--nc-cyan);
  margin-bottom: 18px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ncs-panel-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(68, 238, 255, 0.25), transparent 80%);
}

/* Add friend row - Stretched Input + Button */
.ncs-add-row {
  display: flex;
  gap: 14px;
  max-width: 600px;
}

.ncs-add-row .ncs-input {
  flex: 1;
  min-width: 280px;
  background: rgba(68, 238, 255, 0.04);
  border-color: rgba(68, 238, 255, 0.15);
  padding: 13px 18px;
}

.ncs-add-row .ncs-input:focus {
  border-color: rgba(68, 238, 255, 0.5);
  box-shadow:
    0 0 0 3px rgba(68, 238, 255, 0.1),
    0 0 25px rgba(68, 238, 255, 0.1);
}

.ncs-add-row .ncs-btn {
  padding: 13px 28px;
  min-width: 100px;
}

/* Search results dropdown */
.ncs-search-results {
  overflow-y: auto;
  max-height: 240px;
  padding: 6px 0;
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  border: 1px solid rgba(68, 238, 255, 0.08);
}

.ncs-search-results::-webkit-scrollbar {
  width: 4px;
}

.ncs-search-results::-webkit-scrollbar-thumb {
  background: rgba(68, 238, 255, 0.15);
  border-radius: 4px;
}

/* Requests list area - Centered empty state */
.ncs-requests-list {
  position: relative;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 20px 36px;
  display: flex;
  flex-direction: column;
}

/* Subtle background for empty requests area */
.ncs-requests-list::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Network connection nodes */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Ccircle cx='150' cy='150' r='40' fill='none' stroke='%2344eeff' stroke-width='0.4' opacity='0.035'/%3E%3Ccircle cx='150' cy='150' r='70' fill='none' stroke='%2344eeff' stroke-width='0.3' opacity='0.025'/%3E%3Ccircle cx='150' cy='150' r='100' fill='none' stroke='%2344eeff' stroke-width='0.2' opacity='0.018'/%3E%3Ccircle cx='80' cy='80' r='8' fill='none' stroke='%2344eeff' stroke-width='0.4' opacity='0.03'/%3E%3Ccircle cx='220' cy='100' r='6' fill='none' stroke='%2344eeff' stroke-width='0.4' opacity='0.025'/%3E%3Ccircle cx='100' cy='220' r='7' fill='none' stroke='%2344eeff' stroke-width='0.4' opacity='0.028'/%3E%3Cline x1='80' y1='80' x2='150' y2='150' stroke='%2344eeff' stroke-width='0.25' opacity='0.02'/%3E%3Cline x1='220' y1='100' x2='150' y2='150' stroke='%2344eeff' stroke-width='0.25' opacity='0.02'/%3E%3Cline x1='100' y1='220' x2='150' y2='150' stroke='%2344eeff' stroke-width='0.25' opacity='0.02'/%3E%3C/svg%3E"),
    /* Corner HUD brackets */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cpath d='M20 20 L50 20 L50 25 L25 25 L25 50 L20 50 Z' fill='none' stroke='%2344eeff' stroke-width='0.5' opacity='0.03'/%3E%3Cpath d='M380 20 L350 20 L350 25 L375 25 L375 50 L380 50 Z' fill='none' stroke='%2344eeff' stroke-width='0.5' opacity='0.03'/%3E%3Cpath d='M20 380 L50 380 L50 375 L25 375 L25 350 L20 350 Z' fill='none' stroke='%2344eeff' stroke-width='0.5' opacity='0.025'/%3E%3Cpath d='M380 380 L350 380 L350 375 L375 375 L375 350 L380 350 Z' fill='none' stroke='%2344eeff' stroke-width='0.5' opacity='0.025'/%3E%3C/svg%3E");
  background-size: 600px 600px, 800px 800px;
  background-position: center, center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

.ncs-requests-list > * {
  position: relative;
  z-index: 1;
}

/* Empty state inside requests list - Centered */
.ncs-requests-list .ncs-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px 20px;
}

.ncs-requests-list::-webkit-scrollbar {
  width: 4px;
}

.ncs-requests-list::-webkit-scrollbar-thumb {
  background: rgba(68, 238, 255, 0.12);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   CHAT PAGE — PREMIUM COMMUNICATION INTERFACE
   Futuristic messaging system with cyberpunk aesthetics
   ═══════════════════════════════════════════════════════════ */

/* Chat page body with communication-focused background */
#ncsPageChat .ncs-page-body {
  position: relative;
  background: linear-gradient(135deg, rgba(3, 3, 12, 0.98) 0%, rgba(6, 4, 16, 0.99) 100%);
}

#ncsPageChat .ncs-page-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Signal wave pattern */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Cpath d='M0 50 Q25 30 50 50 T100 50 T150 50 T200 50' stroke='%2344eeff' stroke-width='0.5' fill='none' opacity='0.03'/%3E%3Cpath d='M0 60 Q25 40 50 60 T100 60 T150 60 T200 60' stroke='%23aa44ff' stroke-width='0.5' fill='none' opacity='0.02'/%3E%3C/svg%3E"),
    /* HUD circles */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Ccircle cx='150' cy='150' r='80' stroke='%2344eeff' stroke-width='0.5' fill='none' opacity='0.02'/%3E%3Ccircle cx='150' cy='150' r='120' stroke='%2344eeff' stroke-width='0.3' fill='none' opacity='0.015'/%3E%3C/svg%3E");
  background-position: 0 0, center;
  pointer-events: none;
  z-index: 0;
}

/* Chat sidebar enhancement */
#ncsPageChat .ncs-sidebar {
  background: linear-gradient(180deg, rgba(8, 10, 22, 0.95) 0%, rgba(4, 6, 16, 0.98) 100%);
  border-right: 1px solid rgba(68, 238, 255, 0.08);
  position: relative;
}

#ncsPageChat .ncs-sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3Cpattern id='grid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 20 0 L 0 0 0 20' fill='none' stroke='%2344eeff' stroke-width='0.3' opacity='0.04'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23grid)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

#ncsPageChat .ncs-sidebar > * {
  position: relative;
  z-index: 1;
}

/* Conversation row — premium styling */
.ncs-conv-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  border-radius: 14px;
  margin: 4px 10px;
  border: 1px solid transparent;
  background: rgba(68, 238, 255, 0.02);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Subtle gradient overlay on hover */
.ncs-conv-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(68, 238, 255, 0.08) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 14px;
}

.ncs-conv-row:hover {
  background: rgba(68, 238, 255, 0.06);
  border-color: rgba(68, 238, 255, 0.15);
  transform: translateX(6px);
  box-shadow:
    0 4px 24px rgba(68, 238, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ncs-conv-row:hover::before {
  opacity: 1;
}

/* Selected conversation */
.ncs-conv-row.selected {
  background: linear-gradient(135deg, rgba(68, 238, 255, 0.1) 0%, rgba(170, 68, 255, 0.06) 100%);
  border-color: rgba(68, 238, 255, 0.25);
  box-shadow:
    0 4px 20px rgba(68, 238, 255, 0.12),
    inset 0 0 20px rgba(68, 238, 255, 0.03);
}

.ncs-conv-row.selected::after {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--nc-cyan) 0%, var(--nc-purple) 100%);
  box-shadow: 0 0 12px var(--nc-cyan), 0 0 24px rgba(68, 238, 255, 0.4);
}

/* Avatar enhancement in chat */
.ncs-conv-row .ncs-av {
  position: relative;
  flex-shrink: 0;
}

/* Online indicator ring */
.ncs-conv-row .ncs-av.online::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--nc-green);
  border: 2px solid rgba(8, 10, 22, 1);
  box-shadow: 0 0 8px var(--nc-green);
  animation: onlinePulse 2s ease-in-out infinite;
}

@keyframes onlinePulse {
  0%, 100% { box-shadow: 0 0 8px var(--nc-green); }
  50% { box-shadow: 0 0 14px var(--nc-green), 0 0 20px rgba(0, 255, 136, 0.3); }
}

/* Conversation info */
.ncs-conv-info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.ncs-conv-name {
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--nc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

.ncs-conv-row:hover .ncs-conv-name {
  color: #fff;
}

.ncs-conv-row.selected .ncs-conv-name {
  color: var(--nc-cyan);
  text-shadow: 0 0 20px rgba(68, 238, 255, 0.4);
}

.ncs-conv-preview {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  color: rgba(180, 190, 230, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
}

.ncs-conv-row:hover .ncs-conv-preview {
  color: rgba(180, 190, 230, 0.7);
}

/* Unread badge — neon pulse */
.ncs-conv-badge {
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--nc-cyan) 0%, var(--nc-purple) 100%);
  color: #fff;
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 12px rgba(68, 238, 255, 0.6),
    0 0 24px rgba(68, 238, 255, 0.3);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(68, 238, 255, 0.6), 0 0 24px rgba(68, 238, 255, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 18px rgba(68, 238, 255, 0.8), 0 0 32px rgba(68, 238, 255, 0.4);
    transform: scale(1.05);
  }
}

/* Time indicator for conversations */
.ncs-conv-time {
  font-family: "Rajdhani", sans-serif;
  font-size: 10px;
  color: rgba(68, 238, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: absolute;
  top: 14px;
  right: 16px;
}
/* Chat window — immersive communication panel */
.ncs-chat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  position: relative;
  background: linear-gradient(180deg, rgba(6, 8, 18, 0.6) 0%, rgba(3, 3, 10, 0.8) 100%);
}

/* Subtle communication pattern background */
.ncs-chat-window::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Transmission lines */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Cline x1='0' y1='100' x2='400' y2='100' stroke='%2344eeff' stroke-width='0.3' opacity='0.02'/%3E%3Cline x1='0' y1='200' x2='400' y2='200' stroke='%2344eeff' stroke-width='0.3' opacity='0.02'/%3E%3C/svg%3E"),
    /* Corner HUD elements */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 20V0h20M60 0h20v20' stroke='%2344eeff' stroke-width='1' fill='none' opacity='0.04'/%3E%3C/svg%3E");
  background-position: 0 0, top right;
  pointer-events: none;
  z-index: 0;
}

/* Chat header — premium top bar */
.ncs-chat-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(68, 238, 255, 0.08);
  background: linear-gradient(180deg, rgba(10, 12, 26, 0.95) 0%, rgba(6, 8, 20, 0.9) 100%);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* Animated border glow */
.ncs-chat-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(68, 238, 255, 0.4), rgba(170, 68, 255, 0.3), transparent);
  animation: headerGlow 4s ease-in-out infinite;
}

@keyframes headerGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Corner brackets decoration */
.ncs-chat-header::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 24px;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M20 0h10v10M0 20v10h10' stroke='%2344eeff' stroke-width='1' fill='none' opacity='0.15'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Header avatar with glow */
.ncs-chat-header .ncs-av {
  box-shadow: 0 0 16px rgba(68, 238, 255, 0.2);
}

.ncs-chat-header .ncs-av.online {
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.3);
}

/* Chat header name */
.ncs-chat-header-name {
  font-family: "Orbitron", monospace;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px rgba(68, 238, 255, 0.3);
}

/* Status indicator */
.ncs-chat-header-status {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  color: rgba(180, 190, 230, 0.6);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

/* Online/offline dots */
.ncs-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nc-green);
  box-shadow: 0 0 8px var(--nc-green), 0 0 16px rgba(0, 255, 136, 0.4);
  animation: dotPulse 2s ease-in-out infinite;
}

.ncs-offline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(180, 190, 230, 0.3);
  border: 1px solid rgba(180, 190, 230, 0.2);
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}
/* Messages area — premium scrolling container */
.ncs-messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  position: relative;
  z-index: 1;
}

/* Premium scrollbar */
.ncs-messages-area::-webkit-scrollbar {
  width: 4px;
}

.ncs-messages-area::-webkit-scrollbar-track {
  background: rgba(68, 238, 255, 0.02);
  border-radius: 4px;
}

.ncs-messages-area::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(68, 238, 255, 0.2) 0%, rgba(170, 68, 255, 0.15) 100%);
  border-radius: 4px;
}

.ncs-messages-area::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(68, 238, 255, 0.35) 0%, rgba(170, 68, 255, 0.25) 100%);
}

/* Date divider — sleek separator */
.ncs-msg-date-div {
  text-align: center;
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  color: rgba(68, 238, 255, 0.5);
  padding: 16px 0;
  position: relative;
  margin: 8px 0;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.ncs-msg-date-div span {
  background: rgba(10, 12, 26, 0.95);
  padding: 6px 18px;
  border-radius: 20px;
  border: 1px solid rgba(68, 238, 255, 0.12);
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.ncs-msg-date-div::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(68, 238, 255, 0.1), transparent);
}

/* Message container */
.ncs-msg {
  display: flex;
  flex-direction: column;
  max-width: 70%;
  margin-bottom: 4px;
  animation: msgSlideIn 0.3s var(--nc-spring);
}

@keyframes msgSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ncs-msg.mine {
  align-items: flex-end;
  margin-left: auto;
}

.ncs-msg.theirs {
  align-items: flex-start;
  margin-right: auto;
}

/* Message bubble — premium styling */
.ncs-msg-bubble {
  padding: 13px 18px;
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  max-width: 100%;
  position: relative;
  transition: all 0.2s ease;
}

/* Own messages — cyan/purple gradient */
.ncs-msg.mine .ncs-msg-bubble {
  background: linear-gradient(135deg, rgba(68, 238, 255, 0.18) 0%, rgba(100, 120, 255, 0.12) 50%, rgba(170, 68, 255, 0.08) 100%);
  border: 1px solid rgba(68, 238, 255, 0.25);
  border-radius: 20px 20px 6px 20px;
  color: #f0f6ff;
  box-shadow:
    0 4px 20px rgba(68, 238, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ncs-msg.mine .ncs-msg-bubble:hover {
  box-shadow:
    0 6px 28px rgba(68, 238, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateX(-2px);
}

/* Their messages — subtle glass effect */
.ncs-msg.theirs .ncs-msg-bubble {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px 20px 20px 6px;
  color: var(--nc-text);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.ncs-msg.theirs .ncs-msg-bubble:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(2px);
}

/* Message timestamp */
.ncs-msg-time {
  font-family: "Rajdhani", sans-serif;
  font-size: 10px;
  color: rgba(68, 238, 255, 0.4);
  margin-top: 5px;
  padding: 0 6px;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
}

.ncs-msg:hover .ncs-msg-time {
  color: rgba(68, 238, 255, 0.6);
}

/* Load more button */
.ncs-load-more-btn {
  display: block;
  margin: 0 auto 20px;
  padding: 10px 24px;
  background: rgba(68, 238, 255, 0.06);
  border: 1px solid rgba(68, 238, 255, 0.15);
  border-radius: 20px;
  color: rgba(68, 238, 255, 0.7);
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ncs-load-more-btn:hover {
  background: rgba(68, 238, 255, 0.12);
  border-color: rgba(68, 238, 255, 0.3);
  color: var(--nc-cyan);
  box-shadow: 0 0 20px rgba(68, 238, 255, 0.15);
}
/* Input bar — PREMIUM TRANSMISSION INTERFACE */
.ncs-input-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  border-top: 1px solid rgba(68, 238, 255, 0.08);
  background: linear-gradient(180deg, rgba(8, 10, 22, 0.95) 0%, rgba(4, 6, 16, 0.98) 100%);
  flex-shrink: 0;
  z-index: 2;
}

/* Animated top border */
.ncs-input-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(68, 238, 255, 0.4), rgba(170, 68, 255, 0.3), transparent);
}

/* Side decoration */
.ncs-input-bar::after {
  content: '';
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M0 10V0h10M10 20H20V10' stroke='%2344eeff' stroke-width='1' fill='none' opacity='0.12'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Message input — sleek futuristic field */
.ncs-msg-input {
  flex: 1;
  padding: 14px 22px;
  background: rgba(68, 238, 255, 0.03);
  border: 1.5px solid rgba(68, 238, 255, 0.12);
  border-radius: 14px;
  color: var(--nc-text);
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: all 0.25s ease;
}

.ncs-msg-input:focus {
  border-color: rgba(68, 238, 255, 0.4);
  background: rgba(68, 238, 255, 0.06);
  box-shadow:
    0 0 24px rgba(68, 238, 255, 0.15),
    0 0 48px rgba(68, 238, 255, 0.05),
    inset 0 0 20px rgba(68, 238, 255, 0.03);
}

.ncs-msg-input::placeholder {
  color: rgba(180, 190, 230, 0.4);
  font-weight: 400;
  letter-spacing: 0.3px;
}
/* Send Button — PREMIUM ENERGY STYLE */
.ncs-send-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border: none;
  background: linear-gradient(135deg, var(--nc-cyan) 0%, #5588ff 50%, var(--nc-purple) 100%);
  background-size: 200% 200%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow:
    0 0 20px rgba(68, 238, 255, 0.4),
    0 0 40px rgba(68, 136, 255, 0.15);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: sendGradient 4s ease infinite;
}

@keyframes sendGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Inner glow */
.ncs-send-btn::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2), transparent 70%);
  border-radius: 12px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

/* Outer ring */
.ncs-send-btn::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1.5px solid rgba(68, 238, 255, 0.25);
  border-radius: 17px;
  opacity: 0;
  transition: all 0.2s ease;
}

.ncs-send-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow:
    0 0 32px rgba(68, 238, 255, 0.6),
    0 0 64px rgba(68, 136, 255, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.3);
}

.ncs-send-btn:hover::before {
  opacity: 1;
}

.ncs-send-btn:hover::after {
  opacity: 1;
  inset: -5px;
}

.ncs-send-btn:active {
  transform: scale(0.95);
}

.ncs-send-btn svg {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
  z-index: 1;
  transition: transform 0.2s ease;
}

.ncs-send-btn:hover svg {
  transform: translateX(2px);
}

/* Empty conversation state — premium design */
.ncs-no-conv {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 60px;
  color: rgba(180, 190, 230, 0.5);
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  text-align: center;
  position: relative;
  line-height: 1.6;
}

/* Background HUD decoration */
.ncs-no-conv::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='100' cy='100' r='60' stroke='%2344eeff' stroke-width='0.5' fill='none' opacity='0.06'/%3E%3Ccircle cx='100' cy='100' r='80' stroke='%2344eeff' stroke-width='0.3' fill='none' opacity='0.04'/%3E%3Ccircle cx='100' cy='100' r='95' stroke='%23aa44ff' stroke-width='0.3' fill='none' opacity='0.03'/%3E%3Cline x1='40' y1='100' x2='160' y2='100' stroke='%2344eeff' stroke-width='0.3' opacity='0.05'/%3E%3Cline x1='100' y1='40' x2='100' y2='160' stroke='%2344eeff' stroke-width='0.3' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  animation: hudRotate 60s linear infinite;
}

@keyframes hudRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Corner brackets */
.ncs-no-conv::after {
  content: '';
  position: absolute;
  inset: 40px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cpath d='M0 30V0h30M%23W-30 0h30v30M%23W 0V%23H-%30h-30M30 %23HH%23H-30v-30' stroke='%2344eeff' stroke-width='1' fill='none' opacity='0.06'/%3E%3C/svg%3E".replace(/%23W/g, '100%').replace(/%23H/g, '100%'));
  pointer-events: none;
}

.ncs-no-conv-icon {
  font-size: 52px;
  opacity: 0.3;
  filter: grayscale(0.3);
  animation: iconFloat 4s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.ncs-no-conv-title {
  font-family: "Orbitron", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(68, 238, 255, 0.5);
  text-transform: uppercase;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   CHAT PAGE — RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #ncsPageChat .ncs-sidebar {
    width: 240px;
    min-width: 240px;
  }

  .ncs-conv-row {
    padding: 12px 14px;
    gap: 12px;
  }

  .ncs-chat-header {
    padding: 14px 20px;
  }

  .ncs-messages-area {
    padding: 20px 22px;
  }

  .ncs-input-bar {
    padding: 14px 20px;
  }
}

@media (max-width: 768px) {
  #ncsPageChat .ncs-page-body {
    flex-direction: column;
  }

  #ncsPageChat .ncs-sidebar {
    width: 100%;
    max-height: 35vh;
    border-right: none;
    border-bottom: 1px solid rgba(68, 238, 255, 0.1);
  }

  .ncs-chat-window {
    min-height: 50vh;
  }

  .ncs-conv-row {
    margin: 3px 8px;
    padding: 10px 12px;
  }

  .ncs-conv-name {
    font-size: 14px;
  }

  .ncs-msg-bubble {
    padding: 11px 14px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .ncs-chat-header {
    padding: 12px 16px;
    gap: 12px;
  }

  .ncs-chat-header-name {
    font-size: 13px;
  }

  .ncs-messages-area {
    padding: 16px;
  }

  .ncs-input-bar {
    padding: 12px 16px;
    gap: 10px;
  }

  .ncs-msg-input {
    padding: 12px 16px;
    font-size: 13px;
  }

  .ncs-send-btn {
    width: 42px;
    height: 42px;
  }

  .ncs-msg {
    max-width: 85%;
  }

  .ncs-no-conv {
    padding: 40px 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   CLANS PAGE — NEXT-GEN TACTICAL HUD
   Premium AAA Cyberpunk Interface · Military-Grade Aesthetics
   ═══════════════════════════════════════════════════════════ */

/* ── Global Clans Ambient Animations ────────────────────────── */
@keyframes ncsScanLine {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}
@keyframes ncsDataStream {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}
@keyframes ncsTacticalPulse {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(170, 68, 255, 0.1),
      inset 0 0 30px rgba(170, 68, 255, 0.02);
  }
  50% {
    box-shadow:
      0 0 40px rgba(170, 68, 255, 0.2),
      inset 0 0 50px rgba(170, 68, 255, 0.04);
  }
}
@keyframes ncsCornerFlicker {
  0%,
  90%,
  100% {
    opacity: 1;
  }
  92% {
    opacity: 0.4;
  }
  94% {
    opacity: 1;
  }
  96% {
    opacity: 0.6;
  }
}
@keyframes ncsEnergyFlow {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
@keyframes ncsRadarSweep {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ncsGlitch {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(20% 0 60% 0);
    transform: translate(-2px, 1px);
  }
  40% {
    clip-path: inset(40% 0 30% 0);
    transform: translate(2px, -1px);
  }
  60% {
    clip-path: inset(70% 0 10% 0);
    transform: translate(-1px, 2px);
  }
  80% {
    clip-path: inset(10% 0 80% 0);
    transform: translate(1px, -2px);
  }
}

/* Tactical sidebar navigation */
.ncs-clan-sidenav {
  position: relative;
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 12px;
  gap: 6px;
  border-right: 1px solid rgba(170, 68, 255, 0.15);
  background: linear-gradient(
    180deg,
    rgba(8, 4, 18, 0.98) 0%,
    rgba(4, 2, 12, 0.98) 100%
  );
  overflow-y: auto;
}
/* Energy line on right edge */
.ncs-clan-sidenav::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--nc-purple) 0%,
    rgba(170, 68, 255, 0.3) 50%,
    transparent 100%
  );
}
/* NAVIGATION label */
.ncs-clan-sidenav::after {
  content: "NAVIGATION";
  position: absolute;
  top: 10px;
  left: 12px;
  font-family: "Orbitron", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: rgba(170, 68, 255, 0.35);
}

/* Tactical nav buttons */
.ncs-sidenav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.02);
  color: var(--nc-muted);
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  width: 100%;
  clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% 100%,
    10px 100%,
    0 calc(100% - 10px)
  );
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
/* Active indicator bar */
.ncs-sidenav-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--nc-purple);
  transform: scaleY(0);
  transition: transform 0.2s ease;
  box-shadow: 0 0 12px var(--nc-purple);
}
/* Corner accents */
.ncs-sidenav-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  transition: border-color 0.2s;
}
.ncs-sidenav-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(170, 68, 255, 0.1) 0%,
    rgba(170, 68, 255, 0.04) 100%
  );
  color: var(--nc-text);
  border-color: rgba(170, 68, 255, 0.25);
  transform: translateX(6px);
  box-shadow:
    0 0 20px rgba(170, 68, 255, 0.08),
    inset 0 0 12px rgba(170, 68, 255, 0.02);
}
.ncs-sidenav-btn:hover::after {
  border-color: rgba(170, 68, 255, 0.5);
}
.ncs-sidenav-btn:hover .ncs-sidenav-icon {
  filter: drop-shadow(0 0 6px rgba(170, 68, 255, 0.6));
}
.ncs-sidenav-btn.active {
  background: linear-gradient(
    135deg,
    rgba(170, 68, 255, 0.12) 0%,
    rgba(170, 68, 255, 0.04) 100%
  );
  border-color: rgba(170, 68, 255, 0.35);
  color: var(--nc-purple);
  box-shadow:
    0 0 25px rgba(170, 68, 255, 0.1),
    inset 0 0 15px rgba(170, 68, 255, 0.03);
}
.ncs-sidenav-btn.active::before {
  transform: scaleY(1);
}
.ncs-sidenav-btn.active::after {
  border-color: var(--nc-purple);
}
.ncs-sidenav-btn.active .ncs-sidenav-icon {
  filter: drop-shadow(0 0 8px var(--nc-purple));
  animation: ncsHoloFlicker 4s linear infinite;
}
.ncs-sidenav-icon {
  font-size: 18px;
  flex-shrink: 0;
  transition: filter 0.2s;
}

@keyframes ncsHoloFlicker {
  0%,
  100% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  93% {
    opacity: 0.7;
  }
  94% {
    opacity: 1;
  }
  96% {
    opacity: 0.85;
  }
  97% {
    opacity: 1;
  }
}

/* Main content area with scan lines */
.ncs-clan-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 28px;
  gap: 20px;
  min-width: 0;
  background: linear-gradient(
    135deg,
    rgba(170, 68, 255, 0.015) 0%,
    transparent 30%
  );
}
/* Scan line overlay */
.ncs-clan-content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.03) 3px,
    rgba(0, 0, 0, 0.03) 4px
  );
}
.ncs-clan-content::-webkit-scrollbar {
  width: 3px;
}
.ncs-clan-content::-webkit-scrollbar-thumb {
  background: rgba(170, 68, 255, 0.2);
  border-radius: 99px;
}
/* Clan cards — TACTICAL DOSSIER STYLE */
.ncs-clan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.ncs-clan-card {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(170, 68, 255, 0.03) 0%,
    rgba(12, 10, 26, 0.98) 30%
  );
  padding: 22px;
  cursor: pointer;
  overflow: hidden;
  clip-path: polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% 100%,
    20px 100%,
    0 calc(100% - 20px)
  );
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(170, 68, 255, 0.15);
}
/* Corner decorations */
.ncs-clan-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    rgba(170, 68, 255, 0.1) 50%
  );
  pointer-events: none;
  z-index: 2;
}
.ncs-clan-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    -45deg,
    transparent 50%,
    rgba(170, 68, 255, 0.1) 50%
  );
  pointer-events: none;
  z-index: 2;
}
.ncs-clan-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(170, 68, 255, 0.5);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.6),
    0 0 50px rgba(170, 68, 255, 0.2),
    0 0 100px rgba(170, 68, 255, 0.08),
    inset 0 0 30px rgba(170, 68, 255, 0.04);
  animation: ncsTacticalPulse 2s ease-in-out infinite;
}
.ncs-clan-card:hover::before,
.ncs-clan-card:hover::after {
  animation: ncsCornerFlicker 1.5s linear infinite;
}
/* Dossier label */
.ncs-clan-card-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  padding-top: 12px;
}

/* Holographic emblem */
.ncs-clan-emblem {
  position: relative;
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7));
  animation: ncsHoloFlicker 5s linear infinite;
}

.ncs-clan-card-name {
  font-family: "Orbitron", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--nc-text);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}
.ncs-clan-tag-lg {
  font-family: "Orbitron", monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--nc-purple);
  letter-spacing: 0.18em;
  background: rgba(170, 68, 255, 0.12);
  border: 1px solid rgba(170, 68, 255, 0.3);
  padding: 3px 10px;
  display: inline-block;
  margin-top: 6px;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.ncs-clan-card-desc {
  font-family: "Rajdhani", sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  margin: 8px 0 14px;
  line-height: 1.6;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Stats with tactical styling */
.ncs-clan-card-stats {
  display: flex;
  gap: 12px;
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--nc-cyan);
}
.ncs-clan-card-stats span {
  text-shadow: 0 0 10px rgba(68, 238, 255, 0.4);
}
.ncs-clan-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(170, 68, 255, 0.1);
}
.ncs-clan-card-leader {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  color: var(--nc-muted);
}
.ncs-clan-open-badge {
  font-family: "Orbitron", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  background: linear-gradient(
    135deg,
    rgba(0, 255, 136, 0.12) 0%,
    rgba(0, 255, 136, 0.04) 100%
  );
  color: var(--nc-green);
  border: 1px solid rgba(0, 255, 136, 0.3);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.ncs-clan-invite-badge {
  font-family: "Orbitron", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--nc-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
/* My Clan hero — COMMAND CENTER STYLE */
.ncs-myclan-hero {
  position: relative;
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.02) 0%,
    rgba(16, 8, 36, 0.98) 30%,
    rgba(10, 6, 24, 0.98) 100%
  );
  border: 1px solid rgba(255, 215, 0, 0.2);
  clip-path: polygon(
    0 0,
    calc(100% - 30px) 0,
    100% 30px,
    100% 100%,
    30px 100%,
    0 calc(100% - 30px)
  );
}
/* Corner decorations */
.ncs-myclan-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    rgba(255, 215, 0, 0.08) 50%
  );
  pointer-events: none;
  z-index: 2;
}
.ncs-myclan-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(
    -45deg,
    transparent 50%,
    rgba(255, 215, 0, 0.08) 50%
  );
  pointer-events: none;
  z-index: 2;
}
/* Ambient glow */
.ncs-myclan-hero-glow {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.12), transparent 60%);
  pointer-events: none;
  filter: blur(40px);
  animation: ncsPulseGlow 4s ease-in-out infinite;
}
@keyframes ncsPulseGlow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.15);
  }
}
/* Secondary ambient glow - cyan */
.ncs-myclan-hero-glow-secondary {
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 180px;
  height: 180px;
  background: radial-gradient(
    circle,
    rgba(68, 238, 255, 0.08),
    transparent 60%
  );
  pointer-events: none;
  filter: blur(35px);
  animation: ncsPulseGlow 5s ease-in-out infinite reverse;
}
/* Animated energy border */
.ncs-myclan-energy-border {
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  clip-path: polygon(
    0 0,
    calc(100% - 30px) 0,
    100% 30px,
    100% 100%,
    30px 100%,
    0 calc(100% - 30px)
  );
}
.ncs-myclan-energy-border::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(255, 215, 0, 0.4),
    transparent,
    rgba(68, 238, 255, 0.3),
    transparent
  );
  animation: ncsRadarSweep 8s linear infinite;
}
/* Tactical data stream background */
.ncs-myclan-hero-datastream {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 10px,
    rgba(255, 215, 0, 0.5) 10px,
    rgba(255, 215, 0, 0.5) 11px
  );
  animation: ncsDataStream 20s linear infinite;
}

/* HOLOGRAPHIC EMBLEM */
.ncs-myclan-emblem-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Outer rotating ring */
.ncs-myclan-emblem-wrap::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px dashed rgba(255, 215, 0, 0.25);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: ncsEmblemSpin 20s linear infinite;
}
/* Inner energy ring */
.ncs-myclan-emblem-wrap::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(68, 238, 255, 0.2);
  border-radius: 50%;
  animation: ncsEmblemSpin 15s linear infinite reverse;
}
.ncs-myclan-emblem {
  position: relative;
  font-size: 56px;
  flex-shrink: 0;
  line-height: 1;
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.9))
    drop-shadow(0 0 60px rgba(255, 215, 0, 0.4));
  animation:
    ncsEmblemFloat 4s ease-in-out infinite,
    ncsHoloFlicker 5s linear infinite;
  z-index: 2;
}
/* Holographic distortion layers */
.ncs-myclan-emblem::before {
  content: attr(data-emblem);
  position: absolute;
  top: 2px;
  left: 2px;
  color: rgba(68, 238, 255, 0.4);
  filter: blur(2px);
  animation: ncsGlitch 8s steps(1) infinite;
  pointer-events: none;
}
.ncs-myclan-emblem::after {
  content: attr(data-emblem);
  position: absolute;
  top: -2px;
  left: -2px;
  color: rgba(255, 0, 102, 0.3);
  filter: blur(2px);
  animation: ncsGlitch 8s steps(1) infinite reverse;
  pointer-events: none;
}
@keyframes ncsEmblemFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  50% {
    transform: translateY(-8px) rotate(1deg) scale(1.02);
  }
}

.ncs-myclan-info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.ncs-myclan-name {
  font-family: "Orbitron", monospace;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(
    90deg,
    #fff 0%,
    var(--nc-gold) 50%,
    var(--nc-purple) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ncsNameShimmer 6s ease infinite;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}
@keyframes ncsNameShimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.ncs-myclan-tag {
  font-family: "Orbitron", monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--nc-gold);
  letter-spacing: 0.25em;
  margin: 8px 0 14px;
  opacity: 0.9;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}
/* Stats as tactical readout */
.ncs-myclan-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.ncs-myclan-stat {
  font-family: "Orbitron", monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--nc-cyan);
  letter-spacing: 0.05em;
  padding: 6px 12px;
  background: rgba(68, 238, 255, 0.05);
  border: 1px solid rgba(68, 238, 255, 0.15);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  text-shadow: 0 0 10px rgba(68, 238, 255, 0.4);
}
.ncs-myclan-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
/* Clan-specific action buttons */
.ncs-clan-action-btn {
  position: relative;
  padding: 12px 24px;
  border: 1.5px solid rgba(255, 215, 0, 0.35);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.08) 0%,
    rgba(255, 215, 0, 0.02) 50%,
    rgba(255, 215, 0, 0.06) 100%
  );
  color: var(--nc-gold);
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  );
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}
.ncs-clan-action-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 215, 0, 0.12),
    transparent
  );
  transition: left 0.4s ease;
}
.ncs-clan-action-btn:hover {
  border-color: rgba(255, 215, 0, 0.7);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(255, 215, 0, 0.05) 50%,
    rgba(255, 215, 0, 0.12) 100%
  );
  box-shadow:
    0 0 30px rgba(255, 215, 0, 0.3),
    0 0 60px rgba(255, 215, 0, 0.1);
  transform: translateY(-2px);
}
.ncs-clan-action-btn:hover::before {
  left: 100%;
}
/* Danger variant for leave/kick actions */
.ncs-clan-action-btn--danger {
  border-color: rgba(255, 0, 102, 0.35);
  background: linear-gradient(
    135deg,
    rgba(255, 0, 102, 0.08) 0%,
    rgba(255, 0, 102, 0.02) 50%,
    rgba(255, 0, 102, 0.06) 100%
  );
  color: var(--nc-pink);
  text-shadow: 0 0 12px rgba(255, 0, 102, 0.5);
}
.ncs-clan-action-btn--danger:hover {
  border-color: rgba(255, 0, 102, 0.7);
  background: linear-gradient(
    135deg,
    rgba(255, 0, 102, 0.15) 0%,
    rgba(255, 0, 102, 0.05) 50%,
    rgba(255, 0, 102, 0.12) 100%
  );
  box-shadow:
    0 0 30px rgba(255, 0, 102, 0.3),
    0 0 60px rgba(255, 0, 102, 0.1);
}
.ncs-clan-action-btn--danger::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 0, 102, 0.12),
    transparent
  );
}
/* Purple variant */
.ncs-clan-action-btn--purple {
  border-color: rgba(170, 68, 255, 0.35);
  background: linear-gradient(
    135deg,
    rgba(170, 68, 255, 0.08) 0%,
    rgba(170, 68, 255, 0.02) 50%,
    rgba(170, 68, 255, 0.06) 100%
  );
  color: var(--nc-purple);
  text-shadow: 0 0 12px rgba(170, 68, 255, 0.5);
}
.ncs-clan-action-btn--purple:hover {
  border-color: rgba(170, 68, 255, 0.7);
  background: linear-gradient(
    135deg,
    rgba(170, 68, 255, 0.15) 0%,
    rgba(170, 68, 255, 0.05) 50%,
    rgba(170, 68, 255, 0.12) 100%
  );
  box-shadow:
    0 0 30px rgba(170, 68, 255, 0.3),
    0 0 60px rgba(170, 68, 255, 0.1);
}
.ncs-clan-action-btn--purple::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(170, 68, 255, 0.12),
    transparent
  );
}

/* ── Invite Section — TACTICAL RECRUITMENT ─────────────────── */
.ncs-invite-section {
  position: relative;
  padding: 24px;
  background: linear-gradient(
    135deg,
    rgba(0, 255, 136, 0.02) 0%,
    rgba(8, 6, 18, 0.95) 30%
  );
  border: 1px solid rgba(0, 255, 136, 0.15);
  clip-path: polygon(
    15px 0,
    calc(100% - 15px) 0,
    100% 15px,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    15px 100%,
    0 calc(100% - 15px),
    0 15px
  );
}
.ncs-invite-section::before {
  content: "RECRUIT MEMBERS";
  position: absolute;
  top: 8px;
  left: 20px;
  font-family: "Orbitron", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: rgba(0, 255, 136, 0.4);
}
.ncs-invite-title {
  font-family: "Orbitron", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--nc-green);
  margin-bottom: 16px;
  text-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}
.ncs-invite-inputrow {
  display: flex;
  gap: 12px;
}
.ncs-invite-input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(0, 255, 136, 0.03);
  border: 1px solid rgba(0, 255, 136, 0.2);
  color: var(--nc-text);
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
  transition: all 0.2s ease;
}
.ncs-invite-input:focus {
  border-color: rgba(0, 255, 136, 0.5);
  background: rgba(0, 255, 136, 0.06);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.12);
}
.ncs-invite-input::placeholder {
  color: rgba(0, 255, 136, 0.35);
  letter-spacing: 0.03em;
}
.ncs-invite-btn {
  padding: 12px 20px;
  border: 1.5px solid rgba(0, 255, 136, 0.4);
  background: linear-gradient(
    135deg,
    rgba(0, 255, 136, 0.12) 0%,
    rgba(0, 255, 136, 0.04) 100%
  );
  color: var(--nc-green);
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
  transition: all 0.2s ease;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}
.ncs-invite-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 136, 0.22) 0%,
    rgba(0, 255, 136, 0.1) 100%
  );
  border-color: rgba(0, 255, 136, 0.7);
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
  transform: translateY(-2px);
}

/* ── Tactical Notification Badges ─────────────────────────── */
.ncs-clan-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: linear-gradient(135deg, var(--nc-pink), #cc0044);
  color: #fff;
  font-family: "Orbitron", monospace;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(
    4px 0,
    calc(100% - 4px) 0,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 4px) 100%,
    4px 100%,
    0 calc(100% - 4px),
    0 4px
  );
  box-shadow: 0 0 15px rgba(255, 0, 102, 0.7);
  animation: ncsBadgePulse 2s ease-in-out infinite;
}
@keyframes ncsBadgePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
.ncs-clan-badge--gold {
  background: linear-gradient(135deg, var(--nc-gold), #cc9900);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}
.ncs-clan-badge--cyan {
  background: linear-gradient(135deg, var(--nc-cyan), #0088aa);
  box-shadow: 0 0 15px rgba(68, 238, 255, 0.7);
}

/* ── Loading States — TACTICAL DATA LOADING ─────────────────── */
.ncs-clan-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  gap: 20px;
}
.ncs-clan-loading-spinner {
  position: relative;
  width: 60px;
  height: 60px;
}
.ncs-clan-loading-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(170, 68, 255, 0.15);
  border-top-color: var(--nc-purple);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: ncsSpinnerRotate 1.2s linear infinite;
}
.ncs-clan-loading-spinner::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(68, 238, 255, 0.15);
  border-top-color: var(--nc-cyan);
  border-radius: 50%;
  animation: ncsSpinnerRotate 0.8s linear infinite reverse;
}
@keyframes ncsSpinnerRotate {
  to {
    transform: rotate(360deg);
  }
}
.ncs-clan-loading-text {
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(170, 68, 255, 0.5);
  animation: ncsHoloFlicker 2s linear infinite;
}

/* ── Empty States — NO DATA TERMINAL ──────────────────────── */
.ncs-clan-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  gap: 16px;
  text-align: center;
}
.ncs-clan-empty-icon {
  font-size: 48px;
  opacity: 0.15;
  filter: grayscale(1);
  animation: ncsEmptyFloat 4s ease-in-out infinite;
}
@keyframes ncsEmptyFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.ncs-clan-empty-title {
  font-family: "Orbitron", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--nc-muted);
}
.ncs-clan-empty-desc {
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.25);
  max-width: 280px;
  line-height: 1.5;
}

/* Members — TACTICAL ROSTER */
.ncs-member-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(68, 238, 255, 0.12);
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(68, 238, 255, 0.02) 0%,
    rgba(8, 6, 18, 0.95) 30%
  );
  clip-path: polygon(
    20px 0,
    100% 0,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    0 100%,
    0 20px
  );
}
/* Corner decorations */
.ncs-member-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    135deg,
    rgba(68, 238, 255, 0.08) 50%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 2;
}
.ncs-member-grid::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    -45deg,
    rgba(68, 238, 255, 0.08) 50%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 2;
}
/* Header label */
.ncs-member-header {
  padding: 14px 20px;
  background: rgba(68, 238, 255, 0.03);
  border-bottom: 1px solid rgba(68, 238, 255, 0.1);
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(68, 238, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ncs-member-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Active indicator */
.ncs-member-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.2s;
}
.ncs-member-row:hover {
  background: rgba(68, 238, 255, 0.04);
  transform: translateX(4px);
}
.ncs-member-row:hover::before {
  background: var(--nc-cyan);
  box-shadow: 0 0 10px var(--nc-cyan);
}
.ncs-member-row + .ncs-member-row {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}
.ncs-member-info {
  flex: 1;
  min-width: 0;
}
.ncs-member-name {
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--nc-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ncs-member-sub {
  font-family: "Orbitron", monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--nc-muted);
  margin-top: 3px;
  letter-spacing: 0.05em;
}
/* Role badges with angular style */
.ncs-role {
  font-family: "Orbitron", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  text-transform: uppercase;
  flex-shrink: 0;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.ncs-role-leader {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(255, 215, 0, 0.05) 100%
  );
  color: var(--nc-gold);
  border: 1px solid rgba(255, 215, 0, 0.4);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.ncs-role-officer {
  background: linear-gradient(
    135deg,
    rgba(68, 238, 255, 0.12) 0%,
    rgba(68, 238, 255, 0.04) 100%
  );
  color: var(--nc-cyan);
  border: 1px solid rgba(68, 238, 255, 0.3);
}
.ncs-role-member {
  background: rgba(255, 255, 255, 0.04);
  color: var(--nc-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Create form — TACTICAL DATA ENTRY */
.ncs-create-form {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(170, 68, 255, 0.03) 0%,
    rgba(10, 8, 22, 0.95) 30%
  );
  border: 1px solid rgba(170, 68, 255, 0.2);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 560px;
  clip-path: polygon(
    0 0,
    calc(100% - 25px) 0,
    100% 25px,
    100% 100%,
    25px 100%,
    0 calc(100% - 25px)
  );
}
/* Corner decorations */
.ncs-create-form::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    rgba(170, 68, 255, 0.08) 50%
  );
  pointer-events: none;
}
.ncs-create-form::after {
  content: "CREATE CLAN";
  position: absolute;
  top: 12px;
  left: 20px;
  font-family: "Orbitron", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: rgba(170, 68, 255, 0.4);
}
.ncs-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ncs-field-label {
  font-family: "Orbitron", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--nc-purple);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ncs-field-hint {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  color: var(--nc-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.ncs-field-input {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--nc-text);
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% 100%,
    8px 100%,
    0 calc(100% - 8px)
  );
}
.ncs-field-input:focus {
  border-color: rgba(170, 68, 255, 0.4);
  background: rgba(170, 68, 255, 0.04);
  box-shadow:
    0 0 25px rgba(170, 68, 255, 0.1),
    inset 0 0 15px rgba(170, 68, 255, 0.02);
}
.ncs-field-input::placeholder {
  color: var(--nc-muted);
  font-weight: 400;
  letter-spacing: 0.05em;
}
.ncs-field-textarea {
  min-height: 90px;
  resize: none;
}
.ncs-field-tag {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-family: "Orbitron", monospace;
  font-size: 13px;
}
.ncs-field-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.ncs-emblem-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ncs-emblem-btn {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ncs-emblem-btn:hover {
  border-color: rgba(170, 68, 255, 0.5);
  background: rgba(170, 68, 255, 0.1);
  transform: scale(1.1);
}
.ncs-emblem-btn.selected {
  border-color: var(--nc-purple);
  background: rgba(170, 68, 255, 0.2);
  box-shadow: 0 0 20px rgba(170, 68, 255, 0.5);
  transform: scale(1.15);
}
.ncs-toggle {
  position: relative;
  width: 50px;
  height: 26px;
  flex-shrink: 0;
}
.ncs-toggle input {
  display: none;
}
.ncs-toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.25s ease;
  clip-path: polygon(
    6px 0,
    calc(100% - 6px) 0,
    100% 50%,
    calc(100% - 6px) 100%,
    6px 100%,
    0 50%
  );
}
.ncs-toggle input:checked ~ .ncs-toggle-track {
  background: rgba(68, 238, 255, 0.2);
  border-color: rgba(68, 238, 255, 0.5);
  box-shadow: 0 0 15px rgba(68, 238, 255, 0.3);
}
.ncs-toggle-thumb {
  position: absolute;
  top: 4px;
  left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.25s var(--nc-spring);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
.ncs-toggle input:checked ~ .ncs-toggle-track .ncs-toggle-thumb {
  left: 26px;
}
.ncs-toggle-label {
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nc-text);
}
/* Clan chat — ENCRYPTED TRANSMISSION TERMINAL */
.ncs-clanchat-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 0, 102, 0.15);
  background: linear-gradient(
    135deg,
    rgba(255, 0, 102, 0.02) 0%,
    rgba(8, 6, 18, 0.95) 30%
  );
  min-height: 400px;
  clip-path: polygon(
    0 0,
    calc(100% - 30px) 0,
    100% 30px,
    100% 100%,
    30px 100%,
    0 calc(100% - 30px)
  );
}
/* Corner decorations */
.ncs-clanchat-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    rgba(255, 0, 102, 0.06) 50%
  );
  pointer-events: none;
  z-index: 2;
}
.ncs-clanchat-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(
    -45deg,
    transparent 50%,
    rgba(255, 0, 102, 0.06) 50%
  );
  pointer-events: none;
  z-index: 2;
}
/* Chat header — TACTICAL COMMS INTERFACE */
.ncs-clanchat-header {
  position: relative;
  padding: 16px 24px;
  background: linear-gradient(
    90deg,
    rgba(255, 0, 102, 0.06) 0%,
    rgba(8, 6, 18, 0.9) 40%,
    rgba(255, 0, 102, 0.03) 100%
  );
  border-bottom: 1px solid rgba(255, 0, 102, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
/* Animated scan line in header */
.ncs-clanchat-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 0, 102, 0.08),
    transparent
  );
  animation: ncsEnergyFlow 4s linear infinite;
}
.ncs-clanchat-header-title {
  position: relative;
  font-family: "Orbitron", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--nc-pink);
  text-shadow: 0 0 15px rgba(255, 0, 102, 0.5);
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Transmission indicator */
.ncs-clanchat-header-title::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--nc-pink);
  border-radius: 50%;
  box-shadow:
    0 0 10px var(--nc-pink),
    0 0 20px rgba(255, 0, 102, 0.5);
  animation: ncsChatPulse 2s ease-in-out infinite;
}
@keyframes ncsChatPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.8);
  }
}
.ncs-clanchat-header-status {
  font-family: "Orbitron", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 0, 102, 0.6);
  animation: ncsHoloFlicker 3s linear infinite;
  text-shadow: 0 0 10px rgba(255, 0, 102, 0.3);
}
/* Messages area with noise */
.ncs-clanchat-messages {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.02) 2px,
    rgba(0, 0, 0, 0.02) 4px
  );
}
.ncs-clanchat-messages::-webkit-scrollbar {
  width: 3px;
}
.ncs-clanchat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 102, 0.2);
  border-radius: 99px;
}
/* Message bubbles — transmission packets */
.ncs-clan-msg {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  animation: ncsMsgAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes ncsMsgAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ncs-clan-msg-body {
  flex: 1;
  min-width: 0;
}
.ncs-clan-msg-from {
  font-family: "Orbitron", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--nc-pink);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 0 10px rgba(255, 0, 102, 0.4);
}
.ncs-clan-msg-from.role-leader {
  color: var(--nc-gold);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.ncs-clan-msg-from.role-officer {
  color: var(--nc-cyan);
  text-shadow: 0 0 10px rgba(68, 238, 255, 0.4);
}
/* Message text — encrypted packet style */
.ncs-clan-msg-text {
  position: relative;
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  word-break: break-word;
  background: rgba(255, 0, 102, 0.03);
  border: 1px solid rgba(255, 0, 102, 0.12);
  padding: 11px 16px;
  clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% 100%,
    10px 100%,
    0 calc(100% - 10px)
  );
}
/* Corner accent */
.ncs-clan-msg-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(255, 0, 102, 0.4);
  border-left: 1px solid rgba(255, 0, 102, 0.4);
}
.ncs-clan-msg-time {
  font-family: "Orbitron", monospace;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.2);
  margin-top: 5px;
}
/* Clan chat input bar — ENCRYPTED TRANSMISSION TERMINAL */
.ncs-clanchat-inputbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(
    180deg,
    rgba(255, 0, 102, 0.02) 0%,
    rgba(8, 4, 18, 0.95) 100%
  );
  border-top: 1px solid rgba(255, 0, 102, 0.15);
  flex-shrink: 0;
}
/* Animated transmission indicator */
.ncs-clanchat-inputbar::before {
  content: "SECURE CHANNEL";
  position: absolute;
  top: 4px;
  left: 20px;
  font-family: "Orbitron", monospace;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 0, 102, 0.35);
  animation: ncsHoloFlicker 4s linear infinite;
}
.ncs-clanchat-input {
  flex: 1;
  padding: 14px 18px;
  background: rgba(255, 0, 102, 0.03);
  border: 1px solid rgba(255, 0, 102, 0.2);
  color: var(--nc-text);
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  );
  transition: all 0.2s ease;
}
.ncs-clanchat-input:focus {
  border-color: rgba(255, 0, 102, 0.45);
  background: rgba(255, 0, 102, 0.06);
  box-shadow:
    0 0 25px rgba(255, 0, 102, 0.12),
    inset 0 0 15px rgba(255, 0, 102, 0.03);
}
.ncs-clanchat-input::placeholder {
  color: rgba(255, 0, 102, 0.3);
  font-weight: 400;
  letter-spacing: 0.03em;
}
/* Send button for clan chat */
.ncs-clanchat-sendbtn {
  position: relative;
  width: 48px;
  height: 48px;
  border: none;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 102, 0.15) 0%,
    rgba(255, 0, 102, 0.3) 100%
  );
  color: var(--nc-pink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 0 20px rgba(255, 0, 102, 0.3);
  transition: all 0.2s var(--nc-spring);
}
.ncs-clanchat-sendbtn:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 0, 102, 0.25) 0%,
    rgba(255, 0, 102, 0.45) 100%
  );
  box-shadow:
    0 0 35px rgba(255, 0, 102, 0.5),
    0 0 60px rgba(255, 0, 102, 0.2);
  transform: scale(1.1);
}
.ncs-clanchat-sendbtn:active {
  transform: scale(0.9);
}

/* ═══════════════════════════════════════════════════════════
   PROFILE PAGE
   ═══════════════════════════════════════════════════════════ */
.ncs-profile-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ncs-profile-wrap::-webkit-scrollbar {
  width: 3px;
}
.ncs-profile-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.15);
  border-radius: 99px;
}
/* Hero card */
.ncs-profile-hero {
  background: linear-gradient(
    135deg,
    rgba(16, 12, 30, 0.98),
    rgba(10, 8, 22, 0.98)
  );
  border-radius: 24px;
  padding: 36px;
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.ncs-profile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    var(--nc-gold),
    var(--nc-orange),
    var(--nc-pink),
    var(--nc-gold)
  );
  background-size: 300% 300%;
  animation: ncsHolo 8s ease infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}
.ncs-profile-hero::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.08), transparent 70%);
  pointer-events: none;
}
.ncs-profile-av-wrap {
  position: relative;
  flex-shrink: 0;
}
.ncs-profile-level-ring {
  position: absolute;
  inset: -8px;
  background: conic-gradient(
    var(--nc-gold) var(--xp-pct, 60%),
    rgba(255, 255, 255, 0.07) 0%
  );
  border-radius: 50%;
  animation: ncsRingSpin 10s linear infinite;
}
.ncs-profile-info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.ncs-profile-name {
  font-family: "Orbitron", monospace;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(
    90deg,
    #fff 0%,
    var(--nc-gold) 60%,
    var(--nc-orange) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 6px;
}
.ncs-profile-clan-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ncs-profile-clan-name {
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--nc-muted);
}
.ncs-xp-bar-wrap {
  margin-top: 4px;
}
.ncs-xp-bar-label {
  font-family: "Orbitron", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--nc-gold);
  opacity: 0.75;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.ncs-xp-bar-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.ncs-xp-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--nc-gold), var(--nc-orange));
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  transition: width 1s var(--nc-ease);
  animation: ncsXPShine 2s 0.5s ease infinite;
}
@keyframes ncsXPShine {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  }
}
/* Stats grid */
.ncs-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  flex-shrink: 0;
}
.ncs-stat-card {
  background: rgba(10, 8, 22, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.14s var(--nc-spring),
    box-shadow 0.14s;
}
.ncs-stat-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.4),
    0 0 20px var(--nc-stat-glow, rgba(68, 238, 255, 0.12));
}
.ncs-stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    var(--nc-stat-color, rgba(68, 238, 255, 0.04)),
    transparent
  );
  pointer-events: none;
}
.ncs-stat-num {
  font-family: "Orbitron", monospace;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: var(
    --nc-stat-grad,
    linear-gradient(90deg, var(--nc-cyan), #88ddff)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 6px;
}
.ncs-stat-label {
  font-family: "Orbitron", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--nc-muted);
  opacity: 0.7;
}
.ncs-stat-card-kills {
  --nc-stat-grad: linear-gradient(90deg, var(--nc-pink), #ff6688);
  --nc-stat-glow: rgba(255, 0, 102, 0.12);
  --nc-stat-color: rgba(255, 0, 102, 0.05);
}
.ncs-stat-card-waves {
  --nc-stat-grad: linear-gradient(90deg, var(--nc-cyan), #88eeff);
  --nc-stat-glow: rgba(68, 238, 255, 0.12);
  --nc-stat-color: rgba(68, 238, 255, 0.04);
}
.ncs-stat-card-level {
  --nc-stat-grad: linear-gradient(90deg, var(--nc-gold), var(--nc-orange));
  --nc-stat-glow: rgba(255, 215, 0, 0.12);
  --nc-stat-color: rgba(255, 215, 0, 0.04);
}
.ncs-stat-card-nex {
  --nc-stat-grad: linear-gradient(90deg, var(--nc-green), #88ffb8);
  --nc-stat-glow: rgba(0, 255, 136, 0.12);
  --nc-stat-color: rgba(0, 255, 136, 0.04);
}
/* Friends preview strip */
.ncs-friends-strip {
  flex-shrink: 0;
}
.ncs-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ncs-strip-title {
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--nc-cyan);
  opacity: 0.75;
}
.ncs-strip-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.ncs-strip-row::-webkit-scrollbar {
  height: 2px;
}
.ncs-strip-row::-webkit-scrollbar-thumb {
  background: rgba(68, 238, 255, 0.15);
  border-radius: 99px;
}
.ncs-strip-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.13s;
}
.ncs-strip-person:hover {
  transform: translateY(-3px);
}
.ncs-strip-name {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--nc-muted);
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   RANKS PAGE  (Leaderboard)
   ═══════════════════════════════════════════════════════════ */
.ncs-ranks-wrap {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ncs-ranks-wrap::-webkit-scrollbar {
  width: 3px;
}
.ncs-ranks-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 102, 0.15);
  border-radius: 99px;
}
/* Tab bar */
.ncs-rank-tabs {
  display: flex;
  gap: 4px;
  padding: 16px 28px 0;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(3, 3, 10, 0.6);
}
.ncs-rank-tab {
  padding: 10px 22px;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: none;
  background: rgba(255, 255, 255, 0.03);
  color: var(--nc-muted);
  font-family: "Orbitron", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition:
    background 0.13s,
    color 0.13s,
    border-color 0.13s;
}
.ncs-rank-tab:hover {
  background: rgba(255, 0, 102, 0.06);
  color: var(--nc-text);
}
.ncs-rank-tab.active {
  background: rgba(255, 0, 102, 0.1);
  border-color: rgba(255, 0, 102, 0.25);
  color: var(--nc-pink);
  box-shadow: 0 0 12px rgba(255, 0, 102, 0.1);
}
/* Podium */
.ncs-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  padding: 36px 28px 0;
  flex-shrink: 0;
}
.ncs-podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ncs-podium-slot-1 {
  order: 2;
}
.ncs-podium-slot-2 {
  order: 1;
}
.ncs-podium-slot-3 {
  order: 3;
}
.ncs-podium-crown {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
  animation: ncsEmblemFloat 3s ease-in-out infinite;
}
.ncs-podium-name {
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--nc-text);
  text-align: center;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ncs-podium-score {
  font-family: "Orbitron", monospace;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: center;
}
.ncs-podium-slot-1 .ncs-podium-score {
  color: var(--nc-gold);
  text-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
  font-size: 16px;
}
.ncs-podium-slot-2 .ncs-podium-score {
  color: #c0c8dd;
  text-shadow: 0 0 12px rgba(192, 200, 221, 0.5);
}
.ncs-podium-slot-3 .ncs-podium-score {
  color: #cd7f32;
  text-shadow: 0 0 12px rgba(205, 127, 50, 0.5);
}
.ncs-podium-base {
  width: 130px;
  border-radius: 14px 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Orbitron", monospace;
  font-size: 22px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}
.ncs-podium-slot-1 .ncs-podium-base {
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(255, 215, 0, 0.2),
    rgba(255, 215, 0, 0.06)
  );
  border: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.12);
  width: 150px;
}
.ncs-podium-slot-2 .ncs-podium-base {
  height: 86px;
  background: linear-gradient(
    180deg,
    rgba(192, 200, 221, 0.15),
    rgba(192, 200, 221, 0.04)
  );
  border: 1px solid rgba(192, 200, 221, 0.2);
}
.ncs-podium-slot-3 .ncs-podium-base {
  height: 68px;
  background: linear-gradient(
    180deg,
    rgba(205, 127, 50, 0.15),
    rgba(205, 127, 50, 0.04)
  );
  border: 1px solid rgba(205, 127, 50, 0.2);
}
/* Rankings table */
.ncs-ranks-table {
  flex: 1;
  padding: 20px 28px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ncs-rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(10, 8, 22, 0.6);
  transition:
    background 0.12s,
    transform 0.12s;
  position: relative;
}
.ncs-rank-row:hover {
  background: rgba(255, 0, 102, 0.05);
  transform: translateX(3px);
}
.ncs-rank-row.is-me {
  border-color: rgba(68, 238, 255, 0.2);
  background: rgba(68, 238, 255, 0.05);
}
.ncs-rank-num {
  font-family: "Orbitron", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--nc-muted);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}
.ncs-rank-row:nth-child(1) .ncs-rank-num {
  color: var(--nc-gold);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.ncs-rank-row:nth-child(2) .ncs-rank-num {
  color: #c0c8dd;
}
.ncs-rank-row:nth-child(3) .ncs-rank-num {
  color: #cd7f32;
}
.ncs-rank-info {
  flex: 1;
  min-width: 0;
}
.ncs-rank-name {
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--nc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ncs-rank-sub {
  font-family: "Rajdhani", sans-serif;
  font-size: 11px;
  color: var(--nc-muted);
  margin-top: 1px;
}
.ncs-rank-score {
  font-family: "Orbitron", monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--nc-pink);
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}
.ncs-rank-bar-wrap {
  width: 100px;
  flex-shrink: 0;
}
.ncs-rank-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}
.ncs-rank-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nc-pink), var(--nc-purple));
  box-shadow: 0 0 6px rgba(255, 0, 102, 0.5);
}
.ncs-me-badge {
  font-family: "Orbitron", monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--nc-cyan);
  background: rgba(68, 238, 255, 0.12);
  border: 1px solid rgba(68, 238, 255, 0.22);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ═══════════════════════════════════════════════════════════
   NAV BUTTONS
   ═══════════════════════════════════════════════════════════ */
.ncs-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(170, 68, 255, 0.28);
  background: rgba(170, 68, 255, 0.07);
  color: var(--nc-purple);
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition:
    background 0.14s,
    border-color 0.14s,
    box-shadow 0.14s,
    transform 0.1s;
}
.ncs-nav-btn:hover {
  background: rgba(170, 68, 255, 0.18);
  border-color: rgba(170, 68, 255, 0.58);
  box-shadow: 0 0 18px rgba(170, 68, 255, 0.3);
  transform: translateY(-1px);
}
.ncs-nav-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  color: var(--nc-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.13s,
    border-color 0.13s,
    color 0.13s,
    transform 0.1s;
}
.ncs-nav-icon-btn:hover {
  background: rgba(68, 238, 255, 0.1);
  border-color: rgba(68, 238, 255, 0.3);
  color: var(--nc-cyan);
  transform: translateY(-1px);
}
.ncs-nav-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--nc-pink), #bb0033);
  color: #fff;
  font-family: "Orbitron", monospace;
  font-size: 8px;
  font-weight: 700;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(255, 0, 102, 0.8);
  border: 2px solid #03030a;
  animation: ncsBadgePop 0.35s var(--nc-spring);
}

/* ═══════════════════════════════════════════════════════════
   FAB
   ═══════════════════════════════════════════════════════════ */
.ncs-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  color: #fff;
  background: linear-gradient(135deg, #00ccdd 0%, #7733ee 50%, #dd00aa 100%);
  background-size: 200% 200%;
  box-shadow:
    0 0 0 2px rgba(68, 238, 255, 0.18),
    0 0 24px rgba(68, 238, 255, 0.45),
    0 0 55px rgba(119, 51, 238, 0.25),
    0 6px 24px rgba(0, 0, 0, 0.6);
  transition:
    transform 0.2s var(--nc-spring),
    box-shadow 0.2s;
  animation:
    ncsFabPulse 3s ease-in-out infinite,
    ncsGradShift 5s ease infinite;
}
.ncs-fab svg {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}
.ncs-fab:hover {
  transform: scale(1.13) translateY(-3px);
  box-shadow:
    0 0 0 3px rgba(68, 238, 255, 0.4),
    0 0 36px rgba(68, 238, 255, 0.7),
    0 0 75px rgba(119, 51, 238, 0.4),
    0 12px 34px rgba(0, 0, 0, 0.65);
  animation: ncsGradShift 5s ease infinite;
}
.ncs-fab:active {
  transform: scale(0.93);
}
@keyframes ncsFabPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 2px rgba(68, 238, 255, 0.18),
      0 0 24px rgba(68, 238, 255, 0.45),
      0 0 55px rgba(119, 51, 238, 0.25),
      0 6px 24px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(68, 238, 255, 0.1),
      0 0 34px rgba(68, 238, 255, 0.55),
      0 0 75px rgba(119, 51, 238, 0.35),
      0 6px 24px rgba(0, 0, 0, 0.6);
  }
}
.ncs-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--nc-pink), #aa0033);
  color: #fff;
  font-family: "Orbitron", monospace;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(255, 0, 102, 1);
  border: 2.5px solid #03030a;
  animation: ncsBadgePop 0.35s var(--nc-spring);
}
@keyframes ncsBadgePop {
  0% {
    transform: scale(0) rotate(-15deg);
  }
  70% {
    transform: scale(1.28) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */
.ncs-toast-container {
  position: fixed;
  top: 76px;
  right: 18px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 340px;
}
.ncs-toast {
  background: rgba(6, 6, 18, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--nc-cyan);
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.65);
  pointer-events: all;
  opacity: 0;
  transform: translateX(22px);
  transition:
    opacity 0.28s var(--nc-ease),
    transform 0.28s var(--nc-ease);
}
.ncs-toast.ncs-toast-in {
  opacity: 1;
  transform: translateX(0);
}
.ncs-toast.ncs-toast-out {
  opacity: 0;
  transform: translateX(22px);
}
.ncs-toast-friend {
  border-left-color: var(--nc-cyan);
}
.ncs-toast-clan {
  border-left-color: var(--nc-purple);
}
.ncs-toast-dm {
  border-left-color: var(--nc-green);
}
.ncs-toast-error {
  border-left-color: var(--nc-pink);
}
.ncs-toast-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ncs-toast-msg {
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--nc-text);
  line-height: 1.45;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE  — Notebook · Tablet · Phone
   Breakpoints: 1200 · 1024 · 768 · 640 · 480 · 360
   ═══════════════════════════════════════════════════════════ */

/* ── Notebook (1025–1200px) ─────────────────────────────── */
@media (max-width: 1200px) {
  .ncs-sidebar {
    width: 260px;
  }
  .ncs-friends-right {
    min-width: 350px;
  }
  .ncs-panel-section {
    padding: 24px 28px 20px;
  }
  .ncs-add-row {
    max-width: 500px;
  }
  .ncs-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .ncs-podium-base {
    width: 120px;
  }
}

/* ── Small notebook / large tablet (769–1024px) ─────────── */
@media (max-width: 1024px) {
  .ncs-topbar {
    padding: 0 24px;
    height: 64px;
  }
  .ncs-topbar-title {
    font-size: 16px;
    letter-spacing: 0.18em;
  }
  .ncs-sidebar {
    width: 240px;
  }
  .ncs-friends-right {
    min-width: 300px;
  }
  .ncs-panel-section {
    padding: 22px 24px 18px;
  }
  .ncs-add-row {
    max-width: 450px;
  }
  .ncs-add-row .ncs-input {
    min-width: 220px;
  }
  .ncs-clan-sidenav {
    width: 160px;
  }
  .ncs-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .ncs-profile-hero {
    padding: 26px;
    gap: 22px;
  }
  .ncs-profile-name {
    font-size: 24px;
  }
  .ncs-podium {
    padding: 24px 20px 0;
    gap: 12px;
  }
  .ncs-podium-base {
    width: 110px;
  }
  .ncs-clan-content {
    padding: 22px;
  }
  .ncs-profile-wrap {
    padding: 28px;
  }
  .ncs-rank-tabs {
    padding: 12px 20px 0;
  }
  .ncs-ranks-table {
    padding: 16px 20px 22px;
  }
}

/* ── Tablet (481–768px) ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Topbar */
  .ncs-topbar {
    padding: 0 18px;
    height: 58px;
  }
  .ncs-topbar-title {
    font-size: 15px;
    letter-spacing: 0.14em;
  }
  .ncs-topbar-sub {
    display: none;
  }
  .ncs-topbar-icon {
    font-size: 22px;
  }

  /* Page layout: stack sidebar on top */
  .ncs-page-body {
    flex-direction: column;
  }
  .ncs-sidebar {
    width: 100%;
    max-height: 38vh;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .ncs-main {
    flex: 1;
    min-height: 0;
  }
  .ncs-friends-right {
    width: 100%;
    min-width: unset;
    border-left: none;
    border-top: 1px solid rgba(68, 238, 255, 0.08);
    max-height: 55vh;
  }
  .ncs-panel-section {
    padding: 20px 20px 16px;
  }
  .ncs-add-row {
    max-width: 100%;
  }
  .ncs-add-row .ncs-input {
    min-width: 180px;
  }
  .ncs-requests-list {
    padding: 16px 20px;
  }
  .ncs-requests-list .ncs-empty {
    min-height: 200px;
    padding: 30px 16px;
  }

  /* Clan sidenav: horizontal scroll */
  .ncs-clan-sidenav {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: auto;
    flex-shrink: 0;
    gap: 6px;
  }
  .ncs-sidenav-btn {
    min-width: max-content;
    padding: 10px 14px;
    clip-path: polygon(
      6px 0,
      calc(100% - 6px) 0,
      100% 6px,
      100% calc(100% - 6px),
      calc(100% - 6px) 100%,
      6px 100%,
      0 calc(100% - 6px),
      0 6px
    );
  }
  .ncs-clan-content {
    padding: 18px;
    gap: 16px;
  }

  /* Soften clip-paths for mobile */
  .ncs-clan-card {
    clip-path: polygon(
      0 0,
      calc(100% - 15px) 0,
      100% 15px,
      100% 100%,
      15px 100%,
      0 calc(100% - 15px)
    );
  }
  .ncs-myclan-hero {
    clip-path: polygon(
      0 0,
      calc(100% - 20px) 0,
      100% 20px,
      100% 100%,
      20px 100%,
      0 calc(100% - 20px)
    );
  }
  .ncs-clanchat-wrap {
    clip-path: polygon(
      0 0,
      calc(100% - 20px) 0,
      100% 20px,
      100% 100%,
      20px 100%,
      0 calc(100% - 20px)
    );
  }
  .ncs-btn {
    clip-path: polygon(
      6px 0,
      calc(100% - 6px) 0,
      100% 6px,
      100% calc(100% - 6px),
      calc(100% - 6px) 100%,
      6px 100%,
      0 calc(100% - 6px),
      0 6px
    );
    padding: 9px 16px;
  }
  .ncs-send-btn {
    width: 46px;
    height: 46px;
  }
  .ncs-invite-section {
    clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      10px 100%,
      0 calc(100% - 10px),
      0 10px
    );
    padding: 18px;
  }

  /* Profile */
  .ncs-profile-wrap {
    padding: 20px;
    gap: 20px;
  }
  .ncs-profile-hero {
    flex-direction: row;
    padding: 22px;
    gap: 18px;
  }
  .ncs-profile-name {
    font-size: 22px;
    letter-spacing: 0.06em;
  }
  .ncs-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .ncs-stat-num {
    font-size: 22px;
  }
  .ncs-av-xxl {
    width: 80px;
    height: 80px;
    font-size: 28px;
  }

  /* Ranks */
  .ncs-rank-tabs {
    padding: 10px 16px 0;
    gap: 4px;
  }
  .ncs-rank-tab {
    padding: 8px 14px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }
  .ncs-ranks-table {
    padding: 12px 16px 20px;
  }
  .ncs-rank-bar-wrap {
    display: none;
  }
  .ncs-podium {
    padding: 20px 16px 0;
    gap: 8px;
  }
  .ncs-podium-base {
    width: 100px;
  }
  .ncs-podium-slot-1 .ncs-podium-base {
    width: 120px;
  }

  /* Chat */
  .ncs-messages-area {
    padding: 16px 18px;
  }
  .ncs-input-bar {
    padding: 10px 14px;
  }
  .ncs-chat-header {
    padding: 12px 18px;
  }

  /* FAB */
  .ncs-fab {
    bottom: 16px;
    right: 16px;
    width: 54px;
    height: 54px;
  }

  /* Person rows */
  .ncs-person-row {
    padding: 8px 12px;
  }
  .ncs-conv-row {
    padding: 9px 12px;
  }
  .ncs-member-row {
    padding: 10px 14px;
  }
}

/* ── Phone (≤ 480px) ────────────────────────────────────── */
@media (max-width: 480px) {
  /* Topbar */
  .ncs-topbar {
    padding: 0 14px;
    height: 52px;
    gap: 10px;
  }
  .ncs-topbar-title {
    font-size: 13px;
    letter-spacing: 0.1em;
  }
  .ncs-topbar-icon {
    font-size: 20px;
  }
  .ncs-close-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
    top: 12px !important;
    right: 14px !important;
  }

  /* Sidebar: short list panel */
  .ncs-sidebar {
    max-height: 35vh;
  }

  /* Friends right panel */
  .ncs-friends-right {
    max-height: 55vh;
  }
  .ncs-panel-section {
    padding: 16px 14px 14px;
  }
  .ncs-add-row {
    flex-direction: column;
    gap: 10px;
  }
  .ncs-add-row .ncs-input {
    min-width: unset;
    width: 100%;
  }
  .ncs-add-row .ncs-btn {
    width: 100%;
    justify-content: center;
  }
  .ncs-requests-list {
    padding: 14px;
  }
  .ncs-requests-list .ncs-empty {
    min-height: 150px;
    padding: 24px 12px;
  }
  .ncs-search-results {
    max-height: 160px;
  }

  /* Clan - simplified clip-paths for phone */
  .ncs-clan-sidenav {
    padding: 8px;
  }
  .ncs-sidenav-btn {
    padding: 8px 10px;
    font-size: 12px;
    gap: 7px;
    clip-path: polygon(
      4px 0,
      calc(100% - 4px) 0,
      100% 4px,
      100% calc(100% - 4px),
      calc(100% - 4px) 100%,
      4px 100%,
      0 calc(100% - 4px),
      0 4px
    );
  }
  .ncs-sidenav-icon {
    font-size: 15px;
  }
  .ncs-clan-content {
    padding: 12px;
    gap: 12px;
  }
  .ncs-clan-grid {
    grid-template-columns: 1fr;
  }
  .ncs-clan-card {
    padding: 16px;
    clip-path: polygon(
      0 0,
      calc(100% - 12px) 0,
      100% 12px,
      100% 100%,
      12px 100%,
      0 calc(100% - 12px)
    );
  }
  .ncs-myclan-hero {
    flex-direction: column;
    padding: 20px;
    gap: 14px;
    text-align: center;
    clip-path: polygon(
      0 0,
      calc(100% - 15px) 0,
      100% 15px,
      100% 100%,
      15px 100%,
      0 calc(100% - 15px)
    );
  }
  .ncs-myclan-emblem {
    font-size: 48px;
  }
  .ncs-myclan-name {
    font-size: 18px;
  }
  .ncs-myclan-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .ncs-btn {
    padding: 8px 14px;
    font-size: 9px;
    clip-path: polygon(
      5px 0,
      calc(100% - 5px) 0,
      100% 5px,
      100% calc(100% - 5px),
      calc(100% - 5px) 100%,
      5px 100%,
      0 calc(100% - 5px),
      0 5px
    );
  }
  .ncs-send-btn {
    width: 42px;
    height: 42px;
  }
  .ncs-clanchat-wrap {
    clip-path: polygon(
      0 0,
      calc(100% - 15px) 0,
      100% 15px,
      100% 100%,
      15px 100%,
      0 calc(100% - 15px)
    );
  }
  .ncs-member-grid {
    clip-path: polygon(
      12px 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%,
      0 12px
    );
  }
  .ncs-invite-section {
    padding: 16px;
    clip-path: polygon(
      8px 0,
      calc(100% - 8px) 0,
      100% 8px,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      8px 100%,
      0 calc(100% - 8px),
      0 8px
    );
  }
  .ncs-myclan-stats {
    justify-content: center;
  }

  /* Profile */
  .ncs-profile-wrap {
    padding: 14px;
    gap: 16px;
  }
  .ncs-profile-hero {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
    gap: 16px;
    align-items: center;
  }
  .ncs-profile-name {
    font-size: 20px;
  }
  .ncs-profile-clan-row {
    justify-content: center;
  }
  .ncs-profile-level-ring {
    display: none;
  }
  .ncs-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .ncs-stat-card {
    padding: 16px 12px;
  }
  .ncs-stat-num {
    font-size: 20px;
  }
  .ncs-stat-label {
    font-size: 7px;
  }
  .ncs-av-xxl {
    width: 70px;
    height: 70px;
    font-size: 24px;
  }
  .ncs-strip-row {
    gap: 10px;
  }

  /* Ranks */
  .ncs-rank-tabs {
    padding: 8px 12px 0;
    flex-wrap: wrap;
  }
  .ncs-rank-tab {
    padding: 7px 10px;
    font-size: 7px;
  }
  .ncs-ranks-table {
    padding: 10px 12px 16px;
    gap: 3px;
  }
  .ncs-rank-row {
    padding: 10px 12px;
    gap: 10px;
  }
  .ncs-rank-num {
    font-size: 11px;
    width: 22px;
  }
  .ncs-rank-score {
    font-size: 12px;
  }
  .ncs-rank-name {
    font-size: 13px;
  }
  .ncs-rank-sub {
    display: none;
  }
  .ncs-podium {
    padding: 16px 12px 0;
    gap: 6px;
  }
  .ncs-podium-name {
    font-size: 9px;
    max-width: 90px;
  }
  .ncs-podium-base {
    width: 80px;
  }
  .ncs-podium-slot-1 .ncs-podium-base {
    width: 96px;
    height: 90px;
  }
  .ncs-podium-slot-2 .ncs-podium-base {
    height: 64px;
  }
  .ncs-podium-slot-3 .ncs-podium-base {
    height: 50px;
  }
  .ncs-podium-crown {
    font-size: 20px;
  }

  /* Chat */
  .ncs-chat-header {
    padding: 10px 14px;
    gap: 10px;
  }
  .ncs-chat-hdr-name {
    font-size: 12px;
  }
  .ncs-messages-area {
    padding: 12px 14px;
    gap: 3px;
  }
  .ncs-msg {
    max-width: 82%;
  }
  .ncs-msg-bubble {
    padding: 9px 12px;
    font-size: 13px;
  }
  .ncs-input-bar {
    padding: 8px 12px;
    gap: 8px;
  }
  .ncs-msg-input {
    padding: 10px 14px;
    font-size: 13px;
  }
  .ncs-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  /* FAB */
  .ncs-fab {
    bottom: 14px;
    right: 14px;
    width: 50px;
    height: 50px;
  }
  .ncs-fab-badge {
    width: 18px;
    height: 18px;
    font-size: 8px;
  }

  /* Nav buttons */
  .ncs-nav-btn {
    padding: 7px 12px;
    font-size: 9px;
  }
  .ncs-btn {
    padding: 8px 14px;
    font-size: 9px;
  }

  /* Toast */
  .ncs-toast-container {
    right: 10px;
    max-width: calc(100vw - 20px);
  }
}

/* ── Ultra-small phones (≤ 360px) ───────────────────────── */
@media (max-width: 360px) {
  .ncs-topbar {
    padding: 0 10px;
    height: 48px;
    gap: 8px;
  }
  .ncs-topbar-title {
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .ncs-topbar-icon {
    font-size: 18px;
  }
  .ncs-close-btn {
    width: 32px;
    height: 32px;
    font-size: 13px;
    border-radius: 9px;
    top: 10px !important;
    right: 10px !important;
  }

  /* Sidebar */
  .ncs-sidebar {
    max-height: 32vh;
  }
  .ncs-search-box {
    padding: 10px 10px 8px;
  }
  .ncs-input {
    padding: 9px 10px 9px 34px;
    font-size: 13px;
  }
  .ncs-sec-label {
    padding: 10px 12px 4px;
    font-size: 7px;
  }
  .ncs-person-row {
    padding: 7px 10px;
    gap: 9px;
  }
  .ncs-person-name {
    font-size: 13px;
  }
  .ncs-person-sub {
    font-size: 11px;
  }

  /* Friends right panel */
  .ncs-friends-right {
    max-height: 60vh;
  }
  .ncs-panel-section {
    padding: 12px 12px 10px;
  }

  /* Clan - minimal clip-paths for tiny screens */
  .ncs-clan-content {
    padding: 10px;
    gap: 10px;
  }
  .ncs-clan-sidenav {
    padding: 6px 8px;
  }
  .ncs-sidenav-btn {
    padding: 7px 9px;
    font-size: 11px;
    gap: 6px;
    clip-path: none;
    border-radius: 6px;
  }
  .ncs-sidenav-icon {
    font-size: 14px;
  }
  .ncs-myclan-hero {
    padding: 16px;
    gap: 12px;
    clip-path: polygon(
      0 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% 100%,
      10px 100%,
      0 calc(100% - 10px)
    );
  }
  .ncs-myclan-emblem {
    font-size: 40px;
  }
  .ncs-myclan-name {
    font-size: 16px;
  }
  .ncs-create-form {
    padding: 20px 14px;
    gap: 14px;
    clip-path: polygon(
      0 0,
      calc(100% - 12px) 0,
      100% 12px,
      100% 100%,
      12px 100%,
      0 calc(100% - 12px)
    );
  }
  .ncs-clan-card {
    clip-path: polygon(
      0 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% 100%,
      10px 100%,
      0 calc(100% - 10px)
    );
  }
  .ncs-btn {
    clip-path: none;
    border-radius: 6px;
  }
  .ncs-send-btn {
    width: 38px;
    height: 38px;
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  }
  .ncs-clanchat-wrap {
    clip-path: polygon(
      0 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% 100%,
      10px 100%,
      0 calc(100% - 10px)
    );
  }
  .ncs-member-grid {
    clip-path: polygon(
      8px 0,
      100% 0,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      0 100%,
      0 8px
    );
  }
  .ncs-invite-section {
    padding: 14px;
    clip-path: none;
    border-radius: 8px;
  }

  /* Profile */
  .ncs-profile-wrap {
    padding: 10px;
    gap: 12px;
  }
  .ncs-profile-hero {
    padding: 16px 12px;
    gap: 12px;
    border-radius: 16px;
  }
  .ncs-profile-name {
    font-size: 17px;
  }
  .ncs-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .ncs-stat-card {
    padding: 14px 10px;
    border-radius: 12px;
  }
  .ncs-stat-num {
    font-size: 18px;
  }
  .ncs-stat-label {
    font-size: 7px;
  }
  .ncs-av-xxl {
    width: 60px;
    height: 60px;
    font-size: 20px;
  }

  /* Ranks */
  .ncs-rank-tabs {
    padding: 6px 10px 0;
    flex-wrap: wrap;
    gap: 3px;
  }
  .ncs-rank-tab {
    padding: 6px 9px;
    font-size: 7px;
  }
  .ncs-ranks-table {
    padding: 8px 10px 14px;
    gap: 2px;
  }
  .ncs-rank-row {
    padding: 8px 10px;
    gap: 8px;
  }
  .ncs-rank-num {
    font-size: 10px;
    width: 20px;
  }
  .ncs-rank-score {
    font-size: 11px;
  }
  .ncs-podium {
    padding: 12px 8px 0;
    gap: 4px;
  }
  .ncs-podium-name {
    font-size: 8px;
    max-width: 76px;
  }
  .ncs-podium-base {
    width: 70px;
  }
  .ncs-podium-slot-1 .ncs-podium-base {
    width: 84px;
    height: 80px;
  }
  .ncs-podium-slot-2 .ncs-podium-base {
    height: 56px;
  }
  .ncs-podium-slot-3 .ncs-podium-base {
    height: 44px;
  }
  .ncs-podium-crown {
    font-size: 18px;
  }
  .ncs-podium-score {
    font-size: 11px;
  }

  /* Chat */
  .ncs-messages-area {
    padding: 10px 10px;
  }
  .ncs-msg-bubble {
    padding: 8px 10px;
    font-size: 12px;
  }
  .ncs-input-bar {
    padding: 6px 10px;
    gap: 6px;
  }
  .ncs-msg-input {
    padding: 9px 12px;
    font-size: 12px;
  }
  .ncs-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  /* FAB */
  .ncs-fab {
    bottom: 12px;
    right: 12px;
    width: 46px;
    height: 46px;
  }

  /* Buttons */
  .ncs-btn {
    padding: 7px 12px;
    font-size: 8px;
  }
  .ncs-nav-btn {
    padding: 6px 10px;
    font-size: 8px;
  }
  .ncs-nav-icon-btn {
    width: 32px;
    height: 32px;
  }

  /* Toast */
  .ncs-toast-container {
    right: 8px;
    max-width: calc(100vw - 16px);
  }
  .ncs-toast {
    padding: 10px 12px;
    gap: 8px;
  }
  .ncs-toast-msg {
    font-size: 12px;
  }
}

/* ── Very small phone (≤ 360px) ─────────────────────────── */
@media (max-width: 360px) {
  .ncs-topbar {
    padding: 0 10px;
    height: 48px;
  }
  .ncs-topbar-title {
    font-size: 12px;
  }
  .ncs-topbar-icon {
    display: none;
  }
  .ncs-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .ncs-podium {
    flex-direction: column;
    align-items: center;
    padding: 12px;
  }
  .ncs-podium-slot {
    order: unset !important;
    width: 100%;
  }
  .ncs-podium-base {
    width: 100% !important;
    height: 48px !important;
    border-radius: 10px;
  }
  .ncs-profile-hero {
    padding: 14px;
  }
  .ncs-profile-name {
    font-size: 18px;
  }
  .ncs-clan-content {
    padding: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PROFILE / RANKS PAGE BODY OVERRIDES
   ═══════════════════════════════════════════════════════════ */
/* Profile and Ranks pages have a single-column full-width body, not sidebar+main */
.ncs-profile-body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.ncs-ranks-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Loading spinner utility */
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ═══════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE
   Futuristic dark design with cyan/orange accent
   ═══════════════════════════════════════════════════════════ */
.ncs-notif-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(6, 8, 18, 0.98) 0%, rgba(3, 3, 10, 0.99) 100%);
  position: relative;
}

/* Subtle HUD decoration background */
.ncs-notif-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Corner brackets */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 15V0h15M45 0h15v15M60 45v15H45M15 60H0V45' stroke='%2344eeff' stroke-width='1' fill='none' opacity='0.08'/%3E%3C/svg%3E"),
    /* Grid pattern */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='none'/%3E%3Crect x='0' y='0' width='1' height='40' fill='%2344eeff' opacity='0.02'/%3E%3Crect x='0' y='0' width='40' height='1' fill='%2344eeff' opacity='0.02'/%3E%3C/svg%3E");
  background-position: 20px 20px, 0 0;
  pointer-events: none;
  z-index: 0;
}

/* Header with filters and actions */
.ncs-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px 16px;
  border-bottom: 1px solid rgba(68, 238, 255, 0.08);
  background: rgba(10, 12, 24, 0.6);
  position: relative;
  z-index: 1;
}

.ncs-notif-filters {
  display: flex;
  gap: 8px;
}

.ncs-notif-filter-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid rgba(68, 238, 255, 0.15);
  background: rgba(68, 238, 255, 0.03);
  color: rgba(180, 190, 230, 0.6);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ncs-notif-filter-btn:hover {
  background: rgba(68, 238, 255, 0.08);
  border-color: rgba(68, 238, 255, 0.25);
  color: rgba(220, 230, 255, 0.85);
}

.ncs-notif-filter-btn.ncs-active {
  background: rgba(68, 238, 255, 0.12);
  border-color: rgba(68, 238, 255, 0.4);
  color: var(--nc-cyan);
  box-shadow: 0 0 12px rgba(68, 238, 255, 0.15);
}

.ncs-notif-actions {
  display: flex;
  gap: 10px;
}

.ncs-btn-ghost {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border-color: rgba(68, 238, 255, 0.12);
  color: rgba(180, 190, 230, 0.5);
}

.ncs-btn-ghost:hover {
  background: rgba(68, 238, 255, 0.06);
  border-color: rgba(68, 238, 255, 0.25);
  color: var(--nc-cyan);
}

.ncs-btn-ghost svg {
  opacity: 0.7;
}

/* Notifications list */
.ncs-notif-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* Notification card */
.ncs-notif-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(68, 238, 255, 0.08);
  background: rgba(12, 14, 28, 0.7);
  transition: all 0.25s ease;
  position: relative;
}

.ncs-notif-card:hover {
  background: rgba(16, 20, 38, 0.85);
  border-color: rgba(68, 238, 255, 0.18);
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(68, 238, 255, 0.06);
}

/* Unread notification */
.ncs-notif-card.ncs-notif-unread {
  background: rgba(68, 238, 255, 0.04);
  border-color: rgba(68, 238, 255, 0.15);
}

.ncs-notif-card.ncs-notif-unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--nc-cyan) 0%, var(--nc-purple) 100%);
  border-radius: 12px 0 0 12px;
}

/* Icon wrapper */
.ncs-notif-icon-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(68, 238, 255, 0.06);
  border: 1px solid rgba(68, 238, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ncs-notif-icon {
  font-size: 20px;
}

.ncs-notif-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nc-cyan);
  border: 2px solid rgba(12, 14, 28, 1);
  box-shadow: 0 0 8px var(--nc-cyan);
  animation: notifPulse 2s ease-in-out infinite;
}

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

/* Content */
.ncs-notif-content {
  flex: 1;
  min-width: 0;
}

.ncs-notif-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--nc-text);
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}

.ncs-notif-message {
  font-size: 13px;
  color: rgba(180, 190, 230, 0.6);
  line-height: 1.45;
  margin-bottom: 8px;
}

.ncs-notif-time {
  font-size: 11px;
  color: rgba(68, 238, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Notification actions */
.ncs-notif-card .ncs-notif-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ncs-notif-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(68, 238, 255, 0.12);
  background: rgba(68, 238, 255, 0.04);
  color: rgba(180, 190, 230, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ncs-notif-action-btn:hover {
  background: rgba(68, 238, 255, 0.12);
  border-color: rgba(68, 238, 255, 0.3);
  color: var(--nc-cyan);
  box-shadow: 0 0 12px rgba(68, 238, 255, 0.15);
}

/* Empty state */
.ncs-notif-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px;
  text-align: center;
}

.ncs-notif-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: rgba(68, 238, 255, 0.04);
  border: 1px solid rgba(68, 238, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: rgba(68, 238, 255, 0.4);
}

.ncs-notif-empty-icon svg {
  opacity: 0.6;
}

.ncs-notif-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--nc-text);
  margin-bottom: 8px;
}

.ncs-notif-empty-desc {
  font-size: 13px;
  color: rgba(180, 190, 230, 0.45);
  max-width: 280px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   NOTIFICATIONS RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ncs-notif-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 20px;
  }

  .ncs-notif-filters {
    justify-content: center;
  }

  .ncs-notif-actions {
    justify-content: center;
  }

  .ncs-notif-list {
    padding: 16px 20px;
    gap: 10px;
  }

  .ncs-notif-card {
    padding: 14px 16px;
  }

  .ncs-notif-icon-wrap {
    width: 38px;
    height: 38px;
  }

  .ncs-notif-icon {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .ncs-notif-header {
    padding: 14px 16px;
  }

  .ncs-notif-filter-btn {
    padding: 6px 14px;
    font-size: 11px;
  }

  .ncs-btn-ghost {
    padding: 6px 12px;
    font-size: 11px;
  }

  .ncs-btn-ghost svg {
    width: 12px;
    height: 12px;
  }

  .ncs-notif-list {
    padding: 12px 16px;
  }

  .ncs-notif-card {
    gap: 12px;
    padding: 12px 14px;
  }

  .ncs-notif-title {
    font-size: 13px;
  }

  .ncs-notif-message {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES — all social modals, panels, chat
   Premium light theme with glassmorphism and soft cyberpunk accents
   ═══════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  --nc-surface: rgba(225,235,248,0.96);
  --nc-glass:   rgba(220,232,246,0.98);
  --nc-text:    #050a15;
  --nc-muted:   #1e2a3c;
  --nc-cyan:    #006585;
  --nc-pink:    #a01840;
  --nc-purple:  #4a2080;
  --nc-gold:    #705010;
  --nc-orange:  #8a4010;
  --nc-glow:    rgba(0,101,133,0.16);
}

/* ── Full-screen overlays (Friends, Chat, Ranks, Clans) ─────────── */
html[data-theme="light"] .ncs-page {
  background: linear-gradient(180deg, rgba(215,228,244,0.98) 0%, rgba(210,224,240,0.99) 50%, rgba(205,220,238,0.99) 100%);
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .ncs-aurora-blob { opacity: 0.18; filter: saturate(0.7); }
html[data-theme="light"] .ncs-scanlines   { opacity: 0.025; }

/* ── Top bar ─────────────────────────────────────────────────────── */
html[data-theme="light"] .ncs-topbar {
  background: linear-gradient(180deg, rgba(225,235,248,0.98) 0%, rgba(220,232,246,0.99) 100%);
  border-bottom: 1px solid rgba(10,25,50,0.40);
  box-shadow: 0 2px 10px rgba(10,25,50,0.10);
}
html[data-theme="light"] .ncs-topbar::before {
  background: linear-gradient(90deg, rgba(0,101,133,0.20), rgba(74,32,128,0.12), transparent);
}
html[data-theme="light"] .ncs-topbar-title  { color: var(--nc-text); font-weight: 700; }
html[data-theme="light"] .ncs-topbar-sub    { color: var(--nc-muted); }

/* ── Close / action buttons ─────────────────────────────────────── */
html[data-theme="light"] .ncs-close-btn {
  background: rgba(160,24,64,0.10);
  border: 1px solid rgba(10,25,50,0.45);
  color: var(--nc-pink);
}
html[data-theme="light"] .ncs-close-btn:hover {
  background: rgba(160,24,64,0.15);
  border-color: var(--nc-pink);
  box-shadow: 0 0 10px rgba(160,24,64,0.18);
}
html[data-theme="light"] .ncs-btn-ghost {
  background: rgba(225,235,248,0.90);
  border: 1px solid rgba(10,25,50,0.40);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-btn-ghost:hover {
  background: rgba(0,101,133,0.10);
  border-color: var(--nc-cyan);
  color: var(--nc-cyan);
  box-shadow: 0 0 8px var(--nc-glow);
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
html[data-theme="light"] .ncs-sidebar {
  background: linear-gradient(180deg, rgba(225,235,248,0.96) 0%, rgba(220,232,246,0.98) 100%);
  border-right: 1px solid rgba(10,25,50,0.35);
}

/* ── Main content area ───────────────────────────────────────────── */
html[data-theme="light"] .ncs-main {
  background: linear-gradient(180deg, rgba(210,224,240,0.98) 0%, rgba(205,220,238,0.99) 100%);
}
html[data-theme="light"] .ncs-main::before {
  background-image: none;
  opacity: 0;
}

/* ── Search / input ─────────────────────────────────────────────── */
/* Remove border from wrapper - only input should have border */
html[data-theme="light"] .ncs-search-wrap {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 10px;
}
html[data-theme="light"] .ncs-search-wrap:focus-within {
  border: none;
  background: transparent;
  box-shadow: none;
}
/* Input gets the single visible border */
html[data-theme="light"] .ncs-input {
  background: rgba(245,248,255,0.98);
  border: 2px solid rgba(40,60,100,0.45);
  color: var(--nc-text);
  border-radius: 10px;
}
html[data-theme="light"] .ncs-input:focus {
  background: rgba(250,252,255,1);
  border-color: rgba(0,101,133,0.60);
  box-shadow:
    0 0 0 3px rgba(0,101,133,0.12),
    0 0 12px rgba(0,101,133,0.15);
}
html[data-theme="light"] .ncs-input::placeholder { color: rgba(30,50,80,0.55); }
html[data-theme="light"] .ncs-input-plain {
  background: transparent;
  color: var(--nc-text);
  border: none;
}

/* ── Section labels ─────────────────────────────────────────────── */
html[data-theme="light"] .ncs-sec-label {
  color: var(--nc-text);
  border-bottom: 1px solid rgba(10,25,50,0.35);
  font-weight: 600;
}

/* ── Person rows ─────────────────────────────────────────────────── */
html[data-theme="light"] .ncs-person-row {
  background: rgba(230,238,250,0.92);
  border: 1px solid rgba(10,25,50,0.35);
}
html[data-theme="light"] .ncs-person-row:hover {
  background: rgba(225,235,250,0.98);
  border-color: var(--nc-cyan);
  box-shadow: 0 0 10px var(--nc-glow);
}
html[data-theme="light"] .ncs-person-row.selected {
  background: rgba(0,101,133,0.12);
  border: 2px solid var(--nc-cyan);
}
html[data-theme="light"] .ncs-person-name { color: var(--nc-text); font-weight: 600; }
html[data-theme="light"] .ncs-person-status { color: var(--nc-muted); }

/* ── Chat window ─────────────────────────────────────────────────── */
html[data-theme="light"] .ncs-chat-window {
  background: rgba(215,228,244,0.60);
  border-left: 1px solid rgba(10,25,50,0.35);
}
html[data-theme="light"] .ncs-chat-header {
  background: linear-gradient(180deg, rgba(225,235,248,0.98) 0%, rgba(220,232,246,0.95) 100%);
  border-bottom: 1px solid rgba(10,25,50,0.35);
}
html[data-theme="light"] .ncs-chat-header-name   { color: var(--nc-text); font-weight: 600; }
html[data-theme="light"] .ncs-chat-header-status { color: var(--nc-muted); }
html[data-theme="light"] .ncs-input-bar {
  background: linear-gradient(180deg, rgba(220,232,246,0.95) 0%, rgba(225,235,248,0.98) 100%);
  border-top: 1px solid rgba(10,25,50,0.35);
}
html[data-theme="light"] .ncs-msg-input {
  background: rgba(230,238,250,0.95);
  border: 1px solid rgba(10,25,50,0.40);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-msg-input:focus {
  border-color: var(--nc-cyan);
  background: rgba(235,242,252,0.98);
  box-shadow: 0 0 8px var(--nc-glow);
}
html[data-theme="light"] .ncs-msg-input::placeholder { color: var(--nc-muted); }
html[data-theme="light"] .ncs-send-btn {
  background: linear-gradient(135deg, var(--nc-cyan) 0%, #00a0cc 100%);
  border: 2px solid var(--nc-cyan);
  color: #ffffff;
  box-shadow: 0 2px 6px var(--nc-glow);
  font-weight: 600;
}
html[data-theme="light"] .ncs-send-btn:hover {
  background: linear-gradient(135deg, #0099bb 0%, #00b8dd 100%);
  box-shadow: 0 0 12px var(--nc-glow);
}
html[data-theme="light"] .ncs-msg-date-div span { color: var(--nc-muted); font-weight: 500; }
html[data-theme="light"] .ncs-msg-time          { color: var(--nc-muted); }

/* ── Message bubbles ─────────────────────────────────────────────── */
html[data-theme="light"] .ncs-msg.mine .ncs-msg-bubble {
  background: rgba(0,101,133,0.14);
  border: 1px solid rgba(10,25,50,0.35);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-msg.theirs .ncs-msg-bubble {
  background: rgba(230,238,250,0.95);
  border: 1px solid rgba(10,30,60,0.22);
  color: var(--nc-text);
  box-shadow: 0 2px 4px rgba(10,25,50,0.08);
}

/* ── Add Friend panel section ────────────────────────────────────── */
html[data-theme="light"] .ncs-panel-section {
  background: rgba(0,101,133,0.06);
  border-bottom: 1px solid rgba(10,25,50,0.30);
}
html[data-theme="light"] .ncs-panel-section-title { color: var(--nc-text); font-weight: 700; }
html[data-theme="light"] .ncs-add-row .ncs-input {
  background: rgba(245,248,255,0.98);
  border: 2px solid rgba(40,60,100,0.45);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-add-row .ncs-input:focus {
  border-color: rgba(0,101,133,0.60);
  background: rgba(250,252,255,1);
  box-shadow:
    0 0 0 3px rgba(0,101,133,0.12),
    0 0 12px rgba(0,101,133,0.15);
}
html[data-theme="light"] .ncs-search-results {
  background: rgba(225,235,248,0.98);
  border: 1px solid rgba(10,25,50,0.40);
  box-shadow: 0 4px 16px rgba(10,25,50,0.12);
}

/* ── Notification panel ──────────────────────────────────────────── */
html[data-theme="light"] .ncs-notif-body {
  background: linear-gradient(180deg, rgba(220,232,246,0.98) 0%, rgba(215,228,244,0.99) 100%);
}
html[data-theme="light"] .ncs-notif-header {
  background: linear-gradient(180deg, rgba(225,235,248,0.98) 0%, rgba(220,232,246,0.95) 100%);
  border-bottom: 1px solid rgba(10,25,50,0.35);
}
html[data-theme="light"] .ncs-notif-filter-btn {
  background: rgba(225,235,248,0.90);
  border: 1px solid rgba(10,30,60,0.28);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-notif-filter-btn:hover {
  background: rgba(220,235,250,0.95);
  border-color: rgba(10,30,60,0.40);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-notif-filter-btn.ncs-active {
  background: rgba(0,101,133,0.12);
  border-color: rgba(0,101,133,0.50);
  color: var(--nc-cyan);
  font-weight: 600;
}
html[data-theme="light"] .ncs-notif-card {
  background: rgba(200,218,240,0.88);
  border: 1px solid rgba(40,80,140,0.25);
  box-shadow: 0 2px 6px rgba(20,40,80,0.08);
}
html[data-theme="light"] .ncs-notif-card:hover {
  background: rgba(190,220,245,0.95);
  border-color: rgba(40,80,140,0.35);
  box-shadow: 0 4px 14px rgba(20,40,80,0.12);
}
html[data-theme="light"] .ncs-notif-card.ncs-notif-unread {
  background: linear-gradient(135deg, rgba(0,101,133,0.15) 0%, rgba(74,32,128,0.10) 100%);
  border-color: rgba(0,101,133,0.40);
}
html[data-theme="light"] .ncs-notif-title   { color: var(--nc-text); font-weight: 600; }
html[data-theme="light"] .ncs-notif-message { color: var(--nc-muted); }
html[data-theme="light"] .ncs-notif-time    { color: var(--nc-muted); }
html[data-theme="light"] .ncs-notif-action-btn {
  background: rgba(200,218,240,0.85);
  border: 1px solid rgba(40,80,140,0.28);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-notif-action-btn:hover {
  background: rgba(0,101,133,0.18);
  border-color: rgba(0,101,133,0.45);
  color: var(--nc-cyan);
  box-shadow: 0 0 10px var(--nc-glow);
}
html[data-theme="light"] .ncs-notif-icon-wrap {
  background: rgba(0,101,133,0.14);
  border: 1px solid rgba(0,101,133,0.35);
}
html[data-theme="light"] .ncs-notif-empty-title { color: var(--nc-text); }
html[data-theme="light"] .ncs-notif-empty-desc  { color: var(--nc-muted); }

/* ── Profile panel ───────────────────────────────────────────────── */
html[data-theme="light"] .ncs-profile-body {
  background: linear-gradient(180deg, rgba(195,212,235,0.98) 0%, rgba(190,208,232,0.99) 100%);
}
html[data-theme="light"] .ncs-profile-name { color: var(--nc-text); font-weight: 700; }
html[data-theme="light"] .ncs-profile-info { color: var(--nc-muted); }
html[data-theme="light"] .ncs-xp-bar-label { color: var(--nc-text); font-weight: 500; }
html[data-theme="light"] .ncs-xp-bar-track { background: rgba(40,80,140,0.18); }
html[data-theme="light"] .ncs-stat-card {
  background: rgba(200,218,240,0.88);
  border: 1px solid rgba(40,80,140,0.25);
}
html[data-theme="light"] .ncs-stat-card:hover {
  background: rgba(190,220,245,0.95);
  border-color: rgba(0,101,133,0.40);
  box-shadow: 0 0 14px var(--nc-glow);
}
html[data-theme="light"] .ncs-stat-label { color: var(--nc-muted); }
html[data-theme="light"] .ncs-stat-value { color: var(--nc-text); font-weight: 600; }

/* ── Ranks panel ─────────────────────────────────────────────────── */
html[data-theme="light"] .ncs-ranks-body,
html[data-theme="light"] .ncs-ranks-wrap {
  background: linear-gradient(180deg, rgba(195,212,235,0.98) 0%, rgba(190,208,232,0.99) 100%);
}
html[data-theme="light"] .ncs-rank-tab {
  background: rgba(200,218,240,0.85);
  border: 1px solid rgba(40,80,140,0.28);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-rank-tab:hover {
  background: rgba(190,220,245,0.95);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-rank-tab.active {
  background: linear-gradient(135deg, rgba(0,101,133,0.20) 0%, rgba(74,32,128,0.12) 100%);
  border-color: rgba(0,101,133,0.50);
  color: var(--nc-cyan);
  font-weight: 600;
}
html[data-theme="light"] .ncs-rank-row {
  background: rgba(200,218,240,0.85);
  border: 1px solid rgba(40,80,140,0.22);
}
html[data-theme="light"] .ncs-rank-row:hover {
  background: rgba(190,220,245,0.95);
  border-color: rgba(40,80,140,0.35);
}
html[data-theme="light"] .ncs-rank-row.is-me {
  background: linear-gradient(135deg, rgba(0,101,133,0.20) 0%, rgba(74,32,128,0.12) 100%);
  border-color: rgba(0,101,133,0.45);
}
html[data-theme="light"] .ncs-rank-name { color: var(--nc-text); font-weight: 600; }
html[data-theme="light"] .ncs-rank-sub  { color: var(--nc-muted); }
html[data-theme="light"] .ncs-rank-bar-wrap { background: rgba(40,80,140,0.18); }
html[data-theme="light"] .ncs-podium-name  { color: var(--nc-text); font-weight: 600; }
html[data-theme="light"] .ncs-podium-base {
  background: rgba(0,101,133,0.12);
  border-top: 2px solid rgba(0,101,133,0.38);
}

/* ── Clan sidebar navigation ─────────────────────────────────────── */
html[data-theme="light"] .ncs-clan-sidenav {
  background: linear-gradient(180deg, rgba(200,218,240,0.96) 0%, rgba(195,212,235,0.98) 100%);
  border-right: 1px solid rgba(74,32,128,0.25);
}
html[data-theme="light"] .ncs-sidenav-btn {
  background: rgba(200,218,240,0.85);
  border: 1px solid rgba(40,80,140,0.25);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-sidenav-btn:hover {
  background: rgba(74,32,128,0.14);
  color: var(--nc-purple);
  border-color: rgba(74,32,128,0.40);
  box-shadow: 0 0 10px rgba(74,32,128,0.22);
}
html[data-theme="light"] .ncs-sidenav-btn.active {
  background: linear-gradient(135deg, rgba(74,32,128,0.20) 0%, rgba(0,101,133,0.10) 100%);
  border-color: rgba(74,32,128,0.50);
  color: var(--nc-purple);
  font-weight: 600;
}

/* ── Clan content area ───────────────────────────────────────────── */
html[data-theme="light"] .ncs-clan-content {
  background: rgba(195,212,235,0.60);
}
html[data-theme="light"] .ncs-clan-card {
  background: linear-gradient(180deg, rgba(210,225,245,0.95) 0%, rgba(200,218,240,0.98) 100%);
  border: 1px solid rgba(40,80,140,0.25);
  box-shadow: 0 4px 12px rgba(20,40,80,0.10), inset 0 1px 0 rgba(255,255,255,0.5);
}
html[data-theme="light"] .ncs-clan-card:hover {
  border-color: rgba(74,32,128,0.45);
  box-shadow: 0 8px 24px rgba(74,32,128,0.15), 0 0 16px rgba(74,32,128,0.12);
  transform: translateY(-3px);
}
html[data-theme="light"] .ncs-clan-card-name { color: var(--nc-text); font-weight: 700; }
html[data-theme="light"] .ncs-clan-card-desc { color: var(--nc-muted); }
html[data-theme="light"] .ncs-clan-card-stats span { color: var(--nc-muted); }
html[data-theme="light"] .ncs-clan-card-leader { color: var(--nc-muted); }
html[data-theme="light"] .ncs-myclan-name { color: var(--nc-text); font-weight: 700; }
html[data-theme="light"] .ncs-myclan-stat { color: var(--nc-muted); }
html[data-theme="light"] .ncs-clan-empty-title { color: var(--nc-text); }
html[data-theme="light"] .ncs-clan-empty-desc  { color: var(--nc-muted); }
html[data-theme="light"] .ncs-clan-loading-text { color: var(--nc-muted); }

/* ── Clan chat ───────────────────────────────────────────────────── */
html[data-theme="light"] .ncs-clanchat-wrap {
  background: linear-gradient(135deg, rgba(160,24,64,0.08) 0%, rgba(195,212,235,0.98) 30%);
  border: 1px solid rgba(160,24,64,0.28);
}
html[data-theme="light"] .ncs-clanchat-header {
  background: linear-gradient(90deg, rgba(160,24,64,0.12) 0%, rgba(200,218,240,0.98) 40%, rgba(160,24,64,0.06) 100%);
  border-bottom: 1px solid rgba(160,24,64,0.25);
}
html[data-theme="light"] .ncs-clanchat-header-title { color: var(--nc-text); font-weight: 600; }
html[data-theme="light"] .ncs-clanchat-header-status { color: var(--nc-muted); }
html[data-theme="light"] .ncs-clanchat-messages { background: transparent; }
html[data-theme="light"] .ncs-clan-msg-from { color: var(--nc-muted); font-weight: 500; }
html[data-theme="light"] .ncs-clan-msg-text { color: var(--nc-text); }
html[data-theme="light"] .ncs-clan-msg-time { color: var(--nc-muted); }
html[data-theme="light"] .ncs-clanchat-inputbar {
  background: linear-gradient(180deg, rgba(160,24,64,0.05) 0%, rgba(200,218,240,0.98) 100%);
  border-top: 1px solid rgba(160,24,64,0.25);
}
html[data-theme="light"] .ncs-clanchat-input {
  background: rgba(210,225,245,0.90);
  border: 1px solid rgba(160,24,64,0.32);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-clanchat-input:focus {
  border-color: rgba(160,24,64,0.50);
  background: rgba(220,235,250,0.98);
  box-shadow: 0 0 10px rgba(160,24,64,0.15);
}
html[data-theme="light"] .ncs-clanchat-input::placeholder { color: rgba(160,24,64,0.45); }
html[data-theme="light"] .ncs-clanchat-sendbtn {
  background: linear-gradient(135deg, var(--nc-pink) 0%, #c5305a 100%);
  border: 2px solid var(--nc-pink);
  color: #ffffff;
  font-weight: 600;
}
html[data-theme="light"] .ncs-clanchat-sendbtn:hover {
  background: linear-gradient(135deg, #a81840 0%, #d84068 100%);
  box-shadow: 0 0 16px rgba(160,24,64,0.22);
}

/* ── Friends strip ───────────────────────────────────────────────── */
html[data-theme="light"] .ncs-friends-strip {
  background: linear-gradient(180deg, rgba(200,218,240,0.98) 0%, rgba(195,212,235,0.99) 100%);
  border-top: 1px solid rgba(40,80,140,0.25);
}
html[data-theme="light"] .ncs-strip-title { color: var(--nc-text); font-weight: 600; }
html[data-theme="light"] .ncs-strip-name  { color: var(--nc-muted); }
html[data-theme="light"] .ncs-strip-person:hover { background: rgba(0,101,133,0.12); }

/* ── Empty states ────────────────────────────────────────────────── */
html[data-theme="light"] .ncs-empty {
  background: linear-gradient(180deg, rgba(215,228,244,0.95) 0%, rgba(210,224,240,0.98) 100%);
}
html[data-theme="light"] .ncs-empty::before {
  background-image: none;
  opacity: 0;
}
html[data-theme="light"] .ncs-empty::after {
  background: radial-gradient(ellipse at center, transparent 0%, rgba(200,220,240,0.30) 100%);
}
html[data-theme="light"] .ncs-empty-text { color: var(--nc-muted); }
html[data-theme="light"] .ncs-empty-icon { filter: saturate(0.9); }

/* ── Avatar text (initials) ─────────────────────────────────────── */
html[data-theme="light"] .ncs-av {
  color: #050a15;
  text-shadow: none;
}
html[data-theme="light"] .ncs-av-sm {
  color: #050a15;
  text-shadow: none;
}

/* ── Conversation rows ──────────────────────────────────────────── */
html[data-theme="light"] .ncs-conv-row {
  background: rgba(225,235,248,0.90);
  border: 1px solid rgba(10,25,50,0.25);
}
html[data-theme="light"] .ncs-conv-row:hover {
  background: rgba(220,235,250,0.95);
  border-color: rgba(0,101,133,0.45);
}
html[data-theme="light"] .ncs-conv-row:hover .ncs-conv-name {
  color: var(--nc-cyan);
}
html[data-theme="light"] .ncs-conv-row.selected {
  background: rgba(0,101,133,0.12);
  border-color: var(--nc-cyan);
}
html[data-theme="light"] .ncs-conv-name {
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-conv-preview {
  color: var(--nc-muted);
}
html[data-theme="light"] .ncs-conv-time {
  color: var(--nc-muted);
}

/* ── JS-injected inline style overrides ─────────────────────────── */
html[data-theme="light"] #ncsAddResults > div {
  color: var(--nc-muted) !important;
}
html[data-theme="light"] .ncs-myclan-info > div[style*="color:rgba(255,255,255"] {
  color: var(--nc-muted) !important;
}
html[data-theme="light"] .ncs-btn[style*="border-color:rgba(255,255,255"] {
  border-color: rgba(10,25,50,0.35) !important;
  background: rgba(225,235,248,0.90) !important;
  color: var(--nc-muted) !important;
}
html[data-theme="light"] .ncs-btn[style*="border-color:rgba(255,255,255"]:hover {
  border-color: rgba(0,101,133,0.50) !important;
  color: var(--nc-cyan) !important;
}

/* ── FAB button ──────────────────────────────────────────────────── */
html[data-theme="light"] .ncs-fab {
  background: linear-gradient(135deg, var(--nc-cyan) 0%, #0098b8 100%);
  border: 2px solid var(--nc-cyan);
  box-shadow: 0 4px 16px var(--nc-glow);
}
html[data-theme="light"] .ncs-fab:hover {
  background: linear-gradient(135deg, #0090b0 0%, #00a8c8 100%);
  box-shadow: 0 0 24px var(--nc-glow);
}
html[data-theme="light"] .ncs-fab-badge {
  background: var(--nc-pink);
  box-shadow: 0 0 10px rgba(160,24,64,0.22);
}

/* ── Toasts ──────────────────────────────────────────────────────── */
html[data-theme="light"] .ncs-toast {
  background: rgba(200,218,240,0.98);
  border: 1px solid rgba(0,101,133,0.40);
  color: var(--nc-text);
  box-shadow: 0 4px 20px var(--nc-glow);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════
   COMPREHENSIVE LIGHT MODE FIXES - Social UI
══════════════════════════════════════════════════════════════════ */

/* Friend request buttons */
html[data-theme="light"] .ncs-btn-sm {
  border: 1px solid rgba(10,25,50,0.40);
  color: var(--nc-text);
  background: rgba(225,235,248,0.90);
}
html[data-theme="light"] .ncs-btn-sm:hover {
  border-color: var(--nc-cyan);
  color: var(--nc-cyan);
  background: rgba(0,101,133,0.08);
}

/* Section labels */
html[data-theme="light"] .ncs-sec-label {
  color: #1e2a3c;
  font-weight: 600;
}

/* XP bar */
html[data-theme="light"] .ncs-xp-label {
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-xp-val {
  color: var(--nc-gold);
  text-shadow: none;
}

/* Level display */
html[data-theme="light"] .ncs-level-wrap {
  border: 1px solid rgba(10,25,50,0.35);
}
html[data-theme="light"] .ncs-level-num {
  color: var(--nc-gold);
  text-shadow: none;
}
html[data-theme="light"] .ncs-level-label {
  color: #1e2a3c;
}

/* Rank rows */
html[data-theme="light"] .ncs-rank-pos {
  color: var(--nc-text);
  font-weight: 600;
}
html[data-theme="light"] .ncs-rank-score {
  color: var(--nc-cyan);
  text-shadow: none;
}

/* Podium cards */
html[data-theme="light"] .ncs-podium-card {
  border: 1px solid rgba(10,25,50,0.30);
}
html[data-theme="light"] .ncs-podium-rank {
  color: var(--nc-text);
  font-weight: 700;
}
html[data-theme="light"] .ncs-podium-score {
  color: var(--nc-cyan);
}

/* Online indicators */
html[data-theme="light"] .ncs-online-dot {
  box-shadow: 0 0 6px currentColor;
}

/* ── Smooth transitions for theme switching ──────────────────────── */
html[data-theme="light"] .ncs-page,
html[data-theme="light"] .ncs-topbar,
html[data-theme="light"] .ncs-sidebar,
html[data-theme="light"] .ncs-input,
html[data-theme="light"] .ncs-person-row,
html[data-theme="light"] .ncs-notif-card,
html[data-theme="light"] .ncs-clan-card {
  transition: background 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE: CLANS MODAL ADDITIONAL FIXES
   Fix dark backgrounds, search input border, and remaining issues
═══════════════════════════════════════════════════════════════════ */

/* Clans modal main container - ensure light background */
html[data-theme="light"] .ncs-clans-modal,
html[data-theme="light"] .ncs-clans-page {
  background: linear-gradient(180deg, rgba(215,228,244,0.98) 0%, rgba(210,224,240,0.99) 100%);
}

/* Clans search input - fix white/invisible border */
html[data-theme="light"] .ncs-clan-search,
html[data-theme="light"] .ncs-clan-search-input,
html[data-theme="light"] .ncs-clans-search,
html[data-theme="light"] .ncs-clans-search-input {
  background: rgba(235,242,252,0.95);
  border: 1px solid rgba(10,25,50,0.45);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-clan-search:focus,
html[data-theme="light"] .ncs-clan-search-input:focus,
html[data-theme="light"] .ncs-clans-search:focus,
html[data-theme="light"] .ncs-clans-search-input:focus {
  border-color: rgba(74,32,128,0.55);
  background: rgba(240,246,255,0.98);
  box-shadow: 0 0 12px rgba(74,32,128,0.15);
}
html[data-theme="light"] .ncs-clan-search::placeholder,
html[data-theme="light"] .ncs-clan-search-input::placeholder,
html[data-theme="light"] .ncs-clans-search::placeholder,
html[data-theme="light"] .ncs-clans-search-input::placeholder {
  color: rgba(10,25,50,0.50);
}

/* Clans search wrapper */
html[data-theme="light"] .ncs-clan-search-wrap,
html[data-theme="light"] .ncs-clans-search-wrap {
  background: rgba(230,238,250,0.95);
  border: 1px solid rgba(10,25,50,0.40);
}
html[data-theme="light"] .ncs-clan-search-wrap:focus-within,
html[data-theme="light"] .ncs-clans-search-wrap:focus-within {
  border-color: rgba(74,32,128,0.55);
  box-shadow: 0 0 12px rgba(74,32,128,0.12);
}

/* Clans content panels - remove dark backgrounds */
html[data-theme="light"] .ncs-clan-panel,
html[data-theme="light"] .ncs-clan-detail,
html[data-theme="light"] .ncs-clan-info,
html[data-theme="light"] .ncs-clan-members {
  background: linear-gradient(180deg, rgba(220,232,248,0.96) 0%, rgba(215,228,244,0.98) 100%);
  border: 1px solid rgba(10,25,50,0.35);
}

/* Clans header areas */
html[data-theme="light"] .ncs-clan-header,
html[data-theme="light"] .ncs-clans-header {
  background: linear-gradient(180deg, rgba(225,235,248,0.98) 0%, rgba(220,232,246,0.95) 100%);
  border-bottom: 1px solid rgba(10,25,50,0.35);
}

/* Clans list items */
html[data-theme="light"] .ncs-clan-item,
html[data-theme="light"] .ncs-clan-member-row {
  background: rgba(230,238,250,0.92);
  border: 1px solid rgba(10,25,50,0.30);
}
html[data-theme="light"] .ncs-clan-item:hover,
html[data-theme="light"] .ncs-clan-member-row:hover {
  background: rgba(220,235,250,0.98);
  border-color: rgba(74,32,128,0.45);
}

/* Clans buttons */
html[data-theme="light"] .ncs-clan-btn,
html[data-theme="light"] .ncs-clan-action-btn {
  background: rgba(225,235,248,0.90);
  border: 1px solid rgba(10,25,50,0.40);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-clan-btn:hover,
html[data-theme="light"] .ncs-clan-action-btn:hover {
  background: rgba(74,32,128,0.12);
  border-color: rgba(74,32,128,0.50);
  color: var(--nc-purple);
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE: FRIENDS MODAL ADDITIONAL FIXES
   Fix dark backgrounds in friend modal sections
═══════════════════════════════════════════════════════════════════ */

/* Friends modal main container */
html[data-theme="light"] .ncs-friends-modal,
html[data-theme="light"] .ncs-friends-page {
  background: linear-gradient(180deg, rgba(215,228,244,0.98) 0%, rgba(210,224,240,0.99) 100%);
}

/* Friends panel sections - remove dark backgrounds */
html[data-theme="light"] .ncs-friends-panel,
html[data-theme="light"] .ncs-friends-list-wrap,
html[data-theme="light"] .ncs-add-friend-panel {
  background: linear-gradient(180deg, rgba(220,232,248,0.96) 0%, rgba(215,228,244,0.98) 100%);
  border: 1px solid rgba(10,25,50,0.35);
}

/* Friends search input */
html[data-theme="light"] .ncs-friends-search,
html[data-theme="light"] .ncs-friends-search-input,
html[data-theme="light"] .ncs-add-friend-input {
  background: rgba(235,242,252,0.95);
  border: 1px solid rgba(10,25,50,0.45);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-friends-search:focus,
html[data-theme="light"] .ncs-friends-search-input:focus,
html[data-theme="light"] .ncs-add-friend-input:focus {
  border-color: rgba(0,101,133,0.55);
  background: rgba(240,246,255,0.98);
  box-shadow: 0 0 12px rgba(0,101,133,0.15);
}
html[data-theme="light"] .ncs-friends-search::placeholder,
html[data-theme="light"] .ncs-friends-search-input::placeholder,
html[data-theme="light"] .ncs-add-friend-input::placeholder {
  color: rgba(10,25,50,0.50);
}

/* Friends header */
html[data-theme="light"] .ncs-friends-header {
  background: linear-gradient(180deg, rgba(225,235,248,0.98) 0%, rgba(220,232,246,0.95) 100%);
  border-bottom: 1px solid rgba(10,25,50,0.35);
}

/* Friends list items */
html[data-theme="light"] .ncs-friend-item,
html[data-theme="light"] .ncs-friend-row {
  background: rgba(230,238,250,0.92);
  border: 1px solid rgba(10,25,50,0.30);
}
html[data-theme="light"] .ncs-friend-item:hover,
html[data-theme="light"] .ncs-friend-row:hover {
  background: rgba(220,235,250,0.98);
  border-color: rgba(0,101,133,0.45);
}

/* Friends action buttons */
html[data-theme="light"] .ncs-friend-btn,
html[data-theme="light"] .ncs-friend-action-btn {
  background: rgba(225,235,248,0.90);
  border: 1px solid rgba(10,25,50,0.40);
  color: var(--nc-text);
}
html[data-theme="light"] .ncs-friend-btn:hover,
html[data-theme="light"] .ncs-friend-action-btn:hover {
  background: rgba(0,101,133,0.12);
  border-color: rgba(0,101,133,0.50);
  color: var(--nc-cyan);
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE: GLOBAL INPUT/SEARCH BORDER FIX
   Ensure all search inputs have visible dark borders
═══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] .ncs-input,
html[data-theme="light"] .ncs-search-input {
  border-color: rgba(10,25,50,0.40);
}
html[data-theme="light"] input[type="text"]:focus,
html[data-theme="light"] input[type="search"]:focus,
html[data-theme="light"] .ncs-input:focus,
html[data-theme="light"] .ncs-search-input:focus {
  border-color: rgba(0,101,133,0.55);
}

/* Search box wrapper in modals */
html[data-theme="light"] .ncs-search-box {
  background: rgba(215,228,244,0.60);
  border-bottom: 1px solid rgba(10,25,50,0.30);
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE: MODAL OVERLAY PANELS FIX
   Ensure all modal panels use light backgrounds
═══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .ncs-modal-panel,
html[data-theme="light"] .ncs-modal-content,
html[data-theme="light"] .ncs-drawer,
html[data-theme="light"] .ncs-sheet {
  background: linear-gradient(180deg, rgba(225,235,248,0.98) 0%, rgba(220,232,246,0.99) 100%);
  border: 1px solid rgba(10,25,50,0.40);
}

/* Modal section backgrounds */
html[data-theme="light"] .ncs-modal-section,
html[data-theme="light"] .ncs-panel-body {
  background: rgba(215,228,244,0.60);
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE: REQUESTS LIST / FRIENDS PANEL FIX
   Ensure the requests area has proper light background
═══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .ncs-requests-list {
  background: linear-gradient(180deg, rgba(210,224,240,0.96) 0%, rgba(205,220,238,0.98) 100%);
}
html[data-theme="light"] .ncs-requests-list::before {
  background-image: none;
  opacity: 0;
}
html[data-theme="light"] .ncs-requests-list .ncs-empty {
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE: FRIENDS RIGHT PANEL FIX
   Ensure the right panel of friends modal is light
═══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .ncs-friends-right {
  background: linear-gradient(180deg, rgba(210,224,240,0.98) 0%, rgba(205,220,238,0.99) 100%);
}
html[data-theme="light"] .ncs-friends-right::before {
  background-image: none;
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE: CHAT / MESSAGES PAGE COMPREHENSIVE FIX
   Brighten all chat areas while preserving cyberpunk atmosphere
═══════════════════════════════════════════════════════════════════ */

/* ── Chat Page Body — Light futuristic background ─────────────── */
html[data-theme="light"] #ncsPageChat .ncs-page-body {
  background: linear-gradient(135deg, rgba(215,228,244,0.98) 0%, rgba(210,224,240,0.99) 100%);
}
html[data-theme="light"] #ncsPageChat .ncs-page-body::before {
  background-image: none;
  opacity: 0;
}

/* ── Chat Sidebar — Light panel with subtle structure ─────────── */
html[data-theme="light"] #ncsPageChat .ncs-sidebar {
  background: linear-gradient(180deg, rgba(220,232,246,0.98) 0%, rgba(215,228,244,0.99) 100%);
  border-right: 1px solid rgba(10,25,50,0.30);
}
html[data-theme="light"] #ncsPageChat .ncs-sidebar::before {
  background-image: none;
  opacity: 0;
}

/* ── Chat Window — Main messages area ─────────────────────────── */
html[data-theme="light"] .ncs-chat-window {
  background: linear-gradient(180deg, rgba(225,235,248,0.95) 0%, rgba(220,232,246,0.98) 100%);
  border-left: 1px solid rgba(10,25,50,0.25);
}
html[data-theme="light"] .ncs-chat-window::before {
  background-image: none;
  opacity: 0;
}

/* ── Messages Area — Content container ────────────────────────── */
html[data-theme="light"] .ncs-messages-area {
  background: transparent;
}
html[data-theme="light"] .ncs-messages-area::-webkit-scrollbar-track {
  background: rgba(10,25,50,0.04);
}
html[data-theme="light"] .ncs-messages-area::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,101,133,0.25) 0%, rgba(74,32,128,0.20) 100%);
}
html[data-theme="light"] .ncs-messages-area::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(0,101,133,0.40) 0%, rgba(74,32,128,0.32) 100%);
}

/* ── Chat Header — Light top bar ──────────────────────────────── */
html[data-theme="light"] .ncs-chat-header {
  background: linear-gradient(180deg, rgba(230,240,252,0.98) 0%, rgba(225,235,248,0.96) 100%);
  border-bottom: 1px solid rgba(10,25,50,0.28);
}
html[data-theme="light"] .ncs-chat-header::before {
  background-image: none;
  opacity: 0;
}
html[data-theme="light"] .ncs-chat-header::after {
  background: transparent;
}

/* ── Date Dividers — Light badges ─────────────────────────────── */
html[data-theme="light"] .ncs-msg-date-div {
  color: rgba(30,50,80,0.55);
}
html[data-theme="light"] .ncs-msg-date-div span {
  background: rgba(235,242,252,0.98);
  border: 1px solid rgba(10,25,50,0.25);
  color: #2a3a55;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(10,25,50,0.08);
}
html[data-theme="light"] .ncs-msg-date-div::before {
  background: linear-gradient(90deg, transparent, rgba(10,25,50,0.15), transparent);
}

/* ── Message Bubbles — Enhanced Light Mode ────────────────────── */
html[data-theme="light"] .ncs-msg.mine .ncs-msg-bubble {
  background: linear-gradient(135deg, rgba(0,101,133,0.18) 0%, rgba(0,130,160,0.12) 100%);
  border: 1px solid rgba(0,101,133,0.35);
  color: #0a1a2a;
  box-shadow: 0 2px 6px rgba(0,101,133,0.10);
}
html[data-theme="light"] .ncs-msg.mine .ncs-msg-bubble:hover {
  background: linear-gradient(135deg, rgba(0,101,133,0.22) 0%, rgba(0,130,160,0.16) 100%);
  border-color: rgba(0,101,133,0.45);
}
html[data-theme="light"] .ncs-msg.theirs .ncs-msg-bubble {
  background: rgba(240,245,255,0.98);
  border: 1px solid rgba(10,25,50,0.22);
  color: #1a2a40;
  box-shadow: 0 2px 6px rgba(10,25,50,0.08);
}
html[data-theme="light"] .ncs-msg.theirs .ncs-msg-bubble:hover {
  background: rgba(245,248,255,1);
  border-color: rgba(10,25,50,0.32);
}

/* ── Message Time — Visible in Light Mode ─────────────────────── */
html[data-theme="light"] .ncs-msg-time {
  color: rgba(30,50,80,0.55);
}
html[data-theme="light"] .ncs-msg:hover .ncs-msg-time {
  color: rgba(30,50,80,0.70);
}

/* ── Input Bar — Light bottom area ────────────────────────────── */
html[data-theme="light"] .ncs-input-bar {
  background: linear-gradient(180deg, rgba(225,235,248,0.96) 0%, rgba(230,240,252,0.98) 100%);
  border-top: 1px solid rgba(10,25,50,0.25);
}
html[data-theme="light"] .ncs-input-bar::before {
  background: transparent;
  opacity: 0;
}

/* ── Message Input — Refined styling ──────────────────────────── */
html[data-theme="light"] .ncs-msg-input {
  background: rgba(245,248,255,0.98);
  border: 2px solid rgba(40,60,100,0.35);
  color: #0a1628;
}
html[data-theme="light"] .ncs-msg-input:focus {
  border-color: rgba(0,101,133,0.55);
  background: rgba(250,252,255,1);
  box-shadow: 0 0 0 3px rgba(0,101,133,0.12), 0 0 12px rgba(0,101,133,0.15);
}
html[data-theme="light"] .ncs-msg-input::placeholder {
  color: rgba(30,50,80,0.50);
}

/* ── Empty Conversation State — Light Mode ────────────────────── */
html[data-theme="light"] .ncs-no-conv {
  color: rgba(30,50,80,0.60);
  background: transparent;
}
html[data-theme="light"] .ncs-no-conv::before {
  opacity: 0.08;
  filter: invert(0.85) hue-rotate(180deg);
}
html[data-theme="light"] .ncs-no-conv::after {
  opacity: 0.12;
  filter: invert(0.85) hue-rotate(180deg);
}
html[data-theme="light"] .ncs-no-conv-icon {
  opacity: 0.45;
  filter: saturate(0.8) brightness(0.7);
}
html[data-theme="light"] .ncs-no-conv-title {
  color: rgba(0,101,133,0.70);
  text-shadow: none;
}

/* ── Conversation Rows — Enhanced Light Mode ──────────────────── */
html[data-theme="light"] .ncs-conv-row {
  background: rgba(235,242,252,0.92);
  border: 1px solid rgba(10,25,50,0.20);
}
html[data-theme="light"] .ncs-conv-row:hover {
  background: rgba(230,240,255,0.98);
  border-color: rgba(0,101,133,0.40);
  box-shadow: 0 2px 10px rgba(0,101,133,0.12);
}
html[data-theme="light"] .ncs-conv-row.selected {
  background: linear-gradient(135deg, rgba(0,101,133,0.15) 0%, rgba(0,130,160,0.08) 100%);
  border: 2px solid rgba(0,101,133,0.55);
  box-shadow: 0 0 12px rgba(0,101,133,0.15);
}
html[data-theme="light"] .ncs-conv-row.selected .ncs-conv-name {
  color: var(--nc-cyan);
  font-weight: 700;
}
html[data-theme="light"] .ncs-conv-name {
  color: #0a1a2a;
  font-weight: 600;
}
html[data-theme="light"] .ncs-conv-preview {
  color: rgba(30,50,80,0.65);
}
html[data-theme="light"] .ncs-conv-time {
  color: rgba(30,50,80,0.55);
}
html[data-theme="light"] .ncs-conv-unread {
  background: var(--nc-cyan);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(0,101,133,0.40);
}

/* ── Section Labels in Sidebar — Readable ─────────────────────── */
html[data-theme="light"] #ncsPageChat .ncs-sec-label {
  color: rgba(30,50,80,0.65);
  border-bottom-color: rgba(10,25,50,0.18);
}

/* ── Search Box in Chat Sidebar ───────────────────────────────── */
html[data-theme="light"] #ncsPageChat .ncs-search-wrap {
  background: transparent;
  border: none;
}
html[data-theme="light"] #ncsPageChat .ncs-input {
  background: rgba(245,248,255,0.98);
  border: 2px solid rgba(40,60,100,0.35);
  color: #0a1628;
}
html[data-theme="light"] #ncsPageChat .ncs-input:focus {
  border-color: rgba(0,101,133,0.55);
  background: rgba(250,252,255,1);
}
html[data-theme="light"] #ncsPageChat .ncs-input::placeholder {
  color: rgba(30,50,80,0.50);
}