/* =========================================================
   NYRASFEVER CONTROL
   MODERN DARK / SOFT LED UI
   ========================================================= */

:root {
  --bg: #08080b;
  --bg-soft: #0b0b0f;

  --surface: #101014;
  --surface-2: #141419;
  --surface-3: #19191f;

  --surface-hover: #1d1c23;

  --border: rgba(255, 255, 255, 0.065);
  --border-strong: rgba(255, 255, 255, 0.11);

  --text: #f4f2f5;
  --text-soft: #d3cfd5;
  --muted: #85818a;

  --accent: #d087b2;
  --accent-bright: #e7a6ce;

  --accent-soft: rgba(208, 135, 178, 0.09);
  --accent-soft-2: rgba(208, 135, 178, 0.15);
  --accent-border: rgba(208, 135, 178, 0.24);
  --accent-glow: rgba(208, 135, 178, 0.32);

  --success: #91d7b4;
  --success-soft: rgba(145, 215, 180, 0.10);

  --danger: #ef7d88;
  --danger-soft: rgba(239, 125, 136, 0.10);

  --sidebar-width: 255px;
  --sidebar-mini-width: 82px;

  --radius: 18px;
  --radius-small: 12px;

  --shadow:
    0 22px 70px rgba(0, 0, 0, 0.28);

  --transition:
    180ms cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(208, 135, 178, 0.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 100% 35%,
      rgba(208, 135, 178, 0.035),
      transparent 24%
    ),
    var(--bg);

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 14px;

  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
}

.hidden {
  display: none !important;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;

  font-size: clamp(
    25px,
    2.8vw,
    34px
  );

  letter-spacing: -0.045em;
  line-height: 1.1;
}

h2 {
  margin: 3px 0 0;

  font-size: 17px;
  font-weight: 650;

  letter-spacing: -0.025em;
}

strong {
  font-weight: 650;
}

small {
  color: var(--muted);
}

.muted {
  color: var(--muted) !important;
}

.tiny {
  color: var(--muted);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.led-text {
  color: var(--accent-bright) !important;

  text-shadow:
    0 0 7px rgba(208, 135, 178, 0.36),
    0 0 20px rgba(208, 135, 178, 0.14);
}

.led-value {
  color: var(--accent-bright) !important;

  text-shadow:
    0 0 11px rgba(208, 135, 178, 0.24);
}


/* =========================================================
   LOGIN
   ========================================================= */

.login-wrap {
  display: grid;
  place-items: center;

  min-height: 100vh;

  padding: 28px;
}

.login-card {
  position: relative;

  width: min(
    100%,
    430px
  );

  padding: 34px;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      transparent 45%
    ),
    rgba(16, 16, 20, 0.95);

  box-shadow:
    0 40px 100px rgba(0, 0, 0, .45);
}

.login-card::before {
  position: absolute;
  top: -100px;
  right: -100px;

  width: 220px;
  height: 220px;

  content: "";

  border-radius: 50%;

  background:
    rgba(208, 135, 178, .12);

  filter: blur(65px);

  pointer-events: none;
}

.login-logo-wrap {
  margin-bottom: 28px;
}

.login-brand h1 {
  margin-top: 9px;
  margin-bottom: 9px;
}

.login-brand p {
  margin-bottom: 0;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  flex: 0 0 auto;

  border:
    1px solid rgba(208, 135, 178, .35);

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(208, 135, 178, .18),
      rgba(208, 135, 178, .05)
    );

  color: var(--accent-bright);

  font-size: 17px;
  font-weight: 850;

  box-shadow:
    inset 0 0 20px rgba(208, 135, 178, .04),
    0 0 22px rgba(208, 135, 178, .08);

  text-shadow:
    0 0 10px rgba(208, 135, 178, .38);
}

.logo-large {
  width: 54px;
  height: 54px;

  margin-bottom: 22px;

  border-radius: 16px;

  font-size: 22px;
}

.logo.mini {
  width: 37px;
  height: 37px;

  border-radius: 11px;
}


/* =========================================================
   APP SHELL
   ========================================================= */

.shell {
  display: grid;

  grid-template-columns:
    var(--sidebar-width)
    minmax(0, 1fr);

  min-height: 100vh;

  transition:
    grid-template-columns
    var(--transition);
}

.shell.sidebar-mini {
  grid-template-columns:
    var(--sidebar-mini-width)
    minmax(0, 1fr);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
  position: sticky;
  top: 0;

  display: flex;
  flex-direction: column;

  height: 100vh;

  padding: 16px 13px 13px;

  overflow: hidden;

  border-right:
    1px solid var(--border);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.012),
      transparent
    ),
    rgba(11, 11, 15, 0.96);

  backdrop-filter:
    blur(20px);
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 50px;

  margin-bottom: 14px;

  padding: 0 4px;
}

.brand {
  display: flex;
  align-items: center;

  min-width: 0;

  gap: 10px;
}

.brand-copy {
  min-width: 0;

  transition:
    opacity var(--transition),
    width var(--transition);
}

.brand-copy strong,
.brand-copy small {
  display: block;
}

.brand-copy strong {
  font-size: 13px;
  letter-spacing: -0.01em;
}

.brand-copy small {
  margin-top: 1px;

  font-size: 10px;
}


/* =========================================================
   SIDEBAR COLLAPSE
   ========================================================= */

.sidebar-collapse-btn {
  display: grid;
  place-items: center;

  width: 29px;
  height: 29px;

  flex: 0 0 auto;

  padding: 0;

  cursor: pointer;

  border:
    1px solid var(--border);

  border-radius: 9px;

  background:
    rgba(255,255,255,.025);

  color: var(--muted);

  font-size: 19px;

  transition:
    background var(--transition),
    border var(--transition),
    color var(--transition),
    transform var(--transition);
}

.sidebar-collapse-btn:hover {
  border-color:
    var(--accent-border);

  background:
    var(--accent-soft);

  color:
    var(--accent-bright);
}

.shell.sidebar-mini
.sidebar-collapse-btn {
  transform:
    rotate(180deg);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

#nav {
  flex: 1;

  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;

  padding-right: 2px;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(255,255,255,.08)
    transparent;
}

.nav-section {
  margin-bottom: 8px;
}

.nav-section.permission-hidden {
  display: none;
}

.navgroup-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  padding: 8px 10px 7px;

  cursor: pointer;

  border: 0;

  background: transparent;

  color: #65616a;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .15em;
  text-align: left;
  text-transform: uppercase;

  transition:
    color var(--transition);
}

.navgroup-toggle:hover {
  color: var(--text-soft);
}

.nav-chevron {
  display: inline-block;

  font-size: 13px;

  transform:
    rotate(90deg);

  transition:
    transform var(--transition),
    opacity var(--transition);
}

.nav-section.is-collapsed
.nav-chevron {
  transform:
    rotate(0deg);
}

.navgroup-items {
  max-height: 500px;

  opacity: 1;

  overflow: hidden;

  transition:
    max-height 240ms ease,
    opacity 180ms ease,
    margin 180ms ease;
}

.nav-section.is-collapsed
.navgroup-items {
  max-height: 0;

  opacity: 0;

  pointer-events: none;
}

.navitem {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: 38px;

  margin: 2px 0;

  padding: 0 11px;

  gap: 9px;

  cursor: pointer;

  border:
    1px solid transparent;

  border-radius: 11px;

  background:
    transparent;

  color: #9b969f;

  font-size: 12px;
  font-weight: 560;

  text-align: left;

  transition:
    color var(--transition),
    background var(--transition),
    border var(--transition),
    transform var(--transition);
}

.navitem:hover {
  background:
    rgba(255,255,255,.025);

  color:
    var(--text-soft);
}

.navitem.active {
  border-color:
    rgba(208,135,178,.12);

  background:
    linear-gradient(
      90deg,
      rgba(208,135,178,.12),
      rgba(208,135,178,.035)
    );

  color:
    #f0d2e5;

  box-shadow:
    inset 0 0 20px
    rgba(208,135,178,.015);
}

.navitem.active::after {
  position: absolute;
  top: 10px;
  right: -1px;
  bottom: 10px;

  width: 2px;

  content: "";

  border-radius: 999px;

  background:
    var(--accent-bright);

  box-shadow:
    0 0 10px
    var(--accent-glow);
}

.nav-dot {
  width: 5px;
  height: 5px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    rgba(255,255,255,.14);

  transition:
    background var(--transition),
    box-shadow var(--transition);
}

.navitem.active
.nav-dot {
  background:
    var(--accent-bright);

  box-shadow:
    0 0 9px
    rgba(208,135,178,.55);
}

.navitem.sub {
  padding-left: 20px;
}


/* =========================================================
   MINI SIDEBAR
   ========================================================= */

.shell.sidebar-mini
.sidebar {
  padding-left: 11px;
  padding-right: 11px;
}

.shell.sidebar-mini
.brand-copy,
.shell.sidebar-mini
.navgroup-title,
.shell.sidebar-mini
.nav-chevron,
.shell.sidebar-mini
.navitem-text,
.shell.sidebar-mini
.sidefooter-text,
.shell.sidebar-mini
.userdetails {
  display: none;
}

.shell.sidebar-mini
.sidebar-top {
  flex-direction: column;

  gap: 9px;
}

.shell.sidebar-mini
.navgroup-toggle {
  height: 8px;
  min-height: 8px;

  margin: 4px 0;

  padding: 0;

  pointer-events: none;
}

.shell.sidebar-mini
.navgroup-items,
.shell.sidebar-mini
.nav-section.is-collapsed
.navgroup-items {
  max-height: 500px;

  opacity: 1;

  pointer-events: auto;
}

.shell.sidebar-mini
.navitem {
  justify-content: center;

  height: 40px;

  padding: 0;

  font-size: 0;
}

.shell.sidebar-mini
.navitem::before {
  content:
    attr(data-short);

  color:
    var(--text-soft);

  font-size: 10px;
  font-weight: 800;
}

.shell.sidebar-mini
.navitem .nav-dot {
  display: none;
}

.shell.sidebar-mini
.navitem.active::before {
  color:
    var(--accent-bright);

  text-shadow:
    0 0 8px
    rgba(208,135,178,.4);
}

.shell.sidebar-mini
.sidefooter {
  align-items: center;
}

.shell.sidebar-mini
.statusline {
  justify-content: center;
}

.shell.sidebar-mini
.userbox {
  justify-content: center;

  padding:
    8px 0;

  background:
    transparent;
}

.shell.sidebar-mini
.useravatar {
  display: none;
}

.shell.sidebar-mini
.userbox .btn {
  width: 38px;
}


/* =========================================================
   SIDEBAR FOOTER
   ========================================================= */

.sidefooter {
  display: flex;
  flex-direction: column;

  gap: 9px;

  margin-top: 10px;

  padding-top: 11px;

  border-top:
    1px solid var(--border);
}

.statusline {
  display: flex;
  align-items: center;

  min-height: 28px;

  padding: 0 9px;

  gap: 7px;

  color: var(--muted);

  font-size: 10px;
}

.status-dot {
  width: 6px;
  height: 6px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    #625e66;
}

.status-dot.live,
.statusline.connected
.status-dot,
.status-pill.connected
.status-dot {
  background:
    var(--success);

  box-shadow:
    0 0 9px
    rgba(145,215,180,.5);
}

.statusline.connected {
  color:
    var(--success);
}

.userbox {
  display: flex;
  align-items: center;

  min-width: 0;

  padding: 9px;

  gap: 8px;

  border:
    1px solid var(--border);

  border-radius: 12px;

  background:
    rgba(255,255,255,.018);
}

.useravatar {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  flex: 0 0 auto;

  border-radius: 9px;

  background:
    var(--accent-soft);

  color:
    var(--accent-bright);

  font-size: 10px;
  font-weight: 800;
}

.userdetails {
  min-width: 0;
  flex: 1;
}

.userdetails strong,
.userdetails small {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.userdetails strong {
  font-size: 11px;
}

.userdetails small {
  margin-top: 2px;

  font-size: 9px;
}


/* =========================================================
   MAIN
   ========================================================= */

.main {
  min-width: 0;

  padding:
    34px
    clamp(22px, 4vw, 56px)
    60px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  min-height: 78px;

  margin-bottom: 24px;

  gap: 24px;

  border-bottom:
    1px solid var(--border);
}

.topbar h1 {
  margin-top: 7px;
}

.topstatus {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;
}


/* =========================================================
   STATUS PILLS
   ========================================================= */

.status-pill {
  display: inline-flex;
  align-items: center;

  min-height: 29px;

  padding: 0 10px;

  gap: 7px;

  border:
    1px solid var(--border);

  border-radius: 999px;

  background:
    rgba(255,255,255,.018);

  color:
    var(--muted);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .03em;
}

.status-pill.live {
  border-color:
    rgba(145,215,180,.13);

  background:
    rgba(145,215,180,.035);

  color:
    #addfc7;
}

.status-pill.connected {
  border-color:
    rgba(145,215,180,.13);

  color:
    #addfc7;
}


/* =========================================================
   PAGE
   ========================================================= */

.page {
  animation:
    page-in
    200ms ease;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform:
      translateY(5px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }
}


/* =========================================================
   GRID
   ========================================================= */

.grid2 {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 16px;
}

.metrics {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 13px;

  margin-bottom: 16px;
}

.metrics-community {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}


/* =========================================================
   METRICS
   ========================================================= */

.metric {
  position: relative;

  min-height: 130px;

  padding: 18px;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.02),
      transparent 60%
    ),
    var(--surface);

  box-shadow:
    0 14px 40px
    rgba(0,0,0,.14);

  transition:
    border var(--transition),
    transform var(--transition),
    background var(--transition);
}

.metric:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(208,135,178,.14);

  background:
    linear-gradient(
      145deg,
      rgba(208,135,178,.035),
      transparent 60%
    ),
    var(--surface);
}

.metric::after {
  position: absolute;
  right: -40px;
  bottom: -65px;

  width: 120px;
  height: 120px;

  content: "";

  border-radius: 50%;

  background:
    rgba(208,135,178,.04);

  filter:
    blur(25px);

  pointer-events: none;
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  color: var(--muted);

  font-size: 10px;
  font-weight: 700;
}

.metric > strong {
  display: block;

  margin-top: 16px;

  font-size: 27px;

  letter-spacing: -.04em;
}

.metric > small {
  display: block;

  margin-top: 4px;

  font-size: 9px;
}

.metric-indicator {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    #55515a;
}

.metric-indicator.live {
  background:
    var(--success);

  box-shadow:
    0 0 9px
    rgba(145,215,180,.5);
}


/* =========================================================
   PANELS
   ========================================================= */

.panel {
  position: relative;

  padding: 19px;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.018),
      transparent 55%
    ),
    var(--surface);

  box-shadow:
    var(--shadow);
}

.panelhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 15px;

  gap: 14px;
}

.stack {
  display: flex;
  flex-direction: column;

  gap: 7px;
}


/* =========================================================
   ROWS
   ========================================================= */

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-width: 0;

  min-height: 48px;

  padding: 10px 12px;

  gap: 14px;

  border:
    1px solid rgba(255,255,255,.035);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.012);

  transition:
    background var(--transition),
    border var(--transition),
    transform var(--transition);
}

.row:hover {
  border-color:
    rgba(208,135,178,.09);

  background:
    rgba(208,135,178,.026);
}

.row > div {
  min-width: 0;
}

.row > div > strong,
.row > div > small {
  display: block;
}

.row > div > strong {
  color:
    var(--text-soft);

  font-size: 11px;
}

.row > div > small {
  margin-top: 3px;

  line-height: 1.4;

  font-size: 9px;
}

.row > span {
  color:
    var(--muted);

  font-size: 10px;
}

.row > strong {
  color:
    var(--text-soft);

  font-size: 10px;
}


/* =========================================================
   ACTIVITY LIST
   ========================================================= */

.activity-list {
  display: flex;
  flex-direction: column;

  gap: 7px;
}


/* =========================================================
   BADGES
   ========================================================= */

.badge {
  display: inline-flex;
  align-items: center;

  min-height: 25px;

  padding: 0 8px;

  flex: 0 0 auto;

  border:
    1px solid var(--border);

  border-radius: 999px;

  background:
    rgba(255,255,255,.018);

  color:
    var(--muted);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .05em;
  text-transform: uppercase;
}

.badge.success {
  border-color:
    rgba(145,215,180,.15);

  background:
    var(--success-soft);

  color:
    var(--success);
}

.live-badge {
  border-color:
    rgba(208,135,178,.18);

  background:
    var(--accent-soft);

  color:
    var(--accent-bright);

  text-shadow:
    0 0 8px
    rgba(208,135,178,.25);
}


/* =========================================================
   FORMS
   ========================================================= */

form {
  display: flex;
  flex-direction: column;

  gap: 14px;
}

label {
  display: flex;
  flex-direction: column;

  gap: 7px;

  color:
    var(--text-soft);

  font-size: 10px;
  font-weight: 650;
}

label > small {
  font-weight: 450;
}

input,
select {
  width: 100%;
  min-height: 41px;

  padding:
    0 12px;

  outline: 0;

  border:
    1px solid var(--border);

  border-radius:
    11px;

  background:
    #0c0c10;

  color:
    var(--text);

  font-size: 11px;

  transition:
    border var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

input:focus,
select:focus {
  border-color:
    rgba(208,135,178,.35);

  background:
    #0e0e12;

  box-shadow:
    0 0 0 3px
    rgba(208,135,178,.055);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 38px;

  padding:
    0 14px;

  cursor: pointer;

  border:
    1px solid var(--border);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.025);

  color:
    var(--text-soft);

  font-size: 10px;
  font-weight: 700;

  text-decoration: none;

  transition:
    background var(--transition),
    border var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.btn:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--border-strong);

  background:
    rgba(255,255,255,.045);
}

.btn.primary {
  border-color:
    rgba(208,135,178,.24);

  background:
    linear-gradient(
      135deg,
      rgba(208,135,178,.22),
      rgba(208,135,178,.11)
    );

  color:
    #f3d6e7;

  box-shadow:
    inset 0 0 18px
    rgba(208,135,178,.025);
}

.btn.primary:hover {
  border-color:
    rgba(208,135,178,.4);

  box-shadow:
    0 0 24px
    rgba(208,135,178,.08);
}

.btn.danger {
  border-color:
    rgba(239,125,136,.20);

  background:
    var(--danger-soft);

  color:
    #f09aa3;
}

.btn.danger:hover {
  border-color:
    rgba(239,125,136,.35);
}

.btn.ghost {
  background:
    transparent;
}

.btn.icon {
  width: 34px;
  min-width: 34px;

  padding: 0;
}

.btn.wide {
  width: 100%;
}


/* =========================================================
   PERMISSIONS / ROLLEN & RECHTE
   ========================================================= */

.permission-editor {
  display: flex;
  flex-direction: column;

  margin-top: 12px;

  gap: 14px;
}

.perm-group {
  padding: 15px;

  border:
    1px solid var(--border);

  border-radius:
    13px;

  background:
    rgba(255,255,255,.012);
}

.perm-group h3 {
  margin:
    0 0 12px;

  color:
    var(--accent-bright);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .10em;
  text-transform: uppercase;
}

.checks {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;
}

.check {
  display: flex;
  flex-direction: row;
  align-items: center;

  min-height: 42px;

  padding:
    9px 11px;

  gap: 11px;

  cursor: pointer;

  border:
    1px solid rgba(255,255,255,.045);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.014);

  color:
    #cfccd2;

  font-size: 12px;
  font-weight: 560;

  line-height: 1.35;

  transition:
    background var(--transition),
    border var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.check:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(208,135,178,.17);

  background:
    rgba(208,135,178,.045);

  color:
    var(--text);
}

.check:has(input:checked) {
  border-color:
    rgba(208,135,178,.23);

  background:
    linear-gradient(
      90deg,
      rgba(208,135,178,.09),
      rgba(208,135,178,.025)
    );

  color:
    #f0d7e6;
}

.check input {
  appearance: none;
  -webkit-appearance: none;

  position: relative;

  width: 19px;
  height: 19px;
  min-width: 19px;
  min-height: 19px;

  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  cursor: pointer;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius:
    5px;

  background:
    #0b0b0f;

  box-shadow:
    inset 0 0 0 1px
    rgba(0,0,0,.18);

  transition:
    background var(--transition),
    border var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.check input:hover {
  border-color:
    rgba(208,135,178,.45);
}

.check input:checked {
  border-color:
    var(--accent);

  background:
    linear-gradient(
      145deg,
      var(--accent-bright),
      var(--accent)
    );

  box-shadow:
    0 0 12px
    rgba(208,135,178,.22);
}

.check input:checked::after {
  position: absolute;
  top: 2px;
  left: 5px;

  width: 5px;
  height: 9px;

  content: "";

  border:
    solid #22161e;

  border-width:
    0 2px 2px 0;

  transform:
    rotate(45deg);
}

.check span {
  flex: 1;

  user-select: none;
}

.labeltext {
  color:
    var(--text-soft);

  font-size: 12px;
  font-weight: 700;
}

.chips {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 9px;
}

.chip {
  padding:
    4px 7px;

  border:
    1px solid var(--border);

  border-radius:
    999px;

  color:
    var(--muted);

  font-size: 8px;
}


/* =========================================================
   TWITCH
   ========================================================= */

.twitch-account {
  position: relative;

  display: flex;
  align-items: center;

  padding: 15px;

  gap: 13px;

  overflow: hidden;

  border:
    1px solid var(--accent-border);

  border-radius:
    14px;

  background:
    linear-gradient(
      110deg,
      rgba(208,135,178,.11),
      rgba(208,135,178,.025)
    );
}

.twitch-account::after {
  position: absolute;
  top: -45px;
  right: -35px;

  width: 110px;
  height: 110px;

  content: "";

  border-radius: 50%;

  background:
    rgba(208,135,178,.10);

  filter:
    blur(30px);
}

.twitch-avatar {
  position: relative;
  z-index: 1;

  width: 55px;
  height: 55px;

  flex: 0 0 auto;

  object-fit: cover;

  border:
    1px solid rgba(208,135,178,.28);

  border-radius:
    14px;
}

.twitch-account-info {
  position: relative;
  z-index: 1;

  min-width: 0;
}

.twitch-account-info strong,
.twitch-account-info span,
.twitch-account-info small {
  display: block;
}

.account-kicker {
  margin-bottom: 4px;

  color:
    var(--muted) !important;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: .14em;
}

.twitch-account-info strong {
  font-size: 15px;
}

.twitch-account-info
#twitch-login {
  margin-top: 2px;

  color:
    var(--accent-bright);

  font-size: 10px;
}

.twitch-account-info small {
  margin-top: 4px;

  font-size: 8px;
}

.twitch-details {
  margin-top: 13px;
}

.twitch-actions {
  display: flex;
  flex-wrap: wrap;

  margin-top: 13px;

  gap: 8px;
}

.connect-link {
  margin-top: 12px;
}

.twitch-empty {
  text-align: center;
}

.empty-icon {
  display: grid;
  place-items: center;

  width: 43px;
  height: 43px;

  margin:
    0 auto
    13px;

  border:
    1px solid var(--accent-border);

  border-radius:
    13px;

  background:
    var(--accent-soft);

  color:
    var(--accent-bright);

  font-size: 13px;
  font-weight: 850;

  text-shadow:
    0 0 8px
    var(--accent-glow);
}


/* =========================================================
   EMPTY / PLACEHOLDER
   ========================================================= */

.empty,
.placeholder {
  padding: 24px;

  border:
    1px dashed
    rgba(255,255,255,.075);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.008);

  color:
    var(--muted);

  font-size: 10px;
  line-height: 1.65;
}

.empty strong {
  display: block;

  margin-bottom: 5px;

  color:
    var(--text-soft);

  font-size: 11px;
}

