@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;700&display=swap');

.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  border-right: 1px solid var(--sidebar-border);
  transition: transform var(--transition);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--sidebar-border);
}

.brand-icon {
  font-size: 24px;
  color: var(--accent);
}

.brand-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  letter-spacing: -0.5px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition);
}

.sidebar-nav li a i {
  width: 18px;
  text-align: center;
  font-size: 15px;
}

.sidebar-nav li a:hover {
  background: var(--sidebar-hover);
  color: #fff;
  transform: translateX(4px);
}

.sidebar-nav li a:active {
  transform: translateX(2px) scale(0.98);
}


.live-alert{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  border-radius:16px;
  background:#052e16;
  color:#86efac;
}

.live-ping{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#22c55e;
  animation:ping 1.5s infinite;
}

@keyframes ping{
  50%{transform:scale(1.8);opacity:.5;}
}
.update-alert{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px;
  border-radius:18px;
  background:#111827;
}


.threat-alert{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
  border-radius:18px;
  background:#450a0a;
  color:#fecaca;
}
.sidebar-nav li.active a {
  background: var(--sidebar-active);
  color: var(--accent);
  border-left: 3px solid var(--accent);
}

.sidebar-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  gap: 16px;
}

.sidebar-footer a {
  color: var(--sidebar-text);
  font-size: 16px;
  transition: color var(--transition);
}

.sidebar-footer a:hover {
  color: var(--accent);
}


.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1040;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.sidebar-backdrop.visible {
  display: block;
}
:root{

  --bg:#060816;
  --bg2:#0b1023;

  --card:#101729;
  --card2:#151d33;

  --border:rgba(255,255,255,.08);

  --text:#ffffff;
  --text2:#aab4d0;

  --accent:#ff7a3d;
  --accent2:#7b61ff;

  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --info:#3b82f6;

  --radius:28px;

  --transition:.3s ease;
}



*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{

  background:
    linear-gradient(
      180deg,
      #050816,
      #091021
    );

  color:var(--text);

  font-family:'DM Sans',sans-serif;

  overflow-x:hidden;
}



.sidebar{

  position:fixed;

  top:0;
  left:0;

  width:250px;
  height:100vh;

  background:
    linear-gradient(
      180deg,
      #040611,
      #0b1024
    );

  border-right:
    1px solid var(--border);

  padding:22px 18px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  z-index:1000;
}

.sidebar-brand{

  display:flex;
  align-items:center;

  gap:14px;

  padding:12px 10px 28px;

  border-bottom:
    1px solid var(--border);
}

.brand-icon{

  width:48px;
  height:48px;

  border-radius:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  font-size:22px;

  color:white;
}

.brand-text{

  font-size:28px;

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

  font-weight:800;
}

.sidebar-nav ul{
  list-style:none;
}

.sidebar-nav li{
  margin-bottom:8px;
}

.sidebar-nav a{

  display:flex;
  align-items:center;

  gap:14px;

  text-decoration:none;

  color:#9aa4c4;

  padding:15px 18px;

  border-radius:18px;

  transition:var(--transition);
}

.sidebar-nav a:hover,
.sidebar-nav .active a{

  background:
    rgba(255,255,255,.06);

  color:white;

  transform:translateX(4px);
}

.sidebar-footer{

  display:flex;

  gap:12px;

  padding-top:20px;

  border-top:
    1px solid var(--border);
}

.sidebar-footer a{

  width:46px;
  height:46px;

  border-radius:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    rgba(255,255,255,.05);

  color:white;

  text-decoration:none;

  transition:var(--transition);
}

.sidebar-footer a:hover{

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  transform:translateY(-3px);
}



.navbar{

  position:fixed;

  top:0;
  left:250px;
  right:0;

  height:82px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 30px;

  background:
    rgba(5,8,22,.8);

  backdrop-filter:blur(16px);

  border-bottom:
    1px solid var(--border);

  z-index:999;
}

.navbar.scrolled{

  background:
    rgba(5,8,22,.95);
}

.logo{
  display:none;
}

.search-bar{

  width:480px;

  display:flex;
  align-items:center;

  gap:12px;

  padding:14px 18px;

  border-radius:999px;

  background:
    rgba(255,255,255,.05);

  border:
    1px solid var(--border);
}

.search-bar input{

  width:100%;

  border:none;
  outline:none;

  background:none;

  color:white;

  font-size:15px;
}

.search-bar input::placeholder{
  color:#7f8ca8;
}

.search-kbd{

  padding:5px 10px;

  border-radius:10px;

  background:
    rgba(255,255,255,.06);

  color:#8f98b6;

  font-size:12px;
}

.nav-right{

  display:flex;

  gap:14px;
}

.nav-btn{

  border:none;

  cursor:pointer;

  padding:14px 20px;

  border-radius:18px;

  font-weight:700;

  transition:var(--transition);
}

.outline-nav-btn{

  background:
    rgba(255,255,255,.05);

  color:white;
}

.primary-nav-btn{

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  color:white;
}

.theme-toggle{

  width:52px;
  height:52px;

  border:none;

  border-radius:18px;

  background:
    rgba(255,255,255,.05);

  color:white;

  cursor:pointer;
}
body.light {
      background: #ffffff;
      color: #000000;
      transition: background 0.3s, color 0.3s;
    }

    body.dark {
      background: #0f172a;
      color: #ffffff;
      transition: background 0.3s, color 0.3s;
    }

    .theme-toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      background: #e2e8f0;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      transition: background 0.3s;
    }

    .theme-toggle:hover {
      background: #cbd5e1;
    }

    .theme-toggle i {
      font-size: 20px;
      color: #333;
      transition: color 0.3s;
    }

    body.dark .theme-toggle {
      background: #1e293b;
    }

    body.dark .theme-toggle i {
      color: #facc15; /* yellow for moon */
    }


