/* DME Profile — Auto-Header-Widget (fixed oben rechts, theme-unabhaengig). Bunker-Net-Look. */
.dmep-hw {
  --hw-bg: #0a1116; --hw-bg2: #0f1920; --hw-border: rgba(110,200,210,.16); --hw-text: #d6e4e8;
  --hw-muted: #7e949c; --hw-accent: #22d3ee; --hw-cyan-br: #5eeaff; --hw-teal: #2dd4bf;
  --hw-green: #a3e635; --hw-red: #fb7185; --hw-blue: #4d8cff; --hw-glass: rgba(18,28,34,.72);
  position: fixed; top: 12px; right: 16px; z-index: 99998;
  font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.3;
}
.dmep-hw * { box-sizing: border-box; }

.dmep-hw-toggle, .dmep-hw-login {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: 'Chakra Petch', 'Manrope', sans-serif;
  background: rgba(10,17,22,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hw-border);
  border-radius: 12px; padding: 5px 12px 5px 5px; color: var(--hw-text); font-size: 14px; font-weight: 600;
  text-decoration: none; box-shadow: 0 8px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.dmep-hw-toggle:hover, .dmep-hw-login:hover { border-color: rgba(110,200,210,.32); box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 22px rgba(34,211,238,.18); }
/* Gast-Login-Button: Bunker-Glass mit Cyan-Rahmen + Glow. */
.dmep-hw-login {
  background:
    radial-gradient(ellipse at 22% 28%, rgba(34,211,238,.18) 0%, transparent 55%),
    linear-gradient(135deg, rgba(18,28,34,.85) 0%, rgba(10,17,22,.9) 100%);
  color: var(--hw-cyan-br); border: 1px solid rgba(34,211,238,.5); padding: 9px 18px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  box-shadow: 0 0 16px rgba(34,211,238,.22), inset 0 0 10px rgba(34,211,238,.06);
}
.dmep-hw-login:hover {
  color: var(--hw-cyan-br); border-color: var(--hw-accent); filter: none;
  box-shadow: 0 0 24px rgba(34,211,238,.42), inset 0 0 12px rgba(34,211,238,.12);
}

.dmep-hw-ava { position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; overflow: visible; }
.dmep-hw-ava img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; display: block; border: 1px solid rgba(34,211,238,.35); }
.dmep-hw-ava.lg, .dmep-hw-ava.lg img { width: 46px; height: 46px; border-radius: 12px; }
.dmep-hw-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: linear-gradient(135deg, #10262b, #0c1c20); color: var(--hw-cyan-br); font-weight: 800; font-family: 'Chakra Petch', sans-serif; border: 1px solid rgba(34,211,238,.35); }
.dmep-hw-ava.lg .dmep-hw-ph { border-radius: 12px; font-size: 20px; }
.dmep-hw-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--hw-green); border: 2px solid var(--hw-bg); box-shadow: 0 0 8px var(--hw-green); }

.dmep-hw-info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.05; min-width: 0; max-width: 170px; }
.dmep-hw-name { font-family: 'Chakra Petch', sans-serif; font-size: 14px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmep-hw-tags { display: flex; flex-wrap: wrap; gap: 4px; row-gap: 3px; }
.dmep-hw-t { font-family: 'Chakra Petch', sans-serif; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 20px; background: rgba(110,200,210,.08); color: var(--hw-muted); white-space: nowrap; }
.dmep-hw-t.ok { color: var(--hw-green); background: rgba(163,230,53,.16); }
.dmep-hw-t.dev { color: var(--hw-accent); background: rgba(34,211,238,.16); }
.dmep-hw-t.off { color: var(--hw-red); background: rgba(251,113,133,.16); }
/* Discord-Rollen-Chip in der Pill: Farbe kommt inline; lange Namen mit Ellipsis. */
.dmep-hw-t.dmep-hw-role { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
/* Rollen-Badge im Dropdown (mehr Platz, kein Abschneiden). */
.dmep-hw-badge.dmep-hw-role { max-width: 100%; }
/* Support-/VIP-Badge in der Pill: kleine Bild-Reihe (~20px), neben Name/Rolle. */
.dmep-hw-badge-row { display: inline-flex; align-items: center; flex-shrink: 0; }
.dmep-hw-badge-row .dmc-badges { display: inline-flex; align-items: center; gap: 3px; line-height: 0; }
.dmep-hw-badge-row .dmc-badge { display: inline-flex; }
.dmep-hw-badge-row .dmc-badge img { width: 20px; height: 20px; display: block; }
.dmep-hw-caret { color: var(--hw-muted); font-size: 11px; transition: transform .2s; align-self: center; }
.dmep-hw.open .dmep-hw-caret { transform: rotate(180deg); }

/* Menue */
.dmep-hw-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 280px; max-width: 84vw;
  background: var(--hw-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--hw-border); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 30px rgba(34,211,238,.1), inset 0 1px 0 rgba(255,255,255,.05);
  opacity: 0; transform: translateY(-6px) scale(.98);
  pointer-events: none; transition: opacity .18s, transform .18s;
}
.dmep-hw.open .dmep-hw-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.dmep-hw-head { display: flex; align-items: center; gap: 12px; padding: 16px; background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(45,212,191,.03)); border-bottom: 1px solid var(--hw-border); }
.dmep-hw-head-main { min-width: 0; }
.dmep-hw-head-name { display: flex; align-items: center; gap: 6px; font-family: 'Chakra Petch', sans-serif; font-size: 16px; font-weight: 700; color: #fff; }
.dmep-hw-verified { color: var(--hw-accent); flex-shrink: 0; }
.dmep-hw-head-sub { font-size: 11px; color: var(--hw-muted); margin-top: 1px; }
.dmep-hw-badges { display: flex; gap: 5px; margin-top: 7px; }
.dmep-hw-badge { font-family: 'Chakra Petch', sans-serif; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 20px; }
.dmep-hw-badge.ok { color: var(--hw-green); background: rgba(163,230,53,.14); }
.dmep-hw-badge.muted { color: var(--hw-muted); background: rgba(110,200,210,.07); }

.dmep-hw-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; color: var(--hw-text); text-decoration: none; transition: background .15s; }
.dmep-hw-item:hover { background: rgba(34,211,238,.08); color: var(--hw-text); }
.dmep-hw-item svg { color: var(--hw-accent); flex-shrink: 0; }
.dmep-hw-item span { display: flex; flex-direction: column; min-width: 0; }
.dmep-hw-item b { font-family: 'Chakra Petch', sans-serif; font-size: 13.5px; font-weight: 600; }
.dmep-hw-item small { font-size: 11px; color: var(--hw-muted); }
.dmep-hw-item.danger { color: var(--hw-red); }
.dmep-hw-item.danger svg { color: var(--hw-red); }
.dmep-hw-item.danger:hover { background: rgba(251,113,133,.12); }
.dmep-hw-sep { height: 1px; background: var(--hw-border); margin: 4px 0; }