.empty p {
  margin:
    5px 0 0;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.message,
.error {
  min-height: 16px;

  margin-top: 8px;

  color:
    var(--accent-bright);

  font-size: 9px;
}

.error {
  color:
    var(--danger);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 1100px
) {

  .metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (
  max-width: 900px
) {

  .shell,
  .shell.sidebar-mini {
    display: block;
  }

  .sidebar {
    position: relative;

    width: 100%;
    height: auto;
    min-height: 0;

    border-right: 0;
    border-bottom:
      1px solid var(--border);
  }

  .sidebar-collapse-btn {
    display: none;
  }

  .shell.sidebar-mini
  .brand-copy,
  .shell.sidebar-mini
  .navgroup-title,
  .shell.sidebar-mini
  .nav-chevron,
  .shell.sidebar-mini
  .navitem-text,
  .shell.sidebar-mini
  .sidefooter-text,
  .shell.sidebar-mini
  .userdetails {
    display: initial;
  }

  .shell.sidebar-mini
  .sidebar-top {
    flex-direction: row;
  }

  .shell.sidebar-mini
  .navgroup-toggle {
    height: auto;
    min-height: auto;

    padding:
      8px 10px 7px;

    pointer-events: auto;
  }

  .shell.sidebar-mini
  .navitem {
    justify-content:
      flex-start;

    padding:
      0 11px;

    font-size:
      12px;
  }

  .shell.sidebar-mini
  .navitem::before {
    display: none;
  }

  .shell.sidebar-mini
  .navitem
  .nav-dot {
    display: block;
  }

  .shell.sidebar-mini
  .useravatar {
    display: grid;
  }

  .main {
    padding:
      24px 18px
      45px;
  }

  .grid2 {
    grid-template-columns:
      1fr;
  }

}


@media (
  max-width: 650px
) {

  .topbar {
    display: block;

    min-height: auto;

    padding-bottom: 18px;
  }

  .topstatus {
    margin-top: 16px;
  }

  .metrics,
  .metrics-community {
    grid-template-columns:
      1fr;
  }

  .checks {
    grid-template-columns:
      1fr;
  }

  .panel {
    padding: 15px;
  }

  .row {
    align-items:
      flex-start;
  }

  .twitch-actions {
    flex-direction:
      column;
  }

  .twitch-actions
  .btn {
    width: 100%;
  }

}

/* =========================================================
   ROLE CARDS / ROLE EDITOR
   ========================================================= */

#roles-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.role-card {
  appearance: none;
  -webkit-appearance: none;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  width: 100%;
  min-height: 100px;

  padding: 16px;

  gap: 18px;

  cursor: pointer;

  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018),
      rgba(255, 255, 255, 0.005)
    ),
    #101014;

  color: var(--text);

  font: inherit;
  text-align: left;

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.12);

  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.role-card:hover {
  transform: translateY(-2px);

  border-color:
    rgba(208, 135, 178, 0.20);

  background:
    linear-gradient(
      135deg,
      rgba(208, 135, 178, 0.065),
      rgba(208, 135, 178, 0.015)
    ),
    #111115;

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.18),
    0 0 25px rgba(208, 135, 178, 0.025);
}

.role-card.selected {
  border-color:
    rgba(208, 135, 178, 0.35);

  background:
    linear-gradient(
      135deg,
      rgba(208, 135, 178, 0.11),
      rgba(208, 135, 178, 0.025)
    ),
    #111115;

  box-shadow:
    inset 0 0 30px rgba(208, 135, 178, 0.025),
    0 0 28px rgba(208, 135, 178, 0.045);
}


/* LINKER INHALT */

.role-card-content {
  min-width: 0;
  flex: 1;
}

.role-card-content > strong {
  display: block;

  margin: 0;

  color: #f2eef2;

  font-size: 14px;
  font-weight: 700;

  line-height: 1.3;
}

.role-card-content > small {
  display: block;

  margin-top: 5px;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.5;
}


/* PERMISSION CHIPS INNERHALB DER ROLLE */

.role-card .chips {
  display: flex;
  flex-wrap: wrap;

  margin-top: 12px;

  gap: 6px;
}

.role-card .chip {
  display: inline-flex;
  align-items: center;

  min-height: 23px;

  padding: 0 8px;

  border:
    1px solid rgba(255, 255, 255, 0.055);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.018);

  color: #99949d;

  font-size: 8px;
  font-weight: 550;

  white-space: nowrap;
}


/* RECHTE SEITE */

.role-card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  flex: 0 0 auto;

  gap: 10px;
}

.role-edit-hint {
  color: #77727b;

  font-size: 9px;
  font-weight: 700;

  white-space: nowrap;

  transition:
    color var(--transition),
    text-shadow var(--transition);
}

.role-card:hover .role-edit-hint {
  color: var(--accent-bright);
}

.role-card.selected .role-edit-hint {
  color: var(--accent-bright);

  text-shadow:
    0 0 8px rgba(208, 135, 178, 0.25);
}


/* SYSTEM / CUSTOM BADGE */

.role-card .badge {
  background:
    rgba(255, 255, 255, 0.018);

  color: #8f8a93;
}


/* EDITOR BUTTONS */

.role-editor-actions {
  display: flex;
  align-items: center;

  width: 100%;

  margin-top: -5px;

  gap: 8px;
}

.role-editor-actions .btn.danger {
  margin-left: auto;
}


/* DEAKTIVIERTE OWNER FELDER */

#page-roles input:disabled {
  cursor: not-allowed;

  opacity: 0.55;
}

#page-roles .check input:disabled {
  cursor: not-allowed;

  opacity: 0.55;
}

#page-roles .check:has(input:disabled) {
  cursor: not-allowed;

  opacity: 0.7;
}


/* MOBILE */

@media (max-width: 650px) {

  .role-card {
    flex-direction: column;

    min-height: auto;
  }

  .role-card-side {
    width: 100%;

    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .role-editor-actions {
    flex-direction: column;
  }

  .role-editor-actions .btn {
    width: 100%;
  }

  .role-editor-actions .btn.danger {
    margin-left: 0;
  }
}
/* =========================================================
   USER CARDS / USER EDITOR
   ========================================================= */

#users-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* USER CARD */

.user-card {
  appearance: none;
  -webkit-appearance: none;

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

  width: 100%;
  min-height: 82px;

  padding: 14px 15px;

  gap: 18px;

  cursor: pointer;

  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018),
      rgba(255, 255, 255, 0.005)
    ),
    #101014;

  color: var(--text);

  font: inherit;
  text-align: left;

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.12);

  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}


.user-card:hover {
  transform: translateY(-2px);

  border-color:
    rgba(208, 135, 178, 0.20);

  background:
    linear-gradient(
      135deg,
      rgba(208, 135, 178, 0.065),
      rgba(208, 135, 178, 0.015)
    ),
    #111115;

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.18),
    0 0 25px rgba(208, 135, 178, 0.025);
}


.user-card.selected {
  border-color:
    rgba(208, 135, 178, 0.35);

  background:
    linear-gradient(
      135deg,
      rgba(208, 135, 178, 0.11),
      rgba(208, 135, 178, 0.025)
    ),
    #111115;

  box-shadow:
    inset 0 0 30px rgba(208, 135, 178, 0.025),
    0 0 28px rgba(208, 135, 178, 0.045);
}


/* LINKE SEITE */

.user-card-main {
  display: flex;
  align-items: center;

  min-width: 0;
  flex: 1;

  gap: 12px;
}


.user-card-avatar {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;

  flex: 0 0 auto;

  border:
    1px solid rgba(208, 135, 178, 0.20);

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(208, 135, 178, 0.14),
      rgba(208, 135, 178, 0.035)
    );

  color: var(--accent-bright);

  font-size: 12px;
  font-weight: 800;

  text-shadow:
    0 0 8px rgba(208, 135, 178, 0.28);
}


.user-card-content {
  min-width: 0;
  flex: 1;
}


.user-card-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;
}


.user-card-name strong {
  color: var(--text);

  font-size: 13px;
  font-weight: 700;
}


.user-card-content > small {
  display: block;

  margin-top: 5px;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.5;
}


/* RECHTE SEITE */

.user-card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  flex: 0 0 auto;

  gap: 9px;
}


.user-edit-hint {
  color: #77727b;

  font-size: 9px;
  font-weight: 700;

  white-space: nowrap;

  transition:
    color var(--transition),
    text-shadow var(--transition);
}


.user-card:hover
.user-edit-hint {
  color: var(--accent-bright);
}


.user-card.selected
.user-edit-hint {
  color: var(--accent-bright);

  text-shadow:
    0 0 8px rgba(208, 135, 178, 0.25);
}


/* =========================================================
   USER EDITOR
   ========================================================= */

.user-editor-actions {
  display: flex;
  align-items: center;

  width: 100%;

  margin-top: -4px;

  gap: 8px;
}


.user-password-reset {
  display: flex;
  flex-direction: column;

  margin-top: 8px;
  padding-top: 16px;

  gap: 10px;

  border-top:
    1px solid var(--border);
}


.user-password-reset .labeltext {
  color: var(--accent-bright);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.02em;
}


#user-reset-password {
  min-height: 42px;
}


/* =========================================================
   USER STATUS SELECT
   ========================================================= */

#user-status-field {
  margin-top: 0;
}


#user-status {
  cursor: pointer;
}


/* =========================================================
   DISABLED USER FIELDS
   ========================================================= */

#page-users input:disabled,
#page-users select:disabled {
  cursor: not-allowed;

  opacity: 0.55;

  background:
    rgba(255, 255, 255, 0.012);
}


/* =========================================================
   MOBILE USER CARDS
   ========================================================= */

@media (max-width: 650px) {

  .user-card {
    align-items: flex-start;

    flex-direction: column;

    min-height: auto;
  }


  .user-card-side {
    width: 100%;

    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }


  .user-editor-actions {
    flex-direction: column;
  }


  .user-editor-actions .btn {
    width: 100%;
  }

}

/* =========================================================
   DASHBOARD DIALOG
   ========================================================= */

.dashboard-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;

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

  padding: 24px;

  background:
    rgba(4, 4, 7, 0.78);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


.dashboard-dialog-overlay.hidden {
  display: none;
}


.dashboard-dialog {
  width: min(
    460px,
    100%
  );

  padding: 26px;

  border:
    1px solid
    rgba(208, 135, 178, 0.24);

  border-radius:
    16px;

  background:
    linear-gradient(
      180deg,
      rgba(208, 135, 178, 0.055),
      transparent 34%
    ),
    var(--surface);

  box-shadow:
    0 28px 90px
      rgba(0, 0, 0, 0.58),
    0 0 44px
      rgba(208, 135, 178, 0.08);

  animation:
    dashboard-dialog-in
    160ms
    ease-out;
}


.dashboard-dialog-kicker {
  margin-bottom:
    8px;

  color:
    var(--accent-bright);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.14em;
}


.dashboard-dialog h2 {
  margin:
    0 0 10px;

  color:
    var(--text);

  font-size:
    22px;

  line-height:
    1.2;
}


.dashboard-dialog p {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.65;
}


.dashboard-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap:
    10px;

  margin-top:
    24px;
}


.dashboard-dialog-actions .btn {
  min-width:
    120px;
}


@keyframes dashboard-dialog-in {
  from {
    opacity:
      0;

    transform:
      translateY(8px)
      scale(0.985);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }
}


@media (
  max-width: 560px
) {
  .dashboard-dialog-overlay {
    padding:
      16px;
  }


  .dashboard-dialog {
    padding:
      22px;
  }


  .dashboard-dialog-actions {
    flex-direction:
      column-reverse;
  }


  .dashboard-dialog-actions .btn {
    width:
      100%;
  }
}


/* COMMUNITY EVENT CARDS V2 */

.activity-list,
#follows-list,
#subs-list,
#raids-list,
#community-latest-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.community-event-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;

  padding: 14px 16px;

  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025),
      rgba(208, 135, 178, 0.018)
    );

  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}


.community-event-card:hover {
  border-color: rgba(208, 135, 178, 0.22);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.04),
      rgba(208, 135, 178, 0.035)
    );

  transform: translateY(-1px);
}


.community-event-avatar {
  width: 42px;
  height: 42px;

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

  flex-shrink: 0;

  border: 1px solid rgba(208, 135, 178, 0.25);
  border-radius: 12px;

  background: rgba(208, 135, 178, 0.08);

  color: #e5a6cb;

  font-size: 15px;
  font-weight: 800;
}


.community-event-content {
  min-width: 0;
}


.community-event-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}


.community-event-user {
  min-width: 0;

  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}


.community-event-user strong {
  color: rgba(255, 255, 255, 0.94);

  font-size: 14px;
  font-weight: 700;

  overflow-wrap: anywhere;
}


.community-event-user span {
  color: rgba(255, 255, 255, 0.43);

  font-size: 11px;
  font-weight: 500;
}


.community-event-type {
  flex-shrink: 0;

  padding: 4px 8px;

  border: 1px solid rgba(208, 135, 178, 0.24);
  border-radius: 999px;

  background: rgba(208, 135, 178, 0.08);

  color: #d99abc;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.community-event-description {
  margin-top: 6px;

  color: rgba(255, 255, 255, 0.68);

  font-size: 12px;
  line-height: 1.5;
}


.community-event-time {
  display: block;

  margin-top: 6px;

  color: rgba(255, 255, 255, 0.37);

  font-size: 10px;
  font-weight: 500;
}


@media (max-width: 640px) {

  .community-event-card {
    grid-template-columns: 36px minmax(0, 1fr);

    padding: 12px;
  }


  .community-event-avatar {
    width: 36px;
    height: 36px;
  }


  .community-event-head {
    gap: 8px;
  }

}



/* COMMUNITY TWITCH PROFILE LINKS */

.community-event-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}


.community-event-link:hover {
  text-decoration: none;
}


.community-event-link:focus-visible {
  outline: 2px solid rgba(208, 135, 178, 0.65);
  outline-offset: 3px;
}


.community-event-link:hover
.community-event-user strong {
  color: #e5a6cb;
}



/* TWITCH PROFILE CONFIRM MODAL */

.confirm-modal-overlay {
  position: fixed;
  inset: 0;

  z-index: 9999;

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

  padding: 20px;

  background: rgba(5, 5, 8, 0.78);

  backdrop-filter: blur(8px);
}


.confirm-modal {
  width: min(460px, 100%);

  padding: 24px;

  border: 1px solid rgba(208, 135, 178, 0.22);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(25, 23, 28, 0.99),
      rgba(14, 13, 17, 0.99)
    );

  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(208, 135, 178, 0.07);
}


.confirm-modal-icon {
  width: 44px;
  height: 44px;

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

  margin-bottom: 18px;

  border: 1px solid rgba(208, 135, 178, 0.26);
  border-radius: 12px;

  background: rgba(208, 135, 178, 0.08);

  color: #e3a1c7;

  font-size: 20px;
  font-weight: 700;
}


.confirm-modal-content h3 {
  margin:
    5px
    0
    12px;

  color: rgba(255, 255, 255, 0.96);

  font-size: 20px;
}


.confirm-modal-content p {
  margin: 0;

  color: rgba(255, 255, 255, 0.70);

  font-size: 14px;
  line-height: 1.6;
}


.confirm-modal-content p strong {
  color: #e0a0c4;
}


.confirm-modal-content small {
  display: block;

  margin-top: 10px;

  color: rgba(255, 255, 255, 0.38);

  font-size: 11px;
  line-height: 1.5;
}


.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  margin-top: 24px;
}


@media (max-width: 520px) {

  .confirm-modal-actions {
    flex-direction: column-reverse;
  }


  .confirm-modal-actions .btn {
    width: 100%;
  }

}



/* COMMANDS UI FIX V1 */

.commands-grid {
  display: grid;
  grid-template-columns:
    minmax(340px, 0.9fr)
    minmax(420px, 1.3fr);
  gap: 18px;
  align-items: start;
}


#command-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


#command-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}


#command-response {
  resize: vertical;
  min-height: 125px;
  line-height: 1.5;
}


.command-name-input {
  display: grid;
  grid-template-columns: 42px 1fr;
  overflow: hidden;

  border: 1px solid
    rgba(255,255,255,.09);

  border-radius: 10px;
}


.command-name-input > span {
  display: flex;
  align-items: center;
  justify-content: center;

  background:
    rgba(208,135,178,.07);

  border-right:
    1px solid
    rgba(255,255,255,.07);

  color: #d99abc;

  font-weight: 800;
}


.command-name-input input {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}


.command-character-count {
  align-self: flex-end;

  color:
    rgba(255,255,255,.35);
}


.command-fields {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 10px;
}


.command-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}


#command-submit-btn {
  margin-left: auto;
}


.commands-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.command-card {
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 10px;
  align-items: center;

  padding: 5px;

  border: 1px solid
    rgba(255,255,255,.07);

  border-radius: 13px;

  background:
    rgba(255,255,255,.02);
}


.command-card.selected {
  border-color:
    rgba(208,135,178,.4);

  box-shadow:
    0 0 0 3px
    rgba(208,135,178,.05);
}


.command-card-content {
  min-width: 0;

  padding: 12px;

  border: 0;

  background: transparent;

  color: inherit;

  text-align: left;
  cursor: pointer;
}


.command-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
}


.command-card-header strong {
  color: #e0a0c4;

  font-size: 15px;
}


.command-card-content p {
  margin: 8px 0 10px;

  color:
    rgba(255,255,255,.65);

  font-size: 12px;
  line-height: 1.5;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


.command-card-info {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}


.command-card-info span {
  padding: 4px 7px;

  border: 1px solid
    rgba(255,255,255,.06);

  border-radius: 7px;

  color:
    rgba(255,255,255,.4);

  font-size: 9px;
}


.command-state {
  padding: 3px 7px;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 800;
}


.command-state.active {
  background:
    rgba(104,200,137,.08);

  color:
    rgba(151,229,178,.9);
}


.command-state.disabled {
  background:
    rgba(255,255,255,.04);

  color:
    rgba(255,255,255,.35);
}


.command-warning {
  margin-bottom: 14px;

  padding: 11px;

  border: 1px solid
    rgba(208,135,178,.16);

  border-radius: 10px;

  color:
    rgba(255,255,255,.55);
}


@media (max-width: 1000px) {
  .commands-grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 650px) {
  .command-fields {
    grid-template-columns: 1fr;
  }

  .command-card {
    grid-template-columns: 1fr;
  }

  #command-submit-btn {
    width: 100%;
    margin-left: 0;
  }
}



/* COMMAND FIELD TWEAK V1 */

#command-response {
  width: 100%;
  min-height: 105px;
  max-height: 220px;

  padding: 12px 13px;

  resize: vertical;

  line-height: 1.5;
}


.command-response-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-top: 2px;

  color:
    rgba(255,255,255,.34);
}


.command-character-count {
  margin-left: auto;
  white-space: nowrap;
}


.command-cooldown-input {
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    auto;

  align-items: stretch;

  overflow: hidden;

  border: 1px solid
    rgba(255,255,255,.09);

  border-radius: 10px;

  background:
    rgba(255,255,255,.02);
}


.command-cooldown-input:focus-within {
  border-color:
    rgba(208,135,178,.4);

  box-shadow:
    0 0 0 3px
    rgba(208,135,178,.06);
}


.command-cooldown-input input {
  min-width: 0;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
}


.command-cooldown-input > span {
  display: flex;
  align-items: center;

  padding: 0 11px;

  border-left: 1px solid
    rgba(255,255,255,.07);

  background:
    rgba(208,135,178,.045);

  color:
    rgba(255,255,255,.45);

  font-size: 10px;
  font-weight: 600;
}


.command-field-hint {
  color:
    rgba(255,255,255,.32);

  font-size: 9px;
}


/* COMMAND RESPONSE DESIGN V2 */

#command-response {
  width: 100%;

  background:
    linear-gradient(
      145deg,
      rgba(18, 17, 22, 0.96),
      rgba(14, 13, 18, 0.96)
    ) !important;

  color:
    rgba(255, 255, 255, 0.88) !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.09) !important;

  border-radius: 11px !important;

  padding: 12px 13px;

  outline: none;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.02);

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}


#command-response::placeholder {
  color:
    rgba(255, 255, 255, 0.28);
}


#command-response:hover {
  border-color:
    rgba(208, 135, 178, 0.18) !important;
}


#command-response:focus {
  border-color:
    rgba(208, 135, 178, 0.48) !important;

  background:
    linear-gradient(
      145deg,
      rgba(22, 19, 24, 0.98),
      rgba(15, 14, 19, 0.98)
    ) !important;

  box-shadow:
    0 0 0 3px
      rgba(208, 135, 178, 0.065),
    0 0 22px
      rgba(208, 135, 178, 0.035);
}


#command-response:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}



/* =========================================================
   MODERATION UI V1
   ========================================================= */

.moderation-subnav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding: 5px;
  width: fit-content;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: rgba(12,11,15,.74);
}

.moderation-tab {
  border: 0;
  border-radius: 9px;
  padding: 9px 14px;
  background: transparent;
  color: rgba(255,255,255,.48);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.moderation-tab:hover {
  color: rgba(255,255,255,.78);
}

.moderation-tab.active {
  color: rgba(255,255,255,.94);
  background: rgba(208,135,178,.11);
  box-shadow:
    inset 0 0 0 1px rgba(208,135,178,.18),
    0 0 18px rgba(208,135,178,.035);
}

.moderation-warning {
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(208,135,178,.18);
  border-radius: 10px;
  background: rgba(208,135,178,.055);
  color: rgba(255,255,255,.66);
  font-size: 11px;
}

.moderation-metrics {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.moderation-panel {
  min-width: 0;
}

.moderation-toolbar {
  display: grid;
  grid-template-columns:
    minmax(220px, 1fr) 190px;
  gap: 10px;
  margin-bottom: 14px;
}

.moderation-search,
.moderation-select {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(15,14,18,.88);
  color: rgba(255,255,255,.82);
  padding: 0 12px;
  outline: none;
}

.moderation-search:focus,
.moderation-select:focus {
  border-color: rgba(208,135,178,.42);
  box-shadow:
    0 0 0 3px rgba(208,135,178,.06);
}

.moderation-users-list,
.moderation-action-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.moderation-user-row,
.moderation-action-row {
  width: 100%;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px;
  background:
    linear-gradient(
      145deg,
      rgba(18,17,22,.88),
      rgba(13,12,16,.88)
    );
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    transform 150ms ease,
    background 150ms ease;
}

.moderation-user-row:hover,
.moderation-action-row:hover {
  border-color: rgba(208,135,178,.22);
  background:
    linear-gradient(
      145deg,
      rgba(21,18,23,.96),
      rgba(15,13,18,.96)
    );
}

.moderation-user-row {
  display: grid;
  grid-template-columns:
    46px minmax(180px, 1fr)
    115px 170px 20px;
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
}

.moderation-user-avatar,
.moderation-profile-avatar {
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(208,135,178,.18);
  background: rgba(208,135,178,.08);
  color: rgba(255,255,255,.82);
  font-weight: 700;
}

.moderation-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.moderation-user-avatar img,
.moderation-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moderation-user-name {
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 650;
}

.moderation-user-login,
.moderation-profile-login {
  margin-top: 2px;
  color: rgba(255,255,255,.36);
  font-size: 10px;
}

.moderation-user-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.moderation-user-badge,
.moderation-action-type,
.moderation-active-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
}

.moderation-user-badge {
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.52);
  background: rgba(255,255,255,.035);
}

.moderation-user-badge.broadcaster,
.moderation-user-badge.vip,
.moderation-user-badge.subscriber {
  border-color: rgba(208,135,178,.2);
  color: rgba(234,177,211,.88);
  background: rgba(208,135,178,.07);
}

.moderation-user-badge.banned,
.moderation-user-badge.timeout {
  border-color: rgba(255,115,115,.18);
  color: rgba(255,164,164,.9);
  background: rgba(255,90,90,.055);
}

.moderation-user-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.moderation-user-stat span {
  color: rgba(255,255,255,.3);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.moderation-user-stat strong {
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 550;
}

.moderation-row-arrow {
  color: rgba(208,135,178,.5);
  font-size: 22px;
}

.moderation-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
}

.moderation-action-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 800;
}

.moderation-action-icon.ban,
.moderation-action-icon.timeout {
  color: rgba(255,164,164,.88);
  border-color: rgba(255,100,100,.13);
}

.moderation-action-icon.warning {
  color: rgba(255,211,133,.88);
}

.moderation-action-icon.unban {
  color: rgba(152,224,181,.88);
}

.moderation-action-main {
  min-width: 0;
  flex: 1;
}

.moderation-action-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.moderation-action-title strong {
  color: rgba(255,255,255,.86);
  font-size: 12px;
}

.moderation-action-type {
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.025);
}

.moderation-action-type.ban,
.moderation-action-type.timeout {
  color: rgba(255,159,159,.84);
  border-color: rgba(255,105,105,.13);
}

.moderation-action-type.warning {
  color: rgba(255,211,133,.84);
}

.moderation-action-type.unban {
  color: rgba(152,224,181,.84);
}

.moderation-active-pill {
  padding: 3px 6px;
  color: rgba(255,160,160,.92);
  background: rgba(255,85,85,.07);
  border: 1px solid rgba(255,105,105,.14);
}

.moderation-action-reason {
  margin-top: 5px;
  color: rgba(255,255,255,.56);
  font-size: 10px;
}

