/* Mailbox 2026 - minimal override (läggs sist) */
:root{
  --mb-bg1:#0b1020;
  --mb-bg2:#1a0b3b;
  --mb-bg3:#2b0a55;
  --mb-surface:rgba(255,255,255,0.06);
  --mb-surface2:rgba(255,255,255,0.10);
  --mb-text:#f5f5f7;
  --mb-muted:#c7c7d1;
  --mb-border:rgba(255,255,255,0.14);
  --mb-accent:#ff2d6d;
  --mb-accent2:#7c3aed;
  --mb-shadow:0 14px 40px rgba(0,0,0,0.35);
  --mb-radius:18px;
}

html[data-theme="light"]{
  --mb-bg1:#f6f7fb;
  --mb-bg2:#ffffff;
  --mb-bg3:#eef0ff;
  --mb-surface:#ffffff;
  --mb-surface2:#ffffff;
  --mb-text:#0b1020;
  --mb-muted:#4b5563;
  --mb-border:rgba(15,23,42,0.12);
  --mb-shadow:0 10px 30px rgba(2,6,23,0.10);
}

/* Bakgrund */
body{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,45,109,0.20), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(124,58,237,0.22), transparent 60%),
    linear-gradient(135deg, var(--mb-bg1) 0%, var(--mb-bg2) 45%, var(--mb-bg3) 100%);
  color:var(--mb-text);
}

/* Topbars */
.logo-bar,
.login-bar{
  background:transparent !important;
}
.header-bottom-line{
  background:rgba(255,255,255,0.08) !important;
}

/* Logo */
img.logo{
  max-height:44px;
}

/* Datum + tema-knapp */
.header-date{
  margin-left:10px;
  opacity:0.85;
}
.theme-toggle{
  border:1px solid var(--mb-border);
  background:rgba(255,255,255,0.04);
  color:var(--mb-text);
  padding:8px 14px;
  border-radius:999px;
  box-shadow:none;
}
.theme-toggle:hover{
  background:rgba(255,255,255,0.08);
}

/* Kort/kontainerkänsla */
.border,
.thumbnail,
.top-stories,
.featured-stories{
  background:var(--mb-surface);
  border:1px solid var(--mb-border) !important;
  border-radius:var(--mb-radius);
  box-shadow:var(--mb-shadow);
}

.top-stories .caption,
.thumbnail{
  color:var(--mb-text);
}

/* Rubriker */
.top-heading{
  display:flex;
  gap:10px;
  align-items:center;
  padding:14px 16px;
  margin:0;
  border-bottom:1px solid var(--mb-border);
  background:rgba(0,0,0,0.10);
  border-top-left-radius:var(--mb-radius);
  border-top-right-radius:var(--mb-radius);
}

/* Kategori-"chips" */
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.3px;
  color:#fff;
  line-height:1;
  white-space:nowrap;
}
.tag-news{ background:#2563eb; }
.tag-business{ background:#ff2d6d; }
.tag-tech{ background:#10b981; }
.tag-entertainment{ background:#f59e0b; }
.tag-lifestyle{ background:#7c3aed; }
.tag-family{ background:#22c55e; }
.tag-sport{ background:#ef4444; }
.tag-video{ background:#64748b; }
.tag-email{ background:#8b5cf6; }
.tag-clips{ background:#0ea5e9; }

/* Knappar */
.btn-default{
  background:linear-gradient(135deg, var(--mb-accent), var(--mb-accent2)) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:12px !important;
  padding:10px 14px !important;
}
.btn-default:hover{
  filter:brightness(1.05);
}

/* Inputs i login-raden */
.login-bar .form-control{
  background:rgba(255,255,255,0.06);
  border:1px solid var(--mb-border);
  color:var(--mb-text);
}
html[data-theme="light"] .login-bar .form-control{
  background:#fff;
}

/* Footer */
.footer-area{
  background:transparent;
  border-top:1px solid rgba(255,255,255,0.08);
}

/* Mobil - lite mer luft */
@media (max-width: 768px){
  .top-heading{ padding:12px 12px; }
  .theme-toggle{ padding:7px 12px; }
  img.logo{ max-height:40px; }
}