@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
:root
{
--mainColor :#2c3e50;
--whiteColor:#fff
}
body{
  background: linear-gradient(to right, #0e0c2e, #02010d);
}
body {
  font-family: -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto,
               "Helvetica Neue", Arial,
               sans-serif;
}

/* سديم مجري متحرك */
.galaxy {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 40%, rgba(93, 63, 211, 0.4) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(147, 51, 234, 0.4) 0%, transparent 35%),
        radial-gradient(circle at 40% 80%, rgba(37, 99, 235, 0.4) 0%, transparent 30%),
        radial-gradient(circle at 70% 20%, rgba(236, 72, 153, 0.3) 0%, transparent 35%);
    filter: blur(60px);
    animation: galaxyMove 30s ease-in-out infinite;
}

@keyframes galaxyMove {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
    50% { transform: scale(1.2) rotate(2deg); opacity: 1; }
}

/* النجوم */
.stars {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 4s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* كوكب عائم */
.planet {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(147, 51, 234, 0.3), rgba(37, 99, 235, 0.3));
    filter: blur(50px);
    animation: floatPlanet 25s ease-in-out infinite;
}

.planet-1 {
    top: -100px;
    left: -100px;
    background: radial-gradient(circle at 30% 30%, #4f46e5, #7c3aed);
    opacity: 0.2;
}

.planet-2 {
    bottom: -150px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle at 70% 70%, #db2777, #9333ea);
    opacity: 0.15;
    animation-delay: -10s;
}

@keyframes floatPlanet {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.1); }
}

/* المحتوى الرئيسي */
.content {
    position: relative;
    z-index: 100;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

/* الهيدر المجري */
.hero {
    text-align: center;
    margin-bottom: 5rem;
    position: relative;
}

.galaxy-title {
    font-size: 5rem;
    font-weight: 900;
    color: white;
    text-shadow:
        0 0 10px #7c3aed,
        0 0 20px #4f46e5,
        0 0 40px #2563eb,
        0 0 80px #7c3aed;
    margin-bottom: 1rem;
    letter-spacing: 8px;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 10px #7c3aed, 0 0 20px #4f46e5, 0 0 40px #2563eb, 0 0 80px #7c3aed; }
    50% { text-shadow: 0 0 15px #7c3aed, 0 0 30px #4f46e5, 0 0 60px #2563eb, 0 0 120px #7c3aed; }
}
                                        .soon-galaxy {
                                            position: absolute;
                                            top: -15px;
                                            right: 20px;
                                            background: linear-gradient(135deg, #f59e0b, #d97706);
                                            color: white;
                                            padding: 0.5rem 1.5rem;
                                            border-radius: 50px;
                                            font-size: 0.8rem;
                                            font-weight: 800;
                                            letter-spacing: 2px;
                                            display: flex;
                                            align-items: center;
                                            gap: 8px;
                                            box-shadow: 0 0 30px rgba(245,158,11,0.5);
                                            text-transform: uppercase;
                                            border: 1px solid rgba(255,255,255,0.3);
                                        }

                                        .soon-galaxy i {
                                            animation: pulse 2s infinite;
                                        }

                                        /* تجاوب */
                                        @media screen and (max-width: 1200px) {
                                            .galaxy-title { font-size: 4rem; }
                                            .card { padding: 2.5rem; }
                                            .card h2 { font-size: 2.5rem; }
                                        }

                                        @media screen and (max-width: 992px) {
                                            .chat-dashboard { padding: 3rem 1.5rem; }
                                            .galaxy-title { font-size: 3.5rem; letter-spacing: 5px; }
                                            .subtitle { font-size: 1rem; letter-spacing: 4px; }
                                            .card { flex: 1 1 400px; }
                                        }

                                        @media screen and (max-width: 768px) {
                                            .chat-dashboard { /*! padding: 2rem 1rem; */ }
                                            .galaxy-title { font-size: 2.5rem; letter-spacing: 3px; }
                                            .subtitle { font-size: 0.8rem; letter-spacing: 3px; }
                                            .card { padding: 2rem; }
                                            .icon-wrapper { width: 100px; height: 100px; }
                                            .icon-wrapper i { font-size: 2.8rem; }
                                            .card h2 { font-size: 2rem; }
                                            .features { gap: 1rem; }
                                            .feature i { font-size: 1.5rem; padding: 0.8rem; }
                                        }

                                        @media screen and (max-width: 480px) {
                                            .galaxy-title { font-size: 1.8rem; letter-spacing: 2px; }
                                            .subtitle { font-size: 0.7rem; letter-spacing: 2px; }
                                            .card { padding: 1.5rem; text-align: right;}
                                            .icon-wrapper { width: 80px; height: 80px; }
                                            .icon-wrapper i { font-size: 2rem; }
                                            .card h2 { font-size: 1.6rem; }
                                            .badge { padding: 0.3rem 1rem; font-size: 0.7rem; }
                                            .features { grid-template-columns: 1fr; }
                                            .feature { flex-direction: row; justify-content: flex-start; }
                                            .soon-galaxy { position: relative; top: 0; right: 0; margin-bottom: 1rem; display: inline-flex; }
                                        }

                                        @media screen and (max-width: 360px) {
                                            .galaxy-title { font-size: 1.5rem; }
                                            .card h2 { font-size: 1.4rem; text-align: right;}
                                            .card p { font-size: 0.9rem; }
                                        }
html,body
{
    overflow-x: hidden !important;
    position: relative;
}


        .edit-page {
            padding: 40px 0;
        }
li
{
  list-style: none !important
}
        .card {
            border: none;
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }

        .card-body {
            padding: 2.5rem;
        }

        h2 {
            color: var(--dark);
            font-weight: 800;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 15px;
        }

        h2:after {
            /*! content: ''; */
            /*! position: absolute; */
            bottom: 0;
            right: 0;
            width: 60px;
            height: 4px;
            background: var(--primary);
            border-radius: 2px;
        }

        .text-primary {
            color: var(--primary) !important;
            font-weight: 600;
        }

        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--dark);
            display: block;
        }

        .form-control, .form-select {
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px 20px;
            transition: var(--transition);
            background-color: #fff;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border: none;
            border-radius: 12px;
            padding: 12px 30px;
            font-weight: 600;
            transition: var(--transition);
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary) 100%);
        }

        /* Avatar Styles */
        .avatar-section {
            text-align: center;
            margin-bottom: 2rem;
            padding: 20px 0;
            border-bottom: 1px solid #eaeaea;
        }

        .avatar-container {
            position: relative;
            display: inline-block;
            margin-bottom: 15px;
        }

        .avatar-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: var(--shadow);
        }

        .avatar-overlay {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background: var(--primary);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }

        .avatar-overlay:hover {
            background: var(--primary-dark);
            transform: scale(1.1);
        }

        .avatar-text {
            color: var(--gray);
            font-size: 0.9rem;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .card-body {
                padding: 1.5rem;
            }

            .avatar-img {
                width: 100px;
                height: 100px;
            }
        }@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
:root
{
--mainColor :#2c3e50;
--whiteColor:#fff
}
body{
margin:0px;
padding: 0px;
background-color: white !important;
/*! overflow-x: hidden */
}



      body {
          background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
          min-height: 100vh;
      }
