@charset "UTF-8";
/* الوضع الليلي (الافتراضي) */
:root {
  --bodyBG: #151515;
  --TriangleBG: url("/Pic/Svg/Dark/Subtle-Prism.svg");
  --HeaderBG: rgba(22, 22, 22, 0.9);
  --PrimaryBG: #18191a;
  --SecondBG: #161616;
  --ThirdBG: #242424;
  --FourBG: #141414;
  --PrimaryColor: #fff;
  --PrimaryColor_: #f7f7f7;
  --PrimaryColor__: #ccc;
  --SecondColor: #d7d7d7;
  --ThirdColor: #ffda57;
  --ThirdIn: #18191a;
  --FourColor: #dfdfdf;
  --FiveColor: #B0B3B8;
  --SixColor: #B0B3B8;
  --FreeColor: #CACFD2;
  --PrimaryShadow: #161616;
  --PrimaryBorder: #323232;
  --BtnBorder: #4e4e4e;
  --TutorialBG: #18191a;
  --TutorialBG_: #242526;
  --nameLogo: #dfdfdf;
  --selectCompany: #141414;
  --imgWelcome: 0.6;
  --loadinPagebarSec: #ffeba6;
  --lineProgressAnalyse: linear-gradient(to right, #d5b33d, #ddb835, #e8b910);
  --chartLine: #314c66;
  --numSearchActivity: #f2e811;
  --chartBarLine: #21abb0;
  --bgAai: #242424;
  --bgBai: #242424;
  --bgCai: #ff6060;
  --bgDai: #ffda57;
  --bgEai: rgba(21, 32, 43, 0.43);
  --bgFai: #242424;
  --coAai: #000000;
  --coBai: #B0B3B8;
  --boAai: #ff9c5c;
  --boBai: #323232;
  --primary-blue: #3B82F6;
  --secondary-teal: #14B8A6;
  --accent-orange: #F97316;
  --success-green: #10B981;
  --warning-yellow: #F59E0B;
  --error-red: #EF4444;
  --bg-primary: #0F172A;
  --text-primary: #F8FAFC;
  --text-secondary: #E2E8F0;
  --text-tertiary: #94A3B8;
  --text-quaternary: #64748B;
  --shadow-primary: rgba(0, 0, 0, 0.5);
  --shadow-secondary: rgba(0, 0, 0, 0.3);
  --gradient-primary: linear-gradient(90deg, #0072ff 0%, #00d4ff 100%);
  --gradient-secondary: linear-gradient(135deg, var(--accent-orange), var(--warning-yellow));
  --gradient-success: linear-gradient(135deg, var(--success-green), var(--secondary-teal));
  /* ألوان إضافية للدفع */
  --paypal-blue: #0070ba;
  --paypal-dark: #003087;
  --stripe-purple: #635bff;
  --stripe-dark: #4c44d4;
  --vodafone-red: #e60000;
  --instapay-blue: #1e40af;
  --success-bg: rgba(16, 185, 129, 0.1);
  --error-bg: rgba(239, 68, 68, 0.1);
  --warning-bg: rgba(245, 158, 11, 0.1);
  --PrimaryColor: #f7971e;
  --SecondaryColor: #ffd200;
  --ThirdColor: #f7971e;
  --ThirdColor: #ff6060;
  --YtColor: #ff0033;
  --YtColor_: #e1002d;
  --FourthColor: #ffd200;
  --FifthColor: #ffffff;
  --SixthColor: #f8f8f8;
  --SeventhColor: #e8e8e8;
  --EighthColor: #d8d8d8;
  --NinthColor: #c8c8c8;
  --TenthColor: #b8b8b8;
  --EleventhColor: #a8a8a8;
  --TwelfthColor: #888888;
  --ThirteenthColor: #666666;
  --FourteenthColor: #444444;
  --FifteenthColor: #222222;
  --SixteenthColor: #111111;
  --SeventeenthColor: #000000;
  /* Gradients */
  --primary-gradient: linear-gradient(135deg, var(--PrimaryColor), var(--SecondaryColor));
  --yt-gradient: linear-gradient(145deg, rgb(255, 6, 55), rgb(156, 14, 42));
  --secondary-gradient: linear-gradient(135deg, #667eea, #764ba2);
  --success-gradient: linear-gradient(135deg, #11998e, #38ef7d);
  --warning-gradient: linear-gradient(135deg, #f093fb, #f5576c);
  --info-gradient: linear-gradient(135deg, #4facfe, #00f2fe);
  /* Shadows */
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-primary: 0 8px 32px rgba(247, 151, 30, 0.3);
  /* Border Radius */
  --radius-small: 0.7rem;
  --radius-medium: 1.5rem;
  --radius-large: 2.2rem;
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.7rem;
  --spacing-md: 1.3rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  /* Typography */
  --font-family: "Inter", "Tajawal", Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* الوضع النهاري */
[data-theme=light] {
  --bodyBG: #f8f8f8;
  --TriangleBG: none;
  --HeaderBG: #fff;
  --PrimaryBG: #fff;
  --SecondBG: #efefef;
  --ThirdBG: #fbfbfb;
  --FourBG: #fafafa;
  --PrimaryColor: #000;
  --PrimaryColor_: #1d1d1d;
  --PrimaryColor__: #494949;
  --SecondColor: #4c4c4c;
  --FreeColor: #516b86;
  --ThirdColor: #ff6060;
  --ThirdIn: #fff;
  --FourColor: #080808;
  --FiveColor: #636363;
  --SixColor: #c1c1c1;
  --PrimaryShadow: rgba(0, 0, 0, 0.05);
  --PrimaryBorder: #dfdfdf;
  --BtnBorder: #dfdfdf;
  --TutorialBG: #f8f8f8;
  --TutorialBG_: #efefef;
  --nameLogo: #4b4b4b;
  --selectCompany: #f7f7f7;
  --imgWelcome: 1;
  --loadinPagebarSec: #ffbcbc;
  --lineProgressAnalyse: linear-gradient(to right, #4cb5ff, #45b1ff, #0094ff);
  --chartLine: #4cb5ff;
  --numSearchActivity: #ff4d51;
  --chartBarLine: #45b1ff;
  --bgAai: #d8efff;
  --bgBai: #4cb5ff;
  --bgCai: #45b1ff;
  --bgDai: #0094ff;
  --bgEai: rgba(255, 255, 255, 0.43);
  --bgFai: #fff;
  --coAai: #fff;
  --coBai: #000000;
  --boAai: #9ad5ff;
  --boBai: rgba(255, 255, 255, 0.60);
  --bg-primary: #FFFFFF;
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-tertiary: #64748B;
  --text-quaternary: #94A3B8;
  --shadow-primary: rgba(0, 0, 0, 0.1);
  --shadow-secondary: rgba(0, 0, 0, 0.05);
}

/*$dir :rtl; //right
$dirplus :ltr; //left
$right :right; //right
$left :left; //left
$color :left;*/
/*
#192734 >> $PrimaryBG
#fff >> $PrimaryColor
#15202b >> $SecondBG
#d7d7d7 >> $SecondColor
#ffda57 >> $ThirdColor
*/
/*$bgbody: #1e1e1e;
$bgblock: #181818;
$bordmain: #2a2a2a;
$bordblock: RGBA(38,38,38,.6);
$colorhov: #d7d7d7 ;
$bg: hsla(180, 1%, 14%, 1);
$color2: #ad0018;
$loader2: #606060;
$shadow: #666;*/
/*$FourBG: #f9f9f9;*/
/*
$Theme: "light";
$bodyBG: #f8f8f8;
$TriangleBG:none ;
$HeaderBG: #fff;

$PrimaryBG: #fff;
$SecondBG: #efefef;
$ThirdBG: #dfdfdf;
$FourBG: #fafafa;



$PrimaryColor: #000;
$PrimaryColor_: #1d1d1d;
$PrimaryColor__: #494949;
$SecondColor: #4c4c4c;
$FreeColor: #516b86;
//الاحمر
$ThirdColor: #ff6060;
$FourColor: #080808;
$FiveColor: #636363;
$SixColor: #c1c1c1;



$PrimaryShadow: rgba(0, 0,0,.05);


$PrimaryBorder: #dfdfdf;
$BtnBorder: #4c4c4c ;


$TutorialBG: #f8f8f8;
$TutorialBG_: #efefef;

$nameLogo: #4b4b4b;
$selectCompany: #f7f7f7;
$imgWelcome:1;
$loadinPagebarSec: #ffbcbc;
$lineProgressAnalyse: linear-gradient(to right, #ff6060, #f04b4b, #f03b3b);
$chartLine: #ff6060;
$numSearchActivity: #ff4d51;
$chartBarLine: #45b1ff;


$bgAai: #d8efff;
$bgBai: #4cb5ff;
$bgCai: #45b1ff;
$bgDai: #0094ff;
$bgEai: rgba(255, 255, 255,.43);
$bgFai: #fff;
$coAai: #fff;
$coBai: #000000;
$boAai: #9ad5ff;
$boBai: rgba(255, 255, 255,.60);
*/
/*
$Theme: "dark";
$bodyBG: rgb(21, 32, 43);
$TriangleBG: url('/Pic/Svg/Dark/Subtle-Prism.svg');
$HeaderBG: rgba(25, 39, 52, 0.9);

$PrimaryBG: #192734;
$SecondBG: #15202b;
$ThirdBG: #243b51;
$FourBG: #101a24;

$PrimaryColor: #fff;
$PrimaryColor_: #f7f7f7;
$PrimaryColor__: #ccc;
$SecondColor: #d7d7d7;
$FreeColor: #516b86;
//الذهبي
$ThirdColor: #ffda57;

$FourColor: #dfdfdf;
$FiveColor: #6789ae;
$SixColor: #597693;

$PrimaryShadow: #15202b;


$PrimaryBorder: #243b51;
$BtnBorder: #243b51;*/
.transform {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.transform-2 {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

/*$bgAai: #ff6060;
$bgBai: #ffda57;
$bgCai: #ff6060;
$bgDai: #ffda57;
$bgEai: rgba(255, 177, 121,.43);
$bgFai: #ff9c5c;
$coAai: #000000;
$coBai: #000000;
$boAai: #ff9c5c;
$boBai: rgba(253,155, 91,.60);*/
/*/**/
/*@font-face {
    font-family: 'Helvetica Neue W23 for SKY Reg';
    font-weight: 100;
    font-style: normal;
    src: url("/../Assets/Fonts/HelveticaNeue-Reg.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/../Assets/Fonts/GE_SS_Unique_Light.ttf') format('truetype');
}
*/
@font-face {
  font-family: "Alice";
  src: url("/../Assets/Fonts/Alice-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Tajawal";
  src: url("/../Assets/Fonts/Tajawal-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "ComingSoon";
  src: url("/../Assets/Fonts/ComingSoon-Regular.ttf") format("truetype");
}
/*
@font-face {
    font-family: 'carre';
    src: url('/../Assets/Fonts/Carre.ttf') format('truetype');
}

@font-face {
    font-family: 'tachkili font ttf';
    src: url('/../Assets/Fonts/Tachkili_Font_TTF.otf') format('opentype');
}

@font-face {
    font-family: 'abel-regular';
    src: url('/../Assets/Fonts/abel-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'fontawesome-webfont';
    src: url('/../Assets/Fonts/fontawesome-webfont.ttf') format('truetype');
}


@font-face {
    font-family: 'Play';
    src: url('/../Assets/Fonts/DoppioOne.woff2') format('woff2');
}
*/
@font-face {
  font-family: "jersey-m54";
  src: url("/../Assets/Fonts/Jersey-M54.ttf") format("truetype");
}
@font-face {
  font-family: "Play";
  src: url("/../Assets/Fonts/DoppioOne-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "digital";
  src: url("/../Assets/Fonts/digital-7.ttf") format("truetype");
}
@font-face {
  font-family: "Play";
  src: url("/../Assets/Fonts/Play-Regular.ttf") format("truetype");
}
.num {
  font-family: "Jersey-M54";
}

.numCurvy, .numCurvy span {
  font-family: "Play";
}

.noneScroll {
  overflow: hidden;
}

* {
  font-family: "Tajawal";
  outline: none;
  box-sizing: border-box;
}

/*body {
    background: #f8f8f8;
    padding: 0;
    margin: 0;
    direction: rtl;
}*/
a {
  text-decoration: none;
  color: inherit;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.transform {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.transform-1 {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.click {
  cursor: pointer;
}

/*
.num {
    font-family: 'carre';
}body {
    padding: 0;
    margin: 0;
    direction: ltr;
    text-align: left;
    background: #f8f8f8;
    background: #15202B;
}
*/
.rotate-90 {
  ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.rotate-180 {
  ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.rotate-270 {
  ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: inherit;
}

::-moz-placeholder { /* Firefox 19+ */
  color: inherit;
}

:-ms-input-placeholder { /* IE 10+ */
  color: inherit;
}

:-moz-placeholder { /* Firefox 18- */
  color: inherit;
}

.scrollbar::-webkit-scrollbar, .body-site::-webkit-scrollbar, .handel-page::-webkit-scrollbar {
  width: 10px;
}

.scrollbar::-webkit-scrollbar-track, .body-site::-webkit-scrollbar-track, .handel-page::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: var(--ThirdBG);
  border: 1px solid var(--ThirdBG);
  margin-top: 10px;
  margin-bottom: 10px;
}

.scrollbar::-webkit-scrollbar-thumb, .body-site::-webkit-scrollbar-thumb, .handel-page::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: var(--FiveColor);
}

/********** التقسيم **********/
.item-cardA-split-1-5 {
  width: 20%;
  margin: auto;
  padding: 5px;
}

.cardA-split-4 {
  display: flex;
  /*margin-top: 20px;*/
}

.item-cardA-split-2 {
  margin: auto;
  width: 50%;
  padding: 5px;
}

.item-cardA-split--3 {
  margin: auto;
  width: 33.33%;
  padding: 5px;
}

.cardA-split-1 {
  width: 100%;
}

.cardA-split-3 {
  display: flex;
  /*margin-top: 25px;*/
  flex-wrap: wrap;
}

.item-cardA-split-1 {
  width: 25%;
  margin: auto;
  /*background: #fff;*/
  /*min-height: 300px;*/
  padding: 5px;
  min-width: 245px;
}

.item-cardA-split-3 {
  width: 75%;
  margin: auto;
  /*background: #715050;*/
  /*min-height: 300px;*/
  padding: 5px;
}

.item-cardA-split-4 {
  width: 100%;
  margin: auto;
  /*! min-height: 300px; */
  padding: 5px;
}

.cardA-split-2 {
  display: flex;
  /*margin-top: 25px;*/
}

.container-card {
  /*    min-height: 215px;
  */
  display: inline-block;
  width: 100%;
  height: 100%;
  background: var(--PrimaryBG);
  position: relative;
  /*    overflow: hidden;*/
  box-shadow: 0 0 15px var(--PrimaryShadow);
  border-radius: 10px;
}

.header-container-card {
  border-bottom: 1px solid var(--PrimaryBorder);
  margin-bottom: 5px;
  line-height: 45px;
}

/* Main Container */
.main-container {
  margin-right: 60px;
  display: flex;
  min-height: 100vh;
}

/* Tools Section */
.tools-section {
  flex: 1;
  padding: 2rem;
  max-width: calc(100% - 380px);
}

/* Search and Filter Bar */
.tools-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
}

.search-container {
  flex: 1;
  max-width: 400px;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 3rem;
  background: var(--ThirdBG);
  border: 1px solid var(--PrimaryBorder);
  border-radius: 25px;
  color: var(--BtnBorder);
  font-size: 0.9rem;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--FiveColor);
}

.filter-buttons {
  display: flex;
  gap: 0.5rem;
}

.filter-btn {
  padding: 0.5rem 1rem;
  background: var(--ThirdBG);
  border: 1px solid var(--PrimaryBorder);
  border-radius: 20px;
  color: var(--SecondColor);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover, .filter-btn.active {
  background: var(--ThirdColor);
  color: var(--ThirdIn);
}

/* Enhanced Tools Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 2.5rem;
  max-width: 1400px;
  perspective: 1000px;
}

.enhanced-tool-card {
  background: var(--ThirdBG);
  border: 1px solid var(--PrimaryBorder);
  border-radius: 24px;
  padding: 0;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.enhanced-tool-card:hover {
  transform: translateY(-15px) rotateX(5deg) rotateY(-5deg) scale(1.03);
  transform: translateY(-15px) rotateX(3deg) rotateY(-2deg) scale(1.03);
  box-shadow: 0 25px 50px var(--shadow-primary), 0 0 0 1px var(--ThirdColor), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: var(--ThirdColor);
}

/*
.enhanced-tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    border-radius: 24px 24px 0 0;
}*/
.enhanced-tool-card:hover::before {
  transform: scaleX(1);
}

.enhanced-tool-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 218, 87, 0.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.enhanced-tool-card:hover::after {
  opacity: 1;
}

.tool-header {
  padding: 2rem 2rem 1rem;
  text-align: center;
  position: relative;
}

.tool-icon-container {
  width: 90px;
  height: 90px;
  margin: 0 auto 1.5rem;
  /*    background: var(--gradient-primary);
  */
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  /*    color: var(--ThirdIn);
  */
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.tool-icon-container i {
  font-size: 70px;
}

.tool-icon-container::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(-45deg) translateX(-100%);
  transition: transform 0.6s ease;
}

.enhanced-tool-card:hover .tool-icon-container {
  transform: rotateY(360deg) scale(1.1);
  /*    box-shadow: 0 10px 30px rgba(0, 114, 255, 0.3);
  */
}

.enhanced-tool-card:hover .tool-icon-container::before {
  transform: rotate(-45deg) translateX(100%);
}

.tool-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--PrimaryColor);
  margin-bottom: 0.5rem;
}

.tool-description {
  font-size: 0.9rem;
  color: var(--SecondColor);
  margin-bottom: 1rem;
}

.tool-stats {
  display: flex;
  justify-content: space-around;
  padding: 1.5rem 0;
  border-top: 1px solid var(--PrimaryBorder);
  border-bottom: 1px solid var(--PrimaryBorder);
  background: linear-gradient(135deg, rgba(255, 218, 87, 0.02) 0%, rgba(0, 114, 255, 0.02) 100%);
  position: relative;
}

.tool-stats::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ThirdColor), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.enhanced-tool-card:hover .tool-stats::before {
  opacity: 1;
}

.stat-item {
  text-align: center;
  position: relative;
  padding: 0.5rem;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(255, 218, 87, 0.1);
  transform: translateY(-2px);
}

.stat-number {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--ThirdColor);
  margin-bottom: 0.25rem;
  text-shadow: 0 2px 4px rgba(255, 218, 87, 0.3);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--SecondColor);
  font-weight: 500;
}

.tools-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--SecondBG);
  border-radius: 0 0 24px 24px;
}

.enhanced-tool-card.expanded .tools-dropdown {
  max-height: max-content;
}

.dropdown-header {
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--FourBG) 0%, var(--ThirdBG) 100%);
  border-top: 1px solid var(--PrimaryBorder);
  position: relative;
}

.dropdown-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2rem;
  right: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ThirdColor), transparent);
  opacity: 0.5;
}

.dropdown-title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--PrimaryColor);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dropdown-title::before {
  content: "⚡";
  font-size: 0.9rem;
}

.expand-icon {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--ThirdColor);
  font-size: 1.1rem;
}

.enhanced-tool-card.expanded .expand-icon {
  transform: rotate(180deg) scale(1.1);
}

.tool-list {
  padding: 1rem 2rem 2rem;
}

.tool-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--PrimaryBorder);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  margin-bottom: 0.5rem;
  position: relative;
  overflow: hidden;
}