.main-home{

  margin-left:250px;

  padding:120px 40px 60px;
}



.page-hero{

  display:grid;

  grid-template-columns:
    1.2fr .8fr;

  gap:40px;

  align-items:center;

  margin-bottom:50px;
}

.breadcrumb{

  display:flex;
  align-items:center;

  gap:10px;

  margin-bottom:20px;

  color:#8b96b7;
}

.breadcrumb a{

  color:#8b96b7;

  text-decoration:none;
}

.page-title{

  font-size:
    clamp(52px,7vw,86px);

  line-height:1;

  margin-bottom:20px;

  font-family:'Syne',sans-serif;
}

.page-desc{

  color:var(--text2);

  line-height:1.8;

  font-size:17px;

  max-width:760px;
}

.page-meta{

  display:flex;

  gap:14px;

  flex-wrap:wrap;

  margin-top:28px;
}

.meta-badge{

  display:flex;
  align-items:center;

  gap:8px;

  padding:12px 18px;

  border-radius:999px;

  background:
    rgba(255,255,255,.05);

  border:
    1px solid var(--border);

  color:#d3daf0;
}



.alert-hero-preview{

  background:
    linear-gradient(
      145deg,
      #121b30,
      #18233d
    );

  border:
    1px solid var(--border);

  border-radius:32px;

  padding:28px;

  display:flex;
  flex-direction:column;

  gap:16px;

  box-shadow:
    0 20px 60px rgba(0,0,0,.35);
}

.ahp-alert{

  display:flex;
  align-items:center;

  gap:12px;

  padding:16px 18px;

  border-radius:18px;

  font-weight:600;
}

.ahp-success{
  background:rgba(34,197,94,.15);
  color:#6ee7a1;
}

.ahp-warning{
  background:rgba(245,158,11,.15);
  color:#ffd27d;
}

.ahp-error{
  background:rgba(239,68,68,.15);
  color:#ff8e8e;
}



.filter-bar{

  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:20px;

  flex-wrap:wrap;

  margin-bottom:40px;
}

.filter-btn{

  border:none;

  padding:12px 18px;

  border-radius:999px;

  background:
    rgba(255,255,255,.05);

  color:#c7d1ec;

  cursor:pointer;

  transition:var(--transition);
}

.filter-btn:hover,
.filter-btn.active{

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  color:white;
}

.filter-search{

  width:260px;

  display:flex;
  align-items:center;

  gap:10px;

  padding:12px 16px;

  border-radius:18px;

  background:
    rgba(255,255,255,.05);

  border:
    1px solid var(--border);
}

.filter-search input{

  width:100%;

  border:none;
  outline:none;

  background:none;

  color:white;
}



.alerts-grid{

  display:grid;

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

  gap:28px;
}



.component-card{

  background:
    linear-gradient(
      145deg,
      #101729,
      #141f36
    );

  border:
    1px solid var(--border);

  border-radius:32px;

  padding:28px;

  transition:var(--transition);
}

.component-card:hover{

  transform:translateY(-8px);

  border-color:
    rgba(255,255,255,.15);
}

.card-top{

  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:22px;
}

.card-label{

  font-size:24px;

  font-weight:700;

  font-family:'Syne',sans-serif;
}

.card-tag{

  padding:8px 12px;

  border-radius:999px;

  font-size:12px;

  font-weight:700;
}

.tag-essential{
  background:rgba(59,130,246,.15);
  color:#7ab6ff;
}

.tag-popular{
  background:rgba(245,158,11,.15);
  color:#ffd27d;
}

.tag-trending{
  background:rgba(139,92,246,.15);
  color:#b79cff;
}

.card-preview{

  background:
    rgba(255,255,255,.03);

  border:
    1px solid var(--border);

  border-radius:24px;

  padding:22px;

  margin-bottom:20px;
}

.card-desc{

  color:var(--text2);

  line-height:1.7;

  margin-bottom:22px;
}



.demo-alert-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.al{

  display:flex;
  align-items:flex-start;

  gap:14px;

  padding:16px 18px;

  border-radius:18px;

  border:
    1px solid transparent;
}

.al-icon{
  font-size:18px;
  margin-top:2px;
}

.al-success{
  background:rgba(34,197,94,.12);
  color:#6ee7a1;
}

.al-error{
  background:rgba(239,68,68,.12);
  color:#ff9090;
}

.al-warning{
  background:rgba(245,158,11,.12);
  color:#ffd27d;
}

.al-info{
  background:rgba(59,130,246,.12);
  color:#82beff;
}



.al-outline-success{
  border:1px solid #22c55e;
  color:#6ee7a1;
}

.al-outline-error{
  border:1px solid #ef4444;
  color:#ff8e8e;
}

.al-outline-warning{
  border:1px solid #f59e0b;
  color:#ffd27d;
}

.al-outline-info{
  border:1px solid #3b82f6;
  color:#7eb6ff;
}



.al-solid-success{
  background:#22c55e;
  color:white;
}

.al-solid-error{
  background:#ef4444;
  color:white;
}

.al-solid-warning{
  background:#f59e0b;
  color:white;
}

.al-solid-info{
  background:#3b82f6;
  color:white;
}



.actions{

  display:flex;

  gap:14px;
}

.action-btn{

  flex:1;

  border:none;

  padding:14px;

  border-radius:18px;

  font-weight:700;

  cursor:pointer;

  transition:var(--transition);
}

.view-btn{

  background:
    rgba(255,255,255,.06);

  color:white;
}

.copy-btn{

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  color:white;
}

.action-btn:hover{

  transform:translateY(-2px);
}