:root {
       --primary: #2a57ff;
       --primary-dark: #1a3cc0;
       --accent: #00ff9d;
       --dark: #0f172a;
       --darker: #0a0e1a;
       --light: #f8fafc;
       --gray: #94a3b8;
       --primary-gradient: linear-gradient(135deg, #6e8efb, #a777e3);
       --secondary-gradient: linear-gradient(135deg, #3494e6, #ec6ead);
       --glass-bg: rgba(255, 255, 255, 0.15);
       --glass-border: rgba(255, 255, 255, 0.18);

   }

   body {
       background-color: #f8f9fa;
       color: #212529;
       overflow-x: hidden;
       background: linear-gradient(to right, #0e0c2e, #02010d);
   }


.container
{
  max-width: 97% !important;
  padding: 0;
  padding-top: 10px !important;
}
   /* External Sidebar styling */
   #external-sidebar {
       width: 250px;
       /*! min-height: 100vh; */
       background: var(--dark);
       /*! background: linear-gradient(180deg, var(--dark) 0%, var(--darker) 100%); */
       color: white;
       box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
       position: fixed;
       right: 0;
       top: 0;
       z-index: 1000;
   }

   #external-sidebar .sidebar-header {
       padding: 20px;
       /*! background: #0e0c2e30; */
       /*! border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
       text-align: center;
   }

   #external-sidebar ul.components {
       padding: 20px 0;
       /*! background: #02010d80; */
       border-radius: 10px;
       padding-top: 0;
       padding-bottom: 0;
   }

   #external-sidebar ul li a {
       padding: 11px 18px;
       display: block;
       color: #fff;
       text-decoration: none;
       transition: all 0.3s;
       font-size: 14px;
       text-align: right;
       direction: rtl;
       border-bottom: 1px solid #ffffff0d;
       margin: 0px 5px;
       margin-right: 0;
   }
   #external-sidebar ul li:last-child a
{
    border: unset !important;

}
   #external-sidebar ul li a:hover {
       color: white;
       background: rgba(255, 255, 255, 0.1);
   }

   #external-sidebar ul li a.active {
       color: white;
       /*! background: linear-gradient(135deg, #0d0c2d29, #2c005842); */
       font-size: ;
   }

   #external-sidebar ul li a i {
       margin-left: 5px;
       font-size: 1.2em;
       color: #655dc6;
   }

   /* Main content area */
   #main-content {
       flex: 1;
       margin-right: 250px;
       min-height: 100vh;
       transition: all 0.3s;
       text-align: right;
   }

   .navbar {
       background: #fff0;
       /*! box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
       position: relative;
   }

   .card {
       border-radius: 12px;
       border: none;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
       transition: transform 0.2s;
   }

   .card:hover {
       transform: translateY(-5px);
   }

   .crypto-card {
       border-top: 4px solid var(--primary);
   }

   .price-up {
       color: #00c853;
   }

   .price-down {
       color: #ff3d00;
   }

   .btn-primary {
       background-color: var(--primary);
       border: none;
       padding: 10px 20px;
       border-radius: 8px;
   }

   .btn-primary:hover {
       background-color: var(--primary-dark);
   }

   .stats-icon {
       width: 50px;
       height: 50px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       background: rgba(42, 87, 255, 0.1);
       color: var(--primary);
   }

   .crypto-badge {
       padding: 5px 10px;
       border-radius: 6px;
       font-weight: 600;
       font-size: 0.8rem;
   }

   .market-table th {
       font-weight: 600;
       color: var(--gray);
       border-top: none;
   }

   .market-table td {
       padding: 1rem 0.5rem;
       vertical-align: middle;
   }

   /* Crypto color classes */
   .btc-color {
       color: #f7931a;
   }

   .eth-color {
       color: #627eea;
   }

   .bnb-color {
       color: #f0b90b;
   }

   .ada-color {
       color: #0033ad;
   }

   /* Chart placeholder styling */
   .chart-placeholder {
       background: linear-gradient(45deg, #f8f9fa, #e9ecef);
       border-radius: 12px;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--gray);
       font-weight: 600;
   }

   /* Responsive adjustments */
   @media (max-width: 992px) {
       #external-sidebar {
           width: 80px;
           overflow: hidden;
       }

       #external-sidebar .sidebar-header h3 {
           display: none;
       }

       #external-sidebar ul li a span {
           display: none;
       }

       #external-sidebar ul li a i {
           margin-right: 0;
           font-size: 1.5em;
           font-size: b;
           font-weight: bold;
       }

       #main-content {
           margin-left: 80px;
       }

       #external-sidebar .sidebar-header {
           padding: 20px 15px;
           padding-top: 0;
       }
   }

   @media (max-width: 768px) {
       #external-sidebar {
           width: 0;
           overflow: hidden;
       }

       #main-content {
           margin-left: 0;
       }

       #external-sidebar.active {
           width: 250px;
           overflow-y: auto;
       }

       #external-sidebar.active .sidebar-header h3 {
           display: block;
       }

       #external-sidebar.active ul li a span {
           display: inline;
       }

       #external-sidebar.active ul li a i {
           margin-right: 10px;
           font-size: 1.2em;
       }
   }
   .wallet-card {
              /*! background: var(--primary-gradient); */
              border-radius: 20px;
              padding: 25px;
              color: white;
              margin-bottom: 25px;
              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
              backdrop-filter: blur(10px);
              border: 1px solid var(--glass-border);
              position: relative;
              overflow: hidden;
              transition: transform 0.3s ease;
              text-align: right;
          }

          .wallet-card:hover {
              transform: translateY(-5px);
          }

          .wallet-card::before {
              content: '';
              position: absolute;
              top: -50%;
              right: -50%;
              width: 200%;
              height: 200%;
              background: var(--secondary-gradient);
              opacity: 0.2;
              z-index: 0;
              transform: rotate(-15deg);
          }

          .wallet-card h4 {
              font-weight: 600;
              position: relative;
              z-index: 1;
          }

          .wallet-balance {
              font-size: 2.5rem;
              font-weight: 700;
              margin: 15px 0;
              text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
              position: relative;
              z-index: 1;
          }

          .action-btn {
              border-radius: 50px;
              padding: 10px 20px;
              font-weight: 600;
              box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
              transition: all 0.3s ease;
              position: relative;
              z-index: 1;
              border: none;
              color: white !important;
          }

          .action-btn:hover {
              transform: translateY(-3px);
              box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
          }

          .btn-primary {
              background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }

          .btn-success {
              background: #ffffff2e;
              border: unset;
          }

          .btn-warning {
              background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
          }

          .transaction-card {
              background: white;
              border-radius: 15px;
              padding: 15px;
              margin-bottom: 15px;
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
              transition: all 0.3s ease;
              border-left: 4px solid transparent;
          }

          .transaction-card:hover {
              transform: translateX(-5px);
              box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
          }

          .transaction-income {
              color: #2ecc71;
              font-weight: 700;
          }

          .transaction-expense {
              color: #e74c3c;
              font-weight: 700;
          }

          .transaction-card .bi {
              font-size: 1.5rem;
              margin-left: 15px;
              padding: 10px;
              border-radius: 12px;
              background: rgba(0, 0, 0, 0.05);
          }

          .transaction-income .bi {
              background: rgba(46, 204, 113, 0.15);
              color: #2ecc71;
          }

          .transaction-expense .bi {
              background: rgba(231, 76, 60, 0.15);
              color: #e74c3c;
          }

          h5 {
              font-weight: 700;
              color: #eee;
              margin-top: 25px;
              margin-bottom: 20px;
              padding-bottom: 0;
              /*! border-bottom: 2px solid rgba(255, 255, 255, 0.1); */
              text-align: right;
              margin-top: 4px;
              font-size: 18px !important;
              font-weight: normal;
          }

          /* Animation for transactions */
          @keyframes fadeIn {
              from { opacity: 0; transform: translateY(10px); }
              to { opacity: 1; transform: translateY(0); }
          }

          .transaction-card {
              animation: fadeIn 0.5s ease forwards;
              justify-content: end;
              flex-direction: row-reverse;
          }

          .transaction-card:nth-child(2) { animation-delay: 0.1s; }
          .transaction-card:nth-child(3) { animation-delay: 0.2s; }
          .transaction-card:nth-child(4) { animation-delay: 0.3s; }
          .transaction-list {
            max-width: 100%;
            margin: 2rem auto;
          }

          .transaction-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(145deg, #ffffff0a, #f8f9fa08);
            border-radius: 15px;
            padding: 1rem 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            color: white;
            text-align: right;
          }

          .transaction-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
          }

          .transaction-info {
            display: flex;
            align-items: center;
            gap: 1rem;
          }

          .transaction-info i {
            font-size: 1.8rem;
          }

          .transaction-income i {
            color: #2ecc71;
          }

          .transaction-expense i {
            color: #e74c3c;
          }

          .transaction-details strong {
            display: block;
            font-size: 1rem;
            color: #fff;
            direction: rtl;
          }

          .transaction-details small {
            color: #7f8c8d;
          }

          .transaction-amount {
            font-weight: bold;
            font-size: 1.1rem;
          }

          .transaction-income .transaction-amount {
            color: #2ecc71;
          }

          .transaction-expense .transaction-amount {
            color: #e74c3c;
          }
          .profile-card {
            max-width: 900px;
            margin: 3rem auto;
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            padding: 2rem;
          }
          .profile-image {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #4e73df;
          }
          .profile-info h3 {
            font-weight: bold;
            color: #2c3e50;
          }
          .profile-info p {
            color: #7f8c8d;
            margin-bottom: 0.5rem;
          }
          .btn-profile {
            border-radius: 50px;
            padding: 0.5rem 1.5rem;
            font-weight: 500;
          }
          .activity-card {
            background: #f9f9f9;
            border-radius: 15px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
          }
          .activity-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
          }
          .activity-card i {
            font-size: 1.5rem;
            margin-left: 1rem;
          }    .card {
            border: none;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        h3 {
            color: #fff;
            font-weight: 700;
            padding-bottom: 10px;
            border-bottom: 2px solid #6e8efb;
            display: inline-block;
        }

        .form-label {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
            text-align: right;
            display: block;
        }

        .form-control, .form-select {
            border-radius: 12px;
            padding: 12px 16px;
            border: 2px solid #eef2f8;
            transition: all 0.3s ease;
            background-color: #f8fafc;
        }

        .form-control:focus, .form-select:focus {
            border-color: #6e8efb;
            box-shadow: 0 0 0 3px rgba(110, 142, 251, 0.2);
            background-color: #fff;
        }

        .input-group button {
            border-radius: 0 12px 12px 0;
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            border: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border-radius: 0;
            margin-right: 10px;
            font-size: 11px;
        }

        .input-group button:hover {
            background: linear-gradient(135deg, #5d7ce0, #9666d3);
            transform: translateY(-2px);
        }

        .input-group input {
            border-radius: 7px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            border: none;
            border-radius: 50px;
            padding: 12px 35px;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(110, 142, 251, 0.3);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #5d7ce0, #9666d3);
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(110, 142, 251, 0.4);
        }

        .currency-icon {
            width: 24px;
            height: 24px;
            margin-left: 10px;
            border-radius: 50%;
        }

        .form-select {
            /*! background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236e8efb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); */
            background-position: left 0.75rem center;
            background-size: 16px 12px;
        }

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

        .card {
            animation: fadeIn 0.5s ease forwards;
        }

        .form-group {
            margin-bottom: 9px !important;
        }
        .chart-space {
          padding: 20px 0;
          background: #0a0e17;
          border-radius: 16px;
          margin: 20px 0;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }

        .chart-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding: 0 15px;
        }

        .chart-title {
          color: #eaecef;
          font-weight: 600;
          font-size: 1.5rem;
          margin: 0;
        }

        .timeframe-selector {
          display: flex;
          background: #1a1f2e;
          border-radius: 12px;
          padding: 4px;
        }

        .timeframe-btn {
          background: transparent;
          border: none;
          color: #6c7282;
          padding: 8px 16px;
          border-radius: 8px;
          cursor: pointer;
          font-weight: 500;
          transition: all 0.2s ease;
        }

        .timeframe-btn:hover {
          color: #eaecef;
          background: #2a3145;
        }

        .timeframe-btn.active {
          color: #eaecef;
          background: #3a7fff;
        }

        .price-info-bar {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 15px;
          background: #1a1f2e;
          padding: 15px;
          border-radius: 12px;
          margin-bottom: 20px;
        }

        .price-item {
          display: flex;
          flex-direction: column;
        }

        .price-item .label {
          color: #6c7282;
          font-size: 0.85rem;
          margin-bottom: 4px;
        }

        .price-item .value {
          color: #eaecef;
          font-weight: 600;
          font-size: 1.1rem;
        }

        .chart-container {
          width: 99%;
          /*! height: 450px; */
          border-radius: 12px;
          /*! overflow: hidden; */
          /*! margin-right: 950px !important; */
        }      .crypto-chart {
                /*! background: #0f172a; */
                border-radius: 16px;
                padding: 20px;
                margin: 20px 0;
                /*! box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); */
              }

              .chart-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
              }

              .chart-header h2 {
                color: #e2e8f0;
                margin: 0;
                font-size: 1.5rem;
                font-weight: 600;
              }

              .timeframe-info {
                display: flex;
                /*! align-items: center; */
              }

              .timeframe-badge {
                background: #3b82f6;
                color: white;
                padding: 4px 12px;
                border-radius: 20px;
                font-weight: 500;
                font-size: 0.875rem;
              }

              .last-update {
                color: #94a3b8;
                font-size: 0.875rem;
              }

              .price-info-bar {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 16px;
                background: #1e293b;
                padding: 16px;
                border-radius: 12px;
                margin-bottom: 20px;
              }

              .price-metric {
                display: flex;
                flex-direction: column;
              }

              .price-metric .label {
                color: #94a3b8;
                font-size: 0.875rem;
                margin-bottom: 4px;
              }

              .price-metric .value {
                color: #e2e8f0;
                font-weight: 600;
                font-size: 1.125rem;
              }

              .chart {
                width: 100%;
                height: anchor-size;
                border-radius: 12px;
                overflow: hidden;
                background: #1e293b;
                height: anchor-size;
              }

              .chart-footer {
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
                gap: 20px;
              }

              .candle-info {
                background: #1e293b;
                padding: 16px;
                border-radius: 12px;
                flex: 1;
              }

              .candle-info h4 {
                color: #e2e8f0;
                margin: 0 0 12px 0;
                font-size: 1rem;
              }

              .candle-details {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
              }

              .detail {
                display: flex;
                justify-content: space-between;
                color: #94a3b8;
              }

              .time-remaining {
                background: #1e293b;
                padding: 16px;
                border-radius: 12px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                min-width: 200px;
              }

              .time-remaining span:first-child {
                color: #94a3b8;
                margin-bottom: 8px;
              }

              #time-remaining {
                color: #3b82f6;
                font-weight: 600;
                font-size: 1.25rem;
                margin-bottom: 8px;
              }
section{
  width: 100% !important
}
              .candle-progress {
                width: 100%;
                background: #334155;
                height: 6px;
                border-radius: 3px;
                overflow: hidden;
              }

              .progress-bar {
                height: 100%;
                background: #3b82f6;
                border-radius: 3px;
                width: 0%;
                transition: width 0.5s ease;
              }

              .positive {
                color: #10b981 !important;
              }

              .negative {
                color: #ef4444 !important;
              }
              .login-card {
                /*! background: #ffffff0f; */
                /*! border: 1px solid rgba(0,0,0,0.05); */
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                color: white;
                box-shadow: unset !important;
              }

              .login-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 28px rgba(0,0,0,0.12);
              }

              .forgot-link {
                color: var(--bs-primary);
                font-size: 0.9rem;
                transition: color 0.3s ease;
              }

              .forgot-link:hover {
                color: #0a58ca;
                text-decoration: underline;
              }

              input.form-control {
                border-left: none;
                box-shadow: none !important;
              }

              .input-group-text {
                border-right: none;
                border-color: #ddd;
              }

              .btn-primary {
                font-weight: 600;
                font-size: 1rem;
              }

              .btn-outline-primary:hover {
                background: var(--bs-primary);
                color: #fff;
              }