.tool-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--ThirdColor), transparent);
  transition: width 0.3s ease;
}

.tool-item:hover {
  padding-left: 1.5rem;
  background: linear-gradient(135deg, rgba(255, 218, 87, 0.08) 0%, rgba(0, 114, 255, 0.05) 100%);
  transform: translateX(8px);
  border-color: var(--ThirdColor);
}

.tool-item:hover::before {
  width: 4px;
}

.tool-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.tool-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--PrimaryColor);
  font-size: 0.9rem;
}

.tool-name i {
  color: var(--ThirdColor);
}

.tool-badges {
  display: flex;
  gap: 0.5rem;
}

.tool-status {
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 500;
}

.status-new {
  background: var(--success-bg);
  color: var(--success-green);
}

.status-coming {
  background: var(--warning-bg);
  color: var(--warning-yellow);
}

.status-updated {
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-blue);
}

.status-premium {
  background: var(--gradient-secondary);
  color: var(--ThirdIn);
}

.status-soon {
  background: rgba(175, 175, 175, 0.1);
  color: #979797;
  opacity: 0.5;
}

.status-free {
  background: var(--success-bg);
  color: var(--success-green);
}

.rating {
  display: flex;
  gap: 0.1rem;
}

.star {
  color: var(--ThirdColor);
  font-size: 0.7rem;
}