.moderation-action-meta {
  margin-top: 4px;
  color: rgba(255,255,255,.25);
  font-size: 8px;
}

.moderation-empty {
  padding: 24px 14px;
  border: 1px dashed rgba(255,255,255,.07);
  border-radius: 11px;
  color: rgba(255,255,255,.3);
  font-size: 10px;
  text-align: center;
}


/* PROFILE */

.moderation-profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5,4,7,.76);
  backdrop-filter: blur(8px);
}

.moderation-profile-modal {
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid rgba(208,135,178,.15);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(19,17,22,.99),
      rgba(11,10,14,.99)
    );
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 0 45px rgba(208,135,178,.035);
}

.moderation-profile-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.moderation-profile-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.moderation-profile-avatar {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  font-size: 20px;
}

.moderation-profile-header h2 {
  margin: 3px 0 0;
}

.moderation-profile-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.45);
  cursor: pointer;
  font-size: 20px;
}

.moderation-profile-actions {
  display: flex;
  gap: 8px;
  padding: 14px 20px 0;
}

.moderation-profile-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 20px;
}

.moderation-profile-stats > div {
  padding: 11px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}

.moderation-profile-stats span {
  display: block;
  color: rgba(255,255,255,.28);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.moderation-profile-stats strong {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.7);
  font-size: 11px;
}

.moderation-profile-section {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.045);
}

.moderation-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  color: rgba(255,255,255,.74);
  font-size: 11px;
  font-weight: 650;
}

.moderation-profile-sanction {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}

.moderation-profile-sanction > div {
  display: flex;
  gap: 6px;
}

.moderation-profile-sanction strong {
  color: rgba(255,255,255,.63);
  font-size: 10px;
  font-weight: 500;
}

.moderation-profile-sanction small {
  color: rgba(255,255,255,.26);
  font-size: 8px;
}

.moderation-notes-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.moderation-note {
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}

.moderation-note-text {
  color: rgba(255,255,255,.65);
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.moderation-note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: rgba(255,255,255,.24);
  font-size: 8px;
}

.moderation-note-delete {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255,135,135,.62);
  font: inherit;
  cursor: pointer;
}

.moderation-note-form {
  margin-top: 10px;
}

.moderation-note-form textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 10px;
  padding: 11px;
  outline: none;
  background: rgba(12,11,15,.82);
  color: rgba(255,255,255,.77);
  font: inherit;
}

.moderation-note-form textarea:focus {
  border-color: rgba(208,135,178,.38);
  box-shadow:
    0 0 0 3px rgba(208,135,178,.05);
}

.moderation-note-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.moderation-note-form-footer small {
  color: rgba(255,255,255,.25);
  font-size: 8px;
}


@media (max-width: 900px) {

  .moderation-metrics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .moderation-user-row {
    grid-template-columns:
      42px minmax(0, 1fr) 20px;
  }

  .moderation-user-stat {
    display: none;
  }

  .moderation-profile-stats {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 600px) {

  .moderation-toolbar {
    grid-template-columns: 1fr;
  }

  .moderation-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .moderation-subnav {
    width: 100%;
  }

  .moderation-tab {
    flex: 1;
  }

  .moderation-profile-overlay {
    padding: 8px;
  }

  .moderation-profile-modal {
    max-height: calc(100vh - 16px);
  }
}


/* =========================================================
   MODERATION ACTION MODAL V1
   ========================================================= */

.moderation-action-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;

  display: grid;
  place-items: center;

  padding: 20px;

  background:
    rgba(5,4,7,.78);

  backdrop-filter:
    blur(9px);
}


.moderation-action-modal {
  width:
    min(520px, 100%);

  border:
    1px solid
    rgba(208,135,178,.16);

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(20,18,23,.99),
      rgba(11,10,14,.99)
    );

  box-shadow:
    0 30px 90px
      rgba(0,0,0,.58),
    0 0 40px
      rgba(208,135,178,.035);
}


.moderation-action-modal-header {
  display: flex;
  justify-content:
    space-between;

  gap: 16px;

  padding:
    19px 20px;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);
}


.moderation-action-modal-header h2 {
  margin:
    4px 0 0;
}


.moderation-action-form {
  display: flex;
  flex-direction:
    column;

  gap: 14px;

  padding:
    18px 20px 20px;
}


.moderation-action-form label {
  display: flex;
  flex-direction:
    column;

  gap: 7px;
}


.moderation-action-form select,
.moderation-action-form input,
.moderation-action-form textarea {
  width: 100%;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    10px;

  background:
    rgba(14,13,17,.9);

  color:
    rgba(255,255,255,.82);

  outline: none;

  font: inherit;
}


.moderation-action-form select,
.moderation-action-form input {
  min-height:
    40px;

  padding:
    0 11px;
}


.moderation-action-form textarea {
  min-height:
    95px;

  padding:
    11px 12px;

  resize:
    vertical;
}


.moderation-action-form select:focus,
.moderation-action-form input:focus,
.moderation-action-form textarea:focus {
  border-color:
    rgba(208,135,178,.42);

  box-shadow:
    0 0 0 3px
      rgba(208,135,178,.055);
}


.moderation-custom-duration {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    150px;

  gap: 8px;
}


.moderation-action-danger {
  padding:
    10px 11px;

  border:
    1px solid
    rgba(255,105,105,.16);

  border-radius:
    9px;

  background:
    rgba(255,80,80,.045);

  color:
    rgba(255,165,165,.75);

  font-size:
    9px;
}


.moderation-action-message {
  padding:
    10px 11px;

  border:
    1px solid
    rgba(255,105,105,.18);

  border-radius:
    9px;

  background:
    rgba(255,80,80,.05);

  color:
    rgba(255,165,165,.86);

  font-size:
    10px;
}


.moderation-action-buttons {
  display: flex;

  justify-content:
    flex-end;

  gap: 8px;

  padding-top:
    3px;
}


@media (max-width: 500px) {

  .moderation-action-overlay {
    padding: 8px;
  }


  .moderation-custom-duration {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   ANALYTICS UI V1
   ========================================================= */

.analytics-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.analytics-header h2 {
  margin: 4px 0 3px;
  font-size: 22px;
}

.analytics-header p {
  margin: 0;
  color: rgba(255,255,255,.34);
  font-size: 10px;
}

.analytics-tabs {
  display: flex;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px;
  background: rgba(12,11,15,.72);
}

.analytics-tab {
  min-width: 94px;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,.4);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  transition:
    color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.analytics-tab:hover {
  color: rgba(255,255,255,.72);
}

.analytics-tab.active {
  color: rgba(255,255,255,.92);
  background: rgba(208,135,178,.095);
  box-shadow:
    inset 0 0 0 1px rgba(208,135,178,.15),
    0 0 22px rgba(208,135,178,.025);
}

.analytics-message {
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(208,135,178,.18);
  border-radius: 11px;
  background: rgba(208,135,178,.05);
  color: rgba(255,255,255,.6);
  font-size: 10px;
}

.analytics-periodbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 13px;
}

.analytics-period-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,.24);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
}

.analytics-period-options {
  display: flex;
  gap: 5px;
}

.analytics-period-options button {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
  color: rgba(255,255,255,.34);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.analytics-period-options button.active {
  border-color: rgba(208,135,178,.18);
  background: rgba(208,135,178,.075);
  color: rgba(232,188,214,.86);
}

.analytics-period-range {
  padding-bottom: 5px;
  color: rgba(255,255,255,.24);
  font-size: 8px;
}

.analytics-kpis {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));
  gap: 9px;
  margin-bottom: 13px;
}

.analytics-kpi {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 13px;
  background:
    linear-gradient(
      145deg,
      rgba(19,18,22,.91),
      rgba(13,12,16,.91)
    );
}

.analytics-kpi::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -44px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(208,135,178,.055);
  filter: blur(18px);
}

.analytics-kpi.featured {
  border-color: rgba(208,135,178,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 0 30px rgba(208,135,178,.025);
}

.analytics-kpi > span {
  display: block;
  color: rgba(255,255,255,.32);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.analytics-kpi > strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,.9);
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.035em;
}

.analytics-kpi.featured > strong {
  color: #deb0cc;
  text-shadow:
    0 0 18px rgba(208,135,178,.12);
}

.analytics-kpi > small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.22);
  font-size: 7px;
}

.analytics-overview-grid {
  display: grid;
  grid-template-columns:
    minmax(0,1.65fr)
    minmax(260px,.75fr);
  gap: 12px;
}

.analytics-panel {
  min-width: 0;
}

.analytics-text-button {
  border: 0;
  background: transparent;
  color: rgba(208,135,178,.66);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.analytics-stream-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.analytics-stream-row {
  display: grid;
  grid-template-columns:
    92px
    minmax(160px,1fr)
    70px
    60px
    60px
    16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.052);
  border-radius: 10px;
  background: rgba(255,255,255,.014);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease;
}

.analytics-stream-row:hover {
  border-color: rgba(208,135,178,.16);
  background: rgba(208,135,178,.025);
}

.analytics-stream-row-date,
.analytics-stream-row-main,
.analytics-stream-row-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.analytics-stream-row-date strong {
  color: rgba(255,255,255,.6);
  font-size: 9px;
}

.analytics-stream-row-date span {
  color: rgba(208,135,178,.58);
  font-size: 7px;
}

.analytics-stream-row-main strong {
  overflow: hidden;
  color: rgba(255,255,255,.78);
  font-size: 10px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-stream-row-main span {
  color: rgba(255,255,255,.27);
  font-size: 8px;
}

.analytics-stream-row-stat {
  align-items: flex-end;
}

.analytics-stream-row-stat span {
  color: rgba(255,255,255,.21);
  font-size: 6px;
  text-transform: uppercase;
}

.analytics-stream-row-stat strong {
  color: rgba(255,255,255,.58);
  font-size: 10px;
}

.analytics-row-arrow {
  color: rgba(208,135,178,.42);
  font-size: 18px;
}

.analytics-list-empty,
.analytics-performance-empty {
  padding: 26px 14px;
  border: 1px dashed rgba(255,255,255,.06);
  border-radius: 10px;
  color: rgba(255,255,255,.25);
  font-size: 9px;
  text-align: center;
}

.analytics-performance {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.analytics-performance-card {
  padding: 13px;
  border: 1px solid rgba(255,255,255,.052);
  border-radius: 10px;
  background: rgba(255,255,255,.015);
}

.analytics-performance-card span {
  display: block;
  color: rgba(255,255,255,.23);
  font-size: 7px;
  letter-spacing: .07em;
}

.analytics-performance-card strong {
  display: block;
  margin-top: 6px;
  color: rgba(222,176,204,.88);
  font-size: 19px;
}

.analytics-performance-card small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: rgba(255,255,255,.27);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* STREAM SELECTOR */

.analytics-stream-toolbar {
  display: grid;
  grid-template-columns:
    38px
    minmax(260px,520px)
    38px;
  justify-content: center;
  gap: 7px;
  margin-bottom: 13px;
}

.analytics-stream-select,
.analytics-chart-select {
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(14,13,17,.92);
  color: rgba(255,255,255,.72);
  outline: none;
  font: inherit;
}

.analytics-stream-select {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  text-align: center;
}

.analytics-stream-select:focus,
.analytics-chart-select:focus {
  border-color: rgba(208,135,178,.36);
}

.analytics-stream-arrow {
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  color: rgba(208,135,178,.55);
  font-size: 20px;
  cursor: pointer;
}

.analytics-stream-arrow:hover {
  border-color: rgba(208,135,178,.18);
  color: rgba(232,188,214,.9);
}

.analytics-big-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 30px;
  border: 1px dashed rgba(255,255,255,.06);
  border-radius: 15px;
  background:
    radial-gradient(
      circle at center,
      rgba(208,135,178,.035),
      transparent 42%
    );
  text-align: center;
}

.analytics-empty-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border: 1px solid rgba(208,135,178,.13);
  border-radius: 18px;
  color: rgba(208,135,178,.6);
  font-size: 28px;
  box-shadow:
    0 0 28px rgba(208,135,178,.035);
}

.analytics-big-empty strong {
  color: rgba(255,255,255,.64);
  font-size: 12px;
}

.analytics-big-empty p {
  max-width: 360px;
  margin: 7px 0 0;
  color: rgba(255,255,255,.26);
  font-size: 9px;
  line-height: 1.6;
}


/* STREAM DETAIL */

.analytics-stream-hero {
  padding: 18px;
  border: 1px solid rgba(208,135,178,.09);
  border-radius: 15px;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(208,135,178,.055),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      rgba(19,17,22,.94),
      rgba(12,11,15,.94)
    );
}

.analytics-stream-hero-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}

.analytics-live-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analytics-live-badge {
  padding: 3px 6px;
  border: 1px solid rgba(208,135,178,.2);
  border-radius: 999px;
  background: rgba(208,135,178,.08);
  color: rgba(236,185,216,.9);
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .08em;
  box-shadow:
    0 0 14px rgba(208,135,178,.05);
}

.analytics-stream-date {
  color: rgba(255,255,255,.28);
  font-size: 8px;
}

.analytics-stream-hero h2 {
  max-width: 720px;
  margin: 8px 0 6px;
  color: rgba(255,255,255,.9);
  font-size: 20px;
  font-weight: 600;
}

.analytics-stream-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.35);
  font-size: 9px;
}

.analytics-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(208,135,178,.46);
}

.analytics-stream-idbox {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.analytics-stream-idbox span {
  color: rgba(255,255,255,.18);
  font-size: 6px;
  letter-spacing: .09em;
}

.analytics-stream-idbox strong {
  color: rgba(255,255,255,.35);
  font-size: 8px;
  font-weight: 500;
}

.analytics-stream-kpis {
  display: grid;
  grid-template-columns:
    repeat(6,minmax(0,1fr));
  gap: 8px;
  margin: 9px 0;
}

.analytics-stream-kpis article {
  padding: 11px;
  border: 1px solid rgba(255,255,255,.052);
  border-radius: 10px;
  background: rgba(255,255,255,.014);
}

.analytics-stream-kpis span {
  display: block;
  color: rgba(255,255,255,.24);
  font-size: 7px;
  text-transform: uppercase;
}

.analytics-stream-kpis strong {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.76);
  font-size: 16px;
  font-weight: 600;
}


/* CHART */

.analytics-chart-panel {
  overflow: hidden;
  margin-top: 9px;
}

.analytics-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.analytics-chart-select {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 9px;
}

.analytics-chart-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 2px 3px;
}

.analytics-chart-summary span {
  display: block;
  color: rgba(255,255,255,.24);
  font-size: 7px;
  letter-spacing: .08em;
}

.analytics-chart-summary strong {
  display: block;
  margin-top: 4px;
  color: rgba(226,183,208,.9);
  font-size: 27px;
  font-weight: 620;
  text-shadow:
    0 0 18px rgba(208,135,178,.08);
}

.analytics-chart-summary small {
  padding-bottom: 4px;
  color: rgba(255,255,255,.22);
  font-size: 7px;
}

.analytics-chart-wrap {
  position: relative;
  width: 100%;
  height: 330px;
  margin-top: 4px;
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      rgba(208,135,178,.012),
      transparent 62%
    );
}

#analytics-chart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.analytics-grid-line {
  stroke: rgba(255,255,255,.045);
  stroke-width: 1;
}

.analytics-chart-area {
  fill: url(#analyticsAreaGradient);
}

.analytics-chart-line-glow {
  fill: none;
  stroke: rgba(208,135,178,.27);
  stroke-width: 7;
  filter: url(#analyticsGlow);
}

.analytics-chart-line {
  fill: none;
  stroke: #d087b2;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.analytics-chart-point {
  fill: #e6b7d3;
  stroke: rgba(12,11,15,.9);
  stroke-width: 2;
  pointer-events: none;
}

.analytics-chart-point-hit {
  fill: rgba(208,135,178,.001);
  cursor: crosshair;
}

.analytics-chart-point-hit:hover + .analytics-chart-point {
  fill: #fff;
}

.analytics-chart-axis-text {
  fill: rgba(255,255,255,.2);
  font-size: 8px;
}

.analytics-chart-empty-text {
  fill: rgba(255,255,255,.22);
  font-size: 10px;
}


/* DETAIL BOTTOM */

.analytics-detail-grid {
  display: grid;
  grid-template-columns:
    1.3fr .7fr;
  gap: 9px;
  margin-top: 9px;
}

.analytics-detail-list {
  display: grid;
  grid-template-columns:
    repeat(5,minmax(0,1fr));
  gap: 7px;
}

.analytics-detail-list > div,
.analytics-mod-grid > div {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.048);
  border-radius: 9px;
  background: rgba(255,255,255,.012);
}

.analytics-detail-list span,
.analytics-mod-grid span {
  display: block;
  color: rgba(255,255,255,.21);
  font-size: 6px;
  text-transform: uppercase;
}

.analytics-detail-list strong,
.analytics-mod-grid strong {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.58);
  font-size: 9px;
  font-weight: 500;
}

.analytics-mod-grid {
  display: grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap: 7px;
}

.analytics-mod-grid strong {
  color: rgba(222,176,204,.82);
  font-size: 15px;
  font-weight: 600;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

  .analytics-kpis {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .analytics-overview-grid {
    grid-template-columns: 1fr;
  }

  .analytics-stream-kpis {
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .analytics-detail-grid {
    grid-template-columns: 1fr;
  }

  .analytics-detail-list {
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }
}


@media (max-width: 760px) {

  .analytics-header {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-tabs {
    width: 100%;
  }

  .analytics-tab {
    flex: 1;
  }

  .analytics-periodbar {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-period-options {
    overflow-x: auto;
  }

  .analytics-period-range {
    padding: 0;
  }

  .analytics-stream-row {
    grid-template-columns:
      78px minmax(0,1fr) 16px;
  }

  .analytics-stream-row-stat {
    display: none;
  }

  .analytics-stream-kpis {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .analytics-stream-hero-main {
    flex-direction: column;
  }

  .analytics-stream-idbox {
    align-items: flex-start;
  }

  .analytics-detail-list {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .analytics-chart-wrap {
    height: 260px;
  }
}


@media (max-width: 500px) {

  .analytics-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .analytics-stream-toolbar {
    grid-template-columns:
      34px minmax(0,1fr) 34px;
  }

  .analytics-stream-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .analytics-detail-list {
    grid-template-columns: 1fr 1fr;
  }
}


/* =========================================================
   ANALYSE CHART V2
   ========================================================= */

.analytics-chart-summary {
  align-items:
    center;
}


.analytics-chart-main-value {
  display: flex;
  flex-direction: column;
}


.analytics-chart-main-value > small {
  margin-top: 3px;

  color:
    rgba(255,255,255,.22);

  font-size:
    7px;
}


.analytics-chart-mini-stats {
  display: flex;

  align-items: stretch;

  gap: 7px;
}


.analytics-chart-mini-stats > div {
  min-width: 92px;

  padding:
    9px 11px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.014);
}


.analytics-chart-mini-stats span {
  display: block;

  color:
    rgba(255,255,255,.22);

  font-size:
    6px;

  font-weight:
    700;

  letter-spacing:
    .08em;
}


.analytics-chart-mini-stats strong {
  display: block;

  margin-top:
    4px;

  color:
    rgba(255,255,255,.68);

  font-size:
    13px;

  font-weight:
    600;
}


.analytics-chart-wrap {
  position:
    relative;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.025);

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(208,135,178,.035),
      transparent 52%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.008),
      rgba(255,255,255,0)
    );
}


.analytics-grid-line {
  stroke:
    rgba(255,255,255,.042);

  stroke-width:
    1;

  stroke-dasharray:
    3 5;
}


.analytics-chart-y-label {
  fill:
    rgba(255,255,255,.18);

  font-size:
    8px;
}


.analytics-chart-axis-text {
  fill:
    rgba(255,255,255,.22);

  font-size:
    8px;
}


.analytics-chart-area {
  fill:
    url(#analyticsAreaGradient);
}


.analytics-chart-line-glow {
  fill:
    none;

  stroke:
    rgba(208,135,178,.22);

  stroke-width:
    8;

  filter:
    url(#analyticsGlow);

  pointer-events:
    none;
}


.analytics-chart-line {
  fill:
    none;

  stroke:
    #d087b2;

  stroke-width:
    2.2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vector-effect:
    non-scaling-stroke;

  pointer-events:
    none;
}


.analytics-chart-point {
  fill:
    rgba(229,183,211,.84);

  stroke:
    rgba(13,12,16,.95);

  stroke-width:
    1.6;

  vector-effect:
    non-scaling-stroke;

  pointer-events:
    none;
}


.analytics-chart-crosshair {
  stroke:
    rgba(208,135,178,.26);

  stroke-width:
    1;

  stroke-dasharray:
    3 4;

  vector-effect:
    non-scaling-stroke;

  pointer-events:
    none;
}


.analytics-chart-active-point {
  fill:
    #efc7df;

  stroke:
    rgba(208,135,178,.25);

  stroke-width:
    8;

  paint-order:
    stroke;

  vector-effect:
    non-scaling-stroke;

  pointer-events:
    none;
}


.analytics-chart-tooltip {
  position:
    absolute;

  z-index:
    10;

  min-width:
    132px;

  padding:
    9px 10px;

  border:
    1px solid
    rgba(208,135,178,.17);

  border-radius:
    10px;

  background:
    rgba(14,13,17,.95);

  box-shadow:
    0 12px 34px
      rgba(0,0,0,.34),
    0 0 22px
      rgba(208,135,178,.035);

  backdrop-filter:
    blur(9px);

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translate(
      -50%,
      calc(-100% - 14px)
    );

  transition:
    opacity 90ms ease;
}


.analytics-chart-tooltip.visible {
  opacity:
    1;
}


.analytics-chart-tooltip::after {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  bottom:
    -4px;

  width:
    7px;

  height:
    7px;

  border-right:
    1px solid
    rgba(208,135,178,.17);

  border-bottom:
    1px solid
    rgba(208,135,178,.17);

  background:
    rgba(14,13,17,.95);

  transform:
    translateX(-50%)
    rotate(45deg);
}


.analytics-chart-tooltip-time {
  padding-bottom:
    6px;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);

  color:
    rgba(255,255,255,.3);

  font-size:
    7px;
}


.analytics-chart-tooltip-value {
  display:
    flex;

  align-items:
    baseline;

  gap:
    6px;

  padding-top:
    6px;
}


.analytics-chart-tooltip-value strong {
  color:
    rgba(238,198,222,.94);

  font-size:
    16px;

  font-weight:
    650;

  text-shadow:
    0 0 14px
    rgba(208,135,178,.09);
}


.analytics-chart-tooltip-value span {
  color:
    rgba(255,255,255,.3);

  font-size:
    7px;

  text-transform:
    uppercase;
}


.analytics-chart-empty-title {
  fill:
    rgba(255,255,255,.42);

  font-size:
    11px;

  font-weight:
    600;
}


.analytics-chart-empty-text {
  fill:
    rgba(255,255,255,.2);

  font-size:
    8px;
}


@media (max-width: 620px) {

  .analytics-chart-summary {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      10px;
  }


  .analytics-chart-mini-stats {
    width:
      100%;
  }


  .analytics-chart-mini-stats > div {
    flex:
      1;
  }


  .analytics-chart-wrap {
    height:
      250px;
  }
}


/* =========================================================
   ANALYSE OVERVIEW CHART
   ========================================================= */

.analytics-overview-chart-panel {
  margin-bottom: 12px;
  overflow: hidden;
}

.analytics-overview-chart-stream {
  margin: 4px 0 0;
  color: rgba(255,255,255,.25);
  font-size: 8px;
}

.analytics-overview-chart-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  padding: 0 2px;
}

.analytics-overview-chart-top > div:first-child > span {
  display: block;
  color: rgba(255,255,255,.22);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .08em;
}

.analytics-overview-chart-top > div:first-child > strong {
  display: block;
  margin-top: 4px;
  color: rgba(229,185,211,.92);
  font-size: 28px;
  font-weight: 620;
  letter-spacing: -.035em;
  text-shadow:
    0 0 20px rgba(208,135,178,.1);
}

.analytics-overview-chart-wrap {
  position: relative;
  width: 100%;
  height: 300px;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.025);
  border-radius: 11px;
  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(208,135,178,.035),
      transparent 52%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.008),
      transparent
    );
}

#analytics-overview-chart {
  display: block;
  width: 100%;
  height: 100%;
}


@media (max-width: 700px) {

  .analytics-overview-chart-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .analytics-overview-chart-top
  .analytics-chart-mini-stats {
    width: 100%;
  }

  .analytics-overview-chart-wrap {
    height: 245px;
  }
}