input
{
    text-align: right
}  .register-card {
  /*! background: #ffffff0f; */
  /*! border: 1px solid rgba(0,0,0,0.05); */
  /*! transition: transform 0.3s ease, box-shadow 0.3s ease; */
  color: #eee;
  margin-top: 0px !important;

  box-shadow: unset !important;
  padding: 0px 16px !important;
  }

  .register-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  }

  input.form-control, .register-card select {
    border-left: none;
    box-shadow: none !important;
    height: 52px !important;
    border: unset !important;
    /*! margin-bottom: 18px; */
    color: white !important;
    font-size: 16px;
    border-radius: 10px !important;
  }

  .input-group-text {
    border-right: none;
    border-color: #ddd;
  }

  .btn-primary {
    font-weight: 600;
    font-size: 1rem;
  }

  .btn-outline-primary:hover {
    background: var(--bs-primary);
    color: #fff;
  }

  .err-msg {
    color: red;
    font-size: 0.9rem;
    text-align: center;
  }
        .edit-page {
            padding: 40px 0;
        }

        .card {
            border: none;
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
            background: #ffffff08;
            border-radius: 10px;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }

        .card-body {
            padding: 2.5rem;
        }

        h2 {
            color: var(--dark);
            font-weight: 800;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 15px;
        }

        h2:after {
            /*! content: ''; */
            /*! position: absolute; */
            /*! bottom: 0; */
            /*! right: 0; */
            /*! width: 60px; */
            /*! height: 4px; */
            /*! background: var(--primary); */
            /*! border-radius: 2px; */
        }

        .text-primary {
            color: var(--primary) !important;
            font-weight: 600;
        }

        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: #f7f8f9;
            display: block;
        }

        .form-control, .form-select {
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px 20px;
            background-color: #ffffff3d !important;
            width: 100%;
            text-align: right;
            border: unset;
            /*! color: white; */
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
        }

        .btn-primary {
            background: #192E85;
            border: none;
            border-radius: 12px;
            padding: 12px 30px;
            font-weight: 600;
            transition: var(--transition);
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary) 100%);
        }

        /* Avatar Styles */
        .avatar-section {
            text-align: center;
            margin-bottom: 0;
            /*! padding: 20px 0; */
            border-bottom: 1px solid #eaeaea29;
            padding-bottom: 4px;
        }

        .avatar-container {
            position: relative;
            display: inline-block;
            margin-bottom: 15px;
        }

        .avatar-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: var(--shadow);
        }

        .avatar-overlay {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background: var(--primary);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }

        .avatar-overlay:hover {
            background: var(--primary-dark);
            transform: scale(1.1);
        }

        .avatar-text {
            color: var(--gray);
            font-size: 0.9rem;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .card-body {
                padding: 1.5rem;
            }

            .avatar-img {
                width: 100px;
                height: 100px;
            }
        }
        .verify-card {
                  max-width: 550px;
                  margin: 50px auto;
                  padding: 30px;
                  background: #ffffff0a;
                  border-radius: 20px;
                  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
                  color: white !important;
                  text-align: right;
              }
              .preview-container {
                  text-align: center;
                  margin: 20px 0;
              }
              .preview-img {
                  width: 250px;
                  height: auto;
                  border-radius: 10px;
                  border: 2px dashed #ccc;
                  object-fit: cover;
                  display: none;
                  margin: 10px auto;
              }
        /* Modern File Upload Styles */
        .upload-section {
            margin-bottom: 2rem;
        }

        .upload-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #fff;
            /*! display: flex; */
            align-items: start;
            text-align: right;
            direction: rtl;
        }

        .upload-title i {
            margin-left: 8px;
            color: var(--primary);
        }

        .upload-container {
            display: flex;
            gap: 20px;
            margin-bottom: 1.5rem;
        }

        @media (max-width: 768px) {
            .upload-container {
                flex-direction: column;
            }
        }

        .upload-box {
            flex: 1;
            border: 2px dashed #d1d9e6;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            transition: var(--transition);
            background: #fafbfc0a;
            cursor: pointer;
            position: relative;
        }

        .upload-box:hover {
            border-color: var(--primary);
            background: rgba(67, 97, 238, 0.03);
        }

        .upload-box.active {
            border-color: var(--success);
            background: rgba(46, 196, 182, 0.05);
        }

        .upload-icon {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 15px;
        }

        .upload-text {
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--dark);
        }

        .upload-subtext {
            font-size: 0.85rem;
            color: var(--gray);
            margin-bottom: 15px;
        }

        .upload-btn {
            display: inline-block;
            background: var(--primary);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
        }

        .upload-box:hover .upload-btn {
            background: var(--primary-dark);
        }

        .upload-input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
        }

        .preview-container {
            display: flex;
            gap: 20px;
            margin-top: 1.5rem;
        }

        @media (max-width: 768px) {
            .preview-container {
                flex-direction: column;
            }
        }

        .preview-card {
            flex: 1;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: none;
        }

        .preview-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .preview-label {
            display: block;
            text-align: center;
            padding: 10px;
            background: var(--light);
            font-weight: 600;
            font-size: 0.9rem;
            color: black;
        }

        .note-text {
            background: #fff9e6;
            border-left: 4px solid var(--warning);
            padding: 15px;
            border-radius: 8px;
            font-size: 0.9rem;
            margin-top: 20px;
            color: black;
            direction: rtl;
        }

        .requirements {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa0a;
            border-radius: 12px;
            font-size: 0.9rem;
            text-align: right !important;
            direction: rtl;
            margin-bottom: 16px;
        }

        .requirements-title {
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .requirements-title i {
            margin-left: 8px;
            color: var(--primary);
        }

        .requirements-list {
            padding-right: 20px;
            margin: 0;
        }

        .requirements-list li {
            margin-bottom: 8px;
            color: var(--gray);
        }

            .panel {
              background: var(--card);
              border-radius: 14px;
              padding: 22px;
              box-shadow: 0 6px 20px rgba(0,0,0,0.45);
              border: 1px solid rgba(255,255,255,0.03);
              text-align: right;
            }

            .form-control, .form-select {
              background: var(--input);
              border: none;
              color: #e6eef8;
              border-radius: 10px;
              padding: 14px 16px;
              box-shadow: none;
            }

            .form-control::placeholder { color: rgba(230,238,248,0.35); }

            .address-box {
              display:flex;
              gap:10px;
              align-items:center;
              padding:10px;
              background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
              border-radius:10px;
              color: white !important;
            }

            .btn-accent {
              background: linear-gradient(135deg, #0d0c2d, #2c0058);
              color:#fff;
              border: none;
              font-weight:600;
              border-radius: 12px;
              padding: 10px 20px;
              box-shadow: 0 6px 18px rgba(212,175,55,0.12);
            }
            .btn-accent:active { transform: translateY(1px); }

            .small-muted { color: var(--muted); font-size: 0.9rem; }

            .note {
              color: var(--muted);
              font-size: 0.88rem;
              margin-top: 12px;
            }

            .alert-min {
              color: var(--danger);
              font-weight:600;
              margin-top:10px;
              font-size:0.95rem;
            }

            /* right panel (receive amount) */
            .receipt {
              background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
              border-radius: 12px;
              padding: 16px;
              min-width: 220px;
              text-align: right;
              border:1px solid rgba(255,255,255,0.02);
            }
            .receipt .amount {
              font-size: 1.4rem;
              font-weight:700;
            }
            .fee { font-size: 0.85rem; color: var(--muted); }

            /* responsive layout */
            @media (min-width: 992px) {
              .main-grid { /*! display: grid; */ grid-template-columns: 1fr 300px; gap: 20px; align-items:start; text-align: right;direction: rtl;background: #ffffff0f;padding: 20px;border-radius: 10px;}
            }

            /* copy toast */
            .copied-toast {
              position: fixed;
              left: 20px;
              bottom: 20px;
              background: rgba(0,0,0,0.6);
              color: #fff;
              padding: 10px 14px;
              border-radius: 8px;
              display:none;
              z-index: 9999;
            }
.panel h4
{
   text-align: right !important;
    display: block !important;
}
.main-grid p, .main-grid label{
    color: white
}
.main-grid input, .main-grid select{
    background: #ffffff24 !important;
    color: black
}
.carddzt
{
    background: #ffffff0a;
    text-align: center;
    color: white;
    direction: rtl;
}.address-box {
  position: relative;
}
.copy-toast {
  position: absolute;
  bottom: -36px;
  left: 10px;
  background: #22c55e;
  color: #042018;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(34,197,94,0.16);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  z-index: 50;
  font-weight: 600;
}
.copy-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.form-control[readonly] {
  cursor: pointer;
}    .deposit-confirmation {
      max-width: 500px;
      margin: 0 auto;
      background: linear-gradient(135deg, #1a1f2d 0%, #131722 100%);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .confirmation-header {
      text-align: center;
      margin-bottom: 25px;
    }

    .success-icon {
      width: 70px;
      height: 70px;
      margin: 0 auto 15px;
      background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .success-icon svg {
      width: 35px;
      height: 35px;
      color: white;
    }

    .confirmation-header h3 {
      color: #fff;
      margin: 0 0 15px;
      font-weight: 600;
      font-size: 1.5rem;
    }

    .instruction-text {
      color: #9aa0a6;
      line-height: 1.6;
      margin: 0;
      font-size: 0.95rem;
    }

    .qr-section {
      display: flex;
      justify-content: center;
      margin-bottom: 25px;
    }

    .qr-container {
      position: relative;
      background: white;
      padding: 15px;
      border-radius: 12px;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .qr-container img {
      width: 180px;
      height: 180px;
      border-radius: 8px;
    }

    .scan-text {
      margin-top: 10px;
      color: #1a1f2d;
      font-weight: 500;
      font-size: 0.9rem;
    }

    .transaction-details {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-bottom: 25px;
    }

    .detail-chip {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.1);
      padding: 10px 15px;
      border-radius: 30px;
      backdrop-filter: blur(10px);
    }

    .detail-chip .label {
      color: #9aa0a6;
      margin-left: 8px;
      font-size: 0.9rem;
    }

    .detail-chip .value {
      color: #fff;
      font-weight: 500;
    }

    .network {
      border: 1px solid rgba(0, 186, 255, 0.3);
    }

    .amount {
      border: 1px solid rgba(0, 200, 83, 0.3);
    }

    .upload-section {
      margin-top: 20px;
    }

    .file-upload-wrapper {
      margin-bottom: 20px;
    }

    .file-input {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1;
    }

    .upload-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 25px;
      border: 2px dashed rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.03);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .upload-label:hover {
      border-color: rgba(0, 186, 255, 0.5);
      background: rgba(0, 186, 255, 0.05);
    }

    .upload-icon {
      margin-bottom: 10px;
    }

    .upload-icon svg {
      width: 30px;
      height: 30px;
      color: rgba(255, 255, 255, 0.5);
    }

    .upload-text {
      color: #fff;
      font-weight: 500;
    }

    .file-name {
      text-align: center;
      margin-top: 10px;
      color: #9aa0a6;
      font-size: 0.85rem;
    }

    .submit-button {
      width: 100%;
      padding: 15px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, #0d0c2d, #2c0058);
      color: white;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(0, 114, 255, 0.3);
    }

    .submit-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 114, 255, 0.4);
    }

    .submit-button:active {
      transform: translateY(0);
    }

    /* Responsive adjustments */
    @media (max-width: 576px) {
      .deposit-confirmation {
        padding: 20px;
        border-radius: 16px;
      }

      .transaction-details {
        flex-direction: column;
        align-items: center;
      }

      .detail-chip {
        width: 100%;
        justify-content: center;
      }
    }.success-alert {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  /*! background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); */
  color: white;
  border-radius: 12px;
  padding: 1px;
  /*! box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3); */
  /*! animation: slideIn 0.5s ease-out; */
  text-align: center !important;
}

.success-alert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px 12px 0 0;
}

.alert-content {
  /*! display: flex; */
  align-items: center;
  background: white;
  padding: 18px 20px;
  border-radius: 12px;
  position: relative;
  text-align: center;
}

.alert-icon {
  margin-left: 15px;
  flex-shrink: 0;
  width: 42px;
  height: 31px;
  /*! display: flex; */
  align-items: center;
  justify-content: center;
  /*! background: #4CAF50; */
  /*! border-radius: 50%; */
  color: #1ca464;
  margin: auto;
}

.alert-text {
  flex-grow: 1;
  color: #333;
}

.alert-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
  color: #2E7D32;
}

.alert-message {
  font-size: 14px;
  margin: 0;
  color: #555;
}

.alert-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #888;
  margin-right: 5px;
  transition: color 0.2s;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.alert-close:hover {
  background: #f5f5f5;
  color: #333;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.crypto-chart {
  /*! border-radius: 16px; */
  padding: 0 13px;
  margin: 10px 0;
  /*! box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); */
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  margin-top: 0 !important;
  margin: 0;
}

.chart-header h2 {
  color: #e2e8f0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
}

.timeframe-info {
  /*! display: flex; */
  align-items: center;
  margin: auto;
  margin-top: -36px;
  margin-right: 77px !important;
  width: 100%;
}
.timeframe-info  a{
    font-size: 13px;
}
.timeframe-info .supportbtn{

    margin-right:auto !important;
    color: white !important;
    text-decoration: underline;
    position: absolute;
    left: 15px;
    float: left !important;
    position: absolute;
    left: -50px !important;
}
.timeframe-badge {
  background: #3b82f6;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 0.875rem;
}

.last-update {
  color: #94a3b8;
  font-size: 0.875rem;
}

.price-info-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  background: #1e293b;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.price-metric {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.price-metric .label {
  color: #94a3b8;
  font-size: 0.875rem;
  margin-bottom: 4px;
  direction: rtl;
}

.price-metric .value {
  color: #e2e8f0;
  font-weight: 600;
  font-size: 1.125rem;
}

.chart {
  width: 100%;
  height: anchor-size;
  border-radius: 12px;
  overflow: hidden;
  background: #1e293b;
}

.chart-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 20px;
}

.candle-info {
  background: #1e293b;
  padding: 16px;
  border-radius: 12px;
  flex: 1;
  margin: 5px 0;
}

.candle-info h4 {
  color: #e2e8f0;
  margin: 0 0 12px 0;
  font-size: 1rem;
}

.candle-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  justify-content: e;
  margin: a;
}

.detail {
  display: flex;
  justify-content: space-between;
  color: #94a3b8;
  flex-direction: row-reverse;
}

.time-remaining {
  background: #1e293b;
  padding: 16px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 200px;
}

.time-remaining span:first-child {
  color: #94a3b8;
  margin-bottom: 8px;
}

#time-remaining {
  color: #3b82f6;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.candle-progress {
  width: 100%;
  background: #334155;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: #3b82f6;
  border-radius: 3px;
  width: 0%;
  transition: width 0.5s ease;
}

.positive {
  color: #10b981 !important;
}

.negative {
  color: #ef4444 !important;
}
.skip-btn {
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 14px;
  color: #ccc;
  cursor: pointer;
}
.logo {
  margin-top: 40px;
  font-size: 22px;
  font-weight: bold;
}
.logo span {
  color: #00b3ff;
}
.illustration img {
  max-width: 220px;
  margin: 40px auto;
}
.btn-custom {
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.wlco{
    text-align: center;
    width: 100%;
    margin-top: 60px;
}
.wlco h1{
    color: white;
}
.wlco ul{
    display: block;
    text-align: center;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.wlco ul a {
  position: relative;
  display: block;
  text-align: center;
  background: #081526; /* inner background */
  padding: 15px;
  margin: 10px 0;
  color: #f5f5f5;
  font-size: 15px;
  border-radius: 20px;
  z-index: 1;
  overflow: hidden;
  /*! transition: 0.3s; */
}

/* ✨ gradient border effect */
.wlco a::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px; /* thickness of border */
  border-radius: 34px;
  background: linear-gradient(135deg, #10b981, #3b82f6, #a855f7);
  background-size: 300% 300%;
  animation: borderFlow 5s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

/* 🌀 subtle animation */
@keyframes borderFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 🌑 first child with dimmer gradient */
.wlco ul a:nth-child(1) {
  background: #fff0; /* same as yours */
}

.wlco ul a:nth-child(1)::before {
  background: linear-gradient(135deg, #7eadf0, #430086);
  animation: none; /* no animation for first child */
}

.preloader
{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left:0 ;
background-color: #060617;
z-index: 99999999999999999999;

}
.preloaders
{
text-align: center;
margin: 250px 0;
}
@media (min-width: 768px) {
    .container{
    }

  #external-sidebar {
    right: 0 !important;
  }
  #sidebarToggle {
  }
  #main-content {
    margin-right: 250px;
  }
}  #external-sidebar {
    width: 308px;
    background: linear-gradient(to left, #0e0c2e, #02010d);
    color: white;
    position: absolute;
    right: -331px !important; /* مخفي خارج الشاشة */
    top: 0;
    transition: right 0.3s ease-in-out;
    z-index: 1000;
    padding-bottom: 40px !important;
  }

  #external-sidebar.sidebar-open {
    right: 0 !important; /* يظهر */
  }