.alert-cosmic-distress{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px;
  border-radius:24px;
  overflow:hidden;
  background:
  radial-gradient(circle at top left,#8b5cf6,#0f172a);
  color:#fff;
  box-shadow:0 15px 40px rgba(139,92,246,.3);
}

.alert-cosmic-distress::before{
  content:"";
  position:absolute;
  inset:0;
  background:
  radial-gradient(#fff 1px,transparent 1px);
  background-size:30px 30px;
  opacity:.15;
}

.cd-orbit{
  position:relative;
  width:70px;
  height:70px;
}

.cd-planet{
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.cd-ring{
  position:absolute;
  inset:0;
  border:2px dashed rgba(255,255,255,.5);
  border-radius:50%;
  animation:spinOrbit 6s linear infinite;
}

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

.cd-body strong{
  display:block;
  font-size:1rem;
}

.cd-body p{
  margin-top:5px;
  opacity:.85;
}
.alert-dragon-fire{
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px;
  border-radius:20px;
  background:
  linear-gradient(135deg,#2c0f0f,#ff6b00);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.alert-dragon-fire::after{
  content:"";
  position:absolute;
  width:200%;
  height:100%;
  left:-50%;
  top:0;
  background:
  linear-gradient(
  90deg,
  transparent,
  rgba(255,255,255,.08),
  transparent);
  animation:fireSweep 3s linear infinite;
}

@keyframes fireSweep{
  to{
    transform:translateX(50%);
  }
}

.df-icon{
  font-size:3rem;
  animation:dragonFloat 2s ease-in-out infinite;
}

@keyframes dragonFloat{
  50%{
    transform:translateY(-8px);
  }
}

.df-body strong{
  display:block;
}

.df-body p{
  margin-top:5px;
  opacity:.9;
}
.alert-ai-core{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  border-radius:22px;
  background:#070b14;
  border:1px solid #00f0ff40;
  color:#e8ffff;
  box-shadow:
  0 0 30px rgba(0,240,255,.15);
}

.ac-brain{
  width:60px;
  height:60px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:1.5rem;
  color:#00f0ff;
  background:#091c22;
  box-shadow:
  0 0 20px rgba(0,240,255,.5);
  animation:pulseCore 2s infinite;
}

@keyframes pulseCore{
  50%{
    box-shadow:
    0 0 35px rgba(0,240,255,.9);
  }
}

.ac-content{
  flex:1;
}

.ac-content strong{
  display:block;
  margin-bottom:4px;
}

.ac-content p{
  opacity:.75;
}

.ac-close{
  border:none;
  background:none;
  color:#00f0ff;
  cursor:pointer;
  font-size:1rem;
}
.executive-alert{
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px;
  background:#fff;
  border-radius:24px;
  border:1px solid #e9edf5;
  box-shadow:
  0 15px 35px rgba(15,23,42,.06);
  transition:.4s;
}

.executive-alert:hover{
  transform:translateY(-4px);
}

.ea-icon{
  width:58px;
  height:58px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
  linear-gradient(135deg,#4f46e5,#7c3aed);
  color:white;
  font-size:1.3rem;
}

.ea-content{
  flex:1;
}

.ea-content strong{
  display:block;
  color:#0f172a;
  margin-bottom:5px;
}

.ea-content p{
  color:#64748b;
  font-size:.95rem;
}

.ea-action{
  border:none;
  padding:12px 18px;
  border-radius:12px;
  background:#eef2ff;
  color:#4f46e5;
  font-weight:600;
  cursor:pointer;
}
.floating-glass-alert{
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px;
  border-radius:26px;

  background:
  rgba(255,255,255,.75);

  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,.6);

  box-shadow:
  0 20px 40px rgba(0,0,0,.08);

  position:relative;
  overflow:hidden;
}

.floating-glass-alert::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  background:#60a5fa30;
  border-radius:50%;
  top:-90px;
  right:-90px;
}

.fga-status{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#10b981;
  box-shadow:
  0 0 0 8px rgba(16,185,129,.15);
}

.fga-content{
  flex:1;
}

.fga-content strong{
  display:block;
  color:#111827;
}

.fga-content p{
  margin-top:5px;
  color:#6b7280;
}

.fga-btn{
  border:none;
  background:#111827;
  color:white;
  padding:11px 18px;
  border-radius:14px;
  cursor:pointer;
}
.premium-ai-alert{
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px;

  border-radius:24px;

  background:
  linear-gradient(
    135deg,
    #ffffff,
    #faf5ff
  );

  border:1px solid #ece8ff;

  position:relative;

  overflow:hidden;
}

.premium-ai-alert::after{
  content:"";
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.8),
    transparent
  );

  transform:translateX(-100%);
  animation:shine 4s linear infinite;
}

@keyframes shine{
  to{
    transform:translateX(100%);
  }
}

.paa-icon{
  width:60px;
  height:60px;
  border-radius:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
  linear-gradient(135deg,#9333ea,#6366f1);

  color:white;
  font-size:1.2rem;
}

.paa-content{
  flex:1;
}

.paa-content strong{
  display:block;
  color:#111827;
}

.paa-content p{
  color:#6b7280;
  margin-top:4px;
}

.paa-close{
  border:none;
  background:none;
  font-size:1rem;
  cursor:pointer;
  color:#94a3b8;
}
.timeline-alert{
  display:flex;
  gap:18px;
  padding:22px;
  border-radius:22px;
  background:#fff;
  border:1px solid #edf2f7;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.ta-line{
  width:4px;
  border-radius:999px;

  background:
  linear-gradient(
  to bottom,
  #3b82f6,
  #8b5cf6
  );
}

.ta-label{
  display:inline-block;
  margin-bottom:8px;

  font-size:.7rem;
  font-weight:700;
  letter-spacing:2px;

  color:#6366f1;
}

.ta-content strong{
  display:block;
  margin-bottom:6px;
}

.ta-content p{
  color:#64748b;
}

.ta-time{
  display:block;
  margin-top:10px;
  font-size:.8rem;
  color:#94a3b8;
}
.alerts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  gap:24px;
  margin-top:30px;
}

.component-card{
  height:100%;
}
.alerts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  gap:28px;
}

