/* ════════════════════════════════════════════════════════════
   MaloumPanel — clean & quiet (Linear/Stripe-Stil)
   ════════════════════════════════════════════════════════════ */
:root {
  --primary:        #e11d48;
  --primary-dark:   #be123c;
  --primary-light:  #fb7185;
  --primary-soft:   rgba(225,29,72,0.08);

  --green:  #22c55e;
  --red:    #ef4444;
  --yellow: #eab308;

  --bg:         #0b0b0d;       /* Content */
  --bg-deep:    #050507;       /* Sidebar/Avatar-Bar */
  --bg-elev:    #131316;       /* Card */
  --bg-input:   #18181c;
  --bg-hover:   #1f1f24;

  --border:     #1f1f23;
  --border-hi:  #2a2a30;

  --text:       #f5f5f7;
  --text-dim:   #a1a1a8;
  --text-muted: #6b6b73;

  --radius:    8px;
  --radius-lg: 12px;

  --ease: cubic-bezier(0.16,1,0.3,1);

  --sidebar-w:    240px;
  --avatar-bar-w: 60px;
  --topbar-h:     52px;
}

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

html, body { height:100% }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text);
  font-size:13.5px; line-height:1.5;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

@keyframes fadeIn { from{opacity:0} to{opacity:1} }

a { color:inherit; text-decoration:none }
button { font-family:inherit; cursor:pointer }
h1,h2,h3 { letter-spacing:-0.02em; font-weight:600 }
h1{ font-size:20px } h2{ font-size:16px } h3{ font-size:14px }

::-webkit-scrollbar      { width:8px; height:8px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:#2a2a30; border-radius:4px;
                           border:2px solid var(--bg) }
::-webkit-scrollbar-thumb:hover{ background:#3a3a44 }

/* ────────────── App-Shell ────────────── */
.app-shell{ display:flex; min-height:100vh }

/* ────────────── Avatar-Bar (Discord-Stil) ────────────── */
.avatar-bar{
  width:var(--avatar-bar-w); flex-shrink:0;
  position:sticky; top:0; height:100vh; z-index:101;
  background:var(--bg-deep);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center;
  padding:10px 0; gap:6px; overflow-y:auto;
  scrollbar-width:none;
}
.avatar-bar::-webkit-scrollbar{ display:none }

.ab-logo{
  width:36px; height:36px; border-radius:8px;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px;
  transition:border-radius .15s var(--ease);
}
.ab-logo:hover{ border-radius:12px }

.ab-sep{ width:24px; height:1px; background:var(--border); margin:4px 0 }

.ab-item{
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-input);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; flex-shrink:0;
  font-size:13px; font-weight:700; color:var(--text-dim);
  transition:all .15s var(--ease);
  overflow:hidden; text-decoration:none;
}
.ab-item img{ width:100%; height:100%; object-fit:cover; display:block }

/* ── Reusable Avatar (Macro _macros.html: avatar) ── */
.ml-avatar{
  position:relative; display:inline-flex;
  align-items:center; justify-content:center;
  border-radius:50%; overflow:visible;       /* overflow:visible damit Badge raussticht */
  background:transparent;
  flex-shrink:0;
}
.ml-avatar > img,
.ml-avatar > .ml-avatar-letter{
  border-radius:50%; overflow:hidden;
}
.ml-avatar img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ml-avatar-letter{
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  font-weight:700;
  color:var(--text-dim); background:var(--bg-input);
}
/* Maloum-Platform-Badge (kleines Logo in der Ecke vom Avatar) */
.ml-avatar .platform-mark{
  position:absolute; bottom:-2px; right:-2px;
  width:42%; height:42%;
  min-width:12px; min-height:12px;
  max-width:18px; max-height:18px;
  background:#fff; border-radius:50%;
  border:2px solid var(--bg-deep);
  display:flex; align-items:center; justify-content:center;
  padding:1px;
}
.ml-avatar .platform-mark img{
  width:100%; height:100%; object-fit:contain;
  border-radius:0;
}
.avatar-bar .ml-avatar .platform-mark{ border-color:var(--bg-deep) }
.topbar .ml-avatar .platform-mark,
.card .ml-avatar .platform-mark{ border-color:var(--bg-elev) }
.ab-item:hover{ border-radius:12px; color:var(--text) }
.ab-item.active{
  border-radius:12px; color:var(--text);
  background:var(--primary-soft);
}
.ab-item.active::before{
  content:""; position:absolute; left:-12px; top:50%;
  transform:translateY(-50%); width:4px; height:24px;
  background:var(--primary); border-radius:0 3px 3px 0;
}
.ab-item.add{
  color:var(--text-muted); background:transparent;
  border:1px dashed var(--border-hi);
}
.ab-item.add:hover{ color:var(--primary-light); border-color:var(--primary-light) }