@media (max-width: 600px) {
    .asr{
        /*! display: inline-flex; */
        width: 100%;
        OVE: H;
        overflow: hidden;
        padding: 0;
        margin: 0px !important;
        margin-top: 1px !important;
    }
    .asr li{
        width: 100%;
        display: flex;
        margin: 6px 0;
    }
    .asr a{
        /*! display: block; */
        padding: unset !important;
        margin: 0px 3px;
        width: 50%;
        padding: 9px 18px !important;
        text-align: left;
        font-size: 14px;
  }
    #sidebarToggle
    {
        /*! position:absolute; */
        top:11px;
        left:15px;
        z-index: 999999999999999999999;
        color: white;
        border: unset;
    }
    .navbar {
        padding: 0 !important;
    }
    #external-sidebar a span
    {
        display: block !important;
    }
    .userspace
    {
      display: block !important;
      text-align: center !important;
    }
    .chart-container
    {
        width: 100% !important;
    }
    .chart-container .tv-lightweight-charts{
        width: 100% !important;
    }
}
.actives a{
    background: #f43c3c !important;
    /*! border: 1px solid  !important; */
    padding: 6px !important;
    text-align: center !important;
    margin: 0px 10px !important;
    border-radius: 10px;
    display: block;
    font-size: 14px;
    color: white;
    margin-top: 90px !important
}
.social-icons .icon-box {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: transform .2s ease, box-shadow .2s ease;
  margin: 5px;
  padding: 17px !important;
}
.social-icons .icon-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}
/* Custom brand colors */
.youtube   { background: #ff0000; color: #fff; }
.instagram { background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4); color: #fff; }
.facebook  { background: #1877f2; color: #fff; }
.twitter   { background: #000;    color: #fff; } /* X/Twitter black */
.threads   { background: #eee;    color: #000 !important; }
.aboutus {
  /*! background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
  overflow: hidden;
  color: white;
  margin-bottom: 190px;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #222;
  position: relative;
}

.section-title::after {
  /*! content: ""; */
  /*! display: block; */
  width: 60px;
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
}

.about-content p {
  font-size: 1.1rem;
  line-height: 1.7;
}

.about-img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
}

.about-img-wrapper img {
  transition: transform 0.6s ease;
}

.about-img-wrapper:hover img {
  transform: scale(1.05);
}
.promo-card{
  max-width: 760px;
  margin: 18px auto;
  background: var(--card-bg);
  border-radius: 22px;
  box-shadow: 0 14px 35px rgba(10,20,40,0.18);
  overflow: hidden;
  background: #ffffff1a;
  direction: rtl;
}

.promo-top{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 34px 24px 0;
}

.promo-top img{
  width: 320px; /* adjust as needed */
  max-width: 86%;
  height: auto;
  display:block;
}

.promo-body{
  padding: 16px 36px 28px;
  text-align: right;
}

.promo-title{
  font-weight:700;
  font-size: 28px;
  color: var(--primary-dark);
  margin-top: 6px;
  line-height:1.1;
}

.promo-sub{
  display:block;
  font-weight:500;
  font-size:18px;
  color: var(--muted);
  margin-top:6px;
  margin-bottom: 14px;
}

.divider{
  width: 88%;
  height: 1px;
  background: rgba(22,36,59,0.06);
  margin: 0 auto 14px;
}

.rules{
  text-align: right;
  direction: rtl;
  padding: 10px 6px;
}

.rules h6{
  font-weight:700;
  margin-bottom:8px;
  color: var(--primary-dark);
  font-size:18px;
}

.rules ol{
  padding-left: 14px;
  margin: 0 0 10px;
  list-style: none;
}

.rules ol li{
  position: relative;
  padding: 10px 10px 10px 36px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: transparent;
  color: #334155;
  font-size: 15px;
  text-align: right;
}

/* small bullet number circle on the left (visual on RTL layout becomes left) */
.rules ol li::before{
  content: counter(item);
  counter-increment: item;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width:28px;
  height:28px;
  line-height:28px;
  text-align:center;
  border-radius:50%;
  background: var(--primary-dark);
  color: #fff;
  font-weight:600;
  font-size:14px;
}
.rules ol{counter-reset: item;}

.bullet-list{
  text-align: right;
  margin-top:10px;
  font-size:15px;
  color:#334155;
}

.note{
  font-size:13px;
  color: #475569;
  margin-top:10px;
  text-align: right;
}

.cta-wrap{
  padding: 22px 36px 36px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.btn-cta{
  background: var(--primary-dark);
  color:#fff;
  border-radius: 18px;
  padding: 12px 36px;
  font-size: 14px;
  font-weight:600;
  box-shadow: 0 8px 18px rgba(22,36,59,0.18);
  border: none;
}

/* smaller screens */
@media (max-width:576px){
    video
    {
        height: 100% !important;
    }
    .promo-body
    {
        padding: 10px 10px;
        text-align: right
    }
    .chart-footer
    {
        display: block;
        margin: 10px 0 !important;

    }
    #sidebarToggle
    {
        /*! display: none */
    }
    .crypto-chart
    {
        /*! margin-top: 80px */
    }
  .promo-card{ margin: 10px; border-radius: 16px;}
  .promo-title{ font-size:22px;}
  .promo-sub{ font-size:15px;}
  .promo-top img{ width: 260px;}
  .btn-cta{ padding:10px 22px; font-size:16px;}
}
.userspace p{
    display: block !important;;
    text-align: center !important;
    direction: rtl;
}
#sidebarToggle{
    /*! position: absolute!important; */
    margin-top: 0px;
    margin-right: 28px;
    color: white;
    border: unset;
    float: right;
    margin-left: auto;
    padding: 0px 5px;
    z-index: 0;
}

.navbar{
    padding: 0 !important;
    z-index: 2;
}
.wlco
{
    margin-top:52px !important;
    position: relative;
    position: absolute;
    width: 100%;
    z-index: 99999999999999999999999999999999;
}
.wlco img{
    margin: 17px 0;
    width: 70%
}
.asr
{
    text-align: center;
    margin-top: 40px
}
.asr a{
    background: linear-gradient(to right,#111,#040404);
    padding: 8px 126px;
    border-radius: 10px;
    color: white;
    width: 100%;
}
.asr .but
{
    background: #18915e;
}
.asr .sell{
    background: #ce2828;
}
#external-sidebar {
  position: fixed;
  top: 0;
  right: -300px;
  width: 286px;
  height: 100vh;
  background: #0e0c2e;
  color: white;
  transition: right 0.3s ease;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: -3px 0 10px rgba(0,0,0,0.4);
  padding: 12px;
  z-index: 98888888888888888;
}
#external-sidebar.sidebar-open {
  right: 0;
}
#sidebarBack {
  position: absolute;
  top: 8px;
  right: 15px;
  background: transparent;
  color: white;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
}
.social-icons .icon-box i {
  font-size: 20px;
  color: white;
  transition: 0.2s;
}
.social-icons .icon-box:hover i {
  color: #38bdf8;
  transform: scale(1.1);
}
.share-space
{
    text-align: center;
    justify-content: center;
    margin-top: 20px !important;
}
.share-space .btn{
    padding: 5px 10px;
    margin: 0px 5px !important;
}
a:hover{
  text-decoration: none;
}
.phone-box {
  display: flex;
  align-items: center;
  background: #0d1330;
  border: 1px solid #1f2a44;
  border-radius: 10px;
  overflow: hidden;
  height: 45px;
  transition: 0.3s;
}

.country-select {
  background: #434253;
  border: none;
  color: #fff;
  font-size: 13px;
  padding: 0 10px;
  height: 100%;
  appearance: none;
  border-left: 1px solid #626a7d;
  cursor: pointer;
  border-radius: 0 !important;
}

.country-select option {
  background: #0d1330;
  color: #fff;
  padding: 6px;
}

.phone-input {
  flex: 1;
  border: none;
  outline: none;
  background: #444356;
  color: #fff;
  padding: 0 12px;
  font-size: 13px;
  height: 100%;
}

.phone-input::placeholder {
  color: #94a3b8;
}

.phone-box:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 8px rgba(59,130,246,0.4);
}
.account-page .row .col-md-6:first-child
{
    width: 44% !important;
    padding: 0;
    margin-left: 15px;
}
.account-page .row .col-md-6:nth-of-type(2){
    width: 44%;
    padding: 0 !important;
    margin-left: 8px;
    margin-right: 11px;
}
.account-page .col-lg-8{
    padding: 0
}
.specoa
{
    margin-top: -16px;
    text-align: center;
    color: white;
    font-size: ;
}
.specoa h4{
    font-size: 20px
}
.dssd{
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
}        :root {
            --primary: #5865F2;
            --primary-dark: #4752C4;
            --secondary: #2F3136;
            --secondary-dark: #202225;
            --tertiary: #36393F;
            --success: #57F287;
            --danger: #ED4245;
            --warning: #FEE75C;
            --info: #5865F2;
            --online: #3BA55D;
            --idle: #FAA81A;
            --dnd: #ED4245;
            --offline: #747F8D;
            --text-primary: #FFFFFF;
            --text-secondary: #B9BBBE;
            --text-muted: #72767D;
            --background: #36393F;
            --card-bg: #2F3136;
            --border: #202225;
            --message-hover: #32353B;
            --input-bg: #40444B;
            --scrollbar: #202225;
            --scrollbar-thumb: #4F545C;
        }
        /* أنماط المحادثات الخاصة */
        .conversation-item {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
            margin: 2px 0;
        }

        .conversation-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .conversation-item.active {
            background-color: rgba(88, 101, 242, 0.3);
        }

        .conversation-avatar {
            position: relative;
            margin-left: 10px;
        }

        .conversation-avatar img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }

        .conversation-status {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #747f8d;
            border: 2px solid #2f3136;
        }

        .conversation-status.online {
            background-color: #3ba55d;
        }

        .conversation-info {
            flex: 1;
            min-width: 0;
        }

        .conversation-name {
            font-weight: 500;
            font-size: 14px;
            color: white;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .conversation-preview {
            font-size: 12px;
            color: #72767d;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .channel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            color: #8e9297;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .add-conversation-btn {
            background: none;
            border: none;
            color: #8e9297;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .add-conversation-btn:hover {
            color: white;
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* نافذة المحادثة الخاصة */
        .private-chat-header {
            display: flex;
            align-items: center;
            padding: 0 16px;
            height: 48px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.2);
        }

        .private-chat-back {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            padding: 8px;
            margin-right: 10px;
            display: none;
        }

        @media (max-width: 768px) {
            .private-chat-back {
                display: block;
            }
        }

        .private-chat-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .private-chat-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }

        .private-chat-name {
            font-weight: 600;
            font-size: 16px;
        }

        .private-chat-status {
            font-size: 12px;
            color: #72767d;
        }

        /* إشعارات جديدة */
        .notification-dot {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ed4245;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }.private-chat-back {
    background: none;
    border: none;
    color: #b9bbbe;
    cursor: pointer;
    padding: 8px;
    margin-right: 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
    display: none;
}

.private-chat-back:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

@media (max-width: 768px) {
    .private-chat-back {
        display: block;
    }
}/* أنماط المحادثات الخاصة */
.channel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 8px 16px;
    color: #8e9297;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 8px;
}

.add-conversation-btn {
    background: none;
    border: none;
    color: #8e9297;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.2s;
}

.add-conversation-btn:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

.conversations-list {
    max-height: 300px;
    overflow-y: auto;
    padding-bottom: 10px;
}

.conversation-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin: 2px 8px;
    transition: background-color 0.2s;
    position: relative;
}

.conversation-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.conversation-item.active {
    background-color: rgba(88, 101, 242, 0.2);
}

.conversation-avatar {
    position: relative;
    margin-left: 10px;
    flex-shrink: 0;
}

.conversation-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.conversation-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #747f8d;
    border: 2px solid #2f3136;
}

.conversation-status.online {
    background-color: #3ba55d;
}

.conversation-info {
    flex: 1;
    min-width: 0;
}

.conversation-name {
    font-weight: 500;
    font-size: 14px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.conversation-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conversation-last-message {
    font-size: 12px;
    color: #72767d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.conversation-time {
    font-size: 11px;
    color: #72767d;
    margin-right: 5px;
}

/* بادج الرسائل غير المقروءة */
.unread-badge {
    background-color: #ed4245;
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin-right: 5px;
}

.member-unread {
    background-color: #ed4245;
    color: white;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    margin-right: 5px;
}

/* رسائل التحميل والخطأ */
.loading-conversations,
.no-conversations,
.error-loading {
    text-align: center;
    padding: 20px;
    color: #72767d;
    font-size: 13px;
}

.no-conversations i,
.error-loading i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

/* العدد الإجمالي للرسائل غير المقروءة */
.total-unread {
    background-color: #ed4245;
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    margin-right: 8px;
}

/* تعديل قائمة الأعضاء */
.member-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin: 2px 8px;
    transition: background-color 0.2s;
}

.member-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.member-avatar {
    position: relative;
    margin-left: 10px;
}

.member-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.member-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #2f3136;
}

.member-info {
    flex: 1;
    min-width: 0;
}

.member-name {
    font-weight: 500;
    font-size: 14px;
    color: white;
    margin-bottom: 2px;
}

.member-activity {
    font-size: 12px;
    color: #72767d;
}

.member-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.start-private-chat {
    background: none;
    border: none;
    color: #7289da;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.start-private-chat:hover {
    background-color: rgba(114, 137, 218, 0.1);
    color: white;
}

.member-admin {
    color: #ed4245;
    font-size: 12px;
}.conversation-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.05);
}

.conversation-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.conversation-item.active {
    background: rgba(88, 101, 242, 0.3);
}

.conversation-avatar {
    position: relative;
    margin-left: 12px;
    flex-shrink: 0;
}

.conversation-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.conversation-status {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #2f3136;
}

.conversation-status.online {
    background: #3ba55d;
}

.conversation-status.offline {
    background: #747f8d;
}

.conversation-info {
    flex: 1;
    min-width: 0;
    text-align: right;
}

.conversation-name {
    font-weight: 600;
    color: white;
    font-size: 14px;
    margin-bottom: 4px;
}

.conversation-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conversation-last-message {
    font-size: 12px;
    color: #b9bbbe;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.conversation-time {
    font-size: 11px;
    color: #72767d;
}

.unread-badge {
    background: #ed4245;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    margin-right: 8px;
}

.no-conversations {
    text-align: center;
    padding: 20px;
    color: #72767d;
}

.no-conversations i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

.error-loading {
    text-align: center;
    padding: 20px;
    color: #ed4245;
}

.retry-btn {
    background: rgba(237, 66, 69, 0.2);
    border: 1px solid #ed4245;
    color: #ed4245;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.2s;
}

.retry-btn:hover {
    background: rgba(237, 66, 69, 0.3);
}

.start-new-chat-btn {
    background: rgba(88, 101, 242, 0.2);
    border: 1px solid #5865f2;
    color: #5865f2;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.2s;
}