.component-card{
  background: var(--card-bg, #ffffff);
  border-radius:24px;
  transition:.3s;
}

.component-card:hover{
  transform:translateY(-6px);
}
.achievement-alert{
  position:relative;
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px;
  border-radius:24px;
  overflow:hidden;

  background:
  linear-gradient(
  135deg,
  #fff8dc,
  #fff,
  #fff7b8
  );

  border:1px solid #ffe28a;

  box-shadow:
  0 15px 35px rgba(255,193,7,.15);
}

.achievement-alert::before{
  content:"";
  position:absolute;
  inset:0;

  background:
  linear-gradient(
  120deg,
  transparent,
  rgba(255,255,255,.8),
  transparent
  );

  transform:translateX(-100%);
  animation:achievementShine 5s linear infinite;
}

@keyframes achievementShine{
  to{
    transform:translateX(100%);
  }
}

.aa-trophy{
  position:relative;

  width:80px;
  height:80px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:2.3rem;

  border-radius:50%;

  background:white;

  flex-shrink:0;
}

.aa-ring{
  position:absolute;
  inset:-8px;
  border:3px solid #ffd54a;
  border-radius:50%;

  animation:ringPulse 2s infinite;
}

@keyframes ringPulse{
  50%{
    transform:scale(1.15);
    opacity:.4;
  }
}

.aa-content{
  flex:1;
}

.aa-content strong{
  display:block;
  color:#111827;
  margin-bottom:8px;
}

.aa-content p{
  color:#64748b;
  margin-bottom:14px;
}

.aa-progress{
  height:8px;
  background:#fff;
  border-radius:999px;
  overflow:hidden;
}

.aa-progress-bar{
  height:100%;
  width:100%;
  border-radius:999px;

  background:
  linear-gradient(
  90deg,
  #f59e0b,
  #facc15
  );

  animation:goldFill 3s ease infinite;
}

@keyframes goldFill{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
}

.aa-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.aa-btn{
  border:none;
  cursor:pointer;
  padding:10px 14px;
  border-radius:12px;
  font-weight:600;
}

.aa-primary{
  background:#fbbf24;
  color:white;
}

.aa-secondary{
  background:#f3f4f6;
}
.motivation-alert{
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px;

  border-radius:24px;

  background:white;

  border:1px solid #e5e7eb;

  box-shadow:
  0 10px 30px rgba(0,0,0,.05);
}

.ma-star{
  font-size:3rem;

  animation:starFloat 2s ease-in-out infinite;
}

@keyframes starFloat{
  50%{
    transform:translateY(-10px);
  }
}

.ma-content{
  flex:1;
}

.ma-content strong{
  display:block;
  margin-bottom:6px;
}

.ma-content p{
  margin-bottom:12px;
  color:#64748b;
}

.ma-meter{
  height:10px;
  border-radius:999px;
  background:#edf2f7;
  overflow:hidden;
}

.ma-fill{
  width:87%;
  height:100%;

  background:
  linear-gradient(
  90deg,
  #6366f1,
  #8b5cf6
  );
}

.ma-text{
  display:block;
  margin-top:8px;
  font-size:.85rem;
  color:#64748b;
}

.ma-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ma-btn{
  padding:10px 14px;
  border:none;
  border-radius:12px;
  cursor:pointer;
}

.ma-btn.primary{
  background:#6366f1;
  color:white;
}
.celebration-alert{
  position:relative;
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px;
  overflow:hidden;

  border-radius:24px;

  background:
  linear-gradient(
  135deg,
  #fff7ed,
  #ffffff,
  #fef3c7
  );

  border:1px solid #fde68a;

  box-shadow:
  0 15px 35px rgba(251,191,36,.15);
}

.confetti-wrap{
  position:relative;
  width:90px;
  height:90px;
  flex-shrink:0;
}

.celebration-icon{
  width:70px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.4rem;
  border-radius:50%;
  background:white;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.confetti{
  position:absolute;
  width:8px;
  height:16px;
  border-radius:3px;
  animation:confettiFall 2s infinite;
}

.c1{
  background:#f59e0b;
  left:10px;
}

.c2{
  background:#ec4899;
  left:25px;
  animation-delay:.2s;
}

.c3{
  background:#3b82f6;
  left:45px;
  animation-delay:.4s;
}

.c4{
  background:#10b981;
  left:65px;
  animation-delay:.6s;
}

.c5{
  background:#8b5cf6;
  left:80px;
  animation-delay:.8s;
}

@keyframes confettiFall{
  0%{
    top:-20px;
    opacity:0;
    transform:rotate(0deg);
  }

  50%{
    opacity:1;
  }

  100%{
    top:100px;
    opacity:0;
    transform:rotate(360deg);
  }
}

.celebration-content{
  flex:1;
}

.celebration-content strong{
  display:block;
  font-size:1.05rem;
  margin-bottom:6px;
  color:#111827;
}

.celebration-content p{
  color:#6b7280;
  margin-bottom:12px;
}

.celebration-progress{
  height:8px;
  background:#fff;
  border-radius:999px;
  overflow:hidden;
}

.celebration-progress-bar{
  height:100%;
  width:100%;

  background:
  linear-gradient(
  90deg,
  #f59e0b,
  #facc15
  );

  animation:celeFill 4s linear infinite;
}

@keyframes celeFill{
  from{
    width:0;
  }

  to{
    width:100%;
  }
}

.celebration-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cele-btn{
  border:none;
  padding:10px 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
}

.cele-btn.primary{
  background:#f59e0b;
  color:white;
}
.celebration-alert,
.deadline-alert{
  transition:.35s ease;
}

.celebration-alert:hover,
.deadline-alert:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 50px rgba(0,0,0,.12);
}
.deadline-alert{
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px;

  border-radius:24px;

  background:white;

  border:1px solid #fee2e2;

  box-shadow:
  0 15px 35px rgba(239,68,68,.08);
}

.timer-ring{
  width:90px;
  height:90px;
  position:relative;
  flex-shrink:0;
}

.timer-ring svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}