/* Affiliate Panel */
.affiliate-panel {
  width: 380px;
  background: var(--PrimaryBG);
  border: 1px solid var(--PrimaryBorder);
  padding: 2rem 1.5rem;
  position: relative;
  border-radius: 12px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.affiliate-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 218, 87, 0.02) 0%, transparent 50%, rgba(0, 114, 255, 0.02) 100%);
  pointer-events: none;
}

.panel-section {
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--PrimaryColor);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ThirdColor), transparent);
  margin-left: 1rem;
}

.section-title i {
  color: var(--ThirdColor);
  font-size: 1.1rem;
}

/* Stats Cards */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: linear-gradient(135deg, var(--ThirdBG) 0%, var(--FourBG) 100%);
  border: 1px solid var(--PrimaryBorder);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

/*.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}*/
.stat-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 30px var(--shadow-secondary);
  border-color: var(--ThirdColor);
}

.stat-card:hover::before {
  transform: scaleX(1);
}

.stat-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--ThirdColor);
  margin-bottom: 0.5rem;
  /*    text-shadow: 0 2px 4px rgba(255, 218, 87, 0.3);
  */
}

.stat-label {
  font-size: 0.85rem;
  color: var(--SecondColor);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.stat-change {
  font-size: 0.75rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-weight: 600;
}

.change-positive {
  color: var(--success-green);
  background: var(--success-bg);
}

.change-negative {
  color: var(--error-red);
  background: var(--error-bg);
}

/* Promo Banner */
.promo-banner {
  background: var(--gradient-secondary);
  background: linear-gradient(135deg, var(--ThirdBG), var(--PrimaryBG));
  background: linear-gradient(135deg, #5c47cf, #150089);
  border-radius: 16px;
  padding: 2rem;
  /* color: var(--ThirdIn); */
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border: 4px solid rgba(153, 142, 213, 0.6784313725);
}

.promo-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

.promo-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 3s ease-in-out infinite;
}

.promo-content {
  position: relative;
  z-index: 2;
}

.promo-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
  color: #fff;
  /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); */
}