/* =========================================================
   ANALYSE EVENT MARKERS V1
   ========================================================= */

.analytics-event-marker {
  --event-color:
    208, 135, 178;

  position:
    absolute;

  z-index:
    12;

  display:
    grid;

  place-items:
    center;

  width:
    20px;

  height:
    20px;

  padding:
    0;

  border:
    1px solid
    rgba(
      var(--event-color),
      .42
    );

  border-radius:
    50%;

  background:
    rgba(
      14,
      13,
      17,
      .96
    );

  box-shadow:
    0 0 0 3px
      rgba(
        var(--event-color),
        .055
      ),
    0 0 18px
      rgba(
        var(--event-color),
        .09
      );

  color:
    rgba(
      var(--event-color),
      .96
    );

  cursor:
    default;

  transform:
    translate(
      -50%,
      -50%
    );

  transition:
    transform 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}


.analytics-event-marker:hover,
.analytics-event-marker:focus-visible {
  z-index:
    30;

  border-color:
    rgba(
      var(--event-color),
      .8
    );

  box-shadow:
    0 0 0 4px
      rgba(
        var(--event-color),
        .09
      ),
    0 0 24px
      rgba(
        var(--event-color),
        .16
      );

  transform:
    translate(
      -50%,
      -50%
    )
    scale(1.12);

  outline:
    none;
}


.analytics-event-marker-icon {
  display:
    block;

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

  pointer-events:
    none;
}


/* FOLLOW */

.analytics-event-marker.follow {
  --event-color:
    135, 211, 174;
}


/* RAID */

.analytics-event-marker.raid {
  --event-color:
    185, 145, 235;
}


/* SUB */

.analytics-event-marker.sub {
  --event-color:
    208, 135, 178;
}


/* GIFT SUB */

.analytics-event-marker.gift {
  --event-color:
    229, 169, 207;
}


/* BITS */

.analytics-event-marker.bits {
  --event-color:
    128, 191, 233;
}


/* REWARD */

.analytics-event-marker.reward {
  --event-color:
    226, 190, 121;
}


/* TOOLTIP */

.analytics-event-tooltip {
  position:
    absolute;

  left:
    50%;

  bottom:
    calc(
      100% +
      10px
    );

  z-index:
    40;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  width:
    max-content;

  min-width:
    145px;

  max-width:
    220px;

  padding:
    9px 10px;

  border:
    1px solid
    rgba(
      var(--event-color),
      .18
    );

  border-radius:
    10px;

  background:
    rgba(
      13,
      12,
      16,
      .97
    );

  box-shadow:
    0 14px 36px
      rgba(
        0,
        0,
        0,
        .42
      ),
    0 0 24px
      rgba(
        var(--event-color),
        .045
      );

  opacity:
    0;

  pointer-events:
    none;

  text-align:
    left;

  transform:
    translateX(-50%)
    translateY(3px);

  transition:
    opacity 100ms ease,
    transform 100ms ease;
}


.analytics-event-marker:hover
.analytics-event-tooltip,
.analytics-event-marker:focus-visible
.analytics-event-tooltip {
  opacity:
    1;

  transform:
    translateX(-50%)
    translateY(0);
}


.analytics-event-marker.edge-left
.analytics-event-tooltip {
  left:
    -7px;

  transform:
    translateX(0)
    translateY(3px);
}


.analytics-event-marker.edge-left:hover
.analytics-event-tooltip,
.analytics-event-marker.edge-left:focus-visible
.analytics-event-tooltip {
  transform:
    translateX(0)
    translateY(0);
}


.analytics-event-marker.edge-right
.analytics-event-tooltip {
  right:
    -7px;

  left:
    auto;

  transform:
    translateX(0)
    translateY(3px);
}


.analytics-event-marker.edge-right:hover
.analytics-event-tooltip,
.analytics-event-marker.edge-right:focus-visible
.analytics-event-tooltip {
  transform:
    translateX(0)
    translateY(0);
}


.analytics-event-tooltip::after {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  bottom:
    -4px;

  width:
    7px;

  height:
    7px;

  border-right:
    1px solid
    rgba(
      var(--event-color),
      .18
    );

  border-bottom:
    1px solid
    rgba(
      var(--event-color),
      .18
    );

  background:
    rgba(
      13,
      12,
      16,
      .97
    );

  transform:
    translateX(-50%)
    rotate(45deg);
}


.analytics-event-marker.edge-left
.analytics-event-tooltip::after {
  left:
    15px;
}


.analytics-event-marker.edge-right
.analytics-event-tooltip::after {
  right:
    11px;

  left:
    auto;
}


.analytics-event-tooltip-type {
  color:
    rgba(
      var(--event-color),
      .85
    );

  font-size:
    7px;

  font-weight:
    750;

  letter-spacing:
    .07em;

  text-transform:
    uppercase;
}


.analytics-event-tooltip strong {
  overflow-wrap:
    anywhere;

  color:
    rgba(
      255,
      255,
      255,
      .78
    );

  font-size:
    10px;

  font-weight:
    550;

  line-height:
    1.35;
}


.analytics-event-tooltip small {
  color:
    rgba(
      255,
      255,
      255,
      .27
    );

  font-size:
    7px;

  font-weight:
    400;
}


/* =========================================================
   MODERATION CONFIRMATION
   ========================================================= */

.moderation-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;

  display: grid;
  place-items: center;

  padding: 20px;

  background:
    rgba(5, 5, 7, .74);

  backdrop-filter:
    blur(10px);
}


.moderation-confirm-modal {
  width: min(440px, 100%);

  padding: 24px;

  border:
    1px solid rgba(255,255,255,.055);

  border-radius: 16px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(208,135,178,.055),
      transparent 45%
    ),
    rgba(15,14,18,.985);

  box-shadow:
    0 28px 90px rgba(0,0,0,.58),
    0 0 40px rgba(208,135,178,.035);
}


.moderation-confirm-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  margin-bottom: 18px;

  border-radius: 12px;

  font-size: 17px;
  font-weight: 700;
}


.moderation-confirm-icon.danger {
  border:
    1px solid rgba(232,104,120,.22);

  background:
    rgba(232,104,120,.075);

  color:
    rgba(246,145,157,.92);

  box-shadow:
    0 0 24px rgba(232,104,120,.055);
}


.moderation-confirm-icon.release {
  border:
    1px solid rgba(208,135,178,.2);

  background:
    rgba(208,135,178,.07);

  color:
    rgba(229,185,211,.92);

  box-shadow:
    0 0 24px rgba(208,135,178,.055);
}


.moderation-confirm-copy h2 {
  margin:
    5px 0 0;

  color:
    rgba(255,255,255,.9);

  font-size:
    19px;

  font-weight:
    580;

  letter-spacing:
    -.025em;
}


.moderation-confirm-login {
  margin-top: 4px;

  color:
    rgba(255,255,255,.3);

  font-size: 9px;
}


.moderation-confirm-copy p {
  margin:
    14px 0 0;

  color:
    rgba(255,255,255,.46);

  font-size:
    11px;

  line-height:
    1.65;
}


.moderation-confirm-warning {
  display: flex;
  flex-direction: column;
  gap: 5px;

  margin-top: 18px;

  padding: 12px 13px;

  border:
    1px solid rgba(255,255,255,.035);

  border-radius: 10px;

  background:
    rgba(255,255,255,.018);
}


.moderation-confirm-warning strong {
  color:
    rgba(255,255,255,.67);

  font-size: 9px;

  font-weight: 600;
}


.moderation-confirm-warning span {
  color:
    rgba(255,255,255,.3);

  font-size: 9px;

  line-height: 1.55;
}


.moderation-confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;

  margin-top: 22px;
}


.moderation-confirm-danger-button {
  border:
    1px solid rgba(232,104,120,.25) !important;

  background:
    rgba(232,104,120,.11) !important;

  color:
    rgba(250,173,181,.94) !important;
}


.moderation-confirm-danger-button:hover {
  border-color:
    rgba(232,104,120,.4) !important;

  background:
    rgba(232,104,120,.16) !important;

  box-shadow:
    0 0 22px rgba(232,104,120,.07);
}


@media (max-width: 520px) {

  .moderation-confirm-modal {
    padding: 20px;
  }


  .moderation-confirm-buttons {
    flex-direction: column-reverse;
  }


  .moderation-confirm-buttons .btn {
    width: 100%;
  }
}


/* =========================================================
   GLOBAL READABILITY PASS V1
   Kleine Texte dashboardweit etwas größer
   ========================================================= */

/*
 * Grundschrift minimal anheben.
 * Große Überschriften/KPIs mit eigener
 * font-size bleiben davon unberührt.
 */
body {
  font-size: 14px;
}


/* Kleine allgemeine Texte */

small {
  font-size: 10px !important;
  line-height: 1.5;
}


.tiny {
  font-size: 9px !important;
  line-height: 1.4;
}


.led-text {
  font-size: 9px !important;
  letter-spacing: .09em;
}


/* Formular-Beschriftungen + Hinweise */

.labeltext {
  font-size: 10px !important;
}


.command-field-hint {
  font-size: 9px !important;
  line-height: 1.5;
}


/* Chips / Badges */

.chip {
  font-size: 9px !important;
}


.moderation-user-badge {
  font-size: 9px !important;
}


/* Moderation */

.moderation-profile-login {
  font-size: 10px !important;
}


.moderation-confirm-login {
  font-size: 10px !important;
}


.moderation-confirm-warning strong {
  font-size: 10px !important;
}


.moderation-confirm-warning span {
  font-size: 10px !important;
}


.moderation-action-danger {
  font-size: 10px !important;
}


.moderation-action-message {
  font-size: 10px !important;
}


/* Analyse */

.analytics-overview-chart-stream {
  font-size: 10px !important;
}


.analytics-overview-chart-top > div:first-child > span {
  font-size: 9px !important;
}


.analytics-chart-axis-text,
.analytics-chart-y-label {
  font-size: 10px !important;
}


.analytics-chart-tooltip-time {
  font-size: 9px !important;
}


.analytics-event-tooltip-type {
  font-size: 9px !important;
}


.analytics-event-tooltip strong {
  font-size: 11px !important;
}


.analytics-event-tooltip small {
  font-size: 9px !important;
}


.analytics-event-marker-icon {
  font-size: 8px !important;
}


/*
 * Tabellen:
 * Kleine Inhalte etwas besser lesbar,
 * ohne die Tabellen unnötig aufzublähen.
 */

table th {
  font-size: 10px !important;
}


table td {
  font-size: 11px;
}


/*
 * Inputs, Selects und Textareas etwas
 * angenehmer lesbar.
 */

input,
select,
textarea {
  font-size: 12px;
}


/*
 * Buttons ebenfalls nicht mehr ganz
 * so filigran.
 */

button,
.btn {
  font-size: 11px;
}


/*
 * Navigation und kleinere Seitentexte.
 */

.sidebar button,
.sidebar a,
nav button,
nav a {
  font-size: 11px;
}


/*
 * Sehr kleine Platzhalter / sekundäre Texte.
 */

input::placeholder,
textarea::placeholder {
  font-size: 11px;
}


/* Mobile minimal weiter anheben */

@media (max-width: 700px) {

  body {
    font-size: 14px;
  }

  small {
    font-size: 10px !important;
  }

  .tiny,
  .led-text {
    font-size: 9px !important;
  }

  button,
  .btn {
    font-size: 11px;
  }
}


/* =========================================================
   MODERATION NOTE EDIT
   ========================================================= */

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


.moderation-note-edit,
.moderation-note-delete {
  padding: 0;

  border: 0;

  background: transparent;

  font: inherit;

  font-size: 10px !important;

  cursor: pointer;

  transition:
    color 120ms ease,
    opacity 120ms ease;
}


.moderation-note-edit {
  color: rgba(208,135,178,.72);
}


.moderation-note-edit:hover {
  color: rgba(229,185,211,.98);
}


.moderation-note-delete {
  color: rgba(232,120,135,.62);
}


.moderation-note-delete:hover {
  color: rgba(245,151,163,.96);
}


.moderation-note-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin-top: 4px;
}


.moderation-note-edit-form textarea {
  width: 100%;
  min-height: 105px;

  resize: vertical;

  padding: 11px 12px;

  border:
    1px solid rgba(208,135,178,.14);

  border-radius: 10px;

  background:
    rgba(255,255,255,.022);

  color:
    rgba(255,255,255,.84);

  font-size: 12px;

  line-height: 1.55;

  outline: none;

  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}


.moderation-note-edit-form textarea:focus {
  border-color:
    rgba(208,135,178,.34);

  background:
    rgba(255,255,255,.03);

  box-shadow:
    0 0 0 3px
    rgba(208,135,178,.045);
}


.moderation-note-edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


.moderation-note-edit-footer small {
  color:
    rgba(255,255,255,.28);
}


.moderation-note-edit-buttons {
  display: flex;
  gap: 7px;
}


/*
 * Während der Bearbeitung werden die
 * normalen Bearbeiten/Löschen-Aktionen
 * ausgeblendet.
 */

.moderation-note-editing
.moderation-note-actions {
  visibility: hidden;
}


@media (max-width: 600px) {

  .moderation-note-edit-footer {
    align-items: stretch;
    flex-direction: column;
  }


  .moderation-note-edit-buttons {
    width: 100%;
  }


  .moderation-note-edit-buttons .btn {
    flex: 1;
  }
}


/* =========================================================
   MODERATION NOTES POLISH
   ========================================================= */

.moderation-note-footer {
  align-items: center;
  gap: 14px;
}


.moderation-note-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;

  color:
    rgba(255,255,255,.3);

  font-size: 10px;
}


.moderation-note-author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


.moderation-note-author strong {
  color:
    rgba(229,185,211,.76);

  font-weight: 580;
}


.moderation-note-date::before {
  content: "•";

  margin-right: 8px;

  color:
    rgba(255,255,255,.16);
}


.moderation-note-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}


.moderation-note-edit,
.moderation-note-delete {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-height: 30px;

  padding: 6px 9px !important;

  border-radius: 8px !important;

  font-size: 10px !important;
  font-weight: 550 !important;

  line-height: 1 !important;

  transition:
    border-color 120ms ease,
    background 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}


.moderation-note-edit svg,
.moderation-note-delete svg {
  width: 13px;
  height: 13px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;

  flex-shrink: 0;
}


/* BEARBEITEN */

.moderation-note-edit {
  border:
    1px solid rgba(208,135,178,.12) !important;

  background:
    rgba(208,135,178,.045) !important;

  color:
    rgba(224,171,203,.76) !important;
}


.moderation-note-edit:hover {
  border-color:
    rgba(208,135,178,.28) !important;

  background:
    rgba(208,135,178,.09) !important;

  color:
    rgba(238,196,220,.98) !important;

  box-shadow:
    0 0 18px rgba(208,135,178,.055);

  transform:
    translateY(-1px);
}


/* LÖSCHEN */

.moderation-note-delete {
  border:
    1px solid rgba(232,104,120,.11) !important;

  background:
    rgba(232,104,120,.035) !important;

  color:
    rgba(235,132,145,.66) !important;
}


.moderation-note-delete:hover {
  border-color:
    rgba(232,104,120,.28) !important;

  background:
    rgba(232,104,120,.085) !important;

  color:
    rgba(247,157,168,.96) !important;

  box-shadow:
    0 0 18px rgba(232,104,120,.05);

  transform:
    translateY(-1px);
}


/* LÖSCHDIALOG */

.moderation-note-delete-confirm h2 {
  margin:
    6px 0 0;

  color:
    rgba(255,255,255,.9);

  font-size: 20px;

  font-weight: 590;

  letter-spacing:
    -.025em;
}


.moderation-note-delete-confirm > p {
  margin:
    13px 0 0;

  color:
    rgba(255,255,255,.44);

  font-size: 11px;

  line-height: 1.65;
}


.moderation-note-delete-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  margin-bottom: 17px;

  border:
    1px solid rgba(232,104,120,.2);

  border-radius: 12px;

  background:
    rgba(232,104,120,.065);

  color:
    rgba(244,146,158,.9);

  box-shadow:
    0 0 24px rgba(232,104,120,.045);
}


.moderation-note-delete-icon svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


@media (max-width: 600px) {

  .moderation-note-footer {
    align-items: flex-start;
    flex-direction: column;
  }


  .moderation-note-actions {
    width: 100%;
  }


  .moderation-note-edit,
  .moderation-note-delete {
    flex: 1;
  }


  .moderation-note-date::before {
    display: none;
  }
}


/* =========================================================
   MODERATION NOTE DELETE CONFIRM - LAYER FIX
   Der Löschdialog muss immer über dem Nutzerprofil liegen.
   ========================================================= */

.moderation-note-delete-confirm-overlay {
  position: fixed !important;
  inset: 0 !important;

  z-index: 100000 !important;
}


.moderation-note-delete-confirm {
  position: relative !important;

  z-index: 100001 !important;
}


/* =========================================================
   MODERATION SANCTION FILTERS
   ========================================================= */

.moderation-actions-toolbar {
  display: grid;

  grid-template-columns:
    minmax(220px, 1.7fr)
    minmax(140px, .8fr)
    minmax(160px, .9fr)
    minmax(140px, .8fr)
    minmax(180px, 1fr);

  gap: 9px;

  align-items: center;
}


.moderation-actions-toolbar
.moderation-search,
.moderation-actions-toolbar
.moderation-select {
  width: 100%;
  min-width: 0;
}


.moderation-actions-toolbar
.moderation-search,
.moderation-actions-toolbar
.moderation-select {
  min-height: 38px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 9px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.76);

  transition:
    border-color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
}


.moderation-actions-toolbar
.moderation-search:focus,
.moderation-actions-toolbar
.moderation-select:focus {
  border-color:
    rgba(208,135,178,.28);

  background:
    rgba(255,255,255,.035);

  box-shadow:
    0 0 0 3px
    rgba(208,135,178,.04);

  outline: none;
}


.moderation-actions-toolbar
.moderation-search::placeholder {
  color:
    rgba(255,255,255,.28);
}


.moderation-actions-toolbar
.moderation-select {
  cursor: pointer;
}


@media (max-width: 1200px) {

  .moderation-actions-toolbar {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .moderation-action-main-search {
    grid-column:
      1 / -1;
  }
}


@media (max-width: 650px) {

  .moderation-actions-toolbar {
    grid-template-columns:
      1fr;
  }


  .moderation-action-main-search {
    grid-column:
      auto;
  }
}


/* =========================================================
   MODERATION SANCTION FILTERS - INTERACTION FIX
   ========================================================= */

#moderation-view-actions {
  position: relative;
  isolation: isolate;
}


#moderation-view-actions .moderation-panel {
  position: relative;
}


#moderation-view-actions .moderation-panel::before,
#moderation-view-actions .moderation-panel::after {
  pointer-events: none !important;
}


.moderation-actions-toolbar {
  position: relative !important;

  z-index: 50 !important;

  display: grid !important;

  grid-template-columns:
    minmax(230px, 1.7fr)
    minmax(145px, .85fr)
    minmax(170px, 1fr)
    minmax(150px, .85fr)
    minmax(185px, 1fr)
    auto !important;

  gap: 9px !important;

  overflow: visible !important;

  pointer-events: auto !important;
}


.moderation-actions-toolbar
#moderation-action-search,
.moderation-actions-toolbar
#moderation-action-filter,
.moderation-actions-toolbar
#moderation-action-period,
.moderation-actions-toolbar
#moderation-action-status,
.moderation-actions-toolbar
#moderation-action-moderator,
.moderation-actions-toolbar
#moderation-action-reset {
  position: relative !important;

  z-index: 51 !important;

  pointer-events: auto !important;

  visibility: visible !important;

  opacity: 1 !important;
}


/* Suche darf von keiner älteren Regel versteckt werden */

#moderation-action-search {
  display: block !important;

  width: 100% !important;

  min-width: 0 !important;
}


/* Native Select-Bedienung erzwingen */

#moderation-action-filter,
#moderation-action-period,
#moderation-action-status {
  display: block !important;

  width: 100% !important;

  cursor: pointer !important;

  -webkit-appearance: auto !important;
  appearance: auto !important;

  user-select: auto !important;
}


#moderation-action-moderator {
  display: block !important;
}


/* RESET */

.moderation-action-reset {
  display: inline-flex !important;

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

  gap: 6px;

  min-height: 38px;

  white-space: nowrap;

  border:
    1px solid rgba(208,135,178,.13);

  background:
    rgba(208,135,178,.045);

  color:
    rgba(229,185,211,.72);

  cursor: pointer !important;
}


.moderation-action-reset:hover {
  border-color:
    rgba(208,135,178,.28);

  background:
    rgba(208,135,178,.09);

  color:
    rgba(241,207,226,.96);
}


@media (max-width: 1350px) {

  .moderation-actions-toolbar {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }


  #moderation-action-search {
    grid-column:
      span 2;
  }
}


@media (max-width: 850px) {

  .moderation-actions-toolbar {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  #moderation-action-search {
    grid-column:
      1 / -1;
  }
}


@media (max-width: 600px) {

  .moderation-actions-toolbar {
    grid-template-columns:
      1fr !important;
  }


  #moderation-action-search {
    grid-column:
      auto;
  }


  .moderation-action-reset {
    width: 100%;
  }
}


/* =========================================================
   MODERATION SANCTION FILTER - CUSTOM DROPDOWNS
   ========================================================= */

#moderation-action-filter.moderation-native-filter,
#moderation-action-period.moderation-native-filter,
#moderation-action-status.moderation-native-filter {
  display: none !important;
}


.moderation-filter-dropdown {
  position: relative;

  width: 100%;
  min-width: 0;

  z-index: 200;
}


.moderation-filter-dropdown.open {
  z-index: 5000;
}


.moderation-filter-trigger {
  width: 100%;
  min-height: 40px;

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

  gap: 12px;

  padding: 0 13px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 10px;

  background:
    rgba(15,14,18,.88);

  color:
    rgba(255,255,255,.82);

  font: inherit;

  text-align: left;

  cursor: pointer;

  outline: none;

  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}


.moderation-filter-trigger:hover {
  border-color:
    rgba(208,135,178,.22);

  background:
    rgba(208,135,178,.04);
}


.moderation-filter-dropdown.open
.moderation-filter-trigger {
  border-color:
    rgba(208,135,178,.42);

  box-shadow:
    0 0 0 3px
    rgba(208,135,178,.06);
}


.moderation-filter-trigger-label {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.moderation-filter-arrow {
  flex: 0 0 auto;

  color:
    rgba(208,135,178,.72);

  font-size: 16px;

  transition:
    transform 140ms ease;
}


.moderation-filter-dropdown.open
.moderation-filter-arrow {
  transform:
    rotate(180deg);
}


.moderation-filter-menu {
  position: absolute;

  top:
    calc(100% + 7px);

  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;

  padding: 6px;

  border:
    1px solid
    rgba(208,135,178,.15);

  border-radius: 11px;

  background:
    rgba(15,13,18,.99);

  box-shadow:
    0 18px 45px
      rgba(0,0,0,.48),
    0 0 30px
      rgba(208,135,178,.04);

  backdrop-filter:
    blur(16px);

  z-index: 5001;
}


.moderation-filter-menu.hidden {
  display: none !important;
}


.moderation-filter-option {
  width: 100%;

  min-height: 36px;

  display: flex;
  align-items: center;

  padding:
    0 10px;

  border:
    1px solid transparent;

  border-radius:
    8px;

  background:
    transparent;

  color:
    rgba(255,255,255,.68);

  font: inherit;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}


.moderation-filter-option:hover {
  border-color:
    rgba(208,135,178,.10);

  background:
    rgba(208,135,178,.07);

  color:
    rgba(255,255,255,.92);
}


.moderation-filter-option.active {
  border-color:
    rgba(208,135,178,.16);

  background:
    rgba(208,135,178,.11);

  color:
    #efc7df;
}


.moderation-filter-option.active::after {
  content:
    "✓";

  margin-left:
    auto;

  padding-left:
    10px;

  color:
    #d087b2;
}


@media (max-width: 850px) {

  .moderation-filter-menu {
    position:
      absolute;
  }
}


/* =========================================================
   MODERATION SANCTION FILTER - SCROLL FIX
   ========================================================= */

#moderation-view-actions,
#moderation-view-actions .moderation-panel,
#moderation-view-actions .moderation-actions-toolbar,
#moderation-view-actions .moderation-filter-dropdown {
  overflow: visible !important;
}


