@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* ========================= ROOT (DARK DEFAULT) ========================= */
/*:root{
  --bg:#0b0b0f;
  --card:rgba(255,255,255,0.05);
  --border:rgba(255,255,255,0.08);
  --text:#ffffff;

  --primary: linear-gradient(135deg, #ff6a00, #ff2e00);
  --accent:#ff3c00;

  --glass-dark: rgba(255,255,255,0.05);
  --glass-light: rgba(255,255,255,0.8);

  --border-dark: rgba(255,255,255,0.08);
  --border-light: rgba(0,0,0,0.1);
}*/

/* ========================= GLOBAL ========================= */
/**{
  box-sizing:border-box;
  font-family: 'Inter', sans-serif;
  margin:0;
  border:0;
}*/

/*body{
  background:var(--bg);
  color:var(--text);
}*/

/* ========================= HEADER ========================= */
.header{
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;

  background:var(--glass-dark);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);

  position:fixed;
  width:100%;
  top:0;
  left:0;
  z-index:1000;

  overflow:visible;
}

/* LIGHT MODE */
/*body.light .header{
  background:var(--glass-light);
  border-bottom:1px solid var(--border-light);
}*/

/* ========================= LAYOUT ========================= */
.header-left,
.header-right{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
}

.header-center{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
}

/* ========================= LOGO ========================= */
.logo{
  display:flex;
  align-items:center;
  justify-content:center;

  width:42px;
  height:42px;
  flex-shrink:0;
}

.logo img{
  width:100%;
  height:100%;
  object-fit:contain;

  border-radius:50%;
  padding:4px;

  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
  border:1px solid var(--border-dark);

  box-shadow:0 0 10px rgba(0,128,255,0.2);

  display:block;
}

/* ========================= ICON BUTTON ========================= */
.icon-btn{
  width:42px;
  height:42px;

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

  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
  border:1px solid var(--border-dark);

  font-size:20px;
  cursor:pointer;
  color:var(--text);

  border-radius:50%;

  transition:all 0.2s ease;
}

/* LIGHT */
body.light .icon-btn{
  background:rgba(0,0,0,0.05);
  border:1px solid var(--border-light);
  color:#000;
}

/* HOVER */
.icon-btn:hover{
  background:rgba(255,255,255,0.15);
  transform:scale(1.05);
}

.icon-btn:active{
  transform:scale(0.92);
}

/* FIX ICON CENTER */
.icon-btn i{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* ========================= NOTIFICATION ========================= */
.notif{
  position:relative;
}

/* BADGE */
.badgeh{
  position:absolute;
  top:-3px;
  right:-3px;

  background:linear-gradient(135deg,#ff4d00,#ff0000);
  color:#fff;

  font-size:10px;
  padding:3px 6px;
  border-radius:12px;

  box-shadow:0 0 6px rgba(255,0,0,0.5);
}

/* ========================= AVATAR ========================= */
.header-avatar{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,0.2);

  display:block;
}