.promo-subtitle {
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.promo-button {
  background: #5c47cf;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px #422fa6;
}

.promo-button:hover {
  background: #ffffff;
  color: #412fa6;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Affiliate Links */
.affiliate-links .link-item {
  background: linear-gradient(135deg, var(--ThirdBG) 0%, var(--FourBG) 100%);
  border: 1px solid var(--PrimaryBorder);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

/*.affiliate-links .link-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}*/
.affiliate-links .link-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 30px var(--shadow-secondary);
  border-color: var(--ThirdColor);
}

.affiliate-links .link-item:hover::before {
  transform: scaleX(1);
}

.link-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.link-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: var(--PrimaryColor_);
  position: relative;
  overflow: hidden;
}

.link-icon::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: rotate(-45deg) translateX(-100%);
  transition: transform 0.6s ease;
}

.link-icon:hover::before {
  transform: rotate(-45deg) translateX(100%);
}

.link-icon.paypal {
  background: linear-gradient(135deg, var(--paypal-blue), var(--paypal-dark));
}

.link-icon.stripe {
  background: linear-gradient(135deg, var(--stripe-purple), var(--stripe-dark));
}

.link-icon.vodafone {
  background: linear-gradient(135deg, var(--vodafone-red), #cc0000);
}

.link-icon.instapay {
  background: linear-gradient(135deg, var(--instapay-blue), #1e3a8a);
}

.link-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--PrimaryColor);
  margin-bottom: 0.25rem;
}