.moderation-filter-menu {
  max-height: 175px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior: contain;

  scrollbar-width: thin;

  scrollbar-color:
    rgba(208,135,178,.42)
    rgba(255,255,255,.025);
}


.moderation-filter-option {
  flex: 0 0 auto;
}


/* Chrome / Edge Scrollbar */

.moderation-filter-menu::-webkit-scrollbar {
  width: 7px;
}


.moderation-filter-menu::-webkit-scrollbar-track {
  background:
    rgba(255,255,255,.025);

  border-radius: 999px;
}


.moderation-filter-menu::-webkit-scrollbar-thumb {
  background:
    rgba(208,135,178,.36);

  border-radius: 999px;
}


.moderation-filter-menu::-webkit-scrollbar-thumb:hover {
  background:
    rgba(208,135,178,.55);
}


/* =========================================================
   TWITCH DASHBOARD V1
   ========================================================= */

.dashboard-channel-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 16px;

  padding: 22px;

  border:
    1px solid rgba(208,135,178,.12);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 8% 20%,
      rgba(208,135,178,.10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(22,18,24,.96),
      rgba(13,12,16,.96)
    );

  box-shadow:
    inset 0 0 30px
      rgba(208,135,178,.018),
    0 18px 55px
      rgba(0,0,0,.20);
}


.dashboard-channel-identity {
  display: flex;
  align-items: center;

  min-width: 0;

  gap: 17px;
}


.dashboard-channel-avatar-wrap {
  width: 72px;
  height: 72px;

  flex: 0 0 72px;
}


.dashboard-channel-avatar,
.dashboard-channel-avatar-fallback {
  width: 72px;
  height: 72px;

  border:
    1px solid rgba(208,135,178,.24);

  border-radius: 18px;

  box-shadow:
    0 0 25px
      rgba(208,135,178,.08);
}


.dashboard-channel-avatar {
  display: block;

  object-fit: cover;
}


.dashboard-channel-avatar-fallback {
  display: grid;
  place-items: center;

  background:
    rgba(208,135,178,.09);

  color:
    #efc7df;

  font-size: 25px;
  font-weight: 850;
}


.dashboard-channel-copy {
  min-width: 0;
}


.dashboard-channel-topline {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 7px;
}


.dashboard-channel-copy h2 {
  margin: 0;

  font-size: 24px;
}


.dashboard-channel-login {
  margin-top: 3px;

  color:
    rgba(255,255,255,.43);

  font-size: 13px;
}


.dashboard-stream-title {
  margin-top: 13px;

  max-width: 760px;

  overflow: hidden;

  color:
    rgba(255,255,255,.88);

  font-size: 15px;
  font-weight: 700;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.dashboard-stream-game {
  margin-top: 4px;

  color:
    #d9a5c4;

  font-size: 13px;
}


.dashboard-live-badge {
  display: inline-flex;
  align-items: center;

  min-height: 25px;

  padding: 0 9px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 999px;

  background:
    rgba(255,255,255,.035);

  color:
    rgba(255,255,255,.42);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .08em;
}


.dashboard-live-badge.live {
  border-color:
    rgba(208,135,178,.34);

  background:
    rgba(208,135,178,.12);

  color:
    #efc7df;

  box-shadow:
    0 0 16px
      rgba(208,135,178,.09);
}


.dashboard-channel-link {
  flex: 0 0 auto;
}


.dashboard-twitch-metrics {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 16px;
}


.dashboard-twitch-metric {
  min-width: 0;
}


.dashboard-twitch-grid {
  display: grid;

  grid-template-columns:
    minmax(0, .9fr)
    minmax(0, 1.1fr);

  gap: 16px;
}


.dashboard-stream-panel,
.dashboard-events-panel {
  min-width: 0;
}


.dashboard-stream-panel .row strong {
  max-width: 65%;

  overflow: hidden;

  text-align: right;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.dashboard-events-list {
  display: flex;
  flex-direction: column;

  gap: 6px;
}


.dashboard-event-row {
  display: grid;

  grid-template-columns:
    8px minmax(0, 1fr);

  align-items: center;

  gap: 10px;

  min-height: 48px;

  padding:
    8px 10px;

  border:
    1px solid rgba(255,255,255,.045);

  border-radius: 10px;

  background:
    rgba(255,255,255,.018);
}


.dashboard-event-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    #d087b2;

  box-shadow:
    0 0 9px
      rgba(208,135,178,.42);
}


.dashboard-event-main {
  min-width: 0;
}


.dashboard-event-title {
  display: flex;
  align-items: baseline;

  min-width: 0;

  gap: 8px;
}


.dashboard-event-title strong {
  flex: 0 0 auto;

  color:
    #e8bfd7;

  font-size: 12px;
}


.dashboard-event-title span {
  min-width: 0;

  overflow: hidden;

  color:
    rgba(255,255,255,.72);

  text-overflow: ellipsis;

  white-space: nowrap;
}


.dashboard-event-main small {
  display: block;

  margin-top: 3px;

  color:
    rgba(255,255,255,.31);
}


.dashboard-event-empty {
  padding: 26px 12px;

  color:
    rgba(255,255,255,.34);

  text-align: center;
}


@media (max-width: 1250px) {

  .dashboard-twitch-metrics {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


@media (max-width: 900px) {

  .dashboard-twitch-grid {
    grid-template-columns:
      1fr;
  }


  .dashboard-channel-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}


@media (max-width: 650px) {

  .dashboard-twitch-metrics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .dashboard-channel-avatar-wrap,
  .dashboard-channel-avatar,
  .dashboard-channel-avatar-fallback {
    width: 58px;
    height: 58px;
  }


  .dashboard-channel-avatar-wrap {
    flex-basis: 58px;
  }
}


@media (max-width: 430px) {

  .dashboard-twitch-metrics {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   AUTOMATIONS V1
   ========================================================= */

.automations-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;
}


.automations-header h2 {
  margin:
    3px 0 5px;

  font-size: 24px;
}


.automations-header p {
  margin: 0;

  color:
    rgba(255,255,255,.42);
}


.automation-summary {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 16px;
}


.automation-warning {
  margin-bottom: 14px;

  padding:
    11px 13px;

  border:
    1px solid rgba(208,135,178,.18);

  border-radius: 10px;

  background:
    rgba(208,135,178,.06);

  color:
    #e9b9d5;
}


.automation-panel {
  min-width: 0;
}


.automations-list {
  display: flex;
  flex-direction: column;

  gap: 10px;
}


.automation-card {
  display: grid;

  grid-template-columns:
    7px minmax(0, 1fr);

  gap: 13px;

  padding: 15px;

  border:
    1px solid rgba(255,255,255,.055);

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.024),
      rgba(255,255,255,.012)
    );

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}


.automation-card:hover {
  border-color:
    rgba(208,135,178,.14);

  background:
    linear-gradient(
      145deg,
      rgba(208,135,178,.035),
      rgba(255,255,255,.014)
    );
}


.automation-card.inactive {
  opacity: .67;
}


.automation-card-status {
  display: flex;
  justify-content: center;

  padding-top: 8px;
}


.automation-status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.16);
}


.automation-status-dot.active {
  background:
    #d087b2;

  box-shadow:
    0 0 11px
      rgba(208,135,178,.48);
}


.automation-card-main {
  min-width: 0;
}


.automation-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;
}


.automation-card-title {
  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 8px;
}


.automation-card-title strong {
  font-size: 15px;

  color:
    rgba(255,255,255,.91);
}


.automation-state-badge {
  display: inline-flex;
  align-items: center;

  min-height: 21px;

  padding:
    0 8px;

  border:
    1px solid rgba(255,255,255,.065);

  border-radius: 999px;

  color:
    rgba(255,255,255,.40);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .04em;
}


.automation-state-badge.active {
  border-color:
    rgba(208,135,178,.24);

  background:
    rgba(208,135,178,.08);

  color:
    #eab9d5;
}


.automation-trigger-text {
  margin-top: 5px;

  color:
    rgba(255,255,255,.40);

  font-size: 12px;
}


.automation-card-actions {
  display: flex;
  align-items: center;

  flex: 0 0 auto;

  gap: 6px;
}


.automation-icon-btn,
.automation-toggle-btn {
  min-height: 30px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 8px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.62);

  cursor: pointer;

  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}


.automation-icon-btn {
  width: 32px;

  padding: 0;

  font-size: 17px;
}


.automation-toggle-btn {
  padding:
    0 10px;

  font-size: 11px;
  font-weight: 700;
}


.automation-icon-btn:hover,
.automation-toggle-btn:hover {
  border-color:
    rgba(208,135,178,.25);

  background:
    rgba(208,135,178,.07);

  color:
    #eac0d8;
}


.automation-icon-btn.danger:hover {
  border-color:
    rgba(255,95,125,.28);

  background:
    rgba(255,95,125,.07);

  color:
    #ff9cb2;
}


.automation-message-preview {
  margin-top: 13px;

  padding:
    11px 12px;

  border:
    1px solid rgba(255,255,255,.045);

  border-radius: 9px;

  background:
    rgba(0,0,0,.14);
}


.automation-message-preview > span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(208,135,178,.62);

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .09em;
}


.automation-message-preview p {
  margin: 0;

  color:
    rgba(255,255,255,.72);

  line-height: 1.55;

  overflow-wrap: anywhere;
}


.automation-card-meta {
  display: flex;
  flex-wrap: wrap;

  gap:
    6px 18px;

  margin-top: 10px;

  color:
    rgba(255,255,255,.31);

  font-size: 11px;
}


.automation-card-meta strong {
  color:
    rgba(255,255,255,.48);

  font-weight: 600;
}


.automation-empty {
  display: flex;
  align-items: center;
  flex-direction: column;

  gap: 7px;

  padding:
    44px 20px;

  color:
    rgba(255,255,255,.34);

  text-align: center;
}


.automation-empty-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  margin-bottom: 5px;

  border:
    1px solid rgba(208,135,178,.14);

  border-radius: 13px;

  background:
    rgba(208,135,178,.045);

  color:
    #dca1c4;

  font-size: 20px;
}


.automation-empty strong {
  color:
    rgba(255,255,255,.68);
}


.automation-empty span {
  max-width: 420px;
}


/* MODAL */

.automation-modal-overlay,
.automation-delete-overlay {
  position: fixed;

  inset: 0;

  z-index: 100000;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    rgba(3,3,5,.78);

  backdrop-filter:
    blur(8px);
}


.automation-modal {
  width:
    min(620px, 100%);

  max-height:
    calc(100vh - 48px);

  overflow-y: auto;

  padding: 21px;

  border:
    1px solid rgba(208,135,178,.16);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      #171319,
      #0e0d10
    );

  box-shadow:
    0 28px 90px
      rgba(0,0,0,.55),
    0 0 30px
      rgba(208,135,178,.045);
}


.automation-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 20px;
}


.automation-modal-head h2 {
  margin:
    4px 0 0;
}


.automation-modal-close {
  width: 34px;
  height: 34px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 9px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.55);

  cursor: pointer;

  font-size: 20px;
}


.automation-form {
  display: flex;
  flex-direction: column;

  gap: 15px;
}


.automation-field {
  display: flex;
  flex-direction: column;

  gap: 7px;
}


.automation-field > span {
  color:
    rgba(255,255,255,.67);

  font-size: 12px;
  font-weight: 700;
}


.automation-field small {
  color:
    rgba(255,255,255,.28);
}


.automation-field input,
.automation-field textarea {
  width: 100%;

  box-sizing: border-box;
}


.automation-field textarea {
  resize: vertical;

  min-height: 100px;

  line-height: 1.5;
}


.automation-trigger-box {
  padding: 14px;

  border:
    1px solid rgba(255,255,255,.055);

  border-radius: 12px;

  background:
    rgba(255,255,255,.015);
}


.automation-trigger-head {
  margin-bottom: 13px;
}


.automation-trigger-head strong,
.automation-trigger-head span {
  display: block;
}


.automation-trigger-head strong {
  color:
    rgba(255,255,255,.76);
}


.automation-trigger-head span {
  margin-top: 4px;

  color:
    rgba(255,255,255,.33);

  font-size: 11px;

  line-height: 1.45;
}


.automation-trigger-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;
}


.automation-input-suffix {
  display: flex;
  align-items: stretch;

  min-width: 0;
}


.automation-input-suffix input {
  min-width: 0;

  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}


.automation-input-suffix > span {
  display: flex;
  align-items: center;

  flex: 0 0 auto;

  padding:
    0 10px;

  border:
    1px solid rgba(255,255,255,.07);

  border-left: 0;

  border-radius:
    0 8px 8px 0;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.34);

  font-size: 10px;
}


.automation-active-option {
  position: relative;

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

  gap: 16px;

  padding:
    12px 13px;

  border:
    1px solid rgba(255,255,255,.055);

  border-radius: 11px;

  background:
    rgba(255,255,255,.014);

  cursor: pointer;
}


.automation-active-option strong,
.automation-active-option > div > span {
  display: block;
}


.automation-active-option strong {
  color:
    rgba(255,255,255,.75);
}


.automation-active-option > div > span {
  margin-top: 3px;

  color:
    rgba(255,255,255,.32);

  font-size: 11px;
}


.automation-active-option input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.automation-switch {
  position: relative;

  width: 42px;
  height: 23px;

  flex: 0 0 42px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 999px;

  background:
    rgba(255,255,255,.055);

  transition:
    background .18s ease,
    border-color .18s ease;
}


.automation-switch::after {
  content: "";

  position: absolute;

  top: 3px;
  left: 3px;

  width: 15px;
  height: 15px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.55);

  transition:
    transform .18s ease,
    background .18s ease;
}


.automation-active-option
input:checked +
.automation-switch {
  border-color:
    rgba(208,135,178,.28);

  background:
    rgba(208,135,178,.16);
}


.automation-active-option
input:checked +
.automation-switch::after {
  transform:
    translateX(19px);

  background:
    #dca1c4;

  box-shadow:
    0 0 10px
      rgba(208,135,178,.35);
}


.automation-modal-actions {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  margin-top: 4px;
}


/* DELETE CONFIRM */

.automation-delete-dialog {
  width:
    min(430px, 100%);

  padding: 21px;

  border:
    1px solid rgba(255,95,125,.15);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #171317,
      #0e0d10
    );

  box-shadow:
    0 28px 90px
      rgba(0,0,0,.58);
}


.automation-delete-dialog h2 {
  margin:
    5px 0 9px;
}


.automation-delete-dialog p {
  margin: 0;

  color:
    rgba(255,255,255,.48);

  line-height: 1.5;
}


@media (max-width: 850px) {

  .automation-summary {
    grid-template-columns:
      1fr;
  }


  .automation-card-head {
    flex-direction: column;
  }


  .automation-card-actions {
    width: 100%;
  }


  .automation-toggle-btn {
    flex: 1;
  }
}


@media (max-width: 620px) {

  .automations-header {
    align-items: stretch;
    flex-direction: column;
  }


  .automation-trigger-grid {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   AUTOMATIONS UI POLISH
   ========================================================= */


/* ---------------------------------------------------------
   Nachrichtenfeld – Command-artiger Editor
   --------------------------------------------------------- */

.automation-message-field {
  gap: 8px;
}


.automation-message-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.automation-message-field-head > span {
  color:
    rgba(255,255,255,.68);

  font-size: 12px;
  font-weight: 700;
}


#automation-character-count {
  color:
    rgba(255,255,255,.30);

  font-size: 11px;
  font-weight: 600;

  font-variant-numeric:
    tabular-nums;

  transition:
    color .16s ease;
}


#automation-character-count.near-limit {
  color:
    #dca1c4;
}


.automation-message-editor {
  position: relative;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.075);

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(5,5,7,.48),
      rgba(255,255,255,.018)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.015);

  transition:
    border-color .17s ease,
    box-shadow .17s ease,
    background .17s ease;
}


.automation-message-editor:focus-within {
  border-color:
    rgba(208,135,178,.38);

  background:
    linear-gradient(
      145deg,
      rgba(208,135,178,.035),
      rgba(5,5,7,.52)
    );

  box-shadow:
    0 0 0 3px
      rgba(208,135,178,.055),
    inset 0 1px 0
      rgba(255,255,255,.02);
}


.automation-message-editor textarea {
  display: block;

  width: 100%;
  min-height: 125px;

  box-sizing: border-box;

  padding: 13px 14px;

  border: 0 !important;
  outline: 0 !important;

  resize: vertical;

  background:
    transparent !important;

  color:
    rgba(255,255,255,.84);

  font: inherit;

  line-height: 1.55;

  box-shadow:
    none !important;
}


.automation-message-editor textarea::placeholder {
  color:
    rgba(255,255,255,.25);
}


/* ---------------------------------------------------------
   Karten On/Off Slider
   --------------------------------------------------------- */

.automation-status-toggle {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  min-height: 32px;

  padding:
    4px 7px 4px 10px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 999px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.40);

  cursor: pointer;

  transition:
    border-color .17s ease,
    background .17s ease,
    color .17s ease,
    box-shadow .17s ease;
}


.automation-status-toggle:hover {
  border-color:
    rgba(208,135,178,.20);

  background:
    rgba(208,135,178,.045);
}


.automation-status-toggle.active {
  border-color:
    rgba(208,135,178,.22);

  background:
    rgba(208,135,178,.065);

  color:
    #e8b8d4;

  box-shadow:
    inset 0 0 14px
      rgba(208,135,178,.025);
}


.automation-status-toggle-label {
  min-width: 28px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .025em;

  text-align: center;
}


.automation-status-toggle-track {
  position: relative;

  display: block;

  width: 31px;
  height: 17px;

  flex: 0 0 31px;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius: 999px;

  background:
    rgba(255,255,255,.07);

  transition:
    border-color .17s ease,
    background .17s ease;
}


.automation-status-toggle-knob {
  position: absolute;

  top: 3px;
  left: 3px;

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.45);

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


.automation-status-toggle.active
.automation-status-toggle-track {
  border-color:
    rgba(208,135,178,.32);

  background:
    rgba(208,135,178,.18);
}


.automation-status-toggle.active
.automation-status-toggle-knob {
  transform:
    translateX(14px);

  background:
    #e2a9ca;

  box-shadow:
    0 0 8px
      rgba(208,135,178,.42);
}


.automation-status-toggle:disabled {
  opacity: .45;

  cursor: wait;
}


@media (max-width: 850px) {

  .automation-status-toggle {
    margin-left: auto;
  }
}


/* =========================================================
   AUTOMATION CREATE STATUS TOGGLE
   ========================================================= */

.automation-active-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding: 14px 15px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.022),
      rgba(255,255,255,.010)
    );
}


.automation-active-setting-copy {
  min-width: 0;
}


.automation-active-setting-copy strong {
  display: block;

  color:
    rgba(255,255,255,.78);

  font-size: 13px;
}


.automation-active-setting-copy span {
  display: block;

  margin-top: 4px;

  color:
    rgba(255,255,255,.32);

  font-size: 11px;
}


.automation-active-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  opacity: 0 !important;

  pointer-events: none !important;
}


.automation-create-toggle {
  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  gap: 9px;

  min-width: 105px;
  min-height: 36px;

  padding:
    5px 7px 5px 11px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 999px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.42);

  cursor: pointer;

  transition:
    .18s ease;
}


.automation-create-toggle:hover {
  border-color:
    rgba(208,135,178,.25);

  background:
    rgba(208,135,178,.045);
}


.automation-create-toggle-text {
  min-width: 48px;

  font-size: 11px;
  font-weight: 800;

  text-align: center;

  letter-spacing: .02em;
}


.automation-create-toggle-track {
  position: relative;

  width: 34px;
  height: 19px;

  flex: 0 0 34px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius: 999px;

  background:
    rgba(255,255,255,.07);

  transition:
    .18s ease;
}


.automation-create-toggle-knob {
  position: absolute;

  top: 3px;
  left: 3px;

  width: 11px;
  height: 11px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.42);

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


/* AKTIV */

.automation-create-toggle.active {
  border-color:
    rgba(208,135,178,.30);

  background:
    rgba(208,135,178,.09);

  color:
    #ecc1da;
}


.automation-create-toggle.active
.automation-create-toggle-track {
  border-color:
    rgba(208,135,178,.35);

  background:
    rgba(208,135,178,.19);
}


.automation-create-toggle.active
.automation-create-toggle-knob {
  transform:
    translateX(15px);

  background:
    #dea4c6;

  box-shadow:
    0 0 9px
      rgba(208,135,178,.45);
}


/* PAUSIERT */

.automation-create-toggle.inactive {
  color:
    rgba(255,255,255,.38);
}


@media (max-width: 520px) {

  .automation-active-setting {
    align-items: stretch;
    flex-direction: column;
  }


  .automation-create-toggle {
    justify-content: space-between;

    width: 100%;
  }
}


/* =========================================================
   GIVEAWAYS V1
   ========================================================= */

.giveaway-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}


.giveaway-header h2 {
  margin:
    4px 0 7px;
}


.giveaway-header p {
  margin: 0;
  color:
    rgba(255,255,255,.46);
}


.giveaway-warning {
  margin-bottom: 18px;
  padding: 12px 14px;
  border:
    1px solid rgba(208,135,178,.22);
  border-radius: 12px;
  background:
    rgba(208,135,178,.06);
  color:
    #e7b5d2;
}


.giveaway-metrics {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-bottom: 18px;
}


.giveaway-layout {
  display: grid;
  grid-template-columns:
    minmax(280px, .8fr)
    minmax(0, 1.65fr);
  gap: 18px;
  align-items: start;
}


.giveaway-list-panel,
.giveaway-detail-panel {
  min-width: 0;
}


.giveaway-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}


.giveaway-card {
  width: 100%;
  padding: 14px;
  border:
    1px solid rgba(255,255,255,.055);
  border-radius: 13px;
  background:
    rgba(255,255,255,.018);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}


.giveaway-card:hover {
  border-color:
    rgba(208,135,178,.20);
  background:
    rgba(208,135,178,.035);
}


.giveaway-card.selected {
  border-color:
    rgba(208,135,178,.34);
  background:
    linear-gradient(
      140deg,
      rgba(208,135,178,.09),
      rgba(255,255,255,.018)
    );
  box-shadow:
    inset 3px 0 0
      rgba(208,135,178,.7);
}


.giveaway-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}


.giveaway-card-title {
  min-width: 0;
}


.giveaway-card-title strong {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color:
    rgba(255,255,255,.88);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.giveaway-card-prize {
  margin-top: 10px;
  color:
    #dda2c5;
  font-size: 13px;
  font-weight: 700;
}


.giveaway-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 10px;
  color:
    rgba(255,255,255,.34);
  font-size: 11px;
}


.giveaway-card-timer,
.giveaway-live-timer {
  flex: 0 0 auto;
  color:
    #e1a8c9;
  font-variant-numeric:
    tabular-nums;
  font-size: 12px;
  font-weight: 800;
}


.giveaway-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding:
    3px 7px;
  border:
    1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background:
    rgba(255,255,255,.035);
  color:
    rgba(255,255,255,.48);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}


.giveaway-status.running {
  border-color:
    rgba(208,135,178,.32);
  background:
    rgba(208,135,178,.12);
  color:
    #e8b9d5;
  box-shadow:
    0 0 12px
      rgba(208,135,178,.08);
}


.giveaway-status.paused {
  border-color:
    rgba(255,255,255,.12);
  color:
    rgba(255,255,255,.61);
}


.giveaway-status.ended {
  opacity: .7;
}


.giveaway-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  padding: 28px;
  color:
    rgba(255,255,255,.34);
  text-align: center;
}


.giveaway-empty strong {
  color:
    rgba(255,255,255,.66);
  font-size: 14px;
}


.giveaway-empty span {
  max-width: 360px;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.55;
}


.giveaway-detail {
  min-height: 420px;
}


.giveaway-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}


.giveaway-detail-statusline {
  display: flex;
  align-items: center;
  gap: 10px;
}


.giveaway-detail-head h2 {
  margin:
    12px 0 5px;
  font-size: 22px;
}


.giveaway-detail-head p {
  margin: 0;
  color:
    rgba(255,255,255,.42);
  font-size: 12px;
}


.giveaway-prize-box {
  margin-top: 18px;
  padding: 16px;
  border:
    1px solid rgba(208,135,178,.16);
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      rgba(208,135,178,.08),
      rgba(255,255,255,.015)
    );
}


.giveaway-prize-box span,
.giveaway-current-winner > span,
.giveaway-message-preview > span {
  display: block;
  color:
    rgba(255,255,255,.33);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
}


