/* =========================
   GLOBAL
========================= */

*{

  margin:0;
  padding:0;
  box-sizing:border-box;

}

body{

  font-family:'Inter',sans-serif;

  background:#07070a;

  color:white;

  overflow-x:hidden;

}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{

  width:8px;

}

::-webkit-scrollbar-track{

  background:#111827;

}

::-webkit-scrollbar-thumb{

  background:#7c3aed;
  border-radius:10px;

}

/* =========================
   INPUTS
========================= */

input,
textarea,
select{

  width:100%;

  padding:18px;

  margin-bottom:18px;

  border:none;

  border-radius:16px;

  background:#111827;

  color:white;

  font-size:15px;

  outline:none;

}

textarea{

  min-height:140px;

  resize:none;

}

/* =========================
   BUTTONS
========================= */

button{

  border:none;

  cursor:pointer;

  transition:0.3s;

  font-weight:600;

}

button:hover{

  opacity:0.9;
  transform:translateY(-2px);

}

.primary-btn{

  background:
  linear-gradient(
    135deg,
    #7c3aed,
    #9333ea
  );

  color:white;

  padding:18px;

  border-radius:16px;

  font-size:16px;

}

/* =========================
   LOGIN PAGE
========================= */

.hero-card{

  background:#0f172a;

  padding:50px;

  border-radius:30px;

  border:1px solid rgba(
    255,
    255,
    255,
    0.05
  );

  box-shadow:
  0 0 40px rgba(
    124,
    58,
    237,
    0.15
  );

}

/* =========================
   LAYOUT
========================= */

.dashboard-layout{

  display:flex;

  min-height:100vh;

}

/* =========================
   SIDEBAR
========================= */

.sidebar{

  width:280px;

  background:#0f172a;

  padding:30px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  border-right:1px solid rgba(
    255,
    255,
    255,
    0.05
  );

}

/* =========================
   BRAND
========================= */

.brand{

  display:flex;

  align-items:center;

  gap:18px;

  margin-bottom:50px;

}

.brand-icon{

  width:65px;

  height:65px;

  border-radius:20px;

  background:
  linear-gradient(
    135deg,
    #7c3aed,
    #9333ea
  );

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:26px;

  font-weight:800;

}

.brand h2{

  font-size:24px;

}

.brand span{

  color:#9ca3af;

  font-size:14px;

}

/* =========================
   SIDEBAR MENU
========================= */

.sidebar-menu{

  list-style:none;

}

.sidebar-menu li{

  padding:18px;

  margin-bottom:12px;

  border-radius:16px;

  cursor:pointer;

  transition:0.3s;

  color:#d1d5db;

}

.sidebar-menu li:hover{

  background:#111827;

  color:white;

}

/* =========================
   LOGOUT
========================= */

.logout-btn{

  width:100%;

  background:#ef4444;

  color:white;

  padding:16px;

  border-radius:16px;

  font-size:15px;

}

/* =========================
   MAIN PANEL
========================= */

.main-panel{

  flex:1;

  padding:35px;

}

/* =========================
   TOPBAR
========================= */

.topbar{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:35px;

}

.topbar h1{

  font-size:34px;

}

.topbar p{

  color:#9ca3af;

  margin-top:8px;

}

/* =========================
   AVATAR
========================= */

.admin-avatar{

  width:55px;

  height:55px;

  border-radius:50%;

  background:
  linear-gradient(
    135deg,
    #7c3aed,
    #9333ea
  );

  display:flex;

  justify-content:center;

  align-items:center;

  font-weight:700;

}

/* =========================
   NOTIFICATION BELL
========================= */

.notification-bell{

  position:relative;

  margin-right:20px;

  font-size:22px;

}

.notification-bell span{

  position:absolute;

  top:-8px;

  right:-12px;

  width:22px;

  height:22px;

  border-radius:50%;

  background:#ef4444;

  display:flex;

  justify-content:center;

  align-items:center;

  font-size:12px;

}

/* =========================
   ANALYTICS
========================= */

.analytics-grid{

  display:grid;

  grid-template-columns:
  repeat(
    auto-fit,
    minmax(240px,1fr)
  );

  gap:25px;

}

.analytics-card{

  background:#0f172a;

  padding:30px;

  border-radius:24px;

  border:1px solid rgba(
    255,
    255,
    255,
    0.05
  );

}

.analytics-card span{

  color:#9ca3af;

}

.analytics-card h1{

  margin-top:15px;

  font-size:34px;

}

/* =========================
   CONTENT CARD
========================= */

.content-card{

  background:#0f172a;

  padding:30px;

  border-radius:24px;

  border:1px solid rgba(
    255,
    255,
    255,
    0.05
  );

}

/* =========================
   CARD HEADER
========================= */

.card-header{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:25px;

}

.card-header h2{

  font-size:24px;

}

/* =========================
   TASKS
========================= */

.task-list{

  display:grid;

  grid-template-columns:
  repeat(
    auto-fit,
    minmax(300px,1fr)
  );

  gap:25px;

}

.task-card{

  background:#0f172a;

  padding:28px;

  border-radius:24px;

  border:1px solid rgba(
    255,
    255,
    255,
    0.05
  );

}

.task-card h3{

  font-size:22px;

}

.task-card p{

  margin-top:15px;

  color:#9ca3af;

  line-height:1.8;

}

.task-footer{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-top:25px;

}

.task-footer button{

  background:
  linear-gradient(
    135deg,
    #7c3aed,
    #9333ea
  );

  color:white;

  padding:12px 18px;

  border-radius:12px;

}

/* =========================
   SUBMISSIONS
========================= */

.submission-card,
.withdraw-card,
.history-card,
.notification-item{

  background:#0f172a;

  padding:28px;

  border-radius:24px;

  border:1px solid rgba(
    255,
    255,
    255,
    0.05
  );

  margin-bottom:25px;

}

.submission-actions,
.withdraw-actions{

  display:flex;

  gap:15px;

  margin-top:25px;

}

.submission-actions button,
.withdraw-actions button{

  background:
  linear-gradient(
    135deg,
    #7c3aed,
    #9333ea
  );

  color:white;

  padding:12px 18px;

  border-radius:12px;

}

/* =========================
   HISTORY
========================= */

.history-card{

  display:flex;

  justify-content:space-between;

  align-items:center;

}

.history-card span{

  color:#22c55e;

  font-weight:700;

  font-size:20px;

}

/* =========================
   MODAL
========================= */

.modal{

  position:fixed;

  top:0;

  left:0;

  width:100%;

  height:100%;

  background:rgba(
    0,
    0,
    0,
    0.8
  );

  display:none;

  justify-content:center;

  align-items:center;

  padding:20px;

  z-index:999;

}

.modal-content{

  width:100%;

  max-width:600px;

  background:#0f172a;

  padding:35px;

  border-radius:30px;

}

.modal-actions{

  display:flex;

  gap:15px;

  margin-top:25px;

}

.modal-actions button{

  flex:1;

  padding:16px;

  border-radius:14px;

  background:
  linear-gradient(
    135deg,
    #7c3aed,
    #9333ea
  );

  color:white;

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1000px){

  .dashboard-layout{

    flex-direction:column;

  }

  .sidebar{

    width:100%;

  }

}

@media(max-width:700px){

  .topbar{

    flex-direction:column;
    align-items:flex-start;
    gap:20px;

  }

  .main-panel{

    padding:20px;

  }

  .hero-card{

    padding:35px;

  }

}