.link-description {
  font-size: 0.85rem;
  color: var(--SecondColor);
  line-height: 1.4;
}

.link-details {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--FiveColor);
  background: var(--FourBG);
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--PrimaryBorder);
}

.link-copy-container {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.affiliate-link-input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--FourBG);
  border: 1px solid var(--PrimaryBorder);
  border-radius: 12px;
  color: var(--PrimaryColor);
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.affiliate-link-input:focus {
  outline: none;
  border-color: var(--ThirdColor);
  box-shadow: 0 0 0 3px rgba(255, 218, 87, 0.1);
}

.copy-btn {
  background: var(--primary-blue);
  color: var(--ThirdIn);
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  position: relative;
  overflow: hidden;
}

.copy-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.copy-btn:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

.copy-btn:hover::before {
  left: 100%;
}

/* Recent Activities */
.activity-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  background: var(--ThirdBG);
  border: 1px solid var(--PrimaryBorder);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

.activity-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px var(--shadow-secondary);
}

.activity-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--ThirdIn);
}

.activity-icon.sale {
  background: var(--success-green);
}

.activity-icon.signup {
  background: var(--primary-blue);
}

.activity-icon.payout {
  background: var(--accent-orange);
}

.activity-details {
  flex: 1;
}

.activity-description {
  font-size: 0.9rem;
  color: var(--PrimaryColor);
  margin-bottom: 0.2rem;
}