.start-new-chat-btn:hover {
    background: rgba(88, 101, 242, 0.3);
}
        /* Container */
        .chat-app {
            display: flex;
            height: 100vh;
            width: 99%;
            margin: auto;
            margin-top: 22px;
            position: relative;
        }

        /* Sidebar */
        .sidebar {
            width: 240px;
            background-color: #36393F3B;
            display: flex;
            flex-direction: column;
            border-left: 1px solid #202225;
        }

        /* Server List */
        .server-list {
            padding: 12px;
            border-bottom: 1px solid var(--border);
        }

        .server-icon {
            width: 48px;
            height: 48px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            cursor: pointer;
            transition: all 0.2s;
        }

        .server-icon:hover {
            border-radius: 35%;
            background: var(--primary-dark);
        }

        .server-icon i {
            font-size: 22px;
        }

        /* Channels */
        .channels {
            padding: 16px;
            flex: 1;
        }

        .channel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .channel-title {
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--text-muted);
            letter-spacing: 0.5px;
        }

        .channel-item {
            display: flex;
            align-items: center;
            padding: 8px;
            margin: 2px 0;
            border-radius: 4px;
            cursor: pointer;
            color: var(--text-secondary);
            transition: all 0.2s;
        }

        .channel-item:hover {
            background-color: var(--message-hover);
            color: var(--text-primary);
        }

        .channel-item.active {
            background-color: var(--primary);
            color: var(--text-primary);
        }

        .channel-icon {
            margin-left: 8px;
            font-size: 16px;
            opacity: 0.7;
        }

        /* User Panel */
        .user-panel {
            background-color: #36393F3B;
            padding: 12px;
            display: flex;
            align-items: center;
            border-top: 1px solid var(--border);
        }

        .user-avatar {
            position: relative;
            margin-left: 12px;
        }

        .avatar-img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }

        .status-indicator {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--online);
            border: 3px solid var(--secondary-dark);
        }

        .status-indicator.idle { background-color: var(--idle); }
        .status-indicator.dnd { background-color: var(--dnd); }
        .status-indicator.offline { background-color: var(--offline); }

        .user-info {
            flex: 1;
        }

        .username {
            font-weight: 600;
            font-size: 14px;
        }

        .status {
            font-size: 12px;
            color: var(--text-muted);
        }

        .user-controls {
            display: flex;
            gap: 8px;
        }

        .control-btn {
            width: 32px;
            height: 32px;
            border-radius: 4px;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .control-btn:hover {
            background-color: var(--message-hover);
            color: var(--text-primary);
        }

        /* Main Chat */
        .main-chat {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: #36393F3B;
            margin: auto !important;
            width: 100% !important;
            max-width: 100% !important;
            height: 100vh !important;
            overflow: auto;
            overflow-y: hidden;
        }

        /* Chat Header */
        .chat-header {
            padding: 5px 12px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .chat-title {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .channel-name {
            font-weight: 600;
            font-size: 13px;
        }

        .channel-topic {
            font-size: 12px;
            color: var(--text-muted);
        }

        .chat-actions {
            display: flex;
            gap: 8px;
        }

        .header-btn {
            padding: 8px 16px;
            background-color: var(--input-bg);
            border: none;
            border-radius: 4px;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            transition: all 0.2s;
        }

        .header-btn:hover {
            background-color: var(--message-hover);
        }

        .header-btn i {
            font-size: 16px;
        }

        /* Messages Container */
        .messages-container {
            flex: 1;
            padding: 20px 2px;
            background-color: #0F0F1C00;
            position: relative;
            overflow-x: auto;
        }

        /* Message Group */
        .message-group {
            margin-bottom: 24px;
        }

        .message-date {
            text-align: center;
            margin: 20px 0;
            position: relative;
        }

        .date-line {
            position: relative;
            display: inline-block;
            padding: 0 16px;
            background-color: var(--background);
            font-size: 12px;
            color: var(--text-muted);
            font-weight: 600;
        }

        .date-line::before {
            content: '';
            position: absolute;
            top: 50%;
            right: 100%;
            width: 100vw;
            height: 1px;
            background-color: var(--border);
            z-index: -1;
        }

        .date-line::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 100%;
            width: 100vw;
            height: 1px;
            background-color: var(--border);
            z-index: -1;
        }

        /* Single Message */
        .message {
            display: flex;
            padding: 8px 16px;
            position: relative;
            transition: background-color 0.2s;
            direction: l;
            text-align: right;
        }

        .message:hover {
            /*! background-color: var(--message-hover); */
        }

        .message-avatar {
            position: relative;
            margin-left: 16px;
            flex-shrink: 0;
        }

        .message-avatar img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .message-avatar img:hover {
            transform: scale(1.05);
        }

        .message-content {
            flex: 1;
            min-width: 0;
            padding: 7px 10px;
        }

        .message-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }

        .message-author {
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
        }

        .message-author:hover {
            text-decoration: underline;
        }

        .message-time {
            font-size: 12px;
            color: var(--text-muted);
            float: left !important;
            position: absolute;
            left: 20px;
        }

        .message-text {
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-secondary);
            word-wrap: break-word;
            direction: rtl;
        }

        .message-actions {
            position: absolute;
            left: 16px;
            top: -12px;
            background-color: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 4px;
            display: none;
            gap: 4px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 10;
        }

        .message:hover .message-actions {
            display: flex;
        }

        .action-btn {
            width: 28px;
            height: 28px;
            border-radius: 4px;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .action-btn:hover {
            background-color: var(--message-hover);
            color: var(--text-primary);
        }

        /* Message Reactions */
        .message-reactions {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }

        .reaction {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            background-color: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .reaction:hover {
            background-color: var(--message-hover);
            border-color: var(--primary);
        }

        .reaction-count {
            color: var(--text-muted);
        }

        /* Typing Indicator */
        .typing-indicator {
            padding: 0 16px 16px;
            display: none;
        }

        .typing-indicator.active {
            display: block;
        }

        .typing-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .typing-dots {
            display: flex;
            gap: 4px;
        }

        .typing-dots span {
            width: 8px;
            height: 8px;
            background-color: var(--text-muted);
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out;
        }

        .typing-dots span:nth-child(1) { animation-delay: -0.32s; }
        .typing-dots span:nth-child(2) { animation-delay: -0.16s; }

        .typing-text {
            font-size: 12px;
            color: var(--text-muted);
        }

        @keyframes typing {
            0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
            40% { transform: scale(1); opacity: 1; }
        }

        /* Message Input */
        .message-input-container {
            /*! padding: 19px; */
            background-color: #36393F3B;
            overflow-y: hidden;
        }

        .input-wrapper {
            background-color: #36393F00;
            border-radius: 8px;
            /*! border: 1px solid var(--border); */
            padding: 8px;
            overflow-y: hidden;
        }

        .input-tools {
            display: flex;
            align-items: center;
            gap: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 8px;
        }

        .tool-btn {
            width: 28px;
            height: 28px;
            border-radius: 4px;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .tool-btn:hover {
            background-color: var(--message-hover);
            color: var(--text-primary);
        }

        .message-input {
            width: 100%;
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-size: 15px;
            resize: none;
            outline: none;
            min-height: 44px;
            max-height: 200px;
            line-height: 1.5;
            padding: 4px 0;
        }

        .message-input::placeholder {
            color: var(--text-muted);
        }

        .input-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            /*! margin-top: 8px; */
        }

        .input-attachments {
            display: flex;
            gap: 8px;
        }

        .attachment {
            width: 32px;
            height: 32px;
            border-radius: 4px;
            background-color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            cursor: pointer;
            position: relative;
        }

        .attachment:hover::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        .send-btn {
            padding: 8px 16px;
            background-color: var(--mainColor);
            border: none;
            border-radius: 4px;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
            transition: all 0.2s;
        }

        .send-btn:hover:not(:disabled) {
            background-color: var(--primary-dark);
        }

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

        /* Members List */
        .members-sidebar {
            width: 240px;
            background-color: #36393F;
            border-right: 1px solid var(--border);
            padding: 16px;
            overflow-y: auto;
        }

        .members-header {
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--text-muted);
            letter-spacing: 0.5px;
            margin-bottom: 16px;
        }

        .member-item {
            display: flex;
            align-items: center;
            padding: 8px;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 4px;
            transition: all 0.2s;
        }

        .member-item:hover {
            background-color: var(--message-hover);
        }

        .member-avatar {
            position: relative;
            margin-left: 12px;
        }

        .member-avatar img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }

        .member-status {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 3px solid var(--secondary);
        }

        .member-info {
            flex: 1;
        }

        .member-name {
            font-weight: 500;
            font-size: 14px;
        }

        .member-activity {
            font-size: 12px;
            color: var(--text-muted);
        }

        /* Admin Controls */
        .admin-controls {
            background-color: var(--card-bg);
            border-radius: 8px;
            padding: 16px;
            margin-top: 16px;
            border: 1px solid var(--border);
        }

        .admin-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .admin-select {
            width: 100%;
            padding: 8px;
            background-color: var(--input-bg);
            border: 1px solid var(--border);
            border-radius: 4px;
            color: var(--text-primary);
            margin-bottom: 12px;
        }

        .admin-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .admin-btn {
            padding: 8px;
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .mute-btn { background-color: var(--warning); color: #000; }
        .ban-btn { background-color: var(--danger); }
        .unban-btn { background-color: var(--success); }
        .kick-btn { background-color: var(--idle); }

        .admin-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--scrollbar);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #5D6269;
        }

        /* Loading Animation */
        .loading {
            text-align: center;
            padding: 20px;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
        }

        .empty-icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        /* Badges */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 9px;
            font-weight: 500;
            margin-right: 6px;
        }

        .badge.admin {
            background-color: var(--danger);
            color: white;
        }

        .badge.moderator {
            background-color: var(--primary);
            color: white;
        }

        .badge.vip {
            background-color: var(--warning);
            color: #000;
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .members-sidebar {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .sidebar {
                display: none;
            }

            .chat-actions {
                display: none;
            }

            .message {
                padding: 8px;
            }

            .message-avatar {
                width: 32px;
                height: 32px;
                margin-left: 8px;
            }

            .message-avatar img {
                width: 32px;
                height: 32px;
            }
        }

        /* Mobile Menu Toggle */
        .mobile-menu-toggle {
            display: none;
            position: fixed;
            bottom: 7px;
            right: 20px;
            z-index: 100;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            border: none;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        @media (max-width: 768px) {
            .mobile-menu-toggle {
                display: flex;
            }

            .sidebar.active,
            .members-sidebar.active {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                z-index: 99;
                width: 280px;
                box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
            }
        }

        /* Toast Notifications */
        .toast-container {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .toast {
            padding: 12px 16px;
            border-radius: 8px;
            background-color: var(--card-bg);
            border: 1px solid var(--border);
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 12px;
            animation: slideIn 0.3s ease-out;
            max-width: 300px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .toast.success {
            border-right: 4px solid var(--success);
        }

        .toast.error {
            border-right: 4px solid var(--danger);
        }

        .toast.warning {
            border-right: 4px solid var(--warning);
        }

        @keyframes slideIn {
            from {
                transform: translateX(-100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* Context Menu */
        .context-menu {
            position: fixed;
            background-color: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 8px;
            z-index: 1000;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
            min-width: 200px;
            display: none;
        }

        .context-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            color: var(--text-secondary);
            transition: all 0.2s;
        }

        .context-item:hover {
            background-color: var(--message-hover);
            color: var(--text-primary);
        }

        .context-divider {
            height: 1px;
            background-color: var(--border);
            margin: 8px 0;
        }

        /* Modal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }

        .modal {
            background-color: var(--card-bg);
            border-radius: 12px;
            padding: 24px;
            width: 90%;
            max-width: 500px;
            border: 1px solid var(--border);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .modal-title {
            font-size: 20px;
            font-weight: 600;
        }

        .modal-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
        }

        .modal-close:hover {
            background-color: var(--message-hover);
            color: var(--text-primary);
        }

        .modal-input {
            width: 100%;
            padding: 12px;
            background-color: var(--input-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            margin-bottom: 16px;
            font-size: 14px;
        }

        .modal-buttons {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .modal-btn {
            padding: 10px 20px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s;
        }

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

        .modal-btn.secondary {
            background-color: var(--input-bg);
            color: var(--text-primary);
        }

        .modal-btn:hover {
            transform: translateY(-1px);
        }

        /* Message Editing */
        .message-editing {
            background-color: var(--input-bg);
            border-radius: 8px;
            border: 1px solid var(--primary);
            margin: 8px 16px;
            padding: 8px;
        }

        .edit-input {
            width: 100%;
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-size: 15px;
            resize: none;
            outline: none;
            line-height: 1.5;
        }

        .edit-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 8px;
        }

        /* Pinned Messages */
        .pinned-messages {
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            padding: 12px;
            margin: 16px;
            border-left: 3px solid var(--warning);
        }

        .pinned-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            color: var(--warning);
            font-weight: 500;
        }

        /* Search */
        .search-container {
            padding: 16px;
            background-color: var(--tertiary);
            border-bottom: 1px solid var(--border);
        }

        .search-input {
            width: 100%;
            padding: 10px 16px;
            background-color: var(--input-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 14px;
        }

        .search-input::placeholder {
            color: var(--text-muted);
        }

        /* Voice Chat Indicator */
        .voice-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background-color: var(--primary-dark);
            border-radius: 20px;
            margin: 0 16px 16px;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 0.7; }
            50% { opacity: 1; }
            100% { opacity: 0.7; }
        }

        .voice-wave {
            display: flex;
            align-items: center;
            gap: 2px;
        }

        .voice-bar {
            width: 3px;
            background-color: white;
            border-radius: 2px;
            animation: voice 1.4s infinite ease-in-out;
        }

        .voice-bar:nth-child(1) { height: 8px; animation-delay: -0.32s; }
        .voice-bar:nth-child(2) { height: 12px; animation-delay: -0.16s; }
        .voice-bar:nth-child(3) { height: 16px; }
        .voice-bar:nth-child(4) { height: 12px; animation-delay: 0.16s; }
        .voice-bar:nth-child(5) { height: 8px; animation-delay: 0.32s; }

        @keyframes voice {
            0%, 100% { height: 8px; }
            50% { height: 16px; }
        }

        /* Custom Scroll */
        .messages-container {
            scroll-behavior: smooth;
        }

        .messages-container::-webkit-scrollbar-track {
            background: transparent;
        }

        .messages-container:hover::-webkit-scrollbar-track {
            background: var(--scrollbar);
        }
        .modal
        {
          display: unset !important
        }
.message.sent .message-content {
  background: #0d6efd17 !important;
  color: white;
  border-radius: 18px 4px 18px 18px;
}
.file-message{

    border: unset !important;
}
.message.received .message-content
{
    border-radius: 18px 4px 18px 18px !important;
}div:where(.swal2-container).swal2-center > .swal2-popup
{
  color: white !important;
  background-color: #131518 !important
}


        .user-profile-display {
            margin-top: 20px;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
        }

        .current-user-profile {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

        .user-avatar-frame {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            padding: 5px;
            transition: all 0.3s ease;
        }

        .user-avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .vip-badge-on-avatar {
            position: absolute;
            bottom: -5px;
            right: -5px;
            background: #FFD700;
            color: #000;
            padding: 3px 8px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: bold;
        }

        .vip-level-card {
            background: #fff0;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            height: 100%;
        }

        .vip-level-card.active-level {
            box-shadow: 0 0 0 3px #28a745, 0 5px 15px rgba(0,0,0,0.1);
        }

        .vip-level-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }

        .vip-preview-frame {
            padding: 20px;
            /*! background: #f8f9fa; */
            text-align: center;
        }

        .frame-preview {
            width: 120px;
            height: 120px;
            margin: 0 auto;
            border-radius: 50%;
            padding: 5px;
            position: relative;
            overflow: hidden;
        }

        .frame-preview-image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .frame-color-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 5px;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
        }

        .vip-level-info {
            padding: 15px;
        }

        .vip-level-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .vip-level-title {
            font-size: 16px;
            margin: 0;
            color: #333;
        }

        .vip-level-price {
            background: #007bff;
            color: white;
            padding: 3px 10px;
            border-radius: 15px;
            font-weight: bold;
            font-size: 14px;
        }

        .progress-container {
            margin-bottom: 15px;
        }

        .progress {
            height: 8px;
            border-radius: 4px;
            background: #e9ecef;
            overflow: hidden;
            margin-bottom: 5px;
            height: ;
        }

        .progress-bar {
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        .progress-text {
            font-size: 12px;
            text-align: center;
        }

        .user-info {
            text-align: right;
            color: white;
        }

        .user-info h5 {
            margin: 0 0 10px 0;
            font-weight: bold;
        }

        .user-info p {
            margin: 5px 0;
            opacity: 0.9;
        }

        .vip-action-btn .btn {
            padding: 8px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .vip-action-btn .btn:hover:not(:disabled) {
            transform: scale(1.05);
        }
.vip-space .col-md-6{
    width: 33%;
    text-align: center !important;
    padding: 3px;
}
.frame-preview-image
{
    width: 20px;
    height: 20px
}
.vip-level-card
{
    /*! background: red; */
    height: auto !important;
}
.specoa h4 {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 15px;
}

.user-info-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
}

.user-avatar-current {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.current-user-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.vip-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFD700;
    color: #000;
    padding: 3px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.user-details h5 {
    margin: 0 0 10px 0;
    font-weight: bold;
}

.balance-text {
    margin: 0;
    font-size: 16px;
}

.vip-space {
    margin-top: 20px;
}

.vip-level-card {
    /*! background: white; */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 3px solid #0f6c4e;
    height: 100%;
    text-align: center !important;
    padding: 17px 0px;
    padding-bottom: 0 !important;
}

.vip-level-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.vip-level-card.active-level {
    border: 3px solid #28a745;
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.3);
}

.vip-color-header {
    /*! background: #f8f9fa; */
    padding: 0;
    /*! display: flex; */
    justify-content: space-between;
    align-items: center;
    /*! border-bottom: 1px solid #dee2e6; */
    text-align: center;
}

.vip-level-number {
    font-weight: bold;
    color: white;
    font-size: 16px;
    text-align: center;
    display: block;
}

.vip-color-name {
    font-weight: bold;
    font-size: 14px;
}

.vip-preview-frame {
    padding: 8px 20px;
    text-align: center;
}

.frame-preview {
    width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.frame-preview-image {
    width: 75%;
    height: 100%;
    border-radius: 50%;
    /*! object-fit: cover; */
    /*! box-sizing: border-box; */
    padding: 0 !important;
}

.vip-level-info {
    padding: 0;
}

.price-section {
    text-align: center;
    margin-bottom: 20px;
}

.price-amount {
    font-size: 20px;
    font-weight: bold;
    color: #2c3e50;
    background: #f8f9fa;
    padding: 8px 20px;
    border-radius: 25px;
    display: inline-block;
}

.vip-action-btn .btn {
    padding: 7px !important;
    font-weight: bold;
    font-size: 11px;
    transition: all 0.3s ease;
    background: #0f6c4e !important;
    opacity: 1 !important;
    border-radius: 0 !important;
}

.vip-action-btn .btn-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
}

.vip-action-btn .btn-success {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    border: none;
}

.vip-action-btn .btn-info {
    background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%);
    border: none;
}

.vip-action-btn .btn-locked {
    background: #6c757d;
    color: white;
    border: none;
}

.vip-action-btn .btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.vip-action-btn .btn:disabled {
    cursor: not-allowed;
    border-radius: 0 !important;
}
.vip-level-card {
    transition: all 0.3s ease;
}

.vip-level-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.progress {
    overflow: visible !important;
}

.progress-bar {
    transition: width 1s ease-in-out;
    position: relative;
}

.feature-dropdown-content {
    animation: fadeIn 0.3s ease;
    text-align: right;
}

.feature-toggle-btn:hover {
    transform: scale(1.1);
    transition: transform 0.2s;
}

.current-vip-card {
    animation: pulse 2s infinite;
}

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

@keyframes pulse {
    0% { box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); }
    50% { box-shadow: 0 5px 20px rgba(102, 126, 234, 0.6); }
    100% { box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); }
}