.giveaway-prize-box strong {
  display: block;
  margin-top: 7px;
  color:
    #ebbbd7;
  font-size: 18px;
}


.giveaway-current-winner {
  margin-top: 12px;
  padding: 14px 16px;
  border:
    1px solid rgba(208,135,178,.18);
  border-radius: 12px;
  background:
    rgba(208,135,178,.055);
}


.giveaway-current-winner strong {
  display: block;
  margin-top: 6px;
  color:
    #efc5dd;
  font-size: 17px;
}


.giveaway-current-winner small {
  display: block;
  margin-top: 3px;
  color:
    rgba(255,255,255,.35);
}


.giveaway-info-grid {
  display: grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap: 8px;
  margin-top: 12px;
}


.giveaway-info-grid > div {
  padding: 11px 12px;
  border:
    1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  background:
    rgba(255,255,255,.015);
}


.giveaway-info-grid span {
  display: block;
  color:
    rgba(255,255,255,.31);
  font-size: 9px;
  text-transform: uppercase;
}


.giveaway-info-grid strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color:
    rgba(255,255,255,.76);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.giveaway-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}


.giveaway-detail-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top:
    1px solid rgba(255,255,255,.055);
}


.giveaway-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}


.giveaway-detail-section-head h3 {
  margin:
    3px 0 0;
  font-size: 14px;
}


.giveaway-entry-list,
.giveaway-winner-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 310px;
  overflow-y: auto;
}


.giveaway-entry-row {
  display: grid;
  grid-template-columns:
    28px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border:
    1px solid rgba(255,255,255,.045);
  border-radius: 9px;
  background:
    rgba(255,255,255,.014);
}


.giveaway-entry-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background:
    rgba(255,255,255,.035);
  color:
    rgba(255,255,255,.34);
  font-size: 10px;
  font-weight: 800;
}


.giveaway-entry-row strong,
.giveaway-entry-row small {
  display: block;
}


.giveaway-entry-row strong {
  color:
    rgba(255,255,255,.72);
  font-size: 12px;
}


.giveaway-entry-row small {
  margin-top: 2px;
  color:
    rgba(255,255,255,.28);
  font-size: 10px;
}


.giveaway-entry-row time {
  color:
    rgba(255,255,255,.27);
  font-size: 10px;
}


.giveaway-winner-row {
  display: flex;
  gap: 11px;
  padding: 11px;
  border:
    1px solid rgba(208,135,178,.11);
  border-radius: 10px;
  background:
    rgba(208,135,178,.035);
}


.giveaway-winner-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  background:
    rgba(208,135,178,.12);
  color:
    #dda3c5;
}


.giveaway-winner-copy strong,
.giveaway-winner-copy span,
.giveaway-winner-copy small {
  display: block;
}


.giveaway-winner-copy strong {
  color:
    #e8b7d3;
  font-size: 13px;
}


.giveaway-winner-copy span {
  margin-top: 2px;
  color:
    rgba(255,255,255,.57);
  font-size: 11px;
}


.giveaway-winner-copy small {
  margin-top: 4px;
  color:
    rgba(255,255,255,.27);
  font-size: 9px;
}


.giveaway-subempty {
  padding: 16px;
  border:
    1px dashed rgba(255,255,255,.06);
  border-radius: 10px;
  color:
    rgba(255,255,255,.29);
  font-size: 11px;
  text-align: center;
}


.giveaway-message-preview {
  margin-top: 18px;
  padding: 13px 14px;
  border:
    1px solid rgba(255,255,255,.05);
  border-radius: 11px;
  background:
    rgba(255,255,255,.014);
}


.giveaway-message-preview p {
  margin:
    7px 0 5px;
  color:
    rgba(255,255,255,.67);
  font-size: 12px;
  line-height: 1.5;
}


.giveaway-message-preview small {
  color:
    rgba(255,255,255,.29);
  font-size: 10px;
}


/* MODAL */

.giveaway-modal-overlay,
.giveaway-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    rgba(3,3,5,.76);
  backdrop-filter:
    blur(8px);
}


.giveaway-modal {
  width:
    min(680px,100%);
  max-height:
    calc(100vh - 44px);
  overflow-y: auto;
  border:
    1px solid rgba(208,135,178,.18);
  border-radius: 18px;
  background:
    #0d0d10;
  box-shadow:
    0 30px 90px
      rgba(0,0,0,.55),
    0 0 40px
      rgba(208,135,178,.045);
}


.giveaway-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 17px;
  border-bottom:
    1px solid rgba(255,255,255,.055);
}


.giveaway-modal-head h2 {
  margin:
    5px 0 0;
}


.giveaway-modal-close {
  width: 34px;
  height: 34px;
  border:
    1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background:
    rgba(255,255,255,.025);
  color:
    rgba(255,255,255,.42);
  cursor: pointer;
  font-size: 19px;
}


#giveaway-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 22px 22px;
}


.giveaway-form-grid {
  display: grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap: 12px;
}


.giveaway-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}


.giveaway-field > span,
.giveaway-message-head > span {
  color:
    rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 700;
}


.giveaway-field input,
.giveaway-field select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border:
    1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  outline: none;
  background:
    rgba(255,255,255,.025);
  color:
    rgba(255,255,255,.78);
}


.giveaway-field input:focus,
.giveaway-field select:focus {
  border-color:
    rgba(208,135,178,.36);
  box-shadow:
    0 0 0 3px
      rgba(208,135,178,.055);
}


.giveaway-config-card {
  padding: 14px;
  border:
    1px solid rgba(255,255,255,.055);
  border-radius: 12px;
  background:
    rgba(255,255,255,.014);
}


.giveaway-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}


.giveaway-config-head strong,
.giveaway-config-title strong {
  display: block;
  color:
    rgba(255,255,255,.70);
  font-size: 12px;
}


.giveaway-config-head span,
.giveaway-config-title span {
  display: block;
  margin-top: 3px;
  color:
    rgba(255,255,255,.31);
  font-size: 10px;
}


.giveaway-switch-control {
  flex: 0 0 auto;
  cursor: pointer;
}


.giveaway-switch-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


.giveaway-switch-track {
  position: relative;
  display: block;
  width: 38px;
  height: 22px;
  border:
    1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background:
    rgba(255,255,255,.06);
  transition: .18s ease;
}


.giveaway-switch-track > span {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  margin: 0;
  border-radius: 50%;
  background:
    rgba(255,255,255,.42);
  transition: .18s ease;
}


.giveaway-switch-control
input:checked +
.giveaway-switch-track {
  border-color:
    rgba(208,135,178,.34);
  background:
    rgba(208,135,178,.16);
}


.giveaway-switch-control
input:checked +
.giveaway-switch-track
> span {
  transform:
    translateX(16px);
  background:
    #dea5c6;
  box-shadow:
    0 0 9px
      rgba(208,135,178,.40);
}


.giveaway-duration-wrap {
  margin-top: 13px;
}


.giveaway-number-input {
  display: flex;
  align-items: center;
  border:
    1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background:
    rgba(255,255,255,.025);
}


.giveaway-number-input input {
  border: 0;
  background: transparent;
  box-shadow: none;
}


.giveaway-number-input > span {
  padding-right: 12px;
  color:
    rgba(255,255,255,.31);
  font-size: 10px;
}


.giveaway-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  cursor: pointer;
}


.giveaway-check-row input {
  margin-top: 3px;
  accent-color:
    #d087b2;
}


.giveaway-check-row strong,
.giveaway-check-row span {
  display: block;
}


.giveaway-check-row strong {
  color:
    rgba(255,255,255,.63);
  font-size: 11px;
}


.giveaway-check-row span {
  margin-top: 2px;
  color:
    rgba(255,255,255,.29);
  font-size: 10px;
}


.giveaway-check-row.fixed {
  opacity: .72;
  cursor: default;
}


.giveaway-message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


#giveaway-winner-count {
  color:
    rgba(255,255,255,.29);
  font-size: 10px;
}


#giveaway-winner-count.near-limit {
  color:
    #dda4c5;
}


.giveaway-message-editor {
  overflow: hidden;
  border:
    1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background:
    rgba(255,255,255,.025);
}


.giveaway-message-editor:focus-within {
  border-color:
    rgba(208,135,178,.36);
  box-shadow:
    0 0 0 3px
      rgba(208,135,178,.055);
}


.giveaway-message-editor textarea {
  display: block;
  width: 100%;
  min-height: 105px;
  padding: 12px 13px;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color:
    rgba(255,255,255,.78);
  font: inherit;
  line-height: 1.5;
}


.giveaway-placeholder-help {
  color:
    rgba(255,255,255,.28);
  font-size: 10px;
}


.giveaway-placeholder-help code {
  color:
    #dda3c5;
}


.giveaway-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}


.giveaway-confirm {
  width:
    min(430px,100%);
  padding: 21px;
  border:
    1px solid rgba(208,135,178,.17);
  border-radius: 17px;
  background:
    #0d0d10;
  box-shadow:
    0 30px 80px
      rgba(0,0,0,.55);
}


.giveaway-confirm h2 {
  margin:
    7px 0 8px;
}


.giveaway-confirm p {
  margin: 0;
  color:
    rgba(255,255,255,.43);
  font-size: 12px;
  line-height: 1.55;
}


.giveaway-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}


@media (max-width: 1000px) {

  .giveaway-metrics {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .giveaway-layout {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 650px) {

  .giveaway-header {
    flex-direction: column;
  }


  .giveaway-header
  #giveaway-create-btn {
    width: 100%;
  }


  .giveaway-form-grid,
  .giveaway-info-grid {
    grid-template-columns: 1fr;
  }


  .giveaway-entry-row {
    grid-template-columns:
      28px minmax(0,1fr);
  }


  .giveaway-entry-row time {
    display: none;
  }


  .giveaway-modal-actions,
  .giveaway-confirm-actions {
    flex-direction: column-reverse;
  }


  .giveaway-modal-actions .btn,
  .giveaway-confirm-actions .btn {
    width: 100%;
  }
}


/* =========================================================
   GIVEAWAY ABLAUF OPTIONEN POLISH
   ========================================================= */

.giveaway-expiry-option {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-top: 10px;

  padding: 12px 13px;

  border:
    1px solid rgba(255,255,255,.05);

  border-radius: 10px;

  background:
    rgba(255,255,255,.012);
}


.giveaway-expiry-option:first-of-type {
  margin-top: 13px;
}


.giveaway-expiry-option:hover {
  border-color:
    rgba(208,135,178,.12);

  background:
    rgba(208,135,178,.018);
}


.giveaway-expiry-copy {
  min-width: 0;
}


.giveaway-expiry-copy strong {
  display: block;

  color:
    rgba(255,255,255,.68);

  font-size: 11px;
}


.giveaway-expiry-copy span {
  display: block;

  margin-top: 3px;

  color:
    rgba(255,255,255,.29);

  font-size: 10px;

  line-height: 1.45;
}


.giveaway-expiry-option.fixed {
  opacity: .72;
}


.giveaway-expiry-fixed {
  flex: 0 0 auto;

  padding:
    5px 8px;

  border:
    1px solid rgba(208,135,178,.18);

  border-radius: 999px;

  background:
    rgba(208,135,178,.07);

  color:
    #d9a1c2;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .08em;
}


@media (max-width: 520px) {

  .giveaway-expiry-option {
    gap: 12px;
  }


  .giveaway-expiry-copy span {
    max-width: 220px;
  }
}


/* =========================================================
   GIVEAWAY TEILNAHME MODUS
   ========================================================= */

.giveaway-entry-mode-switch {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 6px;

  padding: 4px;

  min-height: 42px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 10px;

  background:
    rgba(255,255,255,.025);
}


.giveaway-entry-mode-btn {
  border:
    1px solid transparent;

  border-radius: 7px;

  background:
    transparent;

  color:
    rgba(255,255,255,.38);

  cursor: pointer;

  font-size: 11px;
  font-weight: 750;

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}


.giveaway-entry-mode-btn:hover {
  color:
    rgba(255,255,255,.65);

  background:
    rgba(255,255,255,.025);
}


.giveaway-entry-mode-btn.active {
  border-color:
    rgba(208,135,178,.25);

  background:
    rgba(208,135,178,.11);

  color:
    #e5b2d0;

  box-shadow:
    0 0 12px
      rgba(208,135,178,.05);
}


/* =========================================================
   LOGOUT BESTÄTIGUNG
   ========================================================= */

.logout-confirm-overlay {
  position: fixed;
  inset: 0;

  z-index: 12000;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    rgba(4,4,7,.76);

  backdrop-filter:
    blur(8px);
}


.logout-confirm-card {
  position: relative;

  width:
    min(420px,100%);

  padding: 24px;

  overflow: hidden;

  border:
    1px solid
      rgba(208,135,178,.18);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      transparent 45%
    ),
    #0d0d11;

  box-shadow:
    0 30px 90px
      rgba(0,0,0,.58);
}


.logout-confirm-card::before {
  position: absolute;

  top: -90px;
  right: -90px;

  width: 190px;
  height: 190px;

  content: "";

  border-radius: 50%;

  background:
    rgba(208,135,178,.11);

  filter:
    blur(55px);

  pointer-events: none;
}


.logout-confirm-card h2 {
  position: relative;

  margin:
    9px 0 8px;
}


.logout-confirm-card p {
  position: relative;

  margin: 0;

  color:
    rgba(255,255,255,.43);

  font-size: 12px;

  line-height: 1.55;
}


.logout-confirm-actions {
  position: relative;

  display: flex;

  justify-content:
    flex-end;

  gap: 8px;

  margin-top: 22px;
}


@media (max-width: 520px) {

  .logout-confirm-actions {
    flex-direction:
      column-reverse;
  }


  .logout-confirm-actions
  .btn {
    width: 100%;
  }
}


/* =========================================================
   LOGIN SOCIAL LINKS
   ========================================================= */

.login-socials {
  position: relative;

  margin-top: 24px;
  padding-top: 20px;

  border-top:
    1px solid rgba(255,255,255,.055);
}


.login-socials-head {
  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 10px;

  margin-bottom: 12px;
}


.login-socials-head span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(208,135,178,.16)
    );
}


.login-socials-head span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(208,135,178,.16),
      transparent
    );
}


.login-socials-head small {
  color:
    rgba(255,255,255,.28);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .14em;
}


.login-social-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 8px;
}


.login-social-link {
  display: flex;

  align-items: center;

  gap: 9px;

  min-height: 42px;

  padding: 8px 10px;

  border:
    1px solid rgba(255,255,255,.065);

  border-radius: 11px;

  background:
    rgba(255,255,255,.018);

  color:
    rgba(255,255,255,.55);

  text-decoration: none;

  font-size: 11px;
  font-weight: 700;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}


.login-social-link:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(208,135,178,.28);

  background:
    rgba(208,135,178,.07);

  color:
    rgba(255,255,255,.88);

  box-shadow:
    0 8px 24px
      rgba(208,135,178,.055);
}


.login-social-icon {
  display: grid;
  place-items: center;

  width: 25px;
  height: 25px;

  flex: 0 0 auto;

  border:
    1px solid rgba(208,135,178,.18);

  border-radius: 8px;

  background:
    rgba(208,135,178,.07);

  color:
    #e5b2d0;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: -.02em;

  box-shadow:
    inset 0 0 10px
      rgba(208,135,178,.025);
}


.login-social-discord {
  grid-column:
    1 / -1;

  justify-content: center;
}


@media (max-width: 480px) {

  .login-social-grid {
    grid-template-columns:
      1fr;
  }


  .login-social-discord {
    grid-column:
      auto;
  }
}


/* =========================================================
   LOGIN SOCIAL SVG ICONS
   ========================================================= */

.login-social-icon svg {
  width: 14px;
  height: 14px;

  display: block;

  fill: currentColor;
}


.login-social-icon svg circle,
.login-social-icon svg rect {
  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;
}


.login-social-icon-cutout {
  fill: #151319 !important;
}


/* =========================================================
   SYSTEM BOT STATUS V1
   ========================================================= */

.system-status-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;
}


.system-status-header h2 {
  margin:
    7px 0 5px;
}


.system-status-header p {
  margin: 0;

  font-size: 11px;
}


.system-status-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap: 12px;
}


.system-status-card {
  position: relative;

  min-width: 0;

  padding: 18px;

  overflow: hidden;

  border:
    1px solid
      rgba(255,255,255,.06);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.022),
      transparent 55%
    ),
    rgba(13,13,17,.78);

  box-shadow:
    0 14px 40px
      rgba(0,0,0,.16);
}


.system-status-card::before {
  position: absolute;

  top: 0;
  left: 18px;
  right: 18px;

  height: 1px;

  content: "";

  opacity: .5;

  background:
    rgba(255,255,255,.08);
}


.system-status-card.online::before {
  background:
    rgba(122,210,153,.55);
}


.system-status-card.offline::before {
  background:
    rgba(235,103,123,.58);
}


.system-status-card.warning::before {
  background:
    rgba(224,181,100,.58);
}


.system-status-card.neutral::before {
  background:
    rgba(208,135,178,.48);
}


.system-status-card-head {
  position: relative;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;
}


.system-status-eyebrow {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(255,255,255,.25);

  font-size: 8px;
  font-weight: 850;

  letter-spacing: .13em;
}


.system-status-card h3 {
  margin: 0;

  color:
    rgba(255,255,255,.85);

  font-size: 15px;
}


.system-state {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  flex: 0 0 auto;

  padding: 5px 7px;

  border:
    1px solid
      rgba(255,255,255,.07);

  border-radius: 999px;

  color:
    rgba(255,255,255,.42);

  font-size: 8px;
  font-weight: 850;

  letter-spacing: .08em;
}


.system-state-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    currentColor;

  box-shadow:
    0 0 9px
      currentColor;
}


.system-state.online {
  border-color:
    rgba(122,210,153,.14);

  background:
    rgba(122,210,153,.045);

  color:
    rgba(143,225,171,.82);
}


.system-state.offline {
  border-color:
    rgba(235,103,123,.15);

  background:
    rgba(235,103,123,.045);

  color:
    rgba(241,122,140,.84);
}


.system-state.warning {
  border-color:
    rgba(224,181,100,.15);

  background:
    rgba(224,181,100,.045);

  color:
    rgba(234,195,119,.82);
}


.system-state.neutral {
  border-color:
    rgba(208,135,178,.15);

  background:
    rgba(208,135,178,.045);

  color:
    rgba(226,166,201,.76);
}


.system-status-rows {
  display: grid;

  gap: 8px;

  margin-top: 19px;
}


.system-status-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 14px;

  min-height: 22px;

  padding-top: 8px;

  border-top:
    1px solid
      rgba(255,255,255,.035);
}


.system-status-row span {
  color:
    rgba(255,255,255,.28);

  font-size: 9px;
}


.system-status-row strong {
  min-width: 0;

  overflow: hidden;

  color:
    rgba(255,255,255,.61);

  font-size: 9px;
  font-weight: 750;

  text-align: right;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.system-status-message {
  min-height: 16px;

  margin-bottom: 8px;

  color:
    rgba(241,122,140,.85);

  font-size: 10px;
}


.system-status-footer {
  display: flex;

  justify-content: space-between;

  gap: 12px;

  margin-top: 14px;

  color:
    rgba(255,255,255,.22);

  font-size: 9px;
}


.system-status-loading,
.system-status-error {
  grid-column:
    1 / -1;

  color:
    rgba(255,255,255,.38);

  font-size: 11px;
}


@media (max-width: 1100px) {

  .system-status-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}


@media (max-width: 650px) {

  .system-status-header {
    flex-direction:
      column;
  }


  .system-status-header
  .btn {
    width: 100%;
  }


  .system-status-grid {
    grid-template-columns:
      1fr;
  }


  .system-status-footer {
    flex-direction:
      column;
  }
}


/* =========================================================
   UI SIZE POLISH
   Größere Systemkarten + größere Sidebar
   ========================================================= */


/* ---------- SIDEBAR KATEGORIEN ---------- */

.navgroup-title {
  font-size: 12px !important;

  font-weight: 850 !important;

  letter-spacing: .08em !important;
}


.navgroup-toggle {
  min-height: 39px !important;

  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


.nav-chevron {
  font-size: 18px !important;
}


/* ---------- SIDEBAR MENÜEINTRÄGE ---------- */

.navitem {
  min-height: 42px !important;

  padding-top: 9px !important;
  padding-bottom: 9px !important;
}


.navitem-text {
  font-size: 12.5px !important;

  font-weight: 700 !important;
}


.nav-dot {
  width: 7px !important;
  height: 7px !important;
}


/* ---------- SYSTEM STATUS HEADER ---------- */

.system-status-header {
  margin-bottom: 26px;
}


.system-status-header .tiny {
  font-size: 10px;
}


.system-status-header h2 {
  margin-top: 9px;

  font-size: 23px;
}


.system-status-header p {
  font-size: 13px;

  line-height: 1.55;
}


/* ---------- SYSTEM STATUS KARTEN ---------- */

.system-status-grid {
  gap: 16px;
}


.system-status-card {
  min-height: 220px;

  padding: 24px;

  border-radius: 19px;
}


.system-status-card::before {
  left: 24px;
  right: 24px;
}


/* ---------- KARTEN TITEL ---------- */

.system-status-eyebrow {
  margin-bottom: 7px;

  font-size: 10px;

  letter-spacing: .12em;
}


.system-status-card h3 {
  font-size: 18px;

  line-height: 1.25;
}


/* ---------- ONLINE / OFFLINE BADGE ---------- */

.system-state {
  gap: 7px;

  padding: 7px 9px;

  font-size: 9.5px;
}


.system-state-dot {
  width: 8px;
  height: 8px;
}


/* ---------- KARTEN DETAILS ---------- */

.system-status-rows {
  gap: 10px;

  margin-top: 24px;
}


.system-status-row {
  min-height: 31px;

  padding-top: 10px;
}


.system-status-row span {
  font-size: 11px;
}


.system-status-row strong {
  font-size: 11px;

  font-weight: 750;
}


/* ---------- STATUS FOOTER ---------- */

.system-status-footer {
  margin-top: 18px;

  font-size: 10.5px;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 1200px) {

  .system-status-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}


@media (max-width: 650px) {

  .system-status-card {
    min-height: auto;

    padding: 20px;
  }


  .system-status-card h3 {
    font-size: 17px;
  }


  .navitem-text {
    font-size: 12px !important;
  }
}


/* =========================================================
   EXTRA LARGE SYSTEM STATUS CARDS
   ========================================================= */

.system-status-grid {
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap: 20px;
}


.system-status-card {
  min-height: 280px;

  padding: 30px;

  border-radius: 22px;
}


.system-status-card::before {
  left: 30px;
  right: 30px;
}


.system-status-eyebrow {
  margin-bottom: 9px;

  font-size: 11px;
}


.system-status-card h3 {
  font-size: 21px;
}


.system-state {
  padding: 8px 11px;

  font-size: 10px;
}


.system-state-dot {
  width: 9px;
  height: 9px;
}


.system-status-rows {
  gap: 13px;

  margin-top: 30px;
}


.system-status-row {
  min-height: 38px;

  padding-top: 12px;
}


.system-status-row span {
  font-size: 12px;
}


.system-status-row strong {
  font-size: 12px;
}


@media (max-width: 1250px) {

  .system-status-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}


@media (max-width: 700px) {

  .system-status-grid {
    grid-template-columns:
      1fr;
  }


  .system-status-card {
    min-height: 240px;

    padding: 24px;
  }
}


/* =========================================================
   BOT STATUS PRIVACY GATE
   ========================================================= */

#page-botstatus {
  position: relative;
}


.system-status-sensitive-content {
  transition:
    filter .2s ease,
    opacity .2s ease,
    transform .2s ease;
}


.system-status-locked
.system-status-sensitive-content {
  filter:
    blur(15px);

  opacity: .28;

  transform:
    scale(.995);

  pointer-events: none;

  user-select: none;
}


.system-status-privacy-gate {
  position: absolute;

  inset: 0;

  z-index: 80;

  display: flex;

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

  min-height: 620px;

  padding:
    70px 20px 40px;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(208,135,178,.07),
      transparent 38%
    );
}


.system-status-privacy-gate.hidden {
  display: none;
}


.system-status-privacy-card {
  position: sticky;

  top: 90px;

  width:
    min(520px,100%);

  padding: 32px;

  overflow: hidden;

  border:
    1px solid
      rgba(208,135,178,.22);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      transparent 48%
    ),
    rgba(12,12,16,.97);

  box-shadow:
    0 30px 100px
      rgba(0,0,0,.65),
    0 0 45px
      rgba(208,135,178,.055);

  text-align: center;
}