.activity-date {
  font-size: 0.75rem;
  color: var(--FiveColor);
}

.activity-amount {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--ThirdColor);
}

/* Notification Popup */
.notification-popup {
  position: fixed;
  top: 2rem;
  left: 2rem;
  background: var(--success-green);
  color: var(--ThirdIn);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  transform: translateX(-400px);
  transition: transform 0.3s ease;
  z-index: 10000;
}

.notification-popup.show {
  transform: translateX(0);
}

/* Top Promo */
.top-promo {
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: var(--primary-blue);
  color: var(--ThirdIn);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  max-width: 300px;
  z-index: 100;
}

.top-promo-title {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.top-promo-text {
  font-size: 0.8rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.top-promo-btn {
  background: var(--ThirdColor);
  color: var(--ThirdIn);
  padding: 0.6rem 1.5rem;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.8rem;
  cursor: pointer;
  width: 100%;
}

/* Responsive Design */
@media (max-width: 1400px) {
  .affiliate-panel {
    width: 350px;
  }
  .tools-section {
    max-width: calc(100% - 350px);
  }
}
@media (max-width: 1200px) {
  .affiliate-panel {
    width: 300px;
  }
  .tools-section {
    max-width: calc(100% - 300px);
  }
  .tools-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
    margin-right: 0;
  }
  .sidebar {
    width: 100%;
    height: 60px;
    flex-direction: row;
    justify-content: space-around;
    bottom: 0;
    top: auto;
  }
  .sidebar-logo {
    margin-bottom: 0;
  }
  .sidebar-nav {
    flex-direction: row;
    gap: 1rem;
  }
  .affiliate-panel {
    width: 100%;
    height: auto;
    order: 1;
  }
  .tools-section {
    max-width: 100%;
    order: 2;
    margin-bottom: 60px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .tools-header {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }
}
/* Loading Animation */
.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 218, 87, 0.3);
  border-radius: 50%;
  border-top-color: var(--ThirdColor);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Pulse Animation */
.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/**************/
/* Header Section */
.dashboard-header {
  background: linear-gradient(135deg, var(--ThirdBG), var(--PrimaryBG));
  border-radius: var(--radius-large);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--PrimaryShadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--PrimaryColor_);
  position: relative;
  overflow: hidden;
}

.dashboard-header::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
  /*    background: radial-gradient(circle, rgb(0 0 0 / 2%) 0%, transparent 70%);
  */
  animation: rotate 20s linear infinite;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  z-index: 1;
}