.ring-bg{
  fill:none;
  stroke:#f3f4f6;
  stroke-width:8;
}

.ring-progress{
  fill:none;
  stroke:#ef4444;
  stroke-width:8;
  stroke-linecap:round;

  stroke-dasharray:314;

  animation:ringCountdown 8s linear infinite;
}

@keyframes ringCountdown{
  from{
    stroke-dashoffset:0;
  }

  to{
    stroke-dashoffset:314;
  }
}

.timer-text{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:700;
  font-size:1.2rem;

  color:#ef4444;
}

.deadline-content{
  flex:1;
}

.deadline-content strong{
  display:block;
  margin-bottom:6px;
  color:#111827;
}

.deadline-content p{
  color:#6b7280;
}

.deadline-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.deadline-btn{
  border:none;
  padding:10px 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
}

.deadline-btn.primary{
  background:#ef4444;
  color:white;
}
.code-block{

  max-height:0;

  overflow:hidden;

  transition:.4s ease;

  margin-top:0;

  background:#050816;

  border-radius:22px;

  border:
    1px solid var(--border);
}

.code-block.open{

  max-height:800px;

  margin-top:20px;

  padding:20px;
}

.code-block code{

  white-space:pre-wrap;

  line-height:1.8;

  color:#d1d5db;
}



.live-toast-container{

  position:fixed;

  right:24px;
  bottom:24px;

  display:flex;
  flex-direction:column;

  gap:14px;

  z-index:99999;
}

.live-toast{

  min-width:320px;

  background:#121b30;

  border:
    1px solid var(--border);

  border-radius:20px;

  padding:18px;

  display:flex;
  align-items:center;

  gap:14px;

  transform:translateX(120%);
  opacity:0;

  transition:.35s ease;
}

.live-toast.lt-show{

  transform:translateX(0);
  opacity:1;
}



/* .footer{

  margin-left:250px;

  padding-top:60px;

  border-top:
    1px solid var(--border);

  margin-top:70px;
}

.footer-container{

  display:grid;

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

  gap:40px;

  padding:0 40px 50px;
}

.footer-logo{

  font-size:30px;

  margin-bottom:18px;

  font-family:'Syne',sans-serif;
}

.footer-col h3{

  margin-bottom:18px;
}

.footer-col p,
.footer-col a{

  color:#9ea9c8;

  text-decoration:none;

  line-height:1.8;
}

.footer-col ul{
  list-style:none;
}

.footer-col li{
  margin-bottom:10px;
}

.footer-col a:hover{
  color:white;
}

.newsletter-form{

  display:flex;
  flex-direction:column;

  gap:12px;

  margin-top:18px;
}

.newsletter-form input{

  padding:14px;

  border:none;

  border-radius:16px;

  background:
    rgba(255,255,255,.05);

  color:white;
}

.newsletter-form button{

  border:none;

  padding:14px;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      var(--accent),
      var(--accent2)
    );

  color:white;

  cursor:pointer;
}

.footer-bottom{

  text-align:center;

  padding:24px;

  border-top:
    1px solid var(--border);

  color:#7f8ba8;
}

 */

@media(max-width:1100px){

  .page-hero{
    grid-template-columns:1fr;
  }

}

@media(max-width:900px){

  .sidebar{
    transform:translateX(-100%);
  }

  .sidebar.open{
    transform:translateX(0);
  }

  .navbar,
  .main-home,
  .footer{

    margin-left:0;

    left:0;
  }

}

@media(max-width:768px){

  .navbar{

    flex-wrap:wrap;

    height:auto;

    padding-top:16px;
    padding-bottom:16px;

    gap:16px;
  }

  .search-bar{
    width:100%;
  }

  .main-home{
    padding:120px 20px 40px;
  }

  .alerts-grid{
    grid-template-columns:1fr;
  }

  .page-title{
    font-size:56px;
  }

}



.badges-hero {
  position: relative;
  overflow: hidden;
  padding: 70px 40px;
  border-radius: 34px;
  background:
    radial-gradient(circle at top right,
      rgba(108,92,231,0.25),
      transparent 35%),
    radial-gradient(circle at bottom left,
      rgba(0,206,201,0.2),
      transparent 30%),
    linear-gradient(145deg,#0f1117,#151926);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 60px;
}

.badges-hero-content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.hero-chip,
.section-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  margin-bottom: 20px;
}

.badges-hero h1 {
  font-size: clamp(42px,5vw,72px);
  line-height: 1;
  margin-bottom: 22px;
  font-weight: 800;
}

.badges-hero h1 span {
  background: linear-gradient(90deg,#6c5ce7,#00cec9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badges-hero p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 640px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.hero-btn {
  height: 52px;
  padding: 0 24px;
  border-radius: 16px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s ease;
}

.hero-btn.primary {
  background: linear-gradient(135deg,#6c5ce7,#00cec9);
  color: #fff;
}

.hero-btn.secondary {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
}

.hero-btn:hover {
  transform: translateY(-3px);
}

.hero-stats {
  display: flex;
  gap: 20px;
  margin-top: 42px;
}

.hero-stat {
  padding: 18px 22px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  min-width: 130px;
}

.hero-stat h3 {
  font-size: 28px;
  margin-bottom: 6px;
}

.hero-stat span {
  color: var(--text-secondary);
  font-size: 13px;
}



.hero-preview-card {
  position: relative;
  padding: 28px;
  border-radius: 28px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}

.hero-card-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  background: #6c5ce7;
  filter: blur(120px);
  opacity: 0.25;
  right: 0;
  top: 0;
}

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

.hero-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg,#6c5ce7,#00cec9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.xp-pill {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  font-size: 13px;
}

