/* text colors */
.color_switch { float: left; width: 12%; margin:0.25%; position:relative; min-height:40px; text-align:center; }
.bccheck { font-size:20px; color:#fff; margin-top:9px; }
.open_player { color:#fff; }
.my_notice { background-clip:unset; }
.bdisabled { opacity:0.5; }

/* gender colors */
.gen0, .gen1, .gen2, .gen3 { border:2px solid; }
.gen0 { border-color:#ccc; }
.gen1 { border-color:#03add8; }
.gen2 { border-color:#ff99ff;}
.gen3 { border-color:#6600cc;}

/* audio colors */
.audio_color { background:#444; color:#fff; }
.song_title { background:#666; color:#fff; }
.audio_progress { background:#fff; }
.audio_ball { background:#666; }

/* call */
.call_back { background:#000; color:#fff; }
.vcall_user { }
.vcall_btn { background:#222; }
.vcall_off { background-color:rgba(255, 80, 80, 0.7); }
#vcall_self { background:#000; }

/* misc colors */
.saved_ok { background-color:rgba(0,102,0,0.8); color:#fff; }
.saved_error { background-color:rgba(255,0,0,0.8); color:#fff; }
.background_stream { background-color:rgba(0,0,0,0.9);}
.lite_olay { background-color:rgba(100,100,100,0.4); color:#fff; }
.olay { background-color:rgba(0,0,0,0.5); color:#fff; }
.dark_olay { background-color:rgba(0,0,0,0.6); color:#fff; }
.cover_text { text-shadow:0 0 2px rgba(0, 0, 0, .8); }
.avatar_profile { border:2px solid #fff; }
.sub_list_active { border:2px solid #fff; }
.avavatar { border:2px solid #fff; }
.grad_olay { background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%); }
.grad_iolay { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%); }

/* alert colors */
.alert_neutral { color: #004085; background: #cce5ff; border-color: #b8daff; }
.alert_success { color: #155724; background: #d4edda; border-color: #c3e6cb; }
.alert_error { color: #721c24; background: #f8d7da; border-color: #f5c6cb;}
.alert_warn { color: #0c5460; background: #d1ecf1; border-color: #bee5eb; }
.alert_base { color: #333; background: #f0f0f0; border-color: #888; }

.neutralb { color: #004085; background: #cce5ff; }
.successb { color: #155724; background: #d4edda; }
.errorb { color: #721c24; background: #f8d7da;}
.warnb { color: #0c5460; background: #d1ecf1; }
.baseb { color: #333; background: #f0f0f0; }

/* gender colors */
.genmale { border-color:#03add8; }
.genfemale { border-color:#ff99ff; }
.genother { border-color:#ccc; }

/* ghost post */
.ghost_post { border-color:#03add8; }

/* special log default colors */
.topic_log { background:#d9f2e6; color:#0d261a; }


/* basic name colors */
.bcolor1 { color:#ff3333; }
.bcolor2 { color:#ff6633; }
.bcolor3 { color:#ff9933; }
.bcolor4 { color:#ffcc33; }
.bcolor5 { color:#cccc00; }
.bcolor6 { color:#99cc00; }
.bcolor7 { color:#59b300; }
.bcolor8 { color:#829356; }
.bcolor9 { color:#008000; }
.bcolor10 { color:#00e639; }
.bcolor11 { color:#00e673; }
.bcolor12 { color:#00e6ac; }
.bcolor13 { color:#00cccc; }
.bcolor14 { color:#03add8; }
.bcolor15 { color:#3366ff; }
.bcolor16 { color:#107896; }
.bcolor17 { color:#004d99; }
.bcolor18 { color:#6633ff; }
.bcolor19 { color:#9933ff; }
.bcolor20 { color:#cc33ff; }
.bcolor21 { color:#ff33ff; }
.bcolor22 { color:#ff33cc; }
.bcolor23 { color:#ff3399; }
.bcolor24 { color:#ff3366; }
.bcolor25 { color:#604439; }
.bcolor26 { color:#795548; }
.bcolor27 { color:#a97f70; }
.bcolor28 { color:#bc9b8f; }
.bcolor29 { color:#9E9E9E; }
.bcolor30 { color:#879fab; }
.bcolor31 { color:#698796; }
.bcolor32 { color:#495f69; }

/* basic name colors background */
.bcback1 { background:#ff3333; }
.bcback2 { background:#ff6633; }
.bcback3 { background:#ff9933; }
.bcback4 { background:#ffcc33; }
.bcback5 { background:#cccc00; }
.bcback6 { background:#99cc00; }
.bcback7 { background:#59b300; }
.bcback8 { background:#829356; }
.bcback9 { background:#008000; }
.bcback10 { background:#00e639; }
.bcback11 { background:#00e673; }
.bcback12 { background:#00e6ac; }
.bcback13 { background:#00cccc; }
.bcback14 { background:#03add8; }
.bcback15 { background:#3366ff; }
.bcback16 { background:#107896; }
.bcback17 { background:#004d99; }
.bcback18 { background:#6633ff; }
.bcback19 { background:#9933ff; }
.bcback20 { background:#cc33ff; }
.bcback21 { background:#ff33ff; }
.bcback22 { background:#ff33cc; }
.bcback23 { background:#ff3399; }
.bcback24 { background:#ff3366; }
.bcback25 { background:#604439; }
.bcback26 { background:#795548; }
.bcback27 { background:#a97f70; }
.bcback28 { background:#bc9b8f; }
.bcback29 { background:#9E9E9E; }
.bcback30 { background:#879fab; }
.bcback31 { background:#698796; }
.bcback32 { background:#495f69; }


/* gradient colors */
.backgrad1,.bgrad1 { background: linear-gradient(to right,#40e0d0,#ff8c00, #ff0080);}
.backgrad2,.bgrad2 { background: linear-gradient(to right,#11998e,#38ef7d);}
.backgrad3,.bgrad3 { background: linear-gradient(to right,#fc466b,#3f5efb);}
.backgrad4,.bgrad4 { background: linear-gradient(to right,#00f260,#0575e6); }
.backgrad5,.bgrad5 { background: linear-gradient(to right,#fc4a1a,#f7b733); }
.backgrad6,.bgrad6 { background: linear-gradient(to right,#22c1c3,#fdbb2d);}
.backgrad7,.bgrad7 { background: linear-gradient(to right,#7f00ff,#e100ff);}
.backgrad8,.bgrad8 { background: linear-gradient(to right,#ee0979,#ff6a00); }
.backgrad9,.bgrad9 { background: linear-gradient(to right,#00c3ff,#ffff1c); }
.backgrad10,.bgrad10 { background: linear-gradient(to right,#fc00ff,#00dbde); }
.backgrad11,.bgrad11 { background: linear-gradient(to right,#833ab4,#fd1d1d, #fcb045);}
.backgrad12,.bgrad12 { background: linear-gradient(to right,#bdc3c7,#2c3e50);}
.backgrad13,.bgrad13 { background: linear-gradient(to right,#373B44,#4286f4);}
.backgrad14,.bgrad14 { background: linear-gradient(to right,#FF0099,#493240);}
.backgrad15,.bgrad15 { background: linear-gradient(to right,#f953c6,#b91d73);}
.backgrad16,.bgrad16 { background: linear-gradient(to right,#dd3e54,#6be585);}
.backgrad17,.bgrad17 { background: linear-gradient(to right,#8360c3,#2ebf91);}
.backgrad18,.bgrad18 { background: linear-gradient(to right,#544a7d,#ffd452);}
.backgrad19,.bgrad19 { background: linear-gradient(to right,#009FFF,#ec2F4B);}
.backgrad20,.bgrad20 { background: linear-gradient(to right,#59C173,#a17fe0,#5D26C1);}
.backgrad21,.bgrad21 { background: linear-gradient(to right,#a8c0ff,#3f2b96);}
.backgrad22,.bgrad22 { background: linear-gradient(45deg, #FF0000 0%, #FFA600 50%, #ff0000 100%);}
.backgrad23,.bgrad23 { background: linear-gradient(to right,#108dc7,#ef8e38);}
.backgrad24,.bgrad24 { background: linear-gradient(to right,#FF0099,#0575E6); }
.backgrad25,.bgrad25 { background: linear-gradient(to right,#667db6,#0082c8,#ec38bc,#fdeff9); }
.backgrad26,.bgrad26 { background: linear-gradient(to right,#03001e,#7303c0,#ec38bc,#fdeff9); }
.backgrad27,.bgrad27 { background: linear-gradient(to right,#1a2a6c,#b21f1f,#fdbb2d);}
.backgrad28,.bgrad28 { background: linear-gradient(to right,#3A1C71,#D76D77,#FFAF7B); }
.backgrad29,.bgrad29 { background: linear-gradient(to right,#EB5757,#333); }
.backgrad30,.bgrad30 { background: linear-gradient(to right,#20002c,#cbb4d4); }
.backgrad31,.bgrad31 { background: linear-gradient(to right,#34e89e,#0f3443); }
.backgrad32,.bgrad32 { background: linear-gradient(to right,#bdc3c7,#2c3e50); }
.backgrad33,.bgrad33 { background: linear-gradient(to right,#a80077,#66ff00); }
.backgrad34,.bgrad34 { background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);}
.backgrad35,.bgrad35 { background: linear-gradient(to top, #a241b7, #7f68d7, #5186e9, #1b9eef, #12b2eb);}
.backgrad36,.bgrad36 { background: linear-gradient(to bottom, #845EC2 0%, #D65DB1 0%, #FF6F91 51%, #FF9671 100%);}
.backgrad37,.bgrad37 { background: linear-gradient(to right, #FF0000, #FFF200, #1E9600); color: transparent; }
.backgrad38,.bgrad38 { background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%); }
.backgrad39,.bgrad39 { background: linear-gradient(to bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12);}
.backgrad40,.bgrad40 { background: linear-gradient(45deg, #222 0%, #FFA600 50%, #222 100%);}

/* name gradient clip */
.bgrad1, .bgrad2, .bgrad3, .bgrad4, .bgrad5, .bgrad6, .bgrad7, .bgrad8, .bgrad9, .bgrad10,
.bgrad11, .bgrad12, .bgrad13, .bgrad14, .bgrad15, .bgrad16, .bgrad17, .bgrad18, .bgrad19,
.bgrad20, .bgrad21, .bgrad22, .bgrad23, .bgrad24, .bgrad25, .bgrad26, .bgrad27, .bgrad28,
.bgrad29, .bgrad30, .bgrad31, .bgrad32, .bgrad33, .bgrad34, .bgrad35, .bgrad36, .bgrad37,
.bgrad38, .bgrad39, .bgrad40 {  color:transparent; -webkit-background-clip:text; background-clip:text; }

/* neon name colors */
.bneon1 { color:#fff; text-shadow:1px 1px 1px #e60000, 1px 1px 3px #ff3333, 1px 1px 5px #ff3333; }
.bneon2 { color:#fff; text-shadow:1px 1px 1px #e63900, 1px 1px 3px #ff6633, 1px 1px 5px #ff6633; }
.bneon3 { color:#fff; text-shadow:1px 1px 1px #e67300, 1px 1px 3px #ff9933, 1px 1px 5px #ff9933; }
.bneon4 { color:#fff; text-shadow:1px 1px 1px #b38600, 1px 1px 3px #ffcc33, 1px 1px 5px #ffcc33; }
.bneon5 { color:#fff; text-shadow:1px 1px 1px #808000, 1px 1px 3px #cccc00, 1px 1px 5px #cccc00; }
.bneon6 { color:#fff; text-shadow:1px 1px 1px #739900, 1px 1px 3px #99cc00, 1px 1px 5px #99cc00; }
.bneon7 { color:#fff; text-shadow:1px 1px 1px #408000, 1px 1px 3px #59b300, 1px 1px 5px #59b300; }
.bneon8 { color:#fff; text-shadow:1px 1px 1px #637042, 1px 1px 3px #829356, 1px 1px 5px #829356; }
.bneon9 { color:#fff; text-shadow:1px 1px 1px #004d00, 1px 1px 3px #008000, 1px 1px 5px #008000; }
.bneon10 { color:#fff; text-shadow:1px 1px 1px #009926, 1px 1px 3px #00e639, 1px 1px 5px #00e639; }
.bneon11 { color:#fff; text-shadow:1px 1px 1px #00994d, 1px 1px 3px #00e673, 1px 1px 5px #00e673; }
.bneon12 { color:#fff; text-shadow:1px 1px 1px #009973, 1px 1px 3px #00e6ac, 1px 1px 5px #00e6ac; }
.bneon13 { color:#fff; text-shadow:1px 1px 1px #008080, 1px 1px 3px #00cccc, 1px 1px 5px #00cccc; }
.bneon14 { color:#fff; text-shadow:1px 1px 1px #027997, 1px 1px 3px #03add8, 1px 1px 5px #03add8; }
.bneon15 { color:#fff; text-shadow:1px 1px 1px #0040ff, 1px 1px 3px #3366ff, 1px 1px 5px #3366ff; }
.bneon16 { color:#fff; text-shadow:1px 1px 1px #0c5d73, 1px 1px 3px #107896, 1px 1px 5px #107896; }
.bneon17 { color:#fff; text-shadow:1px 1px 1px #003366, 1px 1px 3px #004d99, 1px 1px 5px #004d99; }
.bneon18 { color:#fff; text-shadow:1px 1px 1px #2d00b3, 1px 1px 3px #6633ff, 1px 1px 5px #6633ff; }
.bneon19 { color:#fff; text-shadow:1px 1px 1px #7300e6, 1px 1px 3px #9933ff, 1px 1px 5px #9933ff; }
.bneon20 { color:#fff; text-shadow:1px 1px 1px #ac00e6, 1px 1px 3px #cc33ff, 1px 1px 5px #cc33ff; }
.bneon21 { color:#fff; text-shadow:1px 1px 1px #cc00cc, 1px 1px 3px #ff33ff, 1px 1px 5px #ff33ff; }
.bneon22 { color:#fff; text-shadow:1px 1px 1px #e600ac, 1px 1px 3px #ff33cc, 1px 1px 5px #ff33cc; }
.bneon23 { color:#fff; text-shadow:1px 1px 1px #cc0066, 1px 1px 3px #ff3399, 1px 1px 5px #ff3399; }
.bneon24 { color:#fff; text-shadow:1px 1px 1px #e60039, 1px 1px 3px #ff3366, 1px 1px 5px #ff3366; }
.bneon25 { color:#fff; text-shadow:1px 1px 1px #503930, 1px 1px 3px #604439, 1px 1px 5px #604439; }
.bneon26 { color:#fff; text-shadow:1px 1px 1px #604439, 1px 1px 3px #795548, 1px 1px 5px #795548; }
.bneon27 { color:#fff; text-shadow:1px 1px 1px #805a4d, 1px 1px 3px #a97f70, 1px 1px 5px #a97f70; }
.bneon28 { color:#fff; text-shadow:1px 1px 1px #9f7160, 1px 1px 3px #bc9b8f, 1px 1px 5px #bc9b8f; }
.bneon29 { color:#fff; text-shadow:1px 1px 1px #808080, 1px 1px 3px #9E9E9E, 1px 1px 5px #9E9E9E; }
.bneon30 { color:#fff; text-shadow:1px 1px 1px #5e7a87, 1px 1px 3px #879fab, 1px 1px 5px #879fab; }
.bneon31 { color:#fff; text-shadow:1px 1px 1px #495f69, 1px 1px 3px #698796, 1px 1px 5px #698796; }
.bneon32 { color:#fff; text-shadow:1px 1px 1px #2a363c, 1px 1px 3px #495f69, 1px 1px 5px #495f69; }

/* neon name colors background */
.bnback1 { background:#ff3333; }
.bnback2 { background:#ff6633; }
.bnback3 { background:#ff9933; }
.bnback4 { background:#ffcc33; }
.bnback5 { background:#cccc00; }
.bnback6 { background:#99cc00; }
.bnback7 { background:#59b300; }
.bnback8 { background:#829356; }
.bnback9 { background:#008000; }
.bnback10 { background:#00e639; }
.bnback11 { background:#00e673; }
.bnback12 { background:#00e6ac; }
.bnback13 { background:#00cccc; }
.bnback14 { background:#03add8; }
.bnback15 { background:#3366ff; }
.bnback16 { background:#107896; }
.bnback17 { background:#004d99; }
.bnback18 { background:#6633ff; }
.bnback19 { background:#9933ff; }
.bnback20 { background:#cc33ff; }
.bnback21 { background:#ff33ff; }
.bnback22 { background:#ff33cc; }
.bnback23 { background:#ff3399; }
.bnback24 { background:#ff3366; }
.bnback25 { background:#604439; }
.bnback26 { background:#795548; }
.bnback27 { background:#a97f70; }
.bnback28 { background:#bc9b8f; }
.bnback29 { background:#9E9E9E; }
.bnback30 { background:#879fab; }
.bnback31 { background:#698796; }
.bnback32 { background:#495f69; }

/* ===== خلفية متوهّجة متحرّكة للاسم ===== */
.username-badge{
  position: relative;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  z-index: 1;
}
.username-badge > .label{
  position: relative;
  z-index: 2;
}

/* طبقة التوهّج */
.username-badge::before{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  z-index: 0;
  filter: blur(8px) saturate(1.2);
  opacity: .95;
  pointer-events: none;

  /* ألوان التدرّج المتحرّك تُستمد من متغيرات نضبطها بالكلاسات الموجودة عندك */
  background: linear-gradient(90deg,
    var(--g1, #ff5f6d),
    var(--g2, #ffc371),
    var(--g3, #8ec5fc),
    var(--g4, #e0c3fc)
  );
  background-size: 300% 300%;
  animation: glowShift 6s linear infinite;
}

/* تغميق خفيف لتحسين قراءة النص */
.username-badge::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
}

/* حركة التوهّج */
@keyframes glowShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ربط الكلاسات الموجودة عندك بمتغيرات الألوان — يكفي نماذج والأخرى تقدر تكررها حسب حاجتك */

/* backgradN (تدرّجات) */
.backgrad1  { --g1:#40e0d0; --g2:#ff8c00; --g3:#ff0080; --g4:#ff8c00; }
.backgrad2  { --g1:#11998e; --g2:#38ef7d; --g3:#11998e; --g4:#38ef7d; }
.backgrad3  { --g1:#fc466b; --g2:#3f5efb; --g3:#fc466b; --g4:#3f5efb; }
.backgrad4  { --g1:#00f260; --g2:#0575e6; --g3:#00f260; --g4:#0575e6; }
/* … كرّر لباقي backgrad5..40 لو تحب تخصّص */

/* bcbackN (ثابتة اللون) — نخلي التوهّج يدور حول تدرّج من نفس العائلة */
.bcback1  { --g1:#ff3333; --g2:#ff8a8a; --g3:#ff3333; --g4:#ffb3b3; }
.bcback2  { --g1:#ff6633; --g2:#ffb088; --g3:#ff6633; --g4:#ffd0b3; }
.bcback3  { --g1:#ff9933; --g2:#ffc180; --g3:#ff9933; --g4:#ffe0b3; }
/* … كرّر حتى bcback32 (تقدر تكرر نمط قريب) */

/* bnbackN (نيون) — نضيف نبض بسيط فوق الحركة */
.username-badge[class*="bnback"]::before{
  animation: glowShift 6s linear infinite, neonPulse 2.8s ease-in-out infinite;
}
@keyframes neonPulse {
  0%,100% { filter: blur(8px) brightness(1); }
  50%     { filter: blur(10px) brightness(1.15); }
}

/* موبايل */
@media (max-width:480px){
  .username-badge{ padding: 2px 6px; }
}
/* ==== فلاش نِك خلف النص مباشرة ==== */
.nick-flash{
  position: relative;
  display: inline;              /* مهم: يبقى ضمن السطر */
  line-height: 1.1;             /* يقرّب الخلفية للنص */
  padding: 0 .30em;             /* صغير جداً حتى تحس أنها خلف الحروف */
  border-radius: .45em;
  color: #fff;                  /* نص أبيض فوق الخلفية */
  font-weight: 700;
  z-index: 1;
}

/* طبقة التوهّج المتحركة خلف الحروف */
.nick-flash::before{
  content:"";
  position:absolute;
  inset: -0.2em;                /* تمديد خفيف حول الحروف */
  border-radius: .6em;
  z-index:-1;
  background: linear-gradient(90deg,
    var(--g1, #ff5f6d),
    var(--g2, #ffc371),
    var(--g3, #8ec5fc),
    var(--g4, #e0c3fc)
  );
  background-size: 300% 300%;
  animation: nickGlow 6s linear infinite;
  filter: blur(6px) saturate(1.15);
  opacity:.95;
  pointer-events:none;
}

/* طبقة خلفية رقيقة مباشرة تحت النص لزيادة القراءة */
.nick-flash::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: .45em;
  z-index:-1;
  background: rgba(0,0,0,.16);
  pointer-events:none;
}

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

/* ربط متغيرات الألوان مع كلاساتك الحالية (اختر ما تحتاج) */
.backgrad1  { --g1:#40e0d0; --g2:#ff8c00; --g3:#ff0080; --g4:#40e0d0; }
.backgrad2  { --g1:#11998e; --g2:#38ef7d; --g3:#11998e; --g4:#38ef7d; }
.bcback14   { --g1:#03add8; --g2:#7edcff; --g3:#03add8; --g4:#b6ecff; }
/* … تقدر تضيف باقي backgradN/bcbackN حسب رغبتك … */

/* لو اخترت نيون bnbackN نضيف نبض خفيف */
@keyframes nickPulse{0%,100%{filter:blur(6px) brightness(1)} 50%{filter:blur(7px) brightness(1.15)}}
.nick-flash[class*="bnback"]::before{
  animation: nickGlow 6s linear infinite, nickPulse 2.8s ease-in-out infinite;
}

/* موبايل: تقليل الحواف */
@media (max-width:480px){
  .nick-flash{ padding:0 .24em; border-radius:.38em; }
  .nick-flash::before{ inset:-.18em; }
}