.brand-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  backdrop-filter: blur(10px);
}

.brand-info h1 {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  margin-bottom: var(--spacing-xs);
}

.brand-info p {
  opacity: 0.9;
  font-size: var(--font-size-lg);
  margin: 0;
}

.header-stats {
  display: flex;
  gap: var(--spacing-lg);
  z-index: 1;
}

.quick-stat {
  text-align: center;
  background: rgba(255, 255, 255, 0.15);
  padding: var(--spacing-md);
  border-radius: var(--radius-medium);
  backdrop-filter: blur(10px);
  min-width: 120px;
}

.quick-stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 800;
  margin-bottom: var(--spacing-xs);
}

.quick-stat-label {
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

.apply-offer {
  padding: 0.7rem 4rem;
  border-radius: 25px;
  font-size: 22px;
}

/******/
/* Page Header */
.page-header {
  background: var(--PrimaryBG);
  border: 1px solid var(--PrimaryBorder);
  border-radius: var(--radius-small);
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-light);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-title i {
  font-size: 2rem;
  color: var(--ThirdColor);
}

.header-title h1 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--PrimaryColor__);
  font-family: "Play";
}

.header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Stats Section */
.stats-section {
  margin-bottom: 2rem;
}

.stats-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.stats-card-grid .stat-card {
  display: flex;
}

/*
.stat-card {
    background: var(--PrimaryBG);
    border: 1px solid var(--PrimaryBorder);
    border-radius: var(--radius-medium);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}
*/
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-medium);
  border-color: var(--ThirdColor);
}

.stat-card:hover::before {
  transform: scaleX(1);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--SixColor);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--ThirdColor);
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--SecondColor);
  font-weight: 500;
}

/* Search and Filter */
.tools-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.search-container {
  flex: 1;
  max-width: 400px;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 3rem;
  background: var(--ThirdBG);
  border: 1px solid var(--PrimaryBorder);
  border-radius: 25px;
  color: var(--BtnBorder);
  font-size: var(--font-size-base);
  transition: all var(--transition-normal);
}

.search-input:focus {
  outline: none;
  border-color: var(--ThirdColor);
  box-shadow: 0 0 0 3px rgba(255, 218, 87, 0.1);
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--FiveColor);
}

.filter-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.5rem 1rem;
  background: var(--ThirdBG);
  border: 1px solid var(--PrimaryBorder);
  border-radius: 20px;
  color: var(--SecondColor);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.filter-btn:hover, .filter-btn.active {
  background: var(--ThirdColor);
  color: var(--ThirdIn);
  border-color: var(--ThirdColor);
}

/* Accounts Section */
.accounts-section {
  background: var(--PrimaryBG);
  border: 1px solid var(--PrimaryBorder);
  border-radius: var(--radius-small);
  overflow: hidden;
  box-shadow: var(--shadow-light);
}

.table-container {
  overflow-x: auto;
}

.accounts-table {
  width: 100%;
  border-collapse: collapse;
}

.accounts-table th {
  background: var(--ThirdBG);
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--PrimaryColor__);
  border-bottom: 1px solid var(--PrimaryBorder);
  position: relative;
}

.accounts-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.accounts-table th.sortable:hover {
  background: var(--FourBG);
}

.accounts-table th i {
  margin-right: 0.5rem;
  color: var(--ThirdColor);
  font-size: 14px;
}

.accounts-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--PrimaryBorder);
  vertical-align: middle;
}

.account-row {
  transition: all var(--transition-normal);
}

.account-row:hover {
  background: var(--ThirdBG);
}

/* User Info */
.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: var(--PrimaryBorder);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: white;
  font-size: var(--font-size-sm);
}

.user-details {
  flex: 1;
}

.user-name {
  font-weight: 600;
  color: var(--PrimaryColor);
  margin-bottom: 0.25rem;
}

.user-username {
  font-size: var(--font-size-sm);
  color: var(--SecondColor);
}

/* Role Badge */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.role-badge.full {
  background: var(--success-bg);
  color: var(--success-green);
}

.role-badge.editor {
  background: var(--warning-bg);
  color: var(--warning-yellow);
}

/* Credit Info */
.credit-info {
  min-width: 120px;
}

.credit-bar {
  width: 100%;
  height: 6px;
  background: var(--ThirdBG);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.credit-progress {
  height: 100%;
  background: var(--gradient-primary);
  transition: width var(--transition-normal);
}

.credit-text {
  font-size: var(--font-size-sm);
  color: var(--SecondColor);
  text-align: center;
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.status-badge.verified {
  background: var(--success-bg);
  color: var(--success-green);
}

.status-badge.unverified {
  background: var(--error-bg);
  color: var(--error-red);
}

.unverified-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ThirdBG);
  transition: var(--transition-normal);
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: var(--transition-normal);
  border-radius: 50%;
}