.ab-badge{
  position:absolute; top:-3px; right:-3px;
  min-width:16px; height:16px; padding:0 4px;
  background:var(--red); color:#fff;
  font-size:9.5px; font-weight:700;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg-deep);
}
/* Maloum-Logo-Badge in der unteren rechten Ecke jedes Account-Avatars */
.ab-platform{
  position:absolute; bottom:-2px; right:-2px;
  width:16px; height:16px;
  background:#fff; border-radius:50%;
  border:2px solid var(--bg-deep);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:1px;
  pointer-events:none;
}
.ab-platform img{
  width:100%; height:100%; object-fit:contain; display:block;
}

.ab-tooltip{
  position:absolute; left:calc(100% + 12px); top:50%;
  transform:translateY(-50%);
  background:#000; color:#fff; padding:5px 10px;
  border-radius:6px; font-size:12px; font-weight:600;
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .1s; z-index:200;
  box-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.ab-item:hover .ab-tooltip{ opacity:1 }

/* ────────────── Sidebar ────────────── */
.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  position:sticky; top:0; height:100vh; z-index:100;
  background:var(--bg-deep);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
}

.sidebar-brand{
  display:flex; align-items:center; gap:11px;
  padding:18px 18px 16px;
  border-bottom:1px solid var(--border);
  text-decoration:none; color:var(--text);
}
.brand-mark{
  width:30px; height:30px; border-radius:7px;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px;
  flex-shrink:0;
}
.brand-name{ font-size:15px; font-weight:700; letter-spacing:-0.015em }

.sidebar-nav{
  padding:12px 10px; display:flex; flex-direction:column; gap:2px;
  overflow-y:auto; flex:1;
}

.nav-link{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:7px;
  color:var(--text-dim); font-size:13px; font-weight:500;
  transition:all .1s; cursor:pointer;
  text-decoration:none;
  line-height:1.3;
}
.nav-link i{ font-size:15px; width:18px; text-align:center; opacity:.85 }
.nav-link:hover{ background:var(--bg-hover); color:var(--text) }
.nav-link:hover i{ opacity:1 }
.nav-link.active{
  background:var(--bg-hover); color:var(--text); font-weight:600;
}
.nav-link.active i{ opacity:1; color:var(--primary-light) }

.nav-divider{
  height:1px; background:var(--border); margin:14px 6px 12px;
}

.sidebar-badge{
  margin-left:auto; background:var(--primary); color:#fff;
  font-size:10px; font-weight:700; padding:1px 6px;
  border-radius:9px; min-width:18px; text-align:center;
}

/* Sidebar Footer (Settings/Logout) */
.sidebar-foot{
  padding:10px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:1px;
}
.sidebar-user{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:7px;
  font-size:12px; color:var(--text-dim);
}
.sidebar-user-avatar{
  width:28px; height:28px; border-radius:50%;
  background:var(--bg-input);
  display:flex; align-items:center; justify-content:center;
  color:var(--text); font-weight:700; font-size:12px; flex-shrink:0;
}
.sidebar-user-info{ flex:1; min-width:0 }
.sidebar-user-name{
  color:var(--text); font-weight:600; font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sidebar-user-role{ color:var(--text-muted); font-size:11px;
  text-transform:capitalize; line-height:1.2 }

/* ────────────── Main / Topbar ────────────── */
.main{ flex:1; display:flex; flex-direction:column; min-width:0 }

.topbar{
  height:var(--topbar-h); flex-shrink:0;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:0 20px;
  position:sticky; top:0; z-index:20;
}
.topbar h1{ font-size:14px; font-weight:600; color:var(--text) }
.topbar-spacer{ flex:1 }

.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:6px;
  font-size:13px; font-weight:500;
  border:1px solid var(--border); background:var(--bg-elev);
  color:var(--text); transition:all .1s;
  text-decoration:none;
}
.btn:hover{ background:var(--bg-hover); border-color:var(--border-hi) }
.btn-primary{
  background:var(--primary); border-color:var(--primary); color:#fff;
}
.btn-primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark) }
.btn-ghost{ background:transparent }
.btn-ghost:hover{ background:var(--bg-hover) }
.btn-block{ width:100%; justify-content:center }
.btn-sm{ padding:5px 10px; font-size:12px }