.feature-dropdown-content::-webkit-scrollbar {
    width: 5px;
}

.feature-dropdown-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.feature-dropdown-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.feature-dropdown-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.vip_space{
    background: #ffffff0d !important;;
    border: unset !important;
    padding: 40px 0 !important;
}
.vip_space .sd3 span{
    background: unset !important;
    color: white;
    font-size: unset !important;
}
.vip_space .sd3 h4{
    color: white !important;
}
.vip_space span{
    color: white !important;
}
.progress-container{
    width: 72% !important;;
    margin: 10px auto !important;
    height: revert;
}
.feature-toggle-btn
{
   top:63px !important;
    left: -4px;
    position: absolute;
   background: #fff !important;
   color: black !important;
}
.vipnext
{
    position: absolute;
    left: 4px;
    bottom: 50px;
    color: black !important;
}
.progress{
    height: 6px !important;
}
.currentlevelimg
{
    position: absolute;
    right:   5px !important;
    top: 99px !important;
}
.currentlevelimg img{
    height: 34px !important;;

    width: 100% !important;
}
/* Donation Styles */
.donation-options {
    padding: 15px;
}

.donation-amounts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.amount-box {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.amount-box:hover {
    transform: translateY(-5px);
}

.amount-box.selected {
    transform: scale(1.05);
}

.amount-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 24px;
    color: white;
}

.amount-10 {
    background: linear-gradient(135deg, #3ba55d, #2d8c4a);
}

.amount-50 {
    background: linear-gradient(135deg, #5865f2, #4752c4);
}

.amount-100 {
    background: linear-gradient(135deg, #faa81a, #e69500);
}

.amount-200 {
    background: linear-gradient(135deg, #ed4245, #c03537);
}

.amount-text {
    font-weight: bold;
    color: white;
    display: block;
    font-size: 14px;
}

.custom-amount {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.custom-amount input {
    flex: 1;
}

.donation-message textarea {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    margin-bottom: 15px;
}

.donation-timer {
    background: rgba(114, 137, 218, 0.1);
    border: 1px solid #7289da;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.timer-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 24px;
    color: #faa81a;
    margin-bottom: 10px;
}

.timer-participants {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #b9bbbe;
    font-size: 14px;
}

/* Winning Modal Styles */
.winning-content {
    padding: 20px;
}

.winning-icon {
    margin-bottom: 20px;
}

.winning-message {
    font-size: 18px;
    color: white;
    margin-bottom: 15px;
    line-height: 1.5;
}

.winning-amount {
    font-size: 28px;
    font-weight: bold;
    color: #faa81a;
    margin: 10px 0;
}

/* Donation Message in Chat */
.donation-message-item {
    background: linear-gradient(135deg, rgba(250, 168, 26, 0.1), rgba(114, 137, 218, 0.1));
    border: 1px solid rgba(250, 168, 26, 0.3);
    border-radius: 10px;
    padding: 15px;
    margin: 15px 0;
    position: relative;
    overflow: hidden;
}

.donation-message-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #faa81a, #5865f2, #3ba55d);
}

.donation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.donation-icon {
    color: #faa81a;
    font-size: 18px;
}

.donation-sender {
    font-weight: bold;
    color: #faa81a;
}

.donation-amount-badge {
    background: #faa81a;
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.donation-body {
    color: white;
    margin-bottom: 10px;
    line-height: 1.4;
}

.donation-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #b9bbbe;
    font-size: 12px;
}

.donation-timer-countdown {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #faa81a;
}

/* Donation in Gift Space */
.gift-space {
    position: relative;
}

.gift-space a {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, #faa81a, #e69500);
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-weight: bold;
    transition: all 0.3s;
}

.gift-space a:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(250, 168, 26, 0.3);
}

.gift-space.active a {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(250, 168, 26, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(250, 168, 26, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 168, 26, 0); }
}/* رسائل التبرع في الشات */
.donation-message-item {
    background: linear-gradient(135deg, rgba(250, 168, 26, 0.1), rgba(114, 137, 218, 0.1));
    border: 1px solid rgba(250, 168, 26, 0.3);
    border-radius: 10px;
    padding: 15px;
    margin: 15px 0;
    position: relative;
    overflow: hidden;
    animation: fadeIn 0.5s ease-in;
}

.donation-message-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #faa81a, #5865f2, #3ba55d);
}

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

.donation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.donation-icon {
    color: #faa81a;
    font-size: 18px;
}

.donation-sender {
    font-weight: bold;
    color: #faa81a;
}

.donation-amount-badge {
    background: #faa81a;
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.donation-body {
    color: yellow;
    margin-bottom: 10px;
    line-height: 1.4;
    font-weight: 500;
}

.donation-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #b9bbbe;
    font-size: 12px;
}

.donation-timer-countdown {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #faa81a;
}

.donation-timer-display {
    font-family: monospace;
    font-weight: bold;
}
/* أنماط التبرع */
.gift-space {
    position: relative;
}

.gift-space.active a {
    background: linear-gradient(45deg, #faa81a, #ff6b6b);
    color: white;
    animation: pulse 2s infinite;
}

.gift-space.active a:hover {
    transform: scale(1.05);
}

.donation-click-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(45deg, #3ba55d, #faa81a);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.donation-click-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.donation-click-btn.clicked {
    animation: clickAnimation 0.2s;
}

.click-stats {
    font-size: 12px;
    margin-top: 5px;
    text-align: center;
}

.click-stats span {
    display: block;
    margin: 2px 0;
}

@keyframes clickAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(250, 168, 26, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(250, 168, 26, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 168, 26, 0); }
}

/* أنماط لوحة التبرع */
.donation-leaderboard {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid var(--border);
}

.leaderboard-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text-primary);
    text-align: center;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin: 5px 0;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    transition: background 0.2s;
}

.leaderboard-item:hover {
    background: rgba(255,255,255,0.1);
}

.leaderboard-item .rank {
    font-weight: bold;
    color: #faa81a;
    min-width: 30px;
}