/* In die Navigation eingebettet (Modus "menu") */
.dmep-hw-li { list-style: none !important; display: flex; align-items: center; margin: 0; }
.dmep-hw-li::before, .dmep-hw-li::marker { content: none !important; }
.dmep-hw.dmep-hw-inline { position: relative; top: auto; right: auto; z-index: 50; display: inline-flex; vertical-align: middle; align-self: center; }
/* Rechtsbuendig, wenn direkt in eine Header-Flex-Leiste eingesetzt (tg/mykd-Theme). */
.tgmenu__nav > .dmep-hw-inline, .tgmenu__wrap > .dmep-hw-inline,
.tgmenu__navbar-wrap > .dmep-hw-inline { margin-left: auto; }
/* Bunker-Glass-Chip in der Nav. */
.dmep-hw-inline .dmep-hw-toggle {
  background:
    radial-gradient(ellipse at 22% 28%, rgba(34,211,238,.12) 0%, transparent 55%),
    linear-gradient(135deg, rgba(18,28,34,.7) 0%, rgba(10,17,22,.78) 100%);
  border: 1px solid var(--hw-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
.dmep-hw-inline .dmep-hw-toggle:hover {
  border-color: rgba(34,211,238,.5);
  box-shadow: 0 0 22px rgba(34,211,238,.3), inset 0 0 12px rgba(34,211,238,.08);
}
.dmep-hw-inline .dmep-hw-name { color: #fff; }
.dmep-hw-menu { z-index: 99999; }

/* Posteingang als Dropdown-Eintrag (Fundament fuer spaeteres Messaging). */
.dmep-hw-inbox-count {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--hw-red); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; border-radius: 9px;
}
.dmep-hw-inbox-count[hidden] { display: none; }

/* DE | EN-Sprach-Umschalter. */
.dmep-hw-lang-opt {
  color: var(--hw-muted); text-decoration: none; font-weight: 700; font-size: 12px;
  padding: 0 3px; transition: color .15s;
}
.dmep-hw-lang-opt:hover { color: var(--hw-text); }
.dmep-hw-lang-opt.is-active { color: var(--hw-accent); }
.dmep-hw-lang-sep { color: var(--hw-border); font-size: 11px; margin: 0 1px; }

/* Im eingeloggten Dropdown: eigener Eintrag "Sprache: DE | EN". */
.dmep-hw-lang-item { cursor: default; }
.dmep-hw-lang-item:hover { background: none; }
.dmep-hw-lang-item .dmep-hw-lang-label { flex: 1 1 auto; }
.dmep-hw-lang-item .dmep-hw-lang-label b { font-family: 'Chakra Petch', sans-serif; font-size: 13.5px; font-weight: 600; }
.dmep-hw-lang-opts { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }

/* Im Gast-Zweig: kompakter DE|EN-Text neben dem Login-Button. */
.dmep-hw-lang-guest {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 10px; vertical-align: middle;
}

@media (max-width: 600px) {
  .dmep-hw-tags { display: none; }
  .dmep-hw:not(.dmep-hw-inline) { top: 8px; right: 10px; }

  /* Dropdown: Breite begrenzen, damit er nicht den Viewport sprengt */
  .dmep-hw-menu {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    right: 0;
  }

  /* Dropdown-Items: besser tippbar */
  .dmep-hw-item { padding: 13px 14px; }
  .dmep-hw-item b { font-size: 13px; }

  /* Dropdown-Kopf: etwas enger */
  .dmep-hw-head { padding: 12px 14px; gap: 10px; }
  .dmep-hw-head-name { font-size: 14px; flex-wrap: wrap; overflow: hidden; }

  /* Badge-Zeile nicht ueberlaufen */
  .dmep-hw-badges { flex-wrap: wrap; gap: 4px; max-width: 100%; overflow: hidden; }
  .dmep-hw-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Name in der Pill: kein Overflow */
  .dmep-hw-name { max-width: 120px; }
}

@media (max-width: 420px) {
  .dmep-hw-info { display: none; }

  /* Pill selbst darf nicht zu breit werden */
  .dmep-hw-toggle,
  .dmep-hw-login { max-width: calc(100vw - 20px); }

  /* Login-Button auf kleinen Phones kompakter */
  .dmep-hw-login { padding: 8px 12px; font-size: 11px; letter-spacing: 1px; }

  /* Dropdown volle nutzbare Breite */
  .dmep-hw-menu {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    right: 0;
  }
}