.content{ flex:1; padding:24px; animation:fadeIn .15s var(--ease); min-width:0 }

/* ────────────── Cards / Tables ────────────── */
.card{
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px;
}

.grid{ display:grid; gap:12px }
.grid-2{ grid-template-columns:repeat(2,1fr) }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-4{ grid-template-columns:repeat(4,1fr) }
@media(max-width:1100px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:680px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr } }

/* ────────────── Forms ────────────── */
.form-group{ margin-bottom:14px }
.form-label{
  display:block; font-size:12px; font-weight:500;
  color:var(--text-dim); margin-bottom:6px;
}
.form-input{
  width:100%; padding:8px 11px; border-radius:6px;
  background:var(--bg-input); border:1px solid var(--border);
  color:var(--text); font-size:13.5px; font-family:inherit;
  transition:border-color .1s;
  height:36px;
}
.form-input:focus{
  outline:none; border-color:var(--primary);
  background:var(--bg-input);
}
.form-input::placeholder{ color:var(--text-muted) }

/* ────────────── Badges / Dots ────────────── */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:5px;
  font-size:11px; font-weight:600; line-height:1.5;
}
.badge-green{ background:rgba(34,197,94,.10); color:var(--green) }
.badge-red{   background:rgba(239,68,68,.10); color:var(--red) }
.badge-yellow{background:rgba(234,179,8,.10); color:var(--yellow) }
.badge-muted{ background:var(--bg-hover); color:var(--text-muted) }

.dot{ width:6px; height:6px; border-radius:50%; display:inline-block }
.dot-green{ background:var(--green) }
.dot-yellow{ background:var(--yellow) }
.dot-red{ background:var(--red) }
.dot-muted{ background:var(--text-muted) }

/* ────────────── Table ────────────── */
.tbl{ width:100%; border-collapse:collapse; font-size:13px }
.tbl th{
  text-align:left; padding:10px 14px;
  color:var(--text-muted); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--border); background:var(--bg-deep);
}
.tbl td{ padding:11px 14px; border-bottom:1px solid var(--border) }
.tbl tr:last-child td{ border-bottom:0 }
.tbl tr:hover td{ background:var(--bg-hover) }

/* ────────────── Auth Pages ────────────── */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center;
  justify-content:center; padding:24px;
  background:var(--bg);
}
.auth-card{
  width:100%; max-width:380px;
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 28px; animation:fadeIn .2s var(--ease);
}
.auth-logo{ display:flex; align-items:center; gap:10px;
  justify-content:center; margin-bottom:22px }
.auth-logo .brand-mark{ width:36px; height:36px; font-size:16px }
.auth-logo .brand-name{ font-size:17px }
.auth-title{ text-align:center; font-size:18px; font-weight:600;
  margin-bottom:6px }
.auth-sub{ text-align:center; color:var(--text-muted);
  font-size:13px; margin-bottom:24px }
.auth-foot{ text-align:center; margin-top:20px; font-size:12.5px;
  color:var(--text-muted) }
.auth-foot a{ color:var(--text-dim) }
.auth-foot a:hover{ color:var(--primary-light) }

.flash{
  padding:10px 14px; border-radius:6px;
  font-size:13px; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.flash-error{ background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.2); color:var(--red) }
.flash-ok{ background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.2); color:var(--green) }

/* ────────────── Sandbox Banner ────────────── */
.sandbox-banner{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  height:26px; line-height:26px; text-align:center;
  font-size:11.5px; font-weight:600; color:#fff; letter-spacing:.02em;
  background:var(--primary);
}
.sandbox-banner .sb-tag{
  background:rgba(0,0,0,.25); padding:1px 7px; border-radius:3px;
  margin-right:8px; font-size:10.5px;
}