.system-status-privacy-card::before {
  position: absolute;

  top: -100px;
  right: -100px;

  width: 240px;
  height: 240px;

  content: "";

  border-radius: 50%;

  background:
    rgba(208,135,178,.10);

  filter:
    blur(70px);

  pointer-events: none;
}


.system-status-privacy-icon {
  display: grid;
  place-items: center;

  width: 54px;
  height: 54px;

  margin:
    0 auto 19px;

  border:
    1px solid
      rgba(208,135,178,.28);

  border-radius: 17px;

  background:
    rgba(208,135,178,.08);

  color:
    var(--accent-bright);

  font-size: 24px;
  font-weight: 900;

  box-shadow:
    0 0 25px
      rgba(208,135,178,.08);
}


.system-status-privacy-card h2 {
  position: relative;

  margin:
    10px 0 10px;

  font-size: 25px;
}


.system-status-privacy-card > p {
  position: relative;

  max-width: 420px;

  margin:
    0 auto;

  color:
    rgba(255,255,255,.45);

  font-size: 12px;

  line-height: 1.65;
}


.system-status-stream-warning {
  position: relative;

  display: grid;

  gap: 5px;

  margin-top: 24px;

  padding: 16px 18px;

  border:
    1px solid
      rgba(224,181,100,.18);

  border-radius: 14px;

  background:
    rgba(224,181,100,.045);

  text-align: left;
}


.system-status-stream-warning strong {
  color:
    rgba(239,200,123,.9);

  font-size: 12px;
}


.system-status-stream-warning span {
  color:
    rgba(255,255,255,.42);

  font-size: 10.5px;

  line-height: 1.55;
}


.system-status-privacy-actions {
  position: relative;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  margin-top: 24px;
}


.system-status-privacy-actions
.btn {
  min-height: 43px;
}


@media (max-width: 560px) {

  .system-status-privacy-gate {
    padding:
      35px 14px;
  }


  .system-status-privacy-card {
    padding: 24px;
  }


  .system-status-privacy-actions {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   SYSTEM LOGS V1
   ========================================================= */

#page-logs {
  position: relative;
}


.system-logs-sensitive-content {
  transition:
    filter .2s ease,
    opacity .2s ease,
    transform .2s ease;
}


.system-logs-locked
.system-logs-sensitive-content {
  filter:
    blur(16px);

  opacity: .22;

  transform:
    scale(.995);

  pointer-events: none;

  user-select: none;
}


/* ---------- PRIVACY GATE ---------- */

.system-logs-privacy-gate {
  position: absolute;

  inset: 0;

  z-index: 90;

  display: flex;

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

  min-height: 700px;

  padding:
    70px 20px 40px;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(208,135,178,.075),
      transparent 40%
    );
}


.system-logs-privacy-gate.hidden {
  display: none;
}


.system-logs-privacy-card {
  position: sticky;

  top: 90px;

  width:
    min(560px,100%);

  padding: 34px;

  overflow: hidden;

  border:
    1px solid
      rgba(208,135,178,.22);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      transparent 48%
    ),
    rgba(12,12,16,.98);

  box-shadow:
    0 30px 100px
      rgba(0,0,0,.68),
    0 0 45px
      rgba(208,135,178,.055);

  text-align: center;
}


.system-logs-privacy-icon {
  display: grid;

  place-items: center;

  width: 56px;
  height: 56px;

  margin:
    0 auto 20px;

  border:
    1px solid
      rgba(208,135,178,.28);

  border-radius: 18px;

  background:
    rgba(208,135,178,.08);

  color:
    var(--accent-bright);

  font-size: 25px;
  font-weight: 900;

  box-shadow:
    0 0 28px
      rgba(208,135,178,.09);
}


.system-logs-privacy-card h2 {
  margin:
    10px 0;

  font-size: 25px;
}


.system-logs-privacy-card > p {
  max-width: 440px;

  margin:
    0 auto;

  color:
    rgba(255,255,255,.45);

  font-size: 12px;

  line-height: 1.65;
}


.system-logs-stream-warning,
.system-logs-security-note {
  display: grid;

  gap: 5px;

  margin-top: 20px;

  padding: 16px 18px;

  border-radius: 14px;

  text-align: left;
}


.system-logs-stream-warning {
  border:
    1px solid
      rgba(224,181,100,.18);

  background:
    rgba(224,181,100,.045);
}


.system-logs-stream-warning strong {
  color:
    rgba(239,200,123,.92);

  font-size: 12px;
}


.system-logs-security-note {
  margin-top: 10px;

  border:
    1px solid
      rgba(122,210,153,.13);

  background:
    rgba(122,210,153,.035);
}


.system-logs-security-note strong {
  color:
    rgba(143,225,171,.78);

  font-size: 11px;
}


.system-logs-stream-warning span,
.system-logs-security-note span {
  color:
    rgba(255,255,255,.42);

  font-size: 10.5px;

  line-height: 1.55;
}


.system-logs-privacy-actions {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  margin-top: 24px;
}


.system-logs-privacy-actions
.btn {
  min-height: 44px;
}


/* ---------- HEADER ---------- */

.system-logs-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 24px;
}


.system-logs-header h2 {
  margin:
    8px 0 6px;

  font-size: 23px;
}


.system-logs-header p {
  margin: 0;

  font-size: 12px;
}


/* ---------- TABS ---------- */

.system-logs-tabs {
  display: flex;

  gap: 8px;

  margin-bottom: 14px;

  padding: 5px;

  width: fit-content;

  border:
    1px solid
      rgba(255,255,255,.055);

  border-radius: 13px;

  background:
    rgba(255,255,255,.018);
}


.system-logs-tab {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-height: 38px;

  padding:
    0 14px;

  border: 0;

  border-radius: 9px;

  background:
    transparent;

  color:
    rgba(255,255,255,.38);

  cursor: pointer;

  font: inherit;

  font-size: 10.5px;
  font-weight: 750;

  transition:
    color .16s ease,
    background .16s ease;
}


.system-logs-tab:hover {
  color:
    rgba(255,255,255,.7);

  background:
    rgba(255,255,255,.03);
}


.system-logs-tab.active {
  color:
    rgba(255,255,255,.84);

  background:
    rgba(208,135,178,.09);

  box-shadow:
    inset 0 0 0 1px
      rgba(208,135,178,.13);
}


.system-logs-tab-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.2);
}


.system-logs-tab.active
.system-logs-tab-dot {
  background:
    #d087b2;

  box-shadow:
    0 0 10px
      rgba(208,135,178,.55);
}


/* ---------- TOOLBAR ---------- */

.system-logs-toolbar {
  display: grid;

  grid-template-columns:
    minmax(260px,1fr)
    180px
    190px;

  gap: 10px;

  margin-bottom: 12px;
}


.system-logs-search-wrap {
  position: relative;
}


.system-logs-search-icon {
  position: absolute;

  top: 50%;
  left: 13px;

  transform:
    translateY(-50%);

  color:
    rgba(255,255,255,.25);

  pointer-events: none;

  font-size: 17px;
}


.system-logs-search,
.system-logs-select {
  width: 100%;

  min-height: 42px;

  border:
    1px solid
      rgba(255,255,255,.065);

  border-radius: 11px;

  outline: 0;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.72);

  font: inherit;

  font-size: 11px;

  transition:
    border-color .15s ease,
    background .15s ease;
}


.system-logs-search {
  padding:
    0 14px 0 39px;
}


.system-logs-select {
  padding:
    0 12px;
}


.system-logs-search:focus,
.system-logs-select:focus {
  border-color:
    rgba(208,135,178,.28);

  background:
    rgba(208,135,178,.035);
}


.system-logs-search::placeholder {
  color:
    rgba(255,255,255,.22);
}


/* ---------- SUMMARY ---------- */

.system-logs-summary {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  min-height: 34px;

  margin-bottom: 8px;

  color:
    rgba(255,255,255,.27);

  font-size: 9.5px;
}


.system-logs-message {
  min-height: 16px;

  margin-bottom: 7px;

  color:
    rgba(241,122,140,.85);

  font-size: 10px;
}


/* ---------- LOG LIST ---------- */

.system-logs-list {
  display: grid;

  gap: 7px;

  max-height: 680px;

  padding-right: 4px;

  overflow-y: auto;
}


.system-log-entry {
  position: relative;

  padding:
    13px 15px;

  overflow: hidden;

  border:
    1px solid
      rgba(255,255,255,.045);

  border-radius: 12px;

  background:
    rgba(255,255,255,.016);
}


.system-log-entry::before {
  position: absolute;

  top: 10px;
  bottom: 10px;
  left: 0;

  width: 2px;

  content: "";

  border-radius:
    0 3px 3px 0;

  background:
    rgba(255,255,255,.12);
}


.system-log-entry.level-info::before {
  background:
    rgba(208,135,178,.55);
}


.system-log-entry.level-warn::before {
  background:
    rgba(224,181,100,.75);
}


.system-log-entry.level-error::before {
  background:
    rgba(235,103,123,.8);
}


.system-log-entry.level-debug::before {
  background:
    rgba(130,160,220,.58);
}


.system-log-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 8px;
}


.system-log-meta {
  display: flex;

  align-items: center;

  gap: 8px;
}


.system-log-level {
  display: inline-flex;

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

  min-width: 48px;

  min-height: 22px;

  padding:
    0 7px;

  border-radius: 7px;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .08em;
}


.system-log-level.info {
  background:
    rgba(208,135,178,.07);

  color:
    rgba(225,162,199,.82);
}


.system-log-level.warn {
  background:
    rgba(224,181,100,.07);

  color:
    rgba(235,195,119,.9);
}


.system-log-level.error {
  background:
    rgba(235,103,123,.075);

  color:
    rgba(241,122,140,.92);
}


.system-log-level.debug {
  background:
    rgba(130,160,220,.07);

  color:
    rgba(157,183,230,.82);
}


.system-log-category {
  color:
    rgba(255,255,255,.34);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .06em;
}


.system-log-time {
  flex: 0 0 auto;

  color:
    rgba(255,255,255,.22);

  font-size: 9px;
}


.system-log-message {
  color:
    rgba(255,255,255,.66);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 11px;

  line-height: 1.55;

  overflow-wrap: anywhere;
}


.system-logs-empty {
  display: grid;

  place-items: center;

  gap: 6px;

  min-height: 180px;

  padding: 30px;

  border:
    1px dashed
      rgba(255,255,255,.055);

  border-radius: 14px;

  color:
    rgba(255,255,255,.28);

  text-align: center;

  font-size: 11px;
}


.system-logs-empty strong {
  color:
    rgba(255,255,255,.5);

  font-size: 12px;
}


.system-logs-empty span {
  color:
    rgba(255,255,255,.28);
}


.system-logs-empty.error strong {
  color:
    rgba(241,122,140,.78);
}


/* ---------- FOOTER ---------- */

.system-logs-footer {
  display: flex;

  justify-content: space-between;

  gap: 12px;

  margin-top: 13px;

  color:
    rgba(255,255,255,.2);

  font-size: 9px;
}


/* ---------- SCROLLBAR ---------- */

.system-logs-list {
  scrollbar-width: thin;

  scrollbar-color:
    rgba(208,135,178,.22)
    transparent;
}


.system-logs-list::-webkit-scrollbar {
  width: 6px;
}


.system-logs-list::-webkit-scrollbar-track {
  background:
    transparent;
}


.system-logs-list::-webkit-scrollbar-thumb {
  border-radius: 10px;

  background:
    rgba(208,135,178,.20);
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 950px) {

  .system-logs-toolbar {
    grid-template-columns:
      1fr 1fr;
  }


  .system-logs-search-wrap {
    grid-column:
      1 / -1;
  }
}


@media (max-width: 650px) {

  .system-logs-header {
    flex-direction:
      column;
  }


  .system-logs-header .btn {
    width: 100%;
  }


  .system-logs-tabs {
    display: grid;

    width: 100%;

    grid-template-columns:
      1fr 1fr;
  }


  .system-logs-tab {
    justify-content:
      center;
  }


  .system-logs-toolbar {
    grid-template-columns:
      1fr;
  }


  .system-logs-search-wrap {
    grid-column:
      auto;
  }


  .system-log-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .system-logs-summary,
  .system-logs-footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .system-logs-privacy-gate {
    padding:
      35px 14px;
  }


  .system-logs-privacy-card {
    padding: 24px;
  }


  .system-logs-privacy-actions {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   SYSTEM LOG FILTER SELECT FIX
   ========================================================= */

.system-logs-select {
  color-scheme: dark !important;

  background-color:
    #111116 !important;

  color:
    rgba(255,255,255,.82) !important;

  cursor: pointer;
}


.system-logs-select option {
  background:
    #111116 !important;

  color:
    #eeeeF2 !important;

  padding:
    8px;
}


.system-logs-select option:checked {
  background:
    #241a21 !important;

  color:
    #ffffff !important;
}



/* =========================================================
   SETTINGS V2
   ========================================================= */

.settings-v2 {
  display:
    grid;

  gap:
    18px;
}


.settings-v2-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    24px 26px;

  border:
    1px solid
    rgba(208,135,178,.14);

  border-radius:
    20px;

  background:
    linear-gradient(
      135deg,
      rgba(208,135,178,.07),
      rgba(255,255,255,.012)
    );

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.20);
}


.settings-v2-header h2 {
  margin:
    5px 0;

  font-size:
    25px;
}


.settings-v2-header p {
  margin:
    0;

  color:
    rgba(255,255,255,.42);
}


.settings-v2-kicker {
  color:
    var(--accent-bright);

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    .16em;
}


.settings-global-badge {
  padding:
    8px 12px;

  border:
    1px solid
    rgba(111,226,163,.17);

  border-radius:
    999px;

  background:
    rgba(111,226,163,.055);

  color:
    rgba(183,255,216,.82);

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    .1em;
}


/* =========================================================
   SETTINGS LAYOUT
   ========================================================= */

.settings-v2-layout {
  display:
    grid;

  grid-template-columns:
    235px
    minmax(0,1fr);

  gap:
    18px;

  align-items:
    start;
}


.settings-v2-menu {
  position:
    sticky;

  top:
    18px;

  display:
    grid;

  gap:
    6px;

  padding:
    9px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:
    17px;

  background:
    rgba(255,255,255,.018);
}


.settings-v2-menu-item {
  display:
    grid;

  gap:
    3px;

  width:
    100%;

  padding:
    13px;

  cursor:
    pointer;

  border:
    1px solid
    transparent;

  border-radius:
    11px;

  background:
    transparent;

  text-align:
    left;

  transition:
    background var(--transition),
    border-color var(--transition);
}


.settings-v2-menu-item strong {
  color:
    rgba(255,255,255,.67);

  font-size:
    12px;
}


.settings-v2-menu-item span {
  color:
    rgba(255,255,255,.27);

  font-size:
    9px;

  line-height:
    1.4;
}


.settings-v2-menu-item:hover {
  background:
    rgba(255,255,255,.025);
}


.settings-v2-menu-item.active {
  border-color:
    color-mix(
      in srgb,
      var(--accent-bright) 22%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--accent-bright) 8%,
      transparent
    );
}


.settings-v2-menu-item.active strong {
  color:
    #f2d6e7;
}


.settings-v2-content {
  min-width:
    0;
}


.settings-v2-panel {
  min-height:
    450px;
}


.settings-v2-loading,
.settings-v2-error {
  display:
    grid;

  place-items:
    center;

  min-height:
    300px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:
    16px;

  color:
    rgba(255,255,255,.35);
}


.settings-v2-error {
  color:
    rgba(255,150,165,.85);
}


/* =========================================================
   SETTINGS CONTENT
   ========================================================= */

.settings-stack {
  display:
    grid;

  gap:
    14px;
}


.settings-panel-heading {
  padding:
    4px 3px
    7px;
}


.settings-panel-heading > span {
  color:
    var(--accent-bright);

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    .15em;
}


.settings-panel-heading h3 {
  margin:
    5px 0;

  font-size:
    22px;
}


.settings-panel-heading p {
  max-width:
    720px;

  margin:
    0;

  color:
    rgba(255,255,255,.40);

  line-height:
    1.5;
}


.settings-card-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    14px;
}


.settings-v2-card {
  padding:
    20px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:
    17px;

  background:
    rgba(255,255,255,.021);

  box-shadow:
    0 12px 35px
    rgba(0,0,0,.13);
}


.settings-card-head {
  display:
    grid;

  gap:
    3px;

  margin-bottom:
    15px;
}


.settings-card-head strong {
  font-size:
    14px;
}


.settings-card-head span {
  color:
    rgba(255,255,255,.31);

  font-size:
    9px;

  line-height:
    1.4;
}


.settings-field-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    12px;
}


.settings-v2-field {
  display:
    grid;

  gap:
    6px;

  min-width:
    0;
}


.settings-v2-field > span {
  color:
    rgba(255,255,255,.55);

  font-size:
    10px;

  font-weight:
    750;
}


.settings-v2-field input,
.settings-row-url,
.settings-color-row input[type="text"] {
  width:
    100%;

  min-height:
    41px;

  box-sizing:
    border-box;

  padding:
    9px 11px;

  outline:
    none;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:
    10px;

  background:
    #101014;

  color:
    rgba(255,255,255,.82);

  font:
    inherit;

  font-size:
    11px;

  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}


.settings-v2-field input:focus,
.settings-row-url:focus,
.settings-color-row input:focus {
  border-color:
    color-mix(
      in srgb,
      var(--accent-bright) 50%,
      transparent
    );

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--accent-bright) 9%,
      transparent
    );
}


.settings-v2-field small {
  color:
    rgba(255,255,255,.26);

  font-size:
    9px;

  line-height:
    1.4;
}


/* =========================================================
   SOCIALS
   ========================================================= */

.settings-social-heading {
  width:
    min(420px,100%);

  margin-bottom:
    15px;
}


.settings-social-list {
  display:
    grid;

  gap:
    7px;
}


.settings-social-row {
  display:
    grid;

  grid-template-columns:
    27px
    90px
    minmax(0,1fr)
    auto
    auto;

  gap:
    10px;

  align-items:
    center;

  padding:
    9px 10px;

  border:
    1px solid
    rgba(255,255,255,.048);

  border-radius:
    11px;

  background:
    rgba(0,0,0,.13);
}


.settings-social-row strong {
  font-size:
    11px;
}


.settings-row-handle {
  color:
    rgba(255,255,255,.20);

  cursor:
    grab;

  font-size:
    15px;

  text-align:
    center;
}


/* =========================================================
   SWITCH
   ========================================================= */

.settings-switch {
  position:
    relative;

  display:
    inline-flex;

  width:
    42px;

  height:
    23px;

  cursor:
    pointer;
}


.settings-switch input {
  position:
    absolute;

  opacity:
    0;
}


.settings-switch span {
  position:
    absolute;

  inset:
    0;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.055);

  transition:
    all var(--transition);
}


.settings-switch span::after {
  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    15px;

  height:
    15px;

  content:
    "";

  border-radius:
    50%;

  background:
    rgba(255,255,255,.48);

  transition:
    all var(--transition);
}


.settings-switch
input:checked + span {
  border-color:
    color-mix(
      in srgb,
      var(--accent-bright) 35%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--accent-bright) 20%,
      transparent
    );
}


.settings-switch
input:checked + span::after {
  transform:
    translateX(19px);

  background:
    var(--accent-bright);

  box-shadow:
    0 0 12px
    var(--accent-glow);
}


/* =========================================================
   ORDER BUTTONS
   ========================================================= */

.settings-order-buttons {
  display:
    flex;

  gap:
    4px;
}


.settings-order-buttons button {
  width:
    29px;

  height:
    29px;

  padding:
    0;

  cursor:
    pointer;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:
    8px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.52);
}


.settings-order-buttons
button:hover:not(:disabled) {
  border-color:
    color-mix(
      in srgb,
      var(--accent-bright) 25%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--accent-bright) 8%,
      transparent
    );

  color:
    white;
}


.settings-order-buttons
button:disabled {
  opacity:
    .18;

  cursor:
    default;
}


/* =========================================================
   APPEARANCE OPTIONS
   ========================================================= */

.settings-choice-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(105px,1fr)
    );

  gap:
    8px;
}


.settings-choice {
  display:
    grid;

  gap:
    4px;

  min-height:
    66px;

  padding:
    11px 12px;

  cursor:
    pointer;

  border:
    1px solid
    rgba(255,255,255,.052);

  border-radius:
    11px;

  background:
    rgba(0,0,0,.12);

  text-align:
    left;

  transition:
    all var(--transition);
}


.settings-choice strong {
  color:
    rgba(255,255,255,.62);

  font-size:
    11px;
}


.settings-choice span {
  color:
    rgba(255,255,255,.27);

  font-size:
    9px;

  line-height:
    1.4;
}


.settings-choice:hover {
  border-color:
    color-mix(
      in srgb,
      var(--accent-bright) 20%,
      transparent
    );
}


.settings-choice.active {
  border-color:
    color-mix(
      in srgb,
      var(--accent-bright) 34%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--accent-bright) 8%,
      transparent
    );
}


.settings-choice.active strong {
  color:
    #f3d7e7;
}


/* =========================================================
   COLOR
   ========================================================= */

.settings-color-row {
  display:
    grid;

  grid-template-columns:
    48px
    minmax(0,1fr);

  gap:
    9px;
}


.settings-color-row
input[type="color"] {
  width:
    48px;

  height:
    41px;

  padding:
    4px;

  cursor:
    pointer;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:
    10px;

  background:
    #101014;
}


/* =========================================================
   APPEARANCE PREVIEW
   ========================================================= */

.settings-preview {
  display:
    grid;

  grid-template-columns:
    82px
    minmax(0,1fr);

  min-height:
    245px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius:
    16px;

  background:
    #09090c;
}


.settings-preview > aside {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    12px;

  padding:
    18px 10px;

  border-right:
    1px solid
    rgba(255,255,255,.05);

  background:
    rgba(255,255,255,.015);
}


.settings-preview-logo {
  display:
    grid;

  place-items:
    center;

  width:
    34px;

  height:
    34px;

  margin-bottom:
    7px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--preview-accent) 38%,
      transparent
    );

  border-radius:
    10px;

  color:
    var(--preview-accent);

  font-weight:
    850;
}


.settings-preview > aside > span {
  width:
    47px;

  height:
    6px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.065);
}


.settings-preview > main {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    25px;
}


.settings-preview > main > small {
  color:
    var(--preview-accent);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .15em;
}


.settings-preview h4 {
  margin:
    5px 0 16px;

  font-size:
    20px;
}


.settings-preview-cards {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    9px;

  margin-bottom:
    13px;
}


.settings-preview-cards article {
  display:
    grid;

  gap:
    7px;

  padding:
    13px;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.023);
}


.settings-preview-cards span {
  color:
    rgba(255,255,255,.32);

  font-size:
    9px;
}


.settings-preview-cards strong {
  color:
    var(--preview-accent);

  font-size:
    14px;
}


.settings-preview > main > button {
  align-self:
    flex-start;

  padding:
    8px 12px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--preview-accent) 27%,
      transparent
    );

  border-radius:
    9px;

  background:
    color-mix(
      in srgb,
      var(--preview-accent) 11%,
      transparent
    );

  color:
    white;
}


.settings-preview[
  data-preview-size="compact"
] > main {
  font-size:
    11px;
}


.settings-preview[
  data-preview-size="large"
] > main {
  font-size:
    15px;
}


.settings-preview[
  data-preview-size="xlarge"
] > main {
  font-size:
    17px;
}


.settings-preview[
  data-preview-spacing="tight"
] .settings-preview-cards {
  gap:
    5px;
}


.settings-preview[
  data-preview-spacing="relaxed"
] .settings-preview-cards {
  gap:
    16px;
}


.settings-preview[
  data-preview-radius="subtle"
],
.settings-preview[
  data-preview-radius="subtle"
] article {
  border-radius:
    7px;
}


.settings-preview[
  data-preview-radius="soft"
],
.settings-preview[
  data-preview-radius="soft"
] article {
  border-radius:
    22px;
}


.settings-preview[
  data-preview-glow="strong"
] .settings-preview-logo {
  box-shadow:
    0 0 27px
    color-mix(
      in srgb,
      var(--preview-accent) 60%,
      transparent
    );
}


/* =========================================================
   NAVIGATION REORDER
   ========================================================= */

.settings-navigation-groups {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    14px;
}


.settings-reorder-list {
  display:
    grid;

  gap:
    6px;
}


