/* =====================================================
   MULA: HEADER THEME VARIABLES
   ===================================================== */

:root {
  --bg: #08080a;
  --panel: #151519;
  --panel-soft: #1d1d23;
  --text: #ffffff;
  --muted: #a9a9b0;
  --accent: #b96cff;
  --border: rgba(255,255,255,.08);
  --gap: 16px;
  --radius: 14px;
}

/* =====================================================
   TAMAT: HEADER THEME VARIABLES
   ===================================================== */

/* =====================================================
   MULA: HEADER
   ===================================================== */

.topbar {
  min-height:68px;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(8,8,10,.96);
}

.logo {
  font-size:24px;
  font-weight:800;
  letter-spacing:-.7px;
}

.logo span {
  color:var(--muted);
  font-weight:600;
}

.logo {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.7px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
}

.top-actions {
  display:flex;
  align-items:center;
  gap:10px;
}

/* =====================================================
   MULA: HEADER BUTTON BASE
   ===================================================== */

button {
  font: inherit;
}

.menu-btn,
.top-icon,
.cat {
  border: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.menu-btn,
.top-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-btn {
  font-size: 14px;
}

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

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* =====================================================
   TAMAT: HEADER BUTTON BASE
   ===================================================== */

.cat {
  text-decoration: none;
}



.menu-btn {
  padding:9px 13px;
  border-radius:10px;
  background:var(--panel);
}

.top-icon {
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--panel);
  font-size:18px;
}

.categories {
  display:flex;
  gap:8px;
  padding:0 28px 16px;
  overflow-x:auto;
  scrollbar-width:none;
}

.categories::-webkit-scrollbar {
  display:none;
}

.cat {
  flex:0 0 auto;
  padding:8px 13px;
  border-radius:999px;
  background:var(--panel);
  color:var(--muted);
}

.cat.active {
  background:#fff;
  color:var(--bg);
}

/* =====================================================
   TAMAT: HEADER
   ===================================================== */