input:checked + .slider {
  background: var(--gradient-primary);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-small);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  justify-content: center;
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.btn-secondary {
  background: var(--ThirdBG);
  color: var(--PrimaryColor);
  border: 1px solid var(--PrimaryBorder);
}

.btn-secondary:hover {
  background: var(--FourBG);
  border-color: var(--ThirdColor);
}

.btn-danger {
  background: var(--error-red);
  color: white;
}

.btn-danger:hover {
  background: #dc2626;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--ThirdColor);
  border: 1px solid var(--ThirdColor);
}

.btn-outline:hover {
  background: var(--ThirdColor);
  color: var(--ThirdIn);
  box-shadow: 0 0 10px var(--ThirdColor);
  border: 1px solid var(--ThirdColor);
}

.btn-sm {
  padding: 0.5rem 0.75rem;
  font-size: var(--font-size-sm);
}

.tb-buttons {
  display: flex;
  gap: 0.5rem;
}

/* Pagination */
.pagination-container {
  padding: 1.5rem;
  border-top: 1px solid var(--PrimaryBorder);
  background: var(--ThirdBG);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.pagination-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--PrimaryBorder);
  background: var(--PrimaryBG);
  color: var(--PrimaryColor);
  border-radius: var(--radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--ThirdColor);
  color: var(--ThirdIn);
  border-color: var(--ThirdColor);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-info {
  font-size: var(--font-size-sm);
  color: var(--SecondColor);
  margin: 0 1rem;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal {
  background: var(--PrimaryBG);
  border: 1px solid var(--PrimaryBorder);
  border-radius: var(--radius-large);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-heavy);
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--PrimaryBorder);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--PrimaryColor__);
  font-family: "Play";
}

.modal-close {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--ThirdBG);
  color: var(--PrimaryColor);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
}

.modal-close:hover {
  background: var(--error-red);
  color: white;
}

.modal-body {
  padding: 1.5rem;
}

.modal-actions {
  padding: 1.5rem;
  border-top: 1px solid var(--PrimaryBorder);
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

/* Form Styles */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 500;
  color: var(--BtnBorder);
  font-size: var(--font-size-base);
}

.form-input, .form-select {
  padding: 0.75rem;
  background: var(--ThirdBG);
  border: 1px solid var(--PrimaryBorder);
  border-radius: var(--radius-small);
  color: var(--SixColor);
  font-size: var(--font-size-base);
  transition: all var(--transition-normal);
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--ThirdColor);
  box-shadow: 0 0 0 3px rgba(255, 218, 87, 0.1);
}

.form-input.error, .form-select.error {
  border-color: var(--error-red);
}

.error-message {
  font-size: var(--font-size-xs);
  color: var(--error-red);
  margin-top: 0.25rem;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 2rem;
  left: 2rem;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  background: var(--PrimaryBG);
  border: 1px solid var(--PrimaryBorder);
  border-radius: var(--radius-small);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 300px;
  box-shadow: var(--shadow-medium);
  animation: slideIn 0.3s ease-out;
}

.toast.success {
  border-color: var(--success-green);
  background: var(--success-bg);
}

.toast.error {
  border-color: var(--error-red);
  background: var(--error-bg);
}

.toast.warning {
  border-color: var(--warning-yellow);
  background: var(--warning-bg);
}

.toast i {
  font-size: 1.2rem;
}

.toast.success i {
  color: var(--success-green);
}

.toast.error i {
  color: var(--error-red);
}

.toast.warning i {
  color: var(--warning-yellow);
}

.toast span {
  flex: 1;
  color: var(--PrimaryColor);
}

.toast button {
  background: none;
  border: none;
  color: var(--SecondColor);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 50%;
  transition: all var(--transition-normal);
}

.toast button:hover {
  background: var(--ThirdBG);
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* Last Login */
.last-login {
  font-size: var(--font-size-sm);
  color: var(--SecondColor);
}

/* Responsive Design */
@media (max-width: 768px) {
  .main-container {
    padding: 1rem;
  }
  .header-content {
    flex-direction: column;
    align-items: stretch;
  }
  .tools-header {
    flex-direction: column;
    align-items: stretch;
  }
  .search-container {
    max-width: none;
  }
  .filter-buttons {
    justify-content: center;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .modal {
    margin: 1rem;
    max-width: none;
  }
  .toast-container {
    left: 1rem;
    right: 1rem;
  }
  .toast {
    min-width: auto;
  }
  .accounts-table {
    font-size: var(--font-size-sm);
  }
  .accounts-table th,
  .accounts-table td {
    padding: 0.5rem;
  }
  .user-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .action-buttons {
    flex-direction: column;
  }
}
@media (max-width: 480px) {
  .header-title h1 {
    font-size: var(--font-size-xl);
  }
  .stat-card {
    flex-direction: column;
    text-align: center;
  }
  .pagination {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/
/******/