.leaderboard-item .user {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.leaderboard-item .clicks {
    color: #3ba55d;
    font-weight: bold;
}

.leaderboard-item:nth-child(1) .rank { color: gold; }
.leaderboard-item:nth-child(2) .rank { color: silver; }
.leaderboard-item:nth-child(3) .rank { color: #cd7f32; } /* برونز */
/* أضف هذا إلى أنماط التبرع */
.donation-click-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(45deg, #3ba55d, #faa81a);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.donation-click-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.donation-click-btn.clicked {
    animation: clickAnimation 0.2s;
}

.click-stats {
    font-size: 12px;
    margin-top: 5px;
    text-align: center;
}

.click-stats span {
    display: block;
    margin: 2px 0;
}

@keyframes clickAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.top-space{
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    padding-left: 20px;
    display: flex;
    flex-direction: row-reverse;
}/* أنماط زر التبرع */
.gift-space {
    transition: all 0.3s ease;
}

.gift-space.countdown-active a {
    background: linear-gradient(135deg, #faa81a 0%, #ff6b6b 100%);
    color: white;
    animation: pulse 1s infinite;
}

.gift-space.collect-mode a {
    background: linear-gradient(135deg, #3ba55d 0%, #2d8c4a 100%);
    color: white;
    animation: bounce 0.5s infinite alternate;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-3px); }
}

.gift-space a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #7289da 0%, #5b6eae 100%);
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.gift-space a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(114, 137, 218, 0.3);
}/* زر الضغطات المدمج */
.click-button-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.click-button-embedded {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(135deg, #faa81a, #ff6b6b);
    border: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(250, 168, 26, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(250, 168, 26, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(250, 168, 26, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 168, 26, 0); }
}

.click-button-embedded:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(250, 168, 26, 0.5);
}

.click-button-embedded:active {
    transform: scale(0.95);
    box-shadow: 0 5px 20px rgba(250, 168, 26, 0.3);
}

.click-icon-embedded {
    font-size: 48px;
    margin-bottom: 10px;
}

.click-text-embedded {
    margin-bottom: 5px;
    font-size: 16px;
}

.click-timer {
    font-size: 32px;
    font-weight: bold;
    margin: 5px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.click-counter {
    font-size: 14px;
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 20px;
    margin-top: 5px;
}

/* زر الضغطات في النافذة */
.click-button {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7289da, #5865f2);
    border: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 8px 25px rgba(114, 137, 218, 0.3);
}

.click-button:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(114, 137, 218, 0.4);
}

.click-button:active {
    transform: scale(0.95);
    box-shadow: 0 4px 15px rgba(114, 137, 218, 0.3);
}

.click-icon {
    font-size: 56px;
    margin-bottom: 15px;
}

/* واجهة الضغطات في النافذة */
.click-interface {
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-top: 20px;
    border: 2px solid #faa81a;
}

.click-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 25px;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-label {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
}

.stat-value {
    font-size: 28px;
    font-weight: bold;
    color: var(--text-primary);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* معلومات الضغطات */
.click-info {
    margin-top: 20px;
    padding: 15px;
    background: rgba(250, 168, 26, 0.1);
    border-radius: 8px;
    border-right: 4px solid #faa81a;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 14px;
    padding: 5px 0;
}

.info-item i {
    margin-left: 10px;
    color: #faa81a;
    font-size: 16px;
}

.gift-space a i {
    font-size: 1.2em;
}
.top-space a{
    width: 150px !important;
}
.top-space .chat-info{
    width: 100%;
    margin-top: 5px;
    padding-right: 20px
}
.totaluser{
    padding: 10px 10px
}
                            .gift-space a {
                                color: white !important;
                                text-decoration: none !important;
                                font-weight: bold;
                                font-size: 14px;
                                display: flex;
                                align-items: center;
                                gap: 8px;
                            }

                            .gift-space.active {
                                animation: pulse 2s infinite;
                                background: linear-gradient(45deg, #ff6b35, #faa81a);
                            }

                            @keyframes pulse {
                                0% { box-shadow: 0 0 0 0 rgba(250, 168, 26, 0.7); }
                                70% { box-shadow: 0 0 0 10px rgba(250, 168, 26, 0); }
                                100% { box-shadow: 0 0 0 0 rgba(250, 168, 26, 0); }
                            }

                            .donation-click-btn {
                                display: flex;
                                align-items: center;
                                gap: 10px;
                                color: white !important;
                                text-decoration: none !important;
                                padding: 8px 12px;
                                border-radius: 6px;
                                background: rgba(0,0,0,0.2);
                                width: 100%;
                            }

                            .donation-click-btn:hover {
                                background: rgba(0,0,0,0.3);
                                transform: translateY(-2px);
                                transition: all 0.2s;
                            }

                            .donation-click-btn.clicked {
                                transform: scale(0.95);
                            }

                            .click-stats {
                                display: flex;
                                flex-direction: column;
                                font-size: 11px;
                                color: rgba(255,255,255,0.9);
                                margin-right: 10px;
                            }

                            .click-stats span {
                                display: flex;
                                justify-content: space-between;
                                gap: 10px;
                            }

                            .click-text {
                                font-weight: bold;
                                font-size: 14px;
                                color: white;
                            }

                            /* رسائل التبرع في الدردشة */
                            .message.donation-message {
                                background: linear-gradient(45deg, rgba(250, 168, 26, 0.1), rgba(255, 107, 53, 0.1));
                                border-right: 4px solid #faa81a;
                                border-left: none;
                            }

                            .message.donation-message .message-content {
                                color: #faa81a;
                            }

                            .message.donation-message .message-author {
                                color: #ff6b35;
                                font-weight: bold;
                            }

                            /* أنماط نافذة التبرع */
                            .donation-amounts {
                                display: grid;
                                grid-template-columns: repeat(2, 1fr);
                                gap: 10px;
                                margin: 15px 0;
                            }

                            .amount-box {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                padding: 15px;
                                border: 2px solid var(--border);
                                border-radius: 8px;
                                cursor: pointer;
                                transition: all 0.2s;
                            }

                            .amount-box:hover {
                                border-color: #faa81a;
                                transform: translateY(-2px);
                            }

                            .amount-box.selected {
                                border-color: #faa81a;
                                background: rgba(250, 168, 26, 0.1);
                            }

                            .amount-circle {
                                width: 50px;
                                height: 50px;
                                border-radius: 50%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 20px;
                                margin-bottom: 8px;
                            }

                            .amount-10 { background: #3ba55d; color: white; }
                            .amount-50 { background: #5865f2; color: white; }
                            .amount-100 { background: #faa81a; color: white; }
                            .amount-200 { background: #ed4245; color: white; }

                            .amount-text {
                                font-weight: bold;
                                font-size: 14px;
                            }

                            .custom-amount {
                                display: flex;
                                gap: 10px;
                                margin-top: 10px;
                            }

                            .custom-amount input {
                                flex: 1;
                                padding: 8px 12px;
                                border: 1px solid var(--border);
                                border-radius: 6px;
                                background: var(--card-bg);
                                color: var(--text-primary);
                            }

                            .donation-message textarea {
                                width: 100%;
                                min-height: 80px;
                                padding: 10px;
                                border: 1px solid var(--border);
                                border-radius: 6px;
                                background: var(--card-bg);
                                color: var(--text-primary);
                                resize: vertical;
                            }

                            .donation-rules {
                                background: rgba(114, 137, 218, 0.1);
                                border-radius: 8px;
                                padding: 15px;
                                margin-top: 15px;
                                border-left: 4px solid #7289da;
                            }

                            .donation-rules h4 {
                                margin-top: 0;
                                margin-bottom: 10px;
                                display: flex;
                                align-items: center;
                                gap: 8px;
                            }

                            .donation-rules ul {
                                margin: 0;
                                padding-left: 20px;
                                font-size: 13px;
                            }

                            .donation-timer {
                                background: rgba(250, 168, 26, 0.1);
                                border-radius: 8px;
                                padding: 15px;
                                margin: 15px 0;
                                text-align: center;
                                border: 2px solid #faa81a;
                            }

                            .timer-display {
                                font-size: 28px;
                                font-weight: bold;
                                color: #faa81a;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 10px;
                                margin-bottom: 10px;
                            }

                            .timer-participants {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                gap: 15px;
                                color: var(--text-muted);
                                font-size: 14px;
                            }

                            .leaderboard-title {
                                font-size: 16px;
                                font-weight: bold;
                                margin-bottom: 10px;
                                color: var(--text-primary);
                                display: flex;
                                align-items: center;
                                gap: 8px;
                            }

                            .leaderboard-item {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                padding: 10px;
                                border-bottom: 1px solid var(--border);
                            }

                            .leaderboard-item:last-child {
                                border-bottom: none;
                            }

                            .leaderboard-item .rank {
                                font-weight: bold;
                                font-size: 18px;
                                min-width: 40px;
                            }

                            .leaderboard-item .user {
                                display: flex;
                                align-items: center;
                                gap: 10px;
                                flex: 1;
                            }

                            .user-avatar {
                                width: 30px;
                                height: 30px;
                                border-radius: 50%;
                                object-fit: cover;
                            }

                            .leaderboard-item .clicks {
                                color: #faa81a;
                                font-weight: bold;
                            }

                            /* زر التحصيل للمشرفين */
                            .admin-donation-controls {
                                margin-top: 15px;
                                padding-top: 15px;
                                border-top: 1px solid var(--border);
                            }

                            /* أنماط متجاوبة */
                            @media (max-width: 768px) {
                                .donation-amounts {
                                    grid-template-columns: 1fr;
                                }

                                .click-stats {
                                    display: none;
                                }

                                .gift-space {
                                    padding: 6px 10px;
                                }

                                .gift-space a {
                                    font-size: 12px;
                                }
                            }
                            .totaluser {
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                background: rgba(59, 165, 93, 0.1);
                                padding: 8px 16px;
                                border-radius: 30px;
                                margin-top: 9px;
                            }

                            .circleg-green {
                                display: inline-block;
                                width: 12px;
                                height: 12px;
                                background: #3ba55d;
                                border-radius: 50%;
                                position: relative;
                                box-shadow: 0 0 0 0 rgba(59, 165, 93, 0.7);
                                animation: pulse-green 1.5s infinite;
                            }

                            .circleg-green::after {
                                content: '';
                                position: absolute;
                                top: -4px;
                                left: -4px;
                                right: -4px;
                                bottom: -4px;
                                background: rgba(59, 165, 93, 0.3);
                                border-radius: 50%;
                                animation: pulse-ring 1.5s infinite;
                                z-index: -1;
                            }

                            @keyframes pulse-green {
                                0% {
                                    box-shadow: 0 0 0 0 rgba(59, 165, 93, 0.7);
                                }
                                70% {
                                    box-shadow: 0 0 0 10px rgba(59, 165, 93, 0);
                                }
                                100% {
                                    box-shadow: 0 0 0 0 rgba(59, 165, 93, 0);
                                }
                            }

                            @keyframes pulse-ring {
                                0% {
                                    transform: scale(0.8);
                                    opacity: 0.8;
                                }
                                70% {
                                    transform: scale(1.5);
                                    opacity: 0;
                                }
                                100% {
                                    transform: scale(0.8);
                                    opacity: 0;
                                }
                            }

                            #onlineCountNum {
                                font-weight: bold;
                                font-size: 18px;
                                color: #3ba55d;
                                text-shadow: 0 0 10px rgba(59, 165, 93, 0.5);
                            }
.timeframe-menu-trigger{
   margin-bottom: -151px !important;
    z-index: 8888888 !important;
   background: #f9f9f921 !important;
   background: unset !important;
   position: relative;
}      .galaxy {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background:
              radial-gradient(circle at 20% 40%, rgba(93, 63, 211, 0.4) 0%, transparent 30%),
              radial-gradient(circle at 80% 70%, rgba(147, 51, 234, 0.4) 0%, transparent 35%),
              radial-gradient(circle at 40% 80%, rgba(37, 99, 235, 0.4) 0%, transparent 30%),
              radial-gradient(circle at 70% 20%, rgba(236, 72, 153, 0.3) 0%, transparent 35%);
          filter: blur(60px);
          animation: galaxyMove 30s ease-in-out infinite;
      }

      @keyframes galaxyMove {
          0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
          50% { transform: scale(1.2) rotate(2deg); opacity: 1; }
      }

      /* النجوم */
      .stars {
          position: absolute;
          top: 0px;
          left: 0;
          width: 100%;
          height: 100%;
          background: transparent;
      }

      .star {
          position: absolute;
          background: #a9a9a9;
          border-radius: 50%;
          animation: twinkle 4s infinite;
      }

      @keyframes twinkle {
          0%, 100% { opacity: 0.2; transform: scale(1); }
          50% { opacity: 1; transform: scale(1.2); }
      }

      /* كوكب عائم */
      .planet {
          position: absolute;
          width: 300px;
          height: 300px;
          border-radius: 50%;
          background: radial-gradient(circle at 30% 30%, rgba(147, 51, 234, 0.3), rgba(37, 99, 235, 0.3));
          filter: blur(50px);
          animation: floatPlanet 25s ease-in-out infinite;
      }

      .planet-1 {
          top: -100px;
          left: -100px;
          background: linear-gradient(to left, #0e0c2e, #02010d);
          opacity: 0.2;
      }

      .planet-2 {
          bottom: -150px;
          right: -100px;
          width: 400px;
          height: 400px;
          background: linear-gradient(to left, #0e0c2e, #02010d);
          opacity: 0.15;
          animation-delay: -10s;
      }

      @keyframes floatPlanet {
          0%, 100% { transform: translate(0, 0) scale(1); }
          50% { transform: translate(30px, -30px) scale(1.1); }
      }

      /* المحتوى الرئيسي */
      .content {
          position: relative;
          z-index: 100;
          max-width: 1300px;
          margin: 0 auto;
          width: 100%;
      }

      /* الهيدر المجري */
      .hero {
          text-align: center;
          margin-bottom: 5rem;
          position: relative;
      }

      .galaxy-title {
          font-size: 5rem;
          font-weight: 900;
          color: white;
          text-shadow:
              0 0 10px #7c3aed,
              0 0 20px #4f46e5,
              0 0 40px #2563eb,
              0 0 80px #7c3aed;
          margin-bottom: 1rem;
          letter-spacing: 8px;
          animation: glowPulse 3s ease-in-out infinite;
      }

      @keyframes glowPulse {
          0%, 100% { text-shadow: 0 0 10px #7c3aed, 0 0 20px #4f46e5, 0 0 40px #2563eb, 0 0 80px #7c3aed; }
          50% { text-shadow: 0 0 15px #7c3aed, 0 0 30px #4f46e5, 0 0 60px #2563eb, 0 0 120px #7c3aed; }
      }

      .subtitle {
          color: rgba(255,255,255,0.8);
          font-size: 1.2rem;
          letter-spacing: 6px;
          text-transform: uppercase;
          font-weight: 300;
          margin-top: 1rem;
          text-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
      }

      /* بطاقات المجرة */
      .cards {
          display: flex;
          justify-content: center;
          align-items: stretch;
          gap: 3rem;
          flex-wrap: wrap;
      }

      .card {
          flex: 1 1 450px;
          background: rgba(15, 23, 42, 0.6);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 40px;
          padding: 3rem;
          position: relative;
          overflow: hidden;
          transition: all 0.4s ease;
          box-shadow: 0 20px 40px -15px rgba(0,0,0,0.5);
      }

      /* توهج مجري للكارد */
      .card::after {
          content: '';
          position: absolute;
          top: -2px;
          left: -2px;
          right: -2px;
          bottom: -2px;
          border-radius: 42px;
          z-index: -1;
          opacity: 0;
          transition: opacity 0.4s ease;
      }

      .card:hover {
          transform: translateY(-10px);
          border-color: transparent;
      }

      .card:hover::after {
          opacity: 0.5;
      }

      /* خلفية سديمية للكارد */
      .card-nebula {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background:
              radial-gradient(circle at 20% 30%, rgba(124,58,237,0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(37,99,235,0.15) 0%, transparent 50%),
              radial-gradient(circle at 40% 80%, rgba(219,39,119,0.1) 0%, transparent 50%);
          opacity: 0;
          transition: opacity 0.4s ease;
      }

      .card:hover .card-nebula {
          opacity: 1;
      }

      /* أيقونة الكارد */
      .icon-wrapper {
          width: 120px;
          height: 120px;
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 2rem;
          position: relative;
          overflow: hidden;
          transition: all 0.4s ease;
      }

      .icon-wrapper::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(circle at 50% 50%, rgba(124,58,237,0.3), transparent 70%);
          opacity: 0;
          transition: opacity 0.4s ease;
      }

      .card:hover .icon-wrapper::before {
          opacity: 1;
      }

      .icon-wrapper i {
          font-size: 3.5rem;
          color: white;
          transition: all 0.4s ease;
          filter: drop-shadow(0 0 10px rgba(124,58,237,0.5));
      }

      .card:hover .icon-wrapper i {
          transform: scale(1.1);
          filter: drop-shadow(0 0 20px rgba(124,58,237,0.8));
      }

      /* شارات فضائية */
      .badge-container {
          display: flex;
          gap: 1rem;
          margin-bottom: 1.5rem;
          flex-wrap: wrap;
      }

      .badge {
          padding: 0.5rem 1.5rem;
          border-radius: 100px;
          font-size: 0.8rem;
          font-weight: 700;
          letter-spacing: 1px;
          text-transform: uppercase;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.1);
          color: rgba(255,255,255,0.9);
          backdrop-filter: blur(5px);
      }

      .badge.active {
          background: rgba(5,150,105,0.15);
          border-color: rgba(5,150,105,0.4);
          color: #10b981;
          box-shadow: 0 0 20px rgba(5,150,105,0.2);
      }

      .badge.vip {
          background: rgba(124,58,237,0.15);
          border-color: rgba(124,58,237,0.4);
          color: #c084fc;
          box-shadow: 0 0 20px rgba(124,58,237,0.2);
      }

      /* عنوان الكارد */
      .card h2 {
          font-size: 3rem;
          font-weight: 800;
          color: white;
          margin-bottom: 1rem;
          letter-spacing: -2px;
          line-height: 1.1;
          text-shadow: 0 0 10px rgba(255,255,255,0.3);
      }

      .card p {
          color: rgba(255,255,255,0.7);
          font-size: 1.1rem;
          line-height: 1.7;
          margin-bottom: 2.5rem;
      }

      /* شبكة المميزات */
      .features {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1.5rem;
          margin-bottom: 3rem;
      }

      .feature {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 0.8rem;
      }

      .feature i {
          font-size: 1.8rem;
          color: white;
          background: rgba(255,255,255,0.03);
          padding: 1rem;
          border-radius: 20px;
          border: 1px solid rgba(255,255,255,0.1);
          transition: all 0.4s ease;
          filter: drop-shadow(0 0 10px rgba(124,58,237,0.3));
      }

      .card:hover .feature i {
          background: rgba(124,58,237,0.15);
          border-color: rgba(124,58,237,0.3);
          box-shadow: 0 0 30px rgba(124,58,237,0.3);
      }

      .private:hover .feature i {
          background: rgba(124,58,237,0.2);
          border-color: rgba(124,58,237,0.4);
      }

      .feature span {
          color: rgba(255,255,255,0.9);
          font-size: 0.95rem;
          font-weight: 500;
      }

      /* زر مجري */
      .btn-galaxy {
          width: 100%;
          padding: 1.2rem;
          border: none;
          border-radius: 20px;
          background: linear-gradient(135deg, #2563eb, #4f46e5);
          color: white;
          font-size: 1.1rem;
          font-weight: 700;
          letter-spacing: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 1rem;
          cursor: pointer;
          transition: all 0.3s ease;
          text-transform: uppercase;
          border: 1px solid rgba(255,255,255,0.2);
          position: relative;
          overflow: hidden;
      }

      .private .btn-galaxy {
          background: linear-gradient(135deg, #7c3aed, #9333ea);
      }

      .btn-galaxy::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;
      }

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

      .btn-galaxy:hover {
          transform: scale(1.02);
          box-shadow: 0 0 30px rgba(124,58,237,0.5);
      }

      .btn-galaxy i {
          font-size: 1.2rem;
          transition: transform 0.3s ease;
      }

      .btn-galaxy:hover i {
          transform: translateX(-5px);
      }

      /* زر قريباً */
      .coming-soon {
          position: relative;
      }

      .soon-galaxy {
          position: absolute;
          top: -15px;
          right: 20px;
          background: linear-gradient(135deg, #f59e0b, #d97706);
          color: white;
          padding: 0.5rem 1.5rem;
          border-radius: 50px;
          font-size: 0.8rem;
          font-weight: 800;
          letter-spacing: 2px;
          display: flex;
          align-items: center;
          gap: 8px;
          box-shadow: 0 0 30px rgba(245,158,11,0.5);
          text-transform: uppercase;
          border: 1px solid rgba(255,255,255,0.3);
      }

      .soon-galaxy i {
          animation: pulse 2s infinite;
      }

      /* تجاوب */
      @media screen and (max-width: 1200px) {
          .galaxy-title { font-size: 4rem; }
          .card { padding: 2.5rem; }
          .card h2 { font-size: 2.5rem; }
      }

      @media screen and (max-width: 992px) {
          .chat-dashboard { padding: 3rem 1.5rem; }
          .galaxy-title { font-size: 3.5rem; letter-spacing: 5px; }
          .subtitle { font-size: 1rem; letter-spacing: 4px; }
          .card { flex: 1 1 400px; }
      }

      @media screen and (max-width: 768px) {
          .chat-dashboard { /*! padding: 2rem 1rem; */ }
          .galaxy-title { font-size: 2.5rem; letter-spacing: 3px; }
          .subtitle { font-size: 0.8rem; letter-spacing: 3px; }
          .card { padding: 2rem; }
          .icon-wrapper { width: 100px; height: 100px; }
          .icon-wrapper i { font-size: 2.8rem; }
          .card h2 { font-size: 2rem; }
          .features { gap: 1rem; }
          .feature i { font-size: 1.5rem; padding: 0.8rem; }
      }

      @media screen and (max-width: 480px) {
          .galaxy-title { font-size: 1.8rem; letter-spacing: 2px; }
          .subtitle { font-size: 0.7rem; letter-spacing: 2px; }
          .card { padding: 1.5rem; text-align: right;}
          .icon-wrapper { width: 80px; height: 80px; }
          .icon-wrapper i { font-size: 2rem; }
          .card h2 { font-size: 1.6rem; }
          .badge { padding: 0.3rem 1rem; font-size: 0.7rem; }
          .features { grid-template-columns: 1fr; }
          .feature { flex-direction: row; justify-content: flex-start; }
          .soon-galaxy { position: relative; top: 0; right: 0; margin-bottom: 1rem; display: inline-flex; }
      }

      @media screen and (max-width: 360px) {
          .galaxy-title { font-size: 1.5rem; }
          .card h2 { font-size: 1.4rem; text-align: right;}
          .card p { font-size: 0.9rem; }
      }
      .timeframe-dots-wrapper {
          position: relative;
          display: flex;
          align-items: center;
      }

      .timeframe-dots-trigger {
          display: flex;
          gap: 4px;
          padding: 10px 12px;
          cursor: pointer;
          border-radius: 8px;
          background: rgba(30, 41, 59, 0.5);
          backdrop-filter: blur(4px);
          border: 1px solid rgba(148, 163, 184, 0.2);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
          overflow: hidden;
          margin-bottom: -67px;
          z-index: 99999;
      }



      .timeframe-dots-trigger:hover::before {
          width: 150px;
          height: 150px;
      }

      .timeframe-dots-trigger:hover {
          transform: scale(1.05);
      }

      .timeframe-dots-trigger.active {
      }

      .timeframe-dots-trigger span {
          width: 6px;
          height: 6px;
          background: #cbd5e1;
          border-radius: 50%;
          display: inline-block;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }



      .timeframe-dots-trigger.active span {
          animation: pulseDot 1.5s ease infinite;
      }

      .timeframe-dots-trigger span:nth-child(2) { animation-delay: 0.2s; }
      .timeframe-dots-trigger span:nth-child(3) { animation-delay: 0.4s; }

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

      /* Timeframe selector */
      .timeframe-selector {
          display: none;
          gap: 5px;
          margin-right: 15px;
          position: absolute;
          right: -250px;
          top: 57%;
          transform: translateY(-50%) scale(0.95);
          opacity: 0;
          background: rgba(15, 23, 42, 0.95);
          backdrop-filter: blur(8px);
          padding: 6px 10px;
          border-radius: 10px;
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          z-index: 100;
          white-space: nowrap;
      }

      .timeframe-selector.show {
          display: flex;
          opacity: 1;
          transform: translateY(-50%) scale(1);
          animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .timeframe-selector.hide {
          opacity: 0;
          transform: translateY(-50%) scale(0.95);
          pointer-events: none;
      }

      @keyframes slideInRight {
          from {
              opacity: 0;
              transform: translateY(-50%) translateX(-20px) scale(0.95);
          }
          to {
              opacity: 1;
              transform: translateY(-50%) translateX(0) scale(1);
          }
      }

      .timeframe-btn {
          background: rgba(30, 41, 59, 0.7);
          border: 1px solid rgba(148, 163, 184, 0.3);
          color: #cbd5e1;
          padding: 6px 14px;
          border-radius: 6px;
          cursor: pointer;
          font-size: 13px;
          font-weight: 500;
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
          overflow: hidden;
      }

      .timeframe-btn::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          border-radius: 50%;
          background: rgba(16, 185, 129, 0.2);
          transform: translate(-50%, -50%);
          transition: width 0.4s ease, height 0.4s ease;
      }

      .timeframe-btn:hover::before {
          width: 100px;
          height: 100px;
      }

      .timeframe-btn:hover {
          border-color: #10b981;
          color: #10b981;
          transform: translateY(-2px);
      }

      .timeframe-btn.active {
          background: rgba(255,255,255,.3);
          color: white;
          font-weight: bold;
      }

      .timeframe-btn.active:hover {
          background: #0e9f6e;
      }

      .chart-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 15px;
          position: relative;
      }

      /* تحديث سلس للرصيد */
      #walletLink {
          transition: all 0.3s ease;
      }

      #balanceAmount, #rioAmount {
          transition: color 0.3s ease;
      }
section *
{
  z-index: 99;
  position: relative;
}
.swal2-container
{
  z-index: 99999999999;
}
.eezmkt::before{
    display: none !important;
}
.eezmkt
{
    background: unset !important;
    font-size: 13px;
    text-decoration: underline;
}
/* Width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #030615;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #030615;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #030615;
}
/* ستايل النجمة الإجبارية */
.required-star::after {
    content: " *";
    color: red;
    font-weight: bold;
}

/* ستايل الحقول */
.form-control {
    transition: all 0.3s ease;
    border: 2px solid #e0e0e0;
    padding: 0 !important;
    height: 49px !important;
    padding-right: 13px !important;
}

/* Border أزرق عند التركيز */
.form-control:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    outline: none;
}

/* Border أحمر للخطأ */
.input-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.error-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    text-align: right;
    display: none;
}

.error-message.show {
    display: block;
}

/* ستايل قوة كلمة المرور - منفصل */
.password-strength-container {
    margin-top: 10px;
    display: none;
}

.password-strength-container.show {
    display: block;
}

.strength-bars {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
}

.strength-bar {
    height: 5px;
    flex: 1;
    background-color: #e0e0e0;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.strength-bar.weak-active {
    background-color: #156B20;
}

.strength-bar.medium-active {
    background-color: #156B20;
}

.strength-bar.strong-active {
    background-color: #156B20;
}

.strength-text {
    font-size: 12px;
    text-align: right;
    margin-bottom: 10px;
}

.strength-weak-text { color: #dc3545; }
.strength-medium-text { color: #ffc107; }
.strength-strong-text { color: #28a745; }

/* ستايل شروط كلمة المرور */
.password-conditions {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    text-align: right;
}

.password-conditions li {
    margin-bottom: 5px;
    color: #6c757d;
    transition: all 0.3s ease;
}

.password-conditions li.valid {
    color: #28a745;
}

.password-conditions li i {
    margin-left: 5px;
}

/* ستايل زر إظهار/إخفاء كلمة المرور */
.password-toggle {
    cursor: pointer;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #6c757d;
}

.password-toggle:hover {
    color: #495057;
}

.input-group {
    position: relative;
}
.sdsdssdsdd
{
  padding: 0 !important
}
.sdsdssdsdd option{
  color: white !important
}
.account-page label{
  display: block;
  text-align: right;
  font-size: 13px
}
.zeoikr
{
    border: unset;
    color: white;
    font-size: 14px;
    /*! border-bottom: 1px solid white; */
    border-radius: 0;
    padding-bottom: 50px
}
.error-message
{
   color: #851919 !important;
}

/* WebKit browsers */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #4a4a6a;
}

::-webkit-scrollbar-thumb {
  background: #4a4a6a;
  border: 1px solid #5a5a7a;  /* Subtle border to distinguish */
  border-radius: 6px;
}

/* Firefox */
html {
  scrollbar-color: #000 #000;
  scrollbar-width: thin;
}

.form-check-input {
    accent-color: #192e85 !important;
}
div:where(.swal2-container).swal2-center > .swal2-popup
{
    width: 100% !important;
    text-align: right !important;
    background: linear-gradient(to right, #0e0c2e, #02010d) !important;
     position: absolute; 
    bottom: 0;
    border-radius: 0 !important;
    position: fixed;
    height: 80%;
}
div:where(.swal2-container).swal2-backdrop-show, div:where(.swal2-container).swal2-noanimation
{
    padding: 0;
    bottom: 0 !important;
}
div:where(.swal2-container).swal2-center > .swal2-popup  input{
    border: unset !important;
    background: unset !important;
}