.settings-reorder-row {
  display:
    grid;

  grid-template-columns:
    27px
    minmax(130px,1fr)
    auto
    auto;

  gap:
    10px;

  align-items:
    center;

  padding:
    10px;

  cursor:
    grab;

  border:
    1px solid
    rgba(255,255,255,.048);

  border-radius:
    11px;

  background:
    rgba(0,0,0,.13);
}


.settings-reorder-row strong {
  font-size:
    11px;
}


.settings-reorder-row code {
  color:
    rgba(255,255,255,.23);

  font-size:
    9px;
}


.settings-reorder-row.dragging {
  opacity:
    .35;
}


.settings-reorder-row:hover {
  border-color:
    color-mix(
      in srgb,
      var(--accent-bright) 16%,
      transparent
    );
}


/* =========================================================
   DANGER
   ========================================================= */

.settings-danger-card {
  display:
    flex;

  gap:
    15px;

  border-color:
    rgba(255,90,110,.13);

  background:
    rgba(255,70,95,.022);
}


.settings-danger-icon {
  display:
    grid;

  place-items:
    center;

  flex:
    0 0 35px;

  width:
    35px;

  height:
    35px;

  border-radius:
    50%;

  background:
    rgba(255,85,110,.075);

  color:
    rgba(255,158,173,.88);

  font-weight:
    900;
}


.settings-danger-card p {
  max-width:
    720px;

  margin:
    6px 0 15px;

  color:
    rgba(255,255,255,.38);

  font-size:
    10px;

  line-height:
    1.55;
}


.settings-owner-only {
  display:
    inline-block;

  padding:
    7px 10px;

  border-radius:
    9px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.27);

  font-size:
    9px;
}


/* =========================================================
   RESET
   ========================================================= */

.settings-reset-list {
  display:
    grid;
}


.settings-reset-list > div {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  min-height:
    57px;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);
}


.settings-reset-list > div:last-child {
  border-bottom:
    none;
}


/* =========================================================
   DIRTY BAR
   ========================================================= */

.settings-v2-dirtybar {
  position:
    sticky;

  bottom:
    14px;

  z-index:
    50;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    15px;

  padding:
    13px 15px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-bright) 24%,
      transparent
    );

  border-radius:
    14px;

  background:
    rgba(14,14,18,.95);

  box-shadow:
    0 24px 60px
    rgba(0,0,0,.45);

  backdrop-filter:
    blur(18px);
}


.settings-v2-dirtybar.hidden {
  display:
    none;
}


.settings-v2-dirtybar > div:first-child {
  display:
    grid;

  gap:
    2px;
}


.settings-v2-dirtybar strong {
  font-size:
    11px;
}


.settings-v2-dirtybar span {
  color:
    rgba(255,255,255,.29);

  font-size:
    9px;
}


.settings-dirty-actions {
  display:
    flex;

  gap:
    8px;
}


/* =========================================================
   CONFIRM MODAL
   ========================================================= */

.settings-confirm-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    999999;

  display:
    grid;

  place-items:
    center;

  padding:
    22px;

  background:
    rgba(0,0,0,.72);

  backdrop-filter:
    blur(9px);
}


.settings-confirm-card {
  width:
    min(440px,100%);

  box-sizing:
    border-box;

  padding:
    23px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent-bright) 25%,
      transparent
    );

  border-radius:
    18px;

  background:
    #0d0d11;

  box-shadow:
    0 35px 100px
    rgba(0,0,0,.62);
}


.settings-confirm-kicker {
  color:
    var(--accent-bright);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .16em;
}


.settings-confirm-card h2 {
  margin:
    8px 0;

  font-size:
    20px;
}


.settings-confirm-card > p {
  margin:
    0;

  color:
    rgba(255,255,255,.40);

  font-size:
    10px;

  line-height:
    1.55;
}


.settings-confirm-phrase {
  display:
    grid;

  gap:
    7px;

  margin-top:
    18px;

  padding:
    13px;

  border:
    1px solid
    rgba(255,90,110,.11);

  border-radius:
    11px;

  background:
    rgba(255,70,90,.025);
}


.settings-confirm-phrase span {
  color:
    rgba(255,255,255,.37);

  font-size:
    9px;
}


.settings-confirm-phrase code {
  color:
    rgba(255,170,183,.86);

  font-size:
    10px;
}


.settings-confirm-phrase input {
  min-height:
    40px;

  box-sizing:
    border-box;

  padding:
    8px 10px;

  outline:
    none;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:
    9px;

  background:
    #111116;

  color:
    white;
}


.settings-confirm-actions {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    8px;

  margin-top:
    20px;
}


/* =========================================================
   TOAST
   ========================================================= */

.settings-toast {
  position:
    fixed;

  right:
    22px;

  bottom:
    22px;

  z-index:
    1000000;

  max-width:
    380px;

  padding:
    12px 15px;

  border:
    1px solid
    rgba(110,225,160,.18);

  border-radius:
    11px;

  background:
    #111116;

  color:
    rgba(180,255,212,.88);

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.50);

  font-size:
    10px;

  font-weight:
    750;
}


.settings-toast.error {
  border-color:
    rgba(255,90,110,.21);

  color:
    rgba(255,170,183,.92);
}


/* =========================================================
   LOGIN FOOTER NOTE
   ========================================================= */

.login-footer-note {
  margin-top:
    14px;

  padding:
    9px 11px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.017);

  color:
    rgba(255,255,255,.34);

  font-size:
    9px;

  line-height:
    1.5;

  text-align:
    center;
}


/* =========================================================
   GLOBAL APPEARANCE MODES
   ========================================================= */

/*
 * Die Presets verändern bewusst mehrere
 * Elemente gemeinsam. Dadurch bleibt die
 * Oberfläche proportional und clean.
 */

body[data-ui-size="compact"] {
  font-size:
    13px;
}


body[data-ui-size="standard"] {
  font-size:
    14px;
}


body[data-ui-size="large"] {
  font-size:
    15px;
}


body[data-ui-size="xlarge"] {
  font-size:
    16px;
}


body[data-ui-size="compact"]
.navitem,
body[data-ui-size="compact"]
.navgroup-toggle {
  min-height:
    36px;
}


body[data-ui-size="large"]
.navitem,
body[data-ui-size="large"]
.navgroup-toggle {
  min-height:
    45px;
}


body[data-ui-size="xlarge"]
.navitem,
body[data-ui-size="xlarge"]
.navgroup-toggle {
  min-height:
    49px;
}


body[data-ui-size="large"]
.btn,
body[data-ui-size="large"]
input,
body[data-ui-size="large"]
select,
body[data-ui-size="large"]
textarea {
  font-size:
    14px;
}


body[data-ui-size="xlarge"]
.btn,
body[data-ui-size="xlarge"]
input,
body[data-ui-size="xlarge"]
select,
body[data-ui-size="xlarge"]
textarea {
  font-size:
    15px;
}


body[data-ui-size="large"]
.topbar {
  min-height:
    74px;
}


body[data-ui-size="xlarge"]
.topbar {
  min-height:
    80px;
}


/* CARD SPACING */

body[data-card-spacing="tight"]
.dashboard-grid,
body[data-card-spacing="tight"]
.system-status-grid,
body[data-card-spacing="tight"]
.metrics,
body[data-card-spacing="tight"]
.settings-card-grid {
  gap:
    9px !important;
}


body[data-card-spacing="relaxed"]
.dashboard-grid,
body[data-card-spacing="relaxed"]
.system-status-grid,
body[data-card-spacing="relaxed"]
.metrics,
body[data-card-spacing="relaxed"]
.settings-card-grid {
  gap:
    20px !important;
}


/* RADII */

body[data-radius="subtle"]
.page article,
body[data-radius="subtle"]
.btn,
body[data-radius="subtle"]
input,
body[data-radius="subtle"]
select,
body[data-radius="subtle"]
textarea {
  border-radius:
    8px !important;
}


body[data-radius="soft"]
.page article {
  border-radius:
    22px !important;
}


body[data-radius="soft"]
.btn,
body[data-radius="soft"]
input,
body[data-radius="soft"]
select,
body[data-radius="soft"]
textarea {
  border-radius:
    14px !important;
}


/* GLOW */

body[data-glow="off"]
.led-text,
body[data-glow="off"]
.led-value,
body[data-glow="off"]
.logo,
body[data-glow="off"]
.navitem.active::after {
  text-shadow:
    none !important;

  box-shadow:
    none !important;
}


body[data-glow="subtle"]
.led-text,
body[data-glow="subtle"]
.led-value {
  text-shadow:
    0 0 6px
    color-mix(
      in srgb,
      var(--accent-bright) 30%,
      transparent
    ) !important;
}


body[data-glow="strong"]
.led-text,
body[data-glow="strong"]
.led-value {
  text-shadow:
    0 0 9px
    var(--accent-bright),
    0 0 26px
    color-mix(
      in srgb,
      var(--accent-bright) 45%,
      transparent
    ) !important;
}


/* ANIMATIONS */

body[data-animations="off"] *,
body[data-animations="off"] *::before,
body[data-animations="off"] *::after {
  animation-duration:
    0s !important;

  transition-duration:
    0s !important;
}


body[data-animations="subtle"] * {
  animation-duration:
    .14s;
}


/* ACCENT POLISH */

.navitem.active {
  border-color:
    color-mix(
      in srgb,
      var(--accent-bright) 18%,
      transparent
    ) !important;

  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--accent-bright) 12%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--accent-bright) 3%,
        transparent
      )
    ) !important;
}


.navitem.active::after {
  background:
    var(--accent-bright) !important;
}


.navitem.active .nav-dot {
  background:
    var(--accent-bright) !important;
}


.btn.primary {
  border-color:
    color-mix(
      in srgb,
      var(--accent-bright) 32%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--accent-bright) 18%,
      #111116
    );
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 1100px
) {

  .settings-v2-layout {
    grid-template-columns:
      1fr;
  }


  .settings-v2-menu {
    position:
      static;

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }


  .settings-navigation-groups {
    grid-template-columns:
      1fr;
  }
}


@media (
  max-width: 760px
) {

  .settings-v2-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .settings-v2-menu {
    grid-template-columns:
      1fr 1fr;
  }


  .settings-card-grid,
  .settings-field-grid {
    grid-template-columns:
      1fr;
  }


  .settings-social-row {
    grid-template-columns:
      27px
      minmax(0,1fr)
      auto
      auto;
  }


  .settings-row-url {
    grid-column:
      1 / -1;
  }


  .settings-reorder-row {
    grid-template-columns:
      27px
      minmax(0,1fr)
      auto;
  }


  .settings-reorder-row code {
    display:
      none;
  }


  .settings-v2-dirtybar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .settings-dirty-actions {
    width:
      100%;
  }


  .settings-dirty-actions .btn {
    flex:
      1;
  }


  .settings-preview {
    grid-template-columns:
      64px
      minmax(0,1fr);
  }

}



/* =========================================================
   AUDIT LOG V2
   ========================================================= */

.audit-v2 {
  display:
    grid;

  gap:
    18px;
}


.audit-v2-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    24px 26px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:
    20px;

  background:
    linear-gradient(
      135deg,
      rgba(208,135,178,.055),
      rgba(255,255,255,.012)
    );

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.18);
}


.audit-v2-header h2 {
  margin:
    5px 0;

  font-size:
    25px;
}


.audit-v2-header p {
  max-width:
    720px;

  margin:
    0;

  color:
    rgba(255,255,255,.38);

  line-height:
    1.5;
}


.audit-v2-counter {
  display:
    grid;

  min-width:
    110px;

  padding:
    15px 18px;

  border:
    1px solid
    rgba(208,135,178,.13);

  border-radius:
    15px;

  background:
    rgba(208,135,178,.045);

  text-align:
    center;
}


.audit-v2-counter strong {
  color:
    var(--accent-bright);

  font-size:
    24px;
}


.audit-v2-counter span {
  margin-top:
    2px;

  color:
    rgba(255,255,255,.30);

  font-size:
    9px;

  text-transform:
    uppercase;

  letter-spacing:
    .1em;
}


/* =========================================================
   FILTER
   ========================================================= */

.audit-v2-panel {
  min-height:
    620px;

  padding:
    22px;
}


.audit-filterbar {
  display:
    grid;

  grid-template-columns:
    minmax(240px, 1.7fr)
    repeat(
      3,
      minmax(145px, .85fr)
    )
    100px
    auto;

  gap:
    10px;

  align-items:
    end;

  margin-bottom:
    14px;
}


.audit-filterbar label {
  display:
    grid;

  gap:
    6px;

  min-width:
    0;
}


.audit-filterbar label > span {
  color:
    rgba(255,255,255,.40);

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    .04em;
}


.audit-filterbar input,
.audit-filterbar select {
  width:
    100%;

  min-height:
    42px;

  box-sizing:
    border-box;

  padding:
    9px 11px;

  outline:
    none;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:
    10px;

  background:
    #101014;

  color:
    rgba(255,255,255,.78);

  font:
    inherit;

  font-size:
    11px;
}


.audit-filterbar input:focus,
.audit-filterbar select:focus {
  border-color:
    color-mix(
      in srgb,
      var(--accent-bright) 42%,
      transparent
    );

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--accent-bright) 8%,
      transparent
    );
}


.audit-reset-btn {
  min-height:
    42px;

  white-space:
    nowrap;
}


.audit-v2-status {
  min-height:
    20px;

  margin:
    2px 2px 10px;

  color:
    rgba(255,255,255,.27);

  font-size:
    9px;
}


/* =========================================================
   AUDIT LIST
   ========================================================= */

.audit-v2-list {
  display:
    grid;

  gap:
    10px;
}


.audit-entry {
  display:
    grid;

  gap:
    15px;

  min-height:
    145px;

  padding:
    20px 21px;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:
    16px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.012)
    );

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.12);

  transition:
    border-color var(--transition),
    transform var(--transition),
    background var(--transition);
}


.audit-entry:hover {
  border-color:
    color-mix(
      in srgb,
      var(--accent-bright) 18%,
      transparent
    );

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--accent-bright) 4%,
        rgba(255,255,255,.02)
      ),
      rgba(255,255,255,.012)
    );
}


.audit-entry-top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;
}


.audit-entry-action {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  min-width:
    0;
}


.audit-action-dot {
  width:
    9px;

  height:
    9px;

  flex:
    0 0 auto;

  margin-top:
    5px;

  border-radius:
    50%;

  background:
    var(--accent-bright);

  box-shadow:
    0 0 12px
    color-mix(
      in srgb,
      var(--accent-bright) 55%,
      transparent
    );
}


.audit-entry-action > div {
  display:
    grid;

  gap:
    5px;

  min-width:
    0;
}


.audit-entry-action strong {
  color:
    rgba(255,255,255,.88);

  font-size:
    15px;

  line-height:
    1.35;
}


.audit-entry-action code {
  color:
    rgba(255,255,255,.28);

  font-size:
    9px;

  overflow-wrap:
    anywhere;
}


.audit-entry time {
  flex:
    0 0 auto;

  color:
    rgba(255,255,255,.30);

  font-size:
    10px;

  white-space:
    nowrap;
}


/* =========================================================
   ENTRY DETAILS
   ========================================================= */

.audit-entry-info {
  display:
    grid;

  grid-template-columns:
    minmax(130px,.8fr)
    minmax(130px,.8fr)
    minmax(180px,1.6fr);

  gap:
    10px;
}


.audit-entry-info > div {
  display:
    grid;

  gap:
    5px;

  min-width:
    0;

  padding:
    11px 13px;

  border:
    1px solid
    rgba(255,255,255,.04);

  border-radius:
    10px;

  background:
    rgba(0,0,0,.13);
}


.audit-entry-info span {
  color:
    rgba(255,255,255,.25);

  font-size:
    8px;

  font-weight:
    750;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;
}


.audit-entry-info strong {
  min-width:
    0;

  color:
    rgba(255,255,255,.60);

  font-size:
    10px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   METADATA
   ========================================================= */

.audit-metadata {
  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.045);

  border-radius:
    10px;

  background:
    rgba(0,0,0,.12);
}


.audit-metadata summary {
  padding:
    10px 12px;

  cursor:
    pointer;

  color:
    rgba(255,255,255,.38);

  font-size:
    9px;

  font-weight:
    700;

  user-select:
    none;
}


.audit-metadata summary:hover {
  color:
    rgba(255,255,255,.65);
}


.audit-metadata pre {
  max-height:
    300px;

  margin:
    0;

  padding:
    13px;

  overflow:
    auto;

  border-top:
    1px solid
    rgba(255,255,255,.04);

  color:
    rgba(255,255,255,.48);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    9px;

  line-height:
    1.6;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   EMPTY
   ========================================================= */

.audit-empty {
  display:
    grid;

  place-items:
    center;

  gap:
    6px;

  min-height:
    280px;

  padding:
    30px;

  border:
    1px dashed
    rgba(255,255,255,.07);

  border-radius:
    15px;

  text-align:
    center;
}


.audit-empty strong {
  color:
    rgba(255,255,255,.54);

  font-size:
    13px;
}


.audit-empty span {
  color:
    rgba(255,255,255,.25);

  font-size:
    9px;
}


.audit-empty.error strong {
  color:
    rgba(255,145,160,.82);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 1250px
) {

  .audit-filterbar {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }


  .audit-filter-search {
    grid-column:
      span 2;
  }
}


@media (
  max-width: 760px
) {

  .audit-v2-header {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .audit-v2-counter {
    min-width:
      0;
  }


  .audit-filterbar {
    grid-template-columns:
      1fr;
  }


  .audit-filter-search {
    grid-column:
      auto;
  }


  .audit-entry-top {
    flex-direction:
      column;
  }


  .audit-entry-info {
    grid-template-columns:
      1fr;
  }


  .audit-entry time {
    white-space:
      normal;
  }
}



/* =========================================================
   GIVEAWAY WINNER COUNT
   ========================================================= */

.giveaway-form-grid-main {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(145px, .55fr);
}


.giveaway-field-hint {
  display:
    block;

  margin-top:
    5px;

  color:
    rgba(255,255,255,.27);

  font-size:
    9px;

  line-height:
    1.4;
}


#giveaway-winner-count {
  min-width:
    0;
}


@media (
  max-width: 850px
) {

  .giveaway-form-grid-main {
    grid-template-columns:
      1fr;
  }
}



/* =========================================================
   TOPBAR SOCIAL MENU V1
   ========================================================= */

.top-socials {
  position:
    relative;

  display:
    inline-flex;
}


/*
 * Kleine unsichtbare Brücke zwischen
 * Button und Dropdown.
 *
 * Dadurch klappt Hover sauber,
 * ohne dass das Menü beim Bewegen
 * der Maus verschwindet.
 */
.top-socials::after {
  position:
    absolute;

  top:
    100%;

  right:
    0;

  width:
    100%;

  height:
    9px;

  content:
    "";
}


.top-socials-button {
  appearance:
    none;

  -webkit-appearance:
    none;

  cursor:
    pointer;

  font:
    inherit;

  transition:
    border-color var(--transition),
    background var(--transition),
    color var(--transition);
}


.top-socials-button:hover,
.top-socials.open
.top-socials-button,
.top-socials:focus-within
.top-socials-button {
  border-color:
    rgba(208,135,178,.24);

  background:
    rgba(208,135,178,.06);

  color:
    var(--text);
}


.top-socials-symbol {
  color:
    var(--accent-bright);

  font-size:
    11px;

  font-weight:
    900;
}


.top-socials-chevron {
  margin-left:
    1px;

  color:
    rgba(255,255,255,.38);

  font-size:
    11px;

  transition:
    transform 160ms ease;
}


.top-socials.open
.top-socials-chevron,
.top-socials:hover
.top-socials-chevron,
.top-socials:focus-within
.top-socials-chevron {
  transform:
    rotate(180deg);
}


.top-social-menu {
  position:
    absolute;

  z-index:
    500;

  top:
    calc(100% + 8px);

  right:
    0;

  min-width:
    205px;

  padding:
    7px;

  visibility:
    hidden;

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translateY(-5px)
    scale(.985);

  transform-origin:
    top right;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:
    14px;

  background:
    rgba(16,16,20,.97);

  box-shadow:
    0 22px 55px
    rgba(0,0,0,.36),
    0 0 28px
    rgba(208,135,178,.035);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  transition:
    opacity 150ms ease,
    transform 150ms ease,
    visibility 150ms ease;
}


.top-socials:hover
.top-social-menu,
.top-socials:focus-within
.top-social-menu,
.top-socials.open
.top-social-menu {
  visibility:
    visible;

  opacity:
    1;

  pointer-events:
    auto;

  transform:
    translateY(0)
    scale(1);
}


.top-social-link {
  display:
    flex;

  align-items:
    center;

  min-height:
    39px;

  padding:
    0 10px;

  gap:
    10px;

  border-radius:
    9px;

  color:
    var(--muted);

  text-decoration:
    none;

  font-size:
    10px;

  font-weight:
    700;

  white-space:
    nowrap;

  transition:
    color var(--transition),
    background var(--transition),
    transform var(--transition);
}


.top-social-link:hover,
.top-social-link:focus-visible {
  outline:
    none;

  color:
    var(--text);

  background:
    rgba(208,135,178,.075);

  transform:
    translateX(2px);
}


.top-social-icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    18px;

  height:
    18px;

  flex:
    0 0 18px;

  color:
    var(--accent-bright);
}


.top-social-icon svg {
  width:
    16px;

  height:
    16px;
}


.top-social-icon-fallback {
  border:
    1px solid
    rgba(208,135,178,.15);

  border-radius:
    6px;

  background:
    rgba(208,135,178,.06);

  font-size:
    8px;

  font-weight:
    900;
}


.top-social-label {
  flex:
    1;
}


.top-social-arrow {
  margin-left:
    auto;

  color:
    rgba(255,255,255,.24);

  font-size:
    10px;
}


.top-social-link:hover
.top-social-arrow {
  color:
    var(--accent-bright);
}


@media (
  max-width: 650px
) {

  .top-social-menu {
    right:
      auto;

    left:
      0;

    min-width:
      210px;

    transform-origin:
      top left;
  }
}



/* =========================================================
   CONTROL CENTER V1
   ========================================================= */

.control-center {
  min-height: 100vh;
  padding: 48px;
  background:
    radial-gradient(
      circle at top left,
      rgba(208, 135, 178, 0.14),
      transparent 38%
    ),
    #0d0d11;
  color: #f5f5f7;
}

.control-center-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.control-center-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin-bottom: 42px;
}

.control-center-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.control-center-brand h1 {
  margin: 4px 0 6px;
  font-size: clamp(30px, 4vw, 46px);
}

.control-center-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.control-area-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.control-area-card {
  position: relative;
  min-height: 290px;
  padding: 28px;
  border: 1px solid
    rgba(255,255,255,0.08);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.055),
      rgba(255,255,255,0.018)
    );
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.control-area-card:hover {
  transform: translateY(-4px);
  border-color:
    rgba(208,135,178,0.55);
  background:
    linear-gradient(
      145deg,
      rgba(208,135,178,0.12),
      rgba(255,255,255,0.025)
    );
}

.control-area-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 42px;
  border-radius: 16px;
  background:
    rgba(208,135,178,0.14);
  border: 1px solid
    rgba(208,135,178,0.32);
  color: #d087b2;
  font-size: 22px;
  font-weight: 800;
}

.control-area-kicker {
  margin-bottom: 7px;
  color: #d087b2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.control-area-content h2 {
  margin: 0 0 10px;
  font-size: 26px;
}

.control-area-content p {
  margin: 0;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
}

.control-area-arrow {
  position: absolute;
  right: 26px;
  bottom: 24px;
  color: #d087b2;
  font-size: 28px;
}

.control-center-message {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid
    rgba(208,135,178,0.3);
  border-radius: 14px;
  background:
    rgba(208,135,178,0.08);
}

.control-center-back {
  display: flex;
  align-items: center;
  gap: 9px;
  width: calc(100% - 20px);
  margin: 8px 10px 16px;
  padding: 11px 13px;
  border: 1px solid
    rgba(208,135,178,0.2);
  border-radius: 12px;
  background:
    rgba(208,135,178,0.07);
  color: inherit;
  cursor: pointer;
}

.control-center-back:hover {
  border-color:
    rgba(208,135,178,0.5);
}

.control-area-hidden {
  display: none !important;
}

@media (max-width: 900px) {

  .control-center {
    padding: 28px 18px;
  }

  .control-center-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .control-center-user {
    flex-wrap: wrap;
  }

  .control-area-grid {
    grid-template-columns: 1fr;
  }

  .control-area-card {
    min-height: 230px;
  }

}