.hero-badge-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
  margin-top: 36px;
}

.mini-badge {
  height: 90px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  transition: 0.3s ease;
}

.mini-badge:hover {
  transform: translateY(-6px) scale(1.04);
}

.gold { background: linear-gradient(135deg,#f6b93b,#fa983a); }
.purple { background: linear-gradient(135deg,#6c5ce7,#a29bfe); }
.blue { background: linear-gradient(135deg,#0984e3,#74b9ff); }
.green { background: linear-gradient(135deg,#00b894,#55efc4); }
.orange { background: linear-gradient(135deg,#eb6835,#fd9644); }
.cyan { background: linear-gradient(135deg,#00cec9,#81ecec); }

.hero-progress-wrap {
  margin-top: 32px;
}

.hero-progress-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.hero-progress-bar {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.hero-progress-fill {
  width: 82%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#6c5ce7,#00cec9);
}



.floating-badge {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  backdrop-filter: blur(14px);
  animation: floatY 5s ease-in-out infinite;
}

.fb-1 {
  background: linear-gradient(135deg,#6c5ce7,#a29bfe);
  top: 40px;
  right: 20px;
}

.fb-2 {
  background: linear-gradient(135deg,#f6b93b,#fa983a);
  bottom: 60px;
  left: -20px;
}

.fb-3 {
  background: linear-gradient(135deg,#00cec9,#81ecec);
  bottom: -10px;
  right: 80px;
}

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



.modern-badge-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: 0.35s ease;
}

.modern-badge-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255,255,255,0.14);
}

.badge-glow {
  position: absolute;
  inset: auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  background: #6c5ce7;
  top: -60px;
  right: -60px;
}

.modern-badge-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modern-badge-icon {
  width: 78px;
  height: 78px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #fff;
  background: linear-gradient(135deg,#6c5ce7,#00cec9);
}

.modern-badge-rank {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  font-size: 12px;
}

.modern-badge-body {
  margin-top: 28px;
}

.modern-badge-body h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

.modern-badge-body p {
  color: var(--text-secondary);
  line-height: 1.7;
}

.modern-badge-footer {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge-collect-btn {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.06);
  color: #fff;
}



.achievement-timeline {
  margin-top: 80px;
}

.section-title-wrap {
  margin-bottom: 40px;
}

.timeline {
  position: relative;
  padding-left: 30px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,0.08);
}

.timeline-item {
  position: relative;
  margin-bottom: 34px;
}

.timeline-dot {
  position: absolute;
  left: -30px;
  top: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.timeline-dot.success {
  background: #00b894;
}

.timeline-dot.purple {
  background: #6c5ce7;
}

.timeline-dot.orange {
  background: #fd9644;
}

.timeline-card {
  padding: 24px;
  border-radius: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.timeline-time {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.timeline-card h4 {
  margin-bottom: 10px;
  font-size: 20px;
}

.timeline-card p {
  color: var(--text-secondary);
  line-height: 1.7;
}



@media (max-width: 980px) {

  .badges-hero-content {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    flex-wrap: wrap;
  }

  .hero-badge-grid {
    grid-template-columns: repeat(2,1fr);
  }

}

@media (max-width: 640px) {

  .badges-hero {
    padding: 40px 24px;
  }

  .badges-hero h1 {
    font-size: 42px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-stats {
    flex-direction: column;
  }

}




.alert-success-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.05)) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  border-left: 6px solid #22c55e !important;
  border-radius: 20px !important;
  padding: 24px !important;
  color: #fff !important;
  width: 100%;
}
.banner-icon-wrap {
  width: 44px;
  height: 44px;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  font-size: 22px;
}
.banner-body {
  flex: 1;
}
.banner-body strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
  color: #22c55e;
}
.banner-body p {
  font-size: 14px;
  color: #aab4d0;
  margin: 0;
}
.banner-actions {
  display: flex;
  gap: 10px;
}
.banner-btn {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.banner-btn.primary {
  background: #22c55e;
  color: #fff;
  border: none;
}
.banner-btn.primary:hover {
  background: #16a34a;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}
.banner-btn.outline {
  background: transparent;
  color: #aab4d0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.banner-btn.outline:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}


.alert-warning-notify {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #18130c !important;
  border: 1px solid rgba(245, 158, 11, 0.15) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  color: #fff !important;
  position: relative;
  width: 100%;
}
.warning-pulse-icon {
  color: #f59e0b;
  font-size: 20px;
  animation: warningPulse 1.8s infinite ease-in-out;
}
@keyframes warningPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}
.notify-body {
  flex: 1;
}
.notify-body strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
  color: #f59e0b;
}
.notify-body p {
  font-size: 13px;
  color: #c7d1ec;
  margin: 0;
}
.notify-close {
  background: transparent;
  border: none;
  color: #6a7a94;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 4px;
}
.notify-close:hover {
  color: #f59e0b;
}


.error-toast {
  background: linear-gradient(135deg, #1d0f11, #12090a) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden;
  color: #fff !important;
  width: 100%;
}
.toast-main {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}
.error-icon {
  color: #ef4444;
  font-size: 24px;
}
.toast-body {
  flex: 1;
}
.toast-body strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
  color: #ef4444;
}
.toast-body p {
  font-size: 13px;
  color: #c7d1ec;
  margin: 0;
}
.toast-close {
  background: transparent;
  border: none;
  color: #6a7a94;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.toast-close:hover {
  color: #ef4444;
}
.toast-progress {
  height: 3px;
  background: #ef4444;
  width: 100%;
  animation: shrinkProgress 4s linear forwards;
}
@keyframes shrinkProgress {
  from { width: 100%; }
  to { width: 0%; }
}


.glass-alert-box {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
  border-radius: 20px !important;
  padding: 22px 24px !important;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.glass-alert-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #7b61ff, #ff7a3d);
}
.glass-alert-icon {
  font-size: 22px;
  background: linear-gradient(135deg, #7b61ff, #ff7a3d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.glass-alert-body strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
}
.glass-alert-body p {
  font-size: 13px;
  color: #cbd5e1;
  margin: 0;
  line-height: 1.5;
}


.floating-alert-component {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #0d111d !important;
  border: 1px solid rgba(123, 97, 255, 0.2) !important;
  border-radius: 18px !important;
  padding: 16px 20px !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(123, 97, 255, 0.15) !important;
  width: 100%;
}
.bell-ring-icon {
  color: #7b61ff;
  font-size: 20px;
  animation: bellRing 2.5s infinite ease;
}
@keyframes bellRing {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(12deg); }
  20%, 40% { transform: rotate(-12deg); }
  50% { transform: rotate(0); }
}
.floating-alert-body {
  flex: 1;
}
.floating-alert-body strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
  color: #7b61ff;
}
.floating-alert-body p {
  font-size: 12px;
  color: #aab4d0;
  margin: 0;
}
.floating-alert-close {
  background: rgba(123, 97, 255, 0.1);
  border: none;
  color: #7b61ff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.floating-alert-close:hover {
  background: #7b61ff;
  color: #fff;
  box-shadow: 0 0 10px rgba(123, 97, 255, 0.4);
}


@media (max-width: 768px) {
  .alert-success-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .banner-actions {
    width: 100%;
    justify-content: flex-end;
  }
}


.actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
}

.view-btn {
  background: rgba(235,104,53,0.08);
  color: var(--accent);
  border: 1px solid rgba(235,104,53,0.2);
}

.view-btn:hover {
  background: rgba(235,104,53,0.15);
}

.copy-btn {
  background: var(--accent);
  color: #fff;
}

.copy-btn:hover {
  background: #d45c28;
  transform: translateY(-1px);
}

.copy-btn.copied {
  background: #00b894;
}


.alert-glass-success {
  display: flex; gap: 15px; padding: 20px;
  background: rgba(34, 197, 94, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 16px; color: #fff; align-items: center;
}
.alert-glass-success .ag-icon {
  background: #22c55e; color: #000; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-size: 18px; flex-shrink: 0;
}
.ag-content strong { display: block; font-size: 16px; margin-bottom: 4px; }
.ag-content p { font-size: 14px; margin: 0; color: #94a3b8; }

.alert-gradient-warning {
  display: flex; gap: 15px; padding: 20px;
  background: #0f172a; border-radius: 16px; color: #fff; align-items: center;
  position: relative; overflow: hidden;
}
.alert-gradient-warning::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 16px; padding: 2px;
  background: linear-gradient(45deg, #f59e0b, #ef4444);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.alert-gradient-warning .ag-icon { color: #f59e0b; font-size: 24px; flex-shrink: 0; }

.alert-cyber-info {
  display: flex; gap: 15px; padding: 20px;
  background: #000; border-left: 4px solid #06b6d4;
  border-radius: 4px 16px 16px 4px; color: #06b6d4; align-items: center;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
}
.alert-cyber-info .ag-icon { font-size: 24px; flex-shrink: 0; }
.alert-cyber-info .ag-content p { color: #64748b; }

.alert-badge-notify {
  display: flex; gap: 15px; padding: 15px 20px;
  background: #1e293b; border-radius: 99px; color: #fff; align-items: center;
  border: 1px solid #334155; position: relative;
}
.abn-avatar { position: relative; width: 45px; height: 45px; flex-shrink: 0; }
.abn-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.abn-badge {
  position: absolute; top: -5px; right: -5px; background: #ef4444; color: #fff;
  font-size: 10px; font-weight: bold; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px solid #1e293b;
}
.abn-close { margin-left: auto; background: none; border: none; color: #64748b; font-size: 16px; cursor: pointer; }

.alert-stripe-error {
  padding: 20px; background: #1e1b26; border-radius: 12px; color: #fff;
  position: relative; overflow: hidden;
}
.alert-stripe-error::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(45deg, #ef4444, #ef4444 10px, #b91c1c 10px, #b91c1c 20px);
}
.alert-stripe-error .ag-content { padding-left: 15px; }


.footer {
  background: var(--bg2);
  padding: 20px 0;
  margin-left: 250px; /* offset for sidebar */
}

.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
  gap: 40px;
  padding: 56px 48px 40px;
  max-width: 100%;
}

.footer-logo {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 12px;
}

.footer-col p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.footer-col h3 {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  position: relative;
  color: #a1a1aa;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-col ul li a:hover {
  color: var(--accent);  
  transform: translateX(6px);
}

.footer-col ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
  border-radius: 10px;
}

.footer-col ul li a:hover::after {
  width: 100%;
}

/* Social icons fix */
.socials {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 16px;
  text-decoration: none;
  transition: all var(--transition);
}

.socials a:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

.newsletter-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
}

.newsletter-form input:focus {
  border-color: var(--accent);
}

.newsletter-form button {
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}

.newsletter-form button:hover {
  background: #d45c28;
}

.footer-bottom {
  border-top: 1px solid #1e1e1e;
  padding: 20px 48px;
  text-align: center;
  font-size: 13px;
  color: #aaa;
}

/* Responsive fix */
@media (max-width: 768px) {
  .footer {
    margin-left: 0; /* remove sidebar offset */
  }
  .footer-container {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px;
    text-align: center;
  }
  .socials {
    justify-content: center;
  }
}

/* Responsive fix */
@media (max-width: 768px) {
  .footer {
    margin-left: 0; /* remove sidebar offset */
  }
  .footer-container {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 24px;
    text-align: center;
  }
  .socials {
    justify-content: center;
  }
}


@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
  .footer {
    margin-left: 0;
  }

  .footer-container {
    grid-template-columns: 1fr;
    padding: 40px 24px;
    gap: 28px;
  }

  .footer-bottom {
    padding: 16px 24px;
  }

  
}


.alert-neumorphic-confirm {
  background: #1e293b;
  border-radius: 20px;
  padding: 24px;
  box-shadow: inset 5px 5px 10px #0f172a, inset -5px -5px 10px #2d3748;
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
}
.nc-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: #1e293b;
  box-shadow: 4px 4px 8px #0f172a, -4px -4px 8px #2d3748;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ef4444;
}
.nc-body {
  flex: 1;
}
.nc-body strong {
  display: block;
  font-size: 16px;
  color: #fff;
  margin-bottom: 6px;
}
.nc-body p {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 16px;
}
.nc-actions {
  display: flex;
  gap: 12px;
}
.nc-btn-cancel, .nc-btn-confirm {
  border: none;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: #1e293b;
  color: #aab4d0;
  box-shadow: 3px 3px 6px #0f172a, -3px -3px 6px #2d3748;
  transition: all 0.2s ease;
}
.nc-btn-cancel:hover {
  color: #fff;
  box-shadow: inset 2px 2px 4px #0f172a, inset -2px -2px 4px #2d3748;
}
.nc-btn-confirm {
  color: #ef4444;
}
.nc-btn-confirm:hover {
  box-shadow: inset 2px 2px 4px #0f172a, inset -2px -2px 4px #2d3748;
}

.alert-terminal-log {
  background: #090d16;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  width: 100%;
}
.tl-header {
  background: #0f172a;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #1e293b;
}
.tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.tl-dot.red { background: #ef4444; }
.tl-dot.yellow { background: #f59e0b; }
.tl-dot.green { background: #10b981; }
.tl-title {
  margin-left: 10px;
  font-size: 11px;
  color: #64748b;
  font-family: monospace;
}
.tl-console {
  padding: 16px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
}
.tl-line {
  margin-bottom: 6px;
  color: #e2e8f0;
}
.tl-prompt {
  color: #38bdf8;
}
.tl-line.error {
  color: #fca5a5;
}
.tl-line.warning {
  color: #fde047;
}
.tl-status {
  font-weight: bold;
}
.tl-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: #f59e0b;
  animation: tlBlink 1s infinite;
  vertical-align: middle;
  margin-left: 4px;
}
@keyframes tlBlink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.alert-radar-threat {
  background: linear-gradient(135deg, #1d0f11, #0f0507);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
}
.rt-radar-wrap {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rt-threat-icon {
  color: #ef4444;
  font-size: 24px;
  z-index: 2;
  text-shadow: 0 0 10px #ef4444;
}
.rt-radar-circle {
  position: absolute;
  border: 1px solid #ef4444;
  border-radius: 50%;
  opacity: 0;
  animation: rtPulse 2.4s infinite linear;
}
.rt-radar-circle.circle1 { animation-delay: 0s; }
.rt-radar-circle.circle2 { animation-delay: 0.8s; }
.rt-radar-circle.circle3 { animation-delay: 1.6s; }
@keyframes rtPulse {
  0% { width: 10px; height: 10px; opacity: 1; }
  100% { width: 60px; height: 60px; opacity: 0; }
}
.rt-body strong {
  display: block;
  font-size: 15px;
  color: #ef4444;
  margin-bottom: 4px;
}
.rt-body p {
  font-size: 13px;
  color: #cbd5e1;
  margin: 0;
  line-height: 1.5;
}

.alert-retro-pixel {
  background: #000;
  border: 4px double #3f3f3f;
  border-radius: 0;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
  box-shadow: 5px 5px 0px #ef4444;
}
.rp-icon {
  font-size: 28px;
}
.rp-body strong {
  display: block;
  font-size: 16px;
  color: #fde047;
  font-family: monospace;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.rp-body p {
  font-size: 12px;
  color: #ff007f;
  font-family: monospace;
  margin: 0;
}

.alert-glass-timer-toast {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  width: 100%;
}
.gt-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  font-size: 18px;
}
.gt-body {
  flex: 1;
}
.gt-body strong {
  display: block;
  font-size: 15px;
  color: #fff;
  margin-bottom: 2px;
}
.gt-body p {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}
.gt-link {
  color: #38bdf8;
  text-decoration: none;
  font-weight: 700;
}
.gt-link:hover {
  text-decoration: underline;
}
.gt-close {
  background: transparent;
  border: none;
  color: #475569;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.gt-close:hover {
  color: #fff;
}
.gt-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
}
.gt-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  width: 100%;
  animation: gtCountdown 30s linear forwards;
}
@keyframes gtCountdown {
  from { width: 100%; }
  to { width: 0%; }
}

.alert-expandable-details {
  background: #0b1120;
  border: 1px solid #1e293b;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 100%;
}
.ed-main {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
}
.ed-bug-icon {
  color: #f43f5e;
  font-size: 20px;
}
.ed-body {
  flex: 1;
}
.ed-body strong {
  display: block;
  font-size: 15px;
  color: #fff;
  margin-bottom: 2px;
}
.ed-body p {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}
.ed-toggle-btn {
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.2);
  color: #f43f5e;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ed-toggle-btn:hover {
  background: #f43f5e;
  color: #fff;
}
.ed-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #070a13;
}
.alert-expandable-details.expanded .ed-details {
  max-height: 200px;
}
.ed-details-inner {
  padding: 16px 24px;
  border-top: 1px solid #1e293b;
  font-family: monospace;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}
.ed-log-line {
  margin-bottom: 4px;
}