/* DodoChat - eigenes Design "Nachtmint" */
:root {
  --bg-0: #07090d;
  --bg-1: #0e1218;
  --bg-2: #131820;
  --bg-3: #1a2029;
  --bg-4: #232b36;
  --bg-5: #2d3643;
  --line: rgba(255, 255, 255, .06);
  --line-2: rgba(255, 255, 255, .1);
  --text: #e8ecf2;
  --text-2: #a4aebd;
  --text-3: #6c7788;
  --accent: #2ee6a8;
  --accent-rgb: 46, 230, 168;
  --accent-ink: #07130f;
  --danger: #ff5d6c;
  --warn: #ffb547;
  --ok: #2ee6a8;
  --online: #3ddc97;
  --idle: #ffb547;
  --dnd: #ff5d6c;
  --offline: #5d6877;
  --radius: 14px;
  --radius-s: 9px;
  --font-size: 15px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);
  --tb: 0px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg-0);
  color: var(--text);
  font: 400 var(--font-size)/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
body.desktop { --tb: 34px; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { transition: none !important; animation: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: rgba(var(--accent-rgb), .35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--bg-5); }
::-webkit-scrollbar-track { background: transparent; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.muted { color: var(--text-2); }
.small { font-size: .85em; }
.mono { font-family: "Cascadia Code", Consolas, monospace; }
.grow { flex: 1; }
.row { display: flex; align-items: center; }
.gap { gap: 10px; }
.mt { margin-top: 28px !important; }
[hidden] { display: none !important; }

.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i.lg { width: 26px; height: 26px; }
.i.xl { width: 44px; height: 44px; stroke-width: 1.4; }
.i.red { color: var(--danger); }

/* ---------------------------------------------------------------- titlebar */
#titlebar {
  position: fixed; inset: 0 0 auto 0; height: var(--tb); display: flex; align-items: center;
  background: var(--bg-0); z-index: 1000; -webkit-app-region: drag; user-select: none;
}
.tb-brand { display: flex; align-items: center; gap: 8px; padding-left: 14px; font-size: 12.5px; font-weight: 600; color: var(--text-2); letter-spacing: .02em; }
.tb-brand img { width: 16px; height: 16px; }
.tb-drag { flex: 1; height: 100%; }
.tb-buttons { display: flex; height: 100%; -webkit-app-region: no-drag; }
.tb-buttons button { width: 46px; height: 100%; display: grid; place-items: center; color: var(--text-2); }
.tb-buttons button:hover { background: var(--bg-3); color: var(--text); }
.tb-buttons .tb-close:hover { background: #e5484d; color: #fff; }
.tb-buttons svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.tb-buttons .tb-update { position: relative; width: 42px; color: #3ddc97; }
.tb-buttons .tb-update svg { width: 19px; height: 19px; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tb-buttons .tb-update:hover { background: rgba(61, 220, 151, .16); color: #5ff0ae; }
.tb-update.ready svg { animation: tbBounce 1.6s ease-in-out infinite; }
@keyframes tbBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(2px); } }
.tb-update.loading { color: var(--text-3); cursor: default; }
.tb-update.loading:hover { background: transparent; color: var(--text-3); }
.tb-update.loading svg { opacity: .55; }
.tb-update-pct { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--bg-4); overflow: hidden; display: none; }
.tb-update.loading .tb-update-pct { display: block; }
.tb-update-pct::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: #3ddc97; }
#root { position: fixed; inset: var(--tb) 0 0 0; }

/* ---------------------------------------------------------------- buttons & forms */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: 10px; font-weight: 600; font-size: .93em; transition: background .15s, transform .08s, box-shadow .15s;
  white-space: nowrap;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 20px rgba(var(--accent-rgb), .22); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn.ghost { background: var(--bg-4); color: var(--text); }
.btn.ghost:hover:not(:disabled) { background: var(--bg-5); text-decoration: none; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger-ghost { color: var(--danger); background: rgba(255, 93, 108, .1); }
.btn.danger-ghost:hover:not(:disabled) { background: rgba(255, 93, 108, .2); }
.btn.big { height: 46px; font-size: 1em; padding: 0 22px; }
.btn.full { width: 100%; }
.btn .i { width: 18px; height: 18px; }
.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--text-2); flex: none;
  transition: background .12s, color .12s;
}
.icon-btn:hover:not(:disabled) { background: var(--bg-4); color: var(--text); }
.icon-btn.on { color: var(--accent); }
.icon-btn.bad { color: var(--danger); }
.icon-btn.danger:hover { color: var(--danger); background: rgba(255, 93, 108, .12); }
.link-btn { color: var(--text-2); font-size: .85em; text-decoration: underline; }

label { display: block; font-size: .8em; font-weight: 600; color: var(--text-2); letter-spacing: .02em; margin-bottom: 16px; }
label small { font-weight: 400; color: var(--text-3); }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), textarea, select {
  display: block; width: 100%; margin-top: 7px; background: var(--bg-0); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 11px 13px; font-size: 15px; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; resize: vertical;
}
input:focus, textarea:focus, select:focus { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
input:disabled, textarea:disabled { opacity: .6; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
input[type=range] { width: 100%; accent-color: var(--accent); }
.form-error { color: var(--danger); font-size: .88em; min-height: 1.2em; margin: -6px 0 12px; }
.field-label { font-size: .75em; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin: 20px 0 10px; }
.search { margin: 0 0 14px !important; }

.switch { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: var(--bg-5); position: relative; cursor: pointer; flex: none; transition: background .18s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: .4; cursor: not-allowed; }
.switch-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; cursor: pointer; }
.switch-row > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.switch-row b { font-size: 1.12em; color: var(--text); font-weight: 600; letter-spacing: 0; }
.switch-row small { font-size: 1.02em; color: var(--text-3); font-weight: 400; letter-spacing: 0; }
.switch-row.warn b { color: var(--warn); }
.check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .9em; color: var(--text-2); cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------------------------------------------------------------- avatar */
.avatar {
  --s: 40px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; position: relative;
  background: linear-gradient(140deg, hsl(var(--h) 60% 52%), hsl(calc(var(--h) + 40) 55% 38%));
  display: grid; place-items: center; font-weight: 700; color: #fff; font-size: calc(var(--s) * .38); user-select: none;
}
.avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar > span { line-height: 1; letter-spacing: -.02em; }
.avatar .status {
  position: absolute; right: -2px; bottom: -2px; width: calc(var(--s) * .34); height: calc(var(--s) * .34); min-width: 10px; min-height: 10px;
  border-radius: 50%; border: 3px solid var(--status-ring, var(--bg-1)); background: var(--offline);
}
.status.s-online { background: var(--online); }
.status.s-idle { background: var(--idle); }
.status.s-dnd { background: var(--dnd); }
.status.s-offline { background: var(--offline); }
.speaking > .avatar, .vc-user.speaking .avatar { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent); }

/* ---------------------------------------------------------------- auth */
.auth { height: 100%; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--bg-0); overflow: auto; }
.auth-art { position: relative; overflow: hidden; padding: 8vh 7vw; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(120% 90% at 0% 0%, rgba(var(--accent-rgb), .16), transparent 60%), var(--bg-1); }
.auth-glow { position: absolute; width: 520px; height: 520px; right: -160px; bottom: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .35), transparent 65%); filter: blur(20px); animation: float 9s ease-in-out infinite; }
@keyframes float { 50% { transform: translate(-30px, -40px) scale(1.05); } }
.auth-logo { width: 76px; height: 76px; margin-bottom: 22px; filter: drop-shadow(0 12px 30px rgba(var(--accent-rgb), .35)); }
.auth-art h1 { font-size: 46px; margin: 0 0 10px; letter-spacing: -.03em; }
.auth-art p { font-size: 18px; color: var(--text-2); max-width: 460px; margin: 0 0 30px; }
.auth-art ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.auth-art li { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 15.5px; }
.auth-art li .i { color: var(--accent); background: rgba(var(--accent-rgb), .12); padding: 7px; width: 34px; height: 34px; border-radius: 10px; }
.auth-card { align-self: center; justify-self: center; width: min(420px, 90%); padding: 36px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.auth-card h2 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.02em; }
.auth-card > p.muted { margin: 0 0 26px; }
.auth-invite { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 10px; background: rgba(var(--accent-rgb), .1); color: var(--text); font-size: .9em; margin-bottom: 18px; }
.auth-invite .i { color: var(--accent); }
/* Gespeicherte Konten auf der Anmeldeseite (Konto wechseln / zurück) */
.auth-accounts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.auth-accounts .aa-title { font-size: .76em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.aa-pick { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line-2); color: var(--text); text-align: left; cursor: pointer; }
.aa-pick:hover { border-color: rgba(var(--accent-rgb), .6); background: rgba(var(--accent-rgb), .08); }
.aa-pick small { display: block; color: var(--text-3); font-size: .8em; }
.aa-pick .grow { min-width: 0; }
.auth-card .btn { width: 100%; margin-top: 4px; }
.auth-switch { text-align: center; color: var(--text-2); font-size: .9em; margin: 18px 0 0; }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-art { display: none; } }

/* ---------------------------------------------------------------- splash */
.splash { height: 100%; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--text-2); }
.splash img { width: 72px; height: 72px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.92); opacity: .75; } }
.splash-bar { width: 160px; height: 4px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.splash-bar i { display: block; width: 40%; height: 100%; background: var(--accent); border-radius: 4px; animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------------------------------------------------------------- app layout */
.app { height: 100%; display: grid; grid-template-columns: 76px 264px minmax(0, 1fr) 256px; gap: 8px; padding: 0 8px 8px 0; }
.app.no-members { grid-template-columns: 76px 264px minmax(0, 1fr) 0; }
.app.no-members .members { display: none; }
.panel { background: var(--bg-1); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); }
.main.panel { background: var(--bg-2); position: relative; }
body:not(.desktop) .app { padding-top: 8px; }
.offline-bar { position: fixed; left: 50%; top: calc(var(--tb) + 10px); transform: translate(-50%, -80px); background: var(--warn); color: #231400; font-weight: 600; font-size: .88em; padding: 7px 14px; border-radius: 99px; display: flex; align-items: center; gap: 8px; z-index: 900; transition: transform .25s; }
body.offline .offline-bar { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- rail */
.rail { display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; gap: 8px; min-height: 0; }
.rail-list { display: flex; flex-direction: column; align-items: center; gap: 8px; overflow-y: auto; overflow-x: hidden; flex: 1; width: 100%; padding: 2px 0 8px; scrollbar-width: none; }
.rail-list::-webkit-scrollbar { display: none; }
.rail-btn {
  position: relative; width: 50px; height: 50px; border-radius: 16px; background: var(--bg-2); display: grid; place-items: center; flex: none;
  color: var(--text); font-weight: 700; transition: border-radius .2s, background .2s, transform .12s; border: 1px solid var(--line);
}
.rail-btn > img:not(.i) { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.rail-btn.home > img { width: 30px; height: 30px; border-radius: 0; object-fit: contain; }
.rail-btn:hover { border-radius: 13px; background: var(--bg-3); }
.rail-btn.active { border-radius: 13px; background: var(--bg-3); box-shadow: 0 0 0 2px var(--accent); }
.rail-btn::before { content: ""; position: absolute; left: -13px; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: var(--text); transform: translateY(-50%); transition: height .2s; }
.rail-btn.unread::before { height: 8px; }
.rail-btn:hover::before { height: 18px; }
.rail-btn.active::before { height: 34px; background: var(--accent); }
.rail-btn.ghost { background: transparent; border: 1px dashed var(--line-2); color: var(--accent); }
.rail-btn.ghost:hover { background: rgba(var(--accent-rgb), .12); border-style: solid; }
.rail-btn.ghost::before { display: none; }
.rail-btn.static { cursor: default; }
.rail-btn .badge { position: absolute; right: -5px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; border: 3px solid var(--bg-0); }
.rail-voice { position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; border: 3px solid var(--bg-0); }
.rail-voice .i { width: 11px; height: 11px; stroke-width: 2.6; }
.rail-sep { width: 30px; height: 2px; border-radius: 2px; background: var(--bg-3); flex: none; }

/* ---------------------------------------------------------------- sidebar */
.side-head { height: 54px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; font-weight: 700; font-size: 1.02em; border-bottom: 1px solid var(--line); }
.side-head.clickable { cursor: pointer; transition: background .12s; }
.side-head.clickable:hover { background: var(--bg-2); }
.side-head .i { margin-left: auto; width: 18px; color: var(--text-2); }
.search-like { width: 100%; height: 34px; border-radius: 9px; background: var(--bg-0); color: var(--text-3); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: .88em; font-weight: 500; text-align: left; }
.search-like:hover { color: var(--text-2); }
.search-like .i { margin: 0; width: 17px; }
.side-scroll { flex: 1; overflow-y: auto; padding: 10px 8px 14px; min-height: 0; }
.invite-cta { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border-radius: 11px; background: linear-gradient(120deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04)); color: var(--text); font-weight: 600; font-size: .9em; border: 1px solid rgba(var(--accent-rgb), .18); }
.invite-cta .i { color: var(--accent); }
.invite-cta:hover { background: rgba(var(--accent-rgb), .2); }
.sec { display: flex; align-items: center; justify-content: space-between; padding: 16px 8px 6px; font-size: .72em; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); }
.sec button { color: var(--text-3); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; }
.sec button:hover { color: var(--text); background: var(--bg-3); }
.sec button .i { width: 16px; height: 16px; stroke-width: 2.2; }
.sec.plain { padding-left: 0; }
.ch-row { position: relative; }
.ch { width: 100%; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 9px; color: var(--text-3); font-weight: 500; text-align: left; transition: background .1s, color .1s; margin: 1px 0; }
.ch .i { width: 18px; height: 18px; opacity: .8; }
.ch:hover { background: var(--bg-2); color: var(--text-2); }
.ch.active { background: var(--bg-3); color: var(--text); }
.ch.active .i { color: var(--accent); opacity: 1; }
.ch.unread { color: var(--text); font-weight: 650; }
.ch.unread::before { content: ""; position: absolute; left: -8px; width: 4px; height: 8px; border-radius: 0 4px 4px 0; background: var(--text); }
.ch.connected { color: var(--accent); }
.ch.big { height: 40px; }
.ch .count { margin-left: auto; font-style: normal; font-size: .75em; background: var(--bg-4); color: var(--text-2); padding: 1px 7px; border-radius: 99px; }
.ch-row .ch { padding-right: 34px; }
.ch-gear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--text-3); opacity: 0; transition: opacity .1s; }
.ch-gear .i { width: 16px; height: 16px; }
.ch-row:hover .ch-gear, .ch-row .ch.active + .ch-gear { opacity: 1; }
.ch-gear:hover { color: var(--text); background: var(--bg-4); }
.vc-users { padding: 0 0 4px 26px; }
.vc-user { width: 100%; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 7px; color: var(--text-2); font-size: .88em; text-align: left; }
.vc-user:hover { background: var(--bg-2); color: var(--text); }
.vc-user .avatar { transition: box-shadow .12s; }
.vc-flags { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--text-3); }
.vc-flags .i { width: 15px; height: 15px; }
.live { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; background: var(--danger); color: #fff; padding: 1px 5px; border-radius: 4px; }
.empty-note { color: var(--text-3); font-size: .85em; padding: 6px 10px; margin: 0; line-height: 1.5; }
.dm { width: 100%; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px; border-radius: 10px; color: var(--text-2); text-align: left; margin: 1px 0; }
.dm:hover { background: var(--bg-2); color: var(--text); }
.dm.active { background: var(--bg-3); color: var(--text); }
.dm.unread { color: var(--text); font-weight: 650; }
.dm .avatar { --status-ring: var(--bg-1); }
.dm:hover .avatar, .dm.active .avatar { --status-ring: var(--bg-3); }
.dm-name { flex: 1; }
.dm small { color: var(--text-3); font-size: .8em; }
.dm-call { color: var(--accent); display: grid; }
.dm-call .i { width: 16px; height: 16px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

.voice-panel { flex: none; margin: 0 8px 8px; padding: 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.vp-top { display: flex; align-items: center; gap: 6px; }
.vp-info { flex: 1; text-align: left; min-width: 0; display: flex; flex-direction: column; }
.vp-status { display: flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; font-size: .86em; }
.vp-status .i { width: 16px; height: 16px; stroke-width: 2.4; }
.vp-status.wait { color: var(--warn); }
.vp-status.bad { color: var(--danger); }
.vp-where { color: var(--text-3); font-size: .8em; }
.vp-info:hover .vp-where { text-decoration: underline; color: var(--text-2); }
.vp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
.vp-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 8px; background: var(--bg-3); color: var(--text-2); font-size: .8em; font-weight: 600; }
.vp-actions button .i { width: 17px; height: 17px; }
.vp-actions button:hover { background: var(--bg-4); color: var(--text); }
.vp-actions button.on { background: rgba(var(--accent-rgb), .15); color: var(--accent); }
.user-panel { flex: none; display: flex; align-items: center; gap: 2px; padding: 8px; background: var(--bg-0); margin: 0 8px 8px; border-radius: 12px; }
.up-me { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 3px 6px 3px 3px; border-radius: 9px; text-align: left; }
.up-me:hover { background: var(--bg-3); }
.up-me .avatar { --status-ring: var(--bg-0); }
.up-me:hover .avatar { --status-ring: var(--bg-3); }
.up-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.up-text b { font-size: .9em; }
.up-text small { font-size: .76em; color: var(--text-3); }

/* ---------------------------------------------------------------- members */
.mem-scroll { overflow-y: auto; padding: 10px 8px; flex: 1; }
.mem-group { font-size: .72em; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); padding: 14px 8px 6px; }
.mem-group span { margin-left: 4px; opacity: .7; }
.mem { width: 100%; display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 10px; text-align: left; }
.mem:hover { background: var(--bg-2); }
.mem:hover .avatar { --status-ring: var(--bg-2); }
.mem.off { opacity: .45; }
.mem.off:hover { opacity: .8; }
.mem-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mem-text b { font-weight: 600; font-size: .93em; display: flex; align-items: center; gap: 4px; }
.mem-text small { color: var(--text-3); font-size: .78em; }
.crown { color: var(--warn); display: inline-grid; }
.crown .i { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- main */
.main-head { height: 54px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--line); }
.mh-title { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.mh-title > .i { color: var(--text-3); }
.mh-title b { font-size: 1.02em; flex: none; max-width: 40%; }
.mh-sub { color: var(--text-3); font-size: .88em; }
.mh-topic { color: var(--text-3); font-size: .88em; padding-left: 12px; border-left: 1px solid var(--line-2); }
.mh-actions { display: flex; gap: 2px; }
.messages { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; overflow-anchor: none; }
.msg-list { padding: 12px 0 18px; display: flex; flex-direction: column; min-height: 100%; justify-content: flex-end; }
.msg-loader { height: 60px; display: grid; place-items: center; color: var(--text-3); font-size: .85em; }
.welcome { padding: 30px 22px 18px; }
.welcome h2 { margin: 12px 0 4px; font-size: 1.9em; letter-spacing: -.02em; }
.welcome p { color: var(--text-2); margin: 0; }
.welcome-ic { width: 68px; height: 68px; border-radius: 22px; background: rgba(var(--accent-rgb), .12); color: var(--accent); display: grid; place-items: center; }
.welcome-ic .i { width: 36px; height: 36px; }
.day-sep { display: flex; align-items: center; gap: 12px; margin: 18px 22px 8px; color: var(--text-3); font-size: .76em; font-weight: 700; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

.msg { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); padding: 3px 60px 3px 14px; margin-top: 12px; transition: background .1s; }
.msg.grouped { margin-top: 0; padding-top: 1px; padding-bottom: 1px; }
.msg:hover { background: rgba(255, 255, 255, .025); }
.msg.mention { background: rgba(var(--warn-rgb, 255, 181, 71), .07); box-shadow: inset 3px 0 0 var(--warn); }
/* Lesebestätigung eigener Nachrichten (DMs/Gruppen): rot = gesendet, grün = gelesen */
.msg.rc-sent { background: rgba(255, 93, 108, .08); box-shadow: inset 3px 0 0 #ff5d6c; }
.msg.rc-read { background: rgba(46, 230, 168, .08); box-shadow: inset 3px 0 0 #2ee6a8; }
.msg.rc-sent:hover { background: rgba(255, 93, 108, .13); }
.msg.rc-read:hover { background: rgba(46, 230, 168, .13); }
.rc-mark { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: -2px; }
.rc-mark svg { width: 14px; height: 14px; stroke-width: 2.6; }
.rc-mark.read svg + svg { margin-left: -8px; }
.rc-mark.sent { color: #ff5d6c; }
.rc-mark.read { color: #2ee6a8; }
.rc-demo.sent { color: #ff5d6c; }
.rc-demo.read { color: #2ee6a8; }
.msg.flash { animation: flashbg 1.5s; }
@keyframes flashbg { 0%, 40% { background: rgba(var(--accent-rgb), .18); } }
.msg-gutter { padding-top: 2px; }
.msg-gutter time { display: block; font-size: .68em; color: var(--text-3); padding-top: 5px; opacity: 0; text-align: center; width: 44px; }
.msg:hover .msg-gutter time { opacity: 1; }
.av-btn { border-radius: 50%; display: block; }
.av-btn:hover .avatar { filter: brightness(1.1); }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-author { font-weight: 650; color: var(--text); }
.msg-author:hover { text-decoration: underline; }
.msg-head time { font-size: .73em; color: var(--text-3); }
.msg-text { color: #d7dde6; word-wrap: break-word; overflow-wrap: anywhere; white-space: normal; }
.msg-text.jumbo { font-size: 2.6em; line-height: 1.2; }
.msg-text strong { color: var(--text); }
.msg-text code { font-family: "Cascadia Code", Consolas, monospace; font-size: .86em; background: var(--bg-0); padding: 2px 5px; border-radius: 5px; border: 1px solid var(--line); }
.msg-text pre { background: var(--bg-0); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 6px 0; overflow-x: auto; max-width: 100%; }
.msg-text pre code { background: none; border: 0; padding: 0; font-size: .86em; white-space: pre; }
.quote { display: block; border-left: 3px solid var(--bg-5); padding-left: 10px; color: var(--text-2); }
.mention { background: rgba(var(--accent-rgb), .14); color: var(--accent); padding: 0 3px; border-radius: 4px; font-weight: 600; }
.mention.me { background: rgba(255, 181, 71, .2); color: var(--warn); }
.spoiler { background: var(--bg-5); color: transparent; border-radius: 4px; cursor: pointer; transition: color .15s, background .15s; }
.spoiler.shown { color: inherit; background: var(--bg-4); }
.edited { font-size: .72em; color: var(--text-3); margin-left: 5px; }
.msg-reply { grid-column: 2; display: flex; align-items: center; gap: 6px; font-size: .82em; color: var(--text-3); margin-bottom: 3px; position: relative; text-align: left; min-width: 0; }
.msg-reply::before { content: ""; position: absolute; left: -38px; top: 9px; width: 30px; height: 12px; border-left: 2px solid var(--bg-5); border-top: 2px solid var(--bg-5); border-top-left-radius: 8px; }
.msg-reply b { color: var(--text-2); font-weight: 600; flex: none; }
.msg-reply:hover span { color: var(--text); }
.atts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; align-items: flex-start; }
.att-img { border-radius: 12px; overflow: hidden; display: block; max-width: min(420px, 100%); border: 1px solid var(--line); background: var(--bg-3); }
.att-img img { display: block; max-width: 100%; max-height: 340px; object-fit: contain; }
.att-video { max-width: min(480px, 100%); max-height: 340px; border-radius: 12px; background: #000; }
.att-audio { background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 300px; }
.att-audio span { display: flex; align-items: center; gap: 8px; font-size: .9em; }
.att-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); color: var(--text); width: min(380px, 100%); }
.att-file:hover { text-decoration: none; background: var(--bg-4); }
.att-file > .i:first-child { color: var(--accent); }
.att-file span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.att-file small { color: var(--text-3); font-size: .8em; }
.msg-tools { position: absolute; right: 14px; top: -14px; display: none; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 9px; padding: 2px; box-shadow: 0 6px 18px rgba(0,0,0,.35); z-index: 2; }
.msg:hover .msg-tools { display: flex; }
.msg-tools button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: var(--text-2); }
.msg-tools button:hover { background: var(--bg-5); color: var(--text); }
.msg-tools button.danger:hover { color: var(--danger); }
.msg-tools .i { width: 17px; height: 17px; }
.msg-edit textarea { margin: 4px 0 2px !important; min-height: 44px; }
.msg-edit small { color: var(--text-3); font-size: .75em; }
body.compact .msg { margin-top: 4px; padding-top: 1px; padding-bottom: 1px; }
body.compact .msg .avatar { --s: 28px !important; }
body.compact .msg { grid-template-columns: 44px minmax(0, 1fr); }
.msg-skeleton { padding: 20px; display: grid; gap: 22px; }
.msg-skeleton div { display: flex; gap: 14px; }
.msg-skeleton i { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-3); }
.msg-skeleton span { flex: 1; display: grid; gap: 8px; }
.msg-skeleton b { width: 140px; height: 12px; border-radius: 6px; background: var(--bg-3); }
.msg-skeleton em { width: 70%; height: 12px; border-radius: 6px; background: var(--bg-3); }
.msg-skeleton > div { animation: pulse 1.4s ease-in-out infinite; }

.composer-wrap { flex: none; padding: 0 16px 6px; position: relative; }
.composer { display: flex; align-items: flex-end; gap: 6px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 16px; padding: 6px; transition: border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color: rgba(var(--accent-rgb), .45); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1); }
.composer.disabled { opacity: .6; }
.composer textarea { flex: 1; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; resize: none !important; padding: 7px 4px !important; max-height: 240px; line-height: 1.4; }
.send-btn { width: 36px; height: 36px; border-radius: 11px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; transition: transform .1s, filter .1s; }
.send-btn:hover:not(:disabled) { filter: brightness(1.08); }
.send-btn:active:not(:disabled) { transform: scale(.94); }
.send-btn .i { width: 18px; height: 18px; stroke-width: 2; }
.typing { height: 20px; font-size: .78em; color: var(--text-2); display: flex; align-items: center; gap: 6px; padding-left: 6px; }
.typing b { color: var(--text); }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-2); animation: bounce 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.reply-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: -8px; padding-bottom: 16px; background: var(--bg-4); border-radius: 14px 14px 0 0; font-size: .85em; color: var(--text-2); }
.reply-bar .i { width: 16px; height: 16px; color: var(--accent); }
.reply-bar span { flex: 1; }
.reply-bar b { color: var(--text); }
.reply-bar button { color: var(--text-3); display: grid; }
.reply-bar button:hover { color: var(--text); }
.file-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.file-bar:not(:empty) { margin-bottom: 8px; }
.file-chip { position: relative; width: 150px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 4px; font-size: .8em; }
.file-chip img { width: 100%; height: 84px; object-fit: cover; border-radius: 8px; }
.file-chip > .i { height: 84px; width: 100%; color: var(--accent); padding: 26px; background: var(--bg-2); border-radius: 8px; }
.file-chip small { color: var(--text-3); }
.file-chip.loading img, .file-chip.loading > .i { opacity: .6; }
.file-chip small { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-progress { height: 5px; border-radius: 5px; background: var(--bg-0); overflow: hidden; }
.file-progress > i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--accent); transition: width .15s linear; }
.file-chip.loading .file-progress > i[style="width:100%"] { background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .45), var(--accent)); background-size: 200% 100%; animation: shimmer 1s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.file-chip.failed { border-color: var(--danger); }
.file-chip button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 7px; background: var(--bg-0); display: grid; place-items: center; color: var(--text-2); }
.file-chip button:hover { color: var(--danger); }
.file-chip button .i { width: 14px; height: 14px; }
.drop-hint { position: absolute; inset: 10px; border: 2px dashed var(--accent); border-radius: 14px; background: rgba(7, 9, 13, .85); display: none; place-content: center; justify-items: center; gap: 10px; color: var(--accent); z-index: 20; pointer-events: none; }
.main.dropping .drop-hint { display: grid; }

.empty-state { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--text-2); padding: 30px; }
.empty-state .i { color: var(--text-3); }
.empty-state h3 { color: var(--text); margin: 14px 0 4px; }
.empty-state p { margin: 0; max-width: 360px; }

/* ---------------------------------------------------------------- home */
.home-page { flex: 1; overflow-y: auto; padding: 44px 48px; }
.home-hero { position: relative; padding: 40px; border-radius: 22px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .03) 60%), var(--bg-3); overflow: hidden; border: 1px solid var(--line); }
.home-glow { position: absolute; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .4), transparent 65%); animation: float 8s ease-in-out infinite; }
.home-hero h1 { position: relative; margin: 0 0 6px; font-size: 38px; letter-spacing: -.03em; }
.home-hero p { position: relative; margin: 0; color: var(--text-2); font-size: 17px; }
.home-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.home-card { text-align: left; padding: 22px; border-radius: 18px; background: var(--bg-3); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; transition: transform .15s, border-color .15s, background .15s; }
.home-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .4); background: var(--bg-4); }
.home-card .i { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: rgba(var(--accent-rgb), .14); color: var(--accent); margin-bottom: 8px; }
.home-card b { font-size: 1.05em; }
.home-card span { color: var(--text-2); font-size: .9em; }

/* ---------------------------------------------------------------- categories */
.cat-row { display: flex; align-items: center; margin-top: 14px; padding-right: 4px; }
.cat { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 2px; font-size: .72em; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); text-align: left; }
.cat:hover { color: var(--text-2); }
.cat .i { width: 13px; height: 13px; stroke-width: 2.6; transition: transform .15s; flex: none; }
.cat.closed .i { transform: rotate(-90deg); }
.cat-btn { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--text-3); opacity: .55; }
.cat-btn .i { width: 15px; height: 15px; stroke-width: 2.2; }
.cat-row:hover .cat-btn { opacity: 1; }
.cat-btn:hover { color: var(--text); background: var(--bg-3); }
.cat-row .ch-gear { position: static; transform: none; opacity: .0; width: 22px; height: 22px; }
.cat-row:hover .ch-gear { opacity: 1; }
.add-cat { width: 100%; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 9px; border: 1px dashed var(--line-2); color: var(--text-3); font-size: .82em; font-weight: 600; }
.add-cat .i { width: 15px; height: 15px; }
.add-cat:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .06); }
.template-card { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 18px; border-radius: 16px; background: linear-gradient(120deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .02)), var(--bg-1); border: 1px solid rgba(var(--accent-rgb), .25); }
.template-card .grow { display: flex; flex-direction: column; gap: 4px; }
.template-card small { color: var(--text-2); font-size: .86em; line-height: 1.5; }
.tc-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .14); color: var(--accent); flex: none; }

/* ---------------------------------------------------------------- auth extras */
.auth-side { align-self: center; justify-self: center; width: min(420px, 90%); display: flex; flex-direction: column; gap: 14px; padding: 30px 0; }
.auth-side .auth-card { width: 100%; }
.auth-forgot { display: block; margin: -8px 0 12px; font-size: .85em; }
.check.terms { align-items: flex-start; font-weight: 400; font-size: .86em; margin: 4px 0 14px; letter-spacing: 0; line-height: 1.45; }
.check.terms input { margin-top: 3px; flex: none; }
.legal-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: .8em; color: var(--text-3); }
.legal-footer a { color: var(--text-2); }
.legal-footer span { flex-basis: 100%; text-align: center; }
.tfa-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .12); color: var(--accent); margin-bottom: 12px; }

/* ---------------------------------------------------------------- account */
.tag { color: var(--text-3); font-weight: 500; }
.card-row .btn { margin-left: auto; }
.acc-box { background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.acc-box > p { margin: 0; }
.acc-line { display: flex; align-items: center; gap: 12px; }
.acc-line span { display: flex; flex-direction: column; }
.acc-line small { color: var(--text-3); }
.i.okc { color: var(--online); }
.acc-form { display: flex; gap: 8px; align-items: center; }
.acc-form input { margin: 0 !important; flex: 1; }
.acc-box .link-btn { align-self: flex-start; }
.danger-h { color: var(--danger); }
.danger-box { border-color: rgba(255, 93, 108, .3); }
.danger-box .btn { align-self: flex-start; }
.tfa-steps { margin: 0 0 10px; padding-left: 20px; color: var(--text-2); }
.tfa-qr { display: flex; justify-content: center; margin: 6px 0 12px; }
.tfa-qr img { width: 200px; height: 200px; border-radius: 12px; background: #fff; padding: 6px; }
.tfa-secret { display: inline-block; margin-top: 6px; font-size: 1.05em; letter-spacing: .06em; color: var(--text); word-break: break-all; }
.backup-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.backup-codes span { background: var(--bg-0); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px; text-align: center; font-size: 1.05em; letter-spacing: .05em; }

/* ---------------------------------------------------------------- links, embeds, invites, bots */
.link-box { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; margin: 12px 0; border-radius: 12px; background: var(--bg-0); border: 1px solid var(--line-2); word-break: break-all; }
.lb-host { font-weight: 700; font-size: 1.05em; }
.lb-full { color: var(--text-3); font-size: .85em; }
.bot-badge { display: inline-flex; align-items: center; gap: 2px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800; padding: 1px 5px 1px 3px; border-radius: 4px; letter-spacing: .04em; align-self: center; }
.bot-badge .i { width: 11px; height: 11px; stroke-width: 3; }
.embeds { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; align-items: flex-start; }
.embed { display: flex; gap: 14px; max-width: min(520px, 100%); background: var(--bg-3); border: 1px solid var(--line); border-left: 4px solid var(--ec); border-radius: 10px; padding: 12px 14px; }
.embed.large { flex-direction: column; }
.em-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.em-site { font-size: .78em; color: var(--text-3); }
.em-title { font-weight: 700; color: var(--accent); word-break: break-word; }
b.em-title { color: var(--text); }
.em-desc { font-size: .9em; color: var(--text-2); word-break: break-word; }
.em-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 4px; font-size: .88em; }
.em-fields div { display: flex; flex-direction: column; }
.em-img { flex: none; border-radius: 8px; overflow: hidden; align-self: flex-start; }
.embed:not(.large) .em-img img { width: 80px; height: 80px; object-fit: cover; display: block; }
.embed.large .em-img img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.invite-card { max-width: 440px; margin-top: 6px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.ic-label { font-size: .72em; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 8px; }
.ic-row { display: flex; align-items: center; gap: 12px; }
.ic-row .grow { display: flex; flex-direction: column; min-width: 0; }
.ic-row small { color: var(--text-3); font-size: .8em; }
.ic-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--bg-5); display: grid; place-items: center; font-weight: 800; overflow: hidden; flex: none; }
.ic-icon img { width: 100%; height: 100%; object-fit: cover; }
.invite-card.bad .ic-icon { color: var(--danger); }
.invite-card.loading { opacity: .6; }

/* ---------------------------------------------------------------- owner, webhooks, about */
.crown.co { color: #cbd5e1; }
.chip.owner { background: rgba(255, 181, 71, .16); color: var(--warn); }
.chip.owner.co { background: rgba(203, 213, 225, .14); color: #cbd5e1; }
.chip.synced { background: rgba(61, 220, 151, .12); color: var(--online); }
.owner-lbl { color: var(--warn); font-weight: 600; }
.owner-lbl.co { color: #cbd5e1; }
.wh-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.wh-card { display: flex; gap: 16px; padding: 16px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); }
.wh-av { cursor: pointer; margin: 0; position: relative; flex: none; }
.wh-av:hover .avatar { filter: brightness(.7); }
.wh-card .grow { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wh-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wh-fields label { margin: 0; }
.wh-btns { flex-wrap: wrap; }
.wh-help { margin-top: 16px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.wh-help summary { cursor: pointer; font-weight: 600; }
.wh-help pre { background: var(--bg-0); border-radius: 8px; padding: 12px; overflow-x: auto; font-size: 12.5px; white-space: pre-wrap; word-break: break-all; }
.about-ver { display: flex; justify-content: center; gap: 12px; margin: 16px 0; }
.about-ver div { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 10px 18px; display: flex; flex-direction: column; }
.about-ver small { color: var(--text-3); font-size: .78em; }
.about-ver b { font-size: 1.2em; }
.about-links { display: flex; justify-content: center; gap: 16px; margin: 18px 0 8px; }

/* ---------------------------------------------------------------- server list, official, stats */
.official-badge { display: inline-grid; color: var(--accent); flex: none; }
.official-badge .i { width: 17px; height: 17px; fill: rgba(var(--accent-rgb), .18); }
.side-head .official-badge { margin-left: 0; }
.side-head .official-badge .i { margin: 0; color: var(--accent); width: 18px; }
.rail-official { position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-0); color: var(--accent); display: grid; place-items: center; }
.rail-official .i { width: 16px; height: 16px; fill: rgba(var(--accent-rgb), .25); }
.rail-btn.discover { margin-top: auto; flex: none; }
.rail-btn.discover.active { background: rgba(var(--accent-rgb), .15); border-style: solid; box-shadow: 0 0 0 2px var(--accent); }
.official-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: .9em; }
.official-pill .i { width: 18px; height: 18px; }
.side-head b { display: flex; align-items: center; gap: 8px; }
.side-head b .i { margin: 0; color: var(--accent); }
.disc-hint { display: flex; gap: 10px; margin: 18px 6px 0; padding: 12px; border-radius: 12px; background: rgba(var(--accent-rgb), .08); font-size: .84em; color: var(--text-2); }
.disc-hint .i { color: var(--accent); flex: none; }
.disc-page { flex: 1; overflow-y: auto; padding: 28px 32px 40px; }
.disc-hero { position: relative; overflow: hidden; padding: 34px; border-radius: 20px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .03) 60%), var(--bg-3); border: 1px solid var(--line); }
.disc-hero h1 { position: relative; margin: 0 0 6px; font-size: 30px; letter-spacing: -.02em; }
.disc-hero p { position: relative; margin: 0 0 18px; color: var(--text-2); }
.disc-search { position: relative; max-width: 520px; font-size: 16px !important; padding: 13px 16px !important; }
.disc-head { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 12px; font-size: 1.1em; }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.disc-card { position: relative; background: var(--bg-3); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, border-color .15s; }
.disc-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .4); }
.disc-banner { height: 84px; background: linear-gradient(120deg, hsl(var(--h) 55% 35%), hsl(calc(var(--h) + 50) 60% 22%)); }
.disc-icon { position: absolute; top: 52px; left: 16px; width: 60px; height: 60px; border-radius: 18px; background: var(--bg-4); border: 4px solid var(--bg-3); display: grid; place-items: center; font-weight: 800; font-size: 20px; overflow: hidden; }
.disc-icon img { width: 100%; height: 100%; object-fit: cover; }
.disc-body { padding: 36px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.disc-body h3 { margin: 0; font-size: 1.08em; display: flex; align-items: center; gap: 6px; min-width: 0; }
.disc-body p { margin: 0; color: var(--text-2); font-size: .88em; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.disc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .8em; color: var(--text-3); }
.disc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.disc-meta .dot { background: var(--text-3); width: 8px; height: 8px; }
.disc-meta .dot.on { background: var(--online); }
.stats-head { display: flex; align-items: center; justify-content: space-between; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.kpi { background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.kpi small { color: var(--text-3); font-size: .78em; font-weight: 600; }
.kpi b { font-size: 1.7em; letter-spacing: -.02em; }
.kpi span { color: var(--text-3); font-size: .78em; }
.official-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.official-card.is-official { border-color: rgba(var(--accent-rgb), .45); background: linear-gradient(120deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .02)), var(--bg-1); }
.oc-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.oc-head > .i { color: var(--accent); fill: rgba(var(--accent-rgb), .15); }
.oc-head div { display: flex; flex-direction: column; gap: 3px; }
.oc-head small { color: var(--text-2); }
.oc-list { display: flex; flex-direction: column; gap: 10px; }
.oc-row { display: grid; grid-template-columns: 24px minmax(0, 1.2fr) minmax(0, 2fr) 110px; align-items: center; gap: 10px; font-size: .9em; }
.oc-row .meter { margin: 0; }
.oc-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-4); color: var(--text-3); }
.oc-ic .i { width: 13px; height: 13px; stroke-width: 2.6; }
.oc-ic.ok { background: rgba(61, 220, 151, .16); color: var(--online); }
.oc-val { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.oc-admin { margin-top: 14px; }
.oc-admin select { margin: 0 !important; max-width: 220px; }
.chart-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; min-width: 0; }
.charts { gap: 16px; margin-top: 0; }
.charts .chart-card { margin-bottom: 16px; }
.chart-title { display: flex; flex-direction: column; margin-bottom: 8px; }
.chart-title small { color: var(--text-3); font-size: .8em; }
.bar-chart { width: 100%; height: auto; display: block; overflow: visible; }
.bar-chart .grid { stroke: var(--line-2); stroke-width: 1; }
.bar-chart .tick { fill: var(--text-3); font-size: 11px; }
.bar-chart .peak { fill: var(--text-2); font-size: 11px; font-weight: 700; }
.bar-chart .bar { fill: var(--accent); }
.bar-chart .hit { fill: transparent; cursor: default; }
.bar-chart .hit:hover { fill: rgba(255, 255, 255, .04); }
.chart-table { margin-top: 6px; font-size: .82em; color: var(--text-2); }
.chart-table summary { cursor: pointer; color: var(--text-3); }
.chart-table table { border-collapse: collapse; margin-top: 6px; }
.chart-table td, .chart-table th { padding: 2px 14px 2px 0; text-align: left; }
.rank-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.rank-row { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) minmax(60px, 1fr) 44px; align-items: center; gap: 8px; font-size: .88em; }
.rank-row:not(:has(.avatar)) { grid-template-columns: 16px minmax(0, 1fr) minmax(60px, 1fr) 44px; }
.rank-n { color: var(--text-3); font-weight: 700; }
.rank-track { height: 8px; border-radius: 4px; background: var(--bg-4); overflow: hidden; }
.rank-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--accent); }
.rank-val { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- RSGC-Admin */
.rail-btn.admin-btn { flex: none; color: var(--warn); border-color: rgba(255, 181, 71, .35); }
.rail-btn.admin-btn:hover, .rail-btn.admin-btn.active { background: rgba(255, 181, 71, .14); }
.rail-btn.admin-btn.active { box-shadow: 0 0 0 2px var(--warn); border-style: solid; }
.adm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.adm-head h1 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 26px; }
.adm-head h1 .i { color: var(--warn); }
.adm-head p { margin: 0; font-size: .85em; }
.adm-search { max-width: 360px; margin: 0 !important; }
.adm-table { display: flex; flex-direction: column; gap: 6px; }
.adm-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1.3fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line); cursor: pointer; transition: border-color .12s, background .12s; }
.adm-row:not(.adm-th):hover { border-color: rgba(var(--accent-rgb), .4); background: var(--bg-4); }
.adm-th { background: transparent; border: 0; cursor: default; padding: 4px 14px; font-size: .72em; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.adm-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm-name .grow { display: flex; flex-direction: column; min-width: 0; }
.adm-name b { display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-name small, .adm-num small { color: var(--text-3); font-size: .8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-icon.sm { width: 40px; height: 40px; border-radius: 12px; font-size: .85em; }
.adm-num { display: flex; flex-direction: column; min-width: 0; }
.adm-num .dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; background: var(--online); }
.adm-status { display: flex; flex-wrap: wrap; gap: 5px; }
.chip.bad-chip { background: rgba(255, 93, 108, .14); color: var(--danger); }
@media (max-width: 1250px) { .adm-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; } .adm-row > .adm-status { display: none; } }

/* ---------------------------------------------------------------- invites & audit */
.inv-expiry { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .88em; margin: 4px 0 0; }
.inv-expiry .i { width: 16px; height: 16px; color: var(--accent); }
.inv-create { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; padding: 16px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); margin-top: 14px; }
.inv-create label { margin: 0; }
.inv-create .btn { height: 44px; }
.inv-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 90px minmax(0, 1.6fr) auto; gap: 14px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.inv-row.expired { opacity: .55; }
.inv-code, .inv-uses { display: flex; flex-direction: column; min-width: 0; }
.inv-code small, .inv-uses small { color: var(--text-3); font-size: .8em; }
.inv-uses { font-weight: 700; }
.inv-exp { font-size: .86em; color: var(--text-2); }
.inv-exp.bad { color: var(--danger); }
.inv-exp.ok { color: var(--online); }
.inv-act { display: flex; gap: 2px; }
.audit-filters { display: flex; gap: 10px; align-items: center; margin: 12px 0 8px; }
.audit-filters select { margin: 0 !important; max-width: 240px; }
.audit-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.audit-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-3); color: var(--text-2); flex: none; }
.audit-ic .i { width: 17px; height: 17px; }
.audit-ic.ok { background: rgba(61, 220, 151, .14); color: var(--online); }
.audit-ic.bad { background: rgba(255, 93, 108, .14); color: var(--danger); }
.audit-text { flex: 1; min-width: 0; font-size: .93em; line-height: 1.45; }
.audit-text b { color: var(--text); }
.audit-details { margin-top: 4px; color: var(--text-2); font-size: .88em; display: grid; gap: 2px; }
.audit-details .ok { color: var(--online); }
.audit-details .bad { color: var(--danger); }
.audit-details .rdot { vertical-align: middle; }
.quote-line { display: block; border-left: 3px solid var(--bg-5); padding-left: 8px; color: var(--text-3); white-space: pre-wrap; word-break: break-word; }
.audit-row time { color: var(--text-3); font-size: .78em; white-space: nowrap; padding-top: 2px; }
.audit-list + .btn { margin-top: 12px; }

/* ---------------------------------------------------------------- friends */
.pill-red { margin-left: auto; font-style: normal; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
.friends-head { gap: 18px; }
.friends-head .mh-title { flex: none; }
.fr-tabs { display: flex; gap: 6px; align-items: center; padding-left: 18px; border-left: 1px solid var(--line-2); overflow-x: auto; }
.fr-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; color: var(--text-2); font-weight: 600; font-size: .9em; white-space: nowrap; }
.fr-tabs button .pill-red { margin-left: 2px; }
.fr-tabs button:hover { background: var(--bg-3); color: var(--text); }
.fr-tabs button.on { background: var(--bg-4); color: var(--text); }
.fr-tabs button.add { background: var(--accent); color: var(--accent-ink); }
.fr-tabs button.add.on { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .5); }
.friends-body { flex: 1; overflow-y: auto; padding: 18px 26px 30px; min-height: 0; }
.fr-search { max-width: 100%; }
.fr-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fr-max { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 1.15em; color: var(--text-2); }
.fr-max .i { width: 14px; height: 14px; color: var(--accent); }
.fr-meter { display: inline-block; width: 90px; height: 6px; margin-left: 4px; border-radius: 6px; background: var(--bg-0); overflow: hidden; }
.fr-meter > i { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.fr-meter > i.near { background: var(--warn); }
.fr-meter > i.full { background: var(--danger); }
.rail-dm { border-radius: 50%; background: transparent; border: 0; }
.rail-dm .avatar { transition: border-radius .2s; }
.rail-dm:hover { background: transparent; }
.rail-dm::before { display: none; }
.rail-dm .badge { right: -6px; bottom: -4px; min-width: 22px; height: 22px; font-size: 11.5px; }
.fr-label { font-size: .72em; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); margin: 4px 0 8px; }
.fr-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; border-top: 1px solid var(--line); cursor: pointer; }
.fr-row:hover { background: var(--bg-3); border-top-color: transparent; }
.fr-row:hover + .fr-row { border-top-color: transparent; }
.fr-row .avatar { --status-ring: var(--bg-2); }
.fr-row:hover .avatar { --status-ring: var(--bg-3); }
.fr-name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.fr-name b { font-weight: 650; }
.fr-user { color: var(--text-3); font-size: .85em; opacity: 0; transition: opacity .12s; }
.fr-row:hover .fr-user { opacity: 1; }
.fr-name small { flex-basis: 100%; color: var(--text-3); font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-actions { display: flex; gap: 8px; }
.round-sm { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-1); color: var(--text-2); display: grid; place-items: center; transition: background .12s, color .12s; }
.round-sm .i { width: 18px; height: 18px; }
.round-sm:hover { background: var(--bg-5); color: var(--text); }
.round-sm.ok:hover { color: var(--online); }
.round-sm.danger:hover { color: var(--danger); }
.fr-empty { display: grid; justify-items: center; gap: 10px; padding: 60px 20px; color: var(--text-3); text-align: center; }
.fr-empty p { margin: 0; max-width: 360px; }
.fr-add h2 { margin: 6px 0 4px; font-size: 1.25em; }
.fr-add > p { margin: 0 0 16px; }
.fr-add-form { display: flex; gap: 10px; align-items: center; background: var(--bg-0); border: 1px solid var(--line-2); border-radius: 14px; padding: 6px 6px 6px 8px; }
.fr-add-form:focus-within { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.fr-add-form input { margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.fr-count { margin-top: 26px; color: var(--text-2); font-size: .9em; max-width: 420px; }
.fr-count b { color: var(--text); font-size: 1.2em; }
.fr-count .meter { margin-top: 8px; }

/* ---------------------------------------------------------------- stage */
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; background: radial-gradient(90% 70% at 50% 0%, rgba(var(--accent-rgb), .06), transparent 70%), var(--bg-0); position: relative; }
.stage.compact { flex: none; height: 44vh; min-height: 260px; border-bottom: 1px solid var(--line); }
.stage-grid { flex: 1; min-height: 0; display: grid; gap: 10px; padding: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: center; }
.stage-grid.n1 { grid-template-columns: minmax(0, 1fr); }
.stage-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-grid.n3, .stage-grid.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-grid.n5, .stage-grid.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage-grid.n7, .stage-grid.n8, .stage-grid.n9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage-grid.focus { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) 120px; }
.stage-grid.focus .tile.focused { grid-column: 1 / -1; }
.stage-grid.focus .tile:not(.focused) { grid-row: 2; }
.tile { position: relative; border-radius: 16px; background: var(--bg-3); overflow: hidden; min-height: 0; aspect-ratio: auto; display: grid; place-items: center; border: 1px solid var(--line); transition: box-shadow .12s; }
.tile.speaking { box-shadow: 0 0 0 3px var(--accent), 0 0 24px rgba(var(--accent-rgb), .3); }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }
.tile.screen video { object-fit: contain; }
.tile.mirror video { transform: scaleX(-1); }
.tile.has-video video { display: block; }
.tile.has-video .tile-av { display: none; }
.tile-av { display: grid; place-items: center; }
.tile .tile-av .avatar { transition: box-shadow .12s; }
.tile.speaking .tile-av .avatar { box-shadow: 0 0 0 4px var(--accent); }
.tile-label { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; background: rgba(7, 9, 13, .72); backdrop-filter: blur(6px); font-size: .82em; font-weight: 600; }
.tile-label .i { width: 15px; height: 15px; color: var(--danger); }
.tile-label em { font-style: normal; color: var(--warn); font-weight: 500; }
.tile-label em.bad { color: var(--danger); }
.tile-tools { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.tile:hover .tile-tools { opacity: 1; }
.tile-tools button { width: 32px; height: 32px; border-radius: 9px; background: rgba(7, 9, 13, .7); display: grid; place-items: center; color: #fff; }
.tile-tools .i { width: 16px; height: 16px; }
.tile:fullscreen { border-radius: 0; }
.stage-bar { flex: none; display: flex; justify-content: center; gap: 12px; padding: 10px 0 18px; }
.stage-bar:empty { display: none; }
.round { width: 50px; height: 50px; border-radius: 50%; background: var(--bg-4); color: var(--text); display: grid; place-items: center; transition: background .12s, transform .1s; }
.round:hover { background: var(--bg-5); }
.round:active { transform: scale(.94); }
.round.off { background: rgba(255, 93, 108, .16); color: var(--danger); }
.round.on { background: var(--accent); color: var(--accent-ink); }
.round.danger { background: var(--danger); color: #fff; }
.round.danger:hover { filter: brightness(1.1); }
.round.ok { background: var(--online); color: #04150d; }
.round.wide { width: 74px; border-radius: 25px; }
.stage.compact .round { width: 42px; height: 42px; }
.stage.compact .round.wide { width: 62px; }
.stage.compact .stage-bar { padding: 4px 0 10px; }
.stage-join { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; padding: 20px; }
.stage-join h2 { margin: 18px 0 4px; font-size: 1.6em; }
.stage-join p { color: var(--text-2); margin: 0 0 20px; max-width: 420px; }
.sj-avatars { display: flex; }
.sj-avatars .avatar { margin-left: -12px; box-shadow: 0 0 0 4px var(--bg-0); }
.sj-avatars .avatar:first-child { margin-left: 0; }
.sj-empty { width: 88px; height: 88px; border-radius: 28px; background: rgba(var(--accent-rgb), .1); color: var(--accent); display: grid; place-items: center; }

.call-toast { position: fixed; right: 22px; bottom: 22px; width: 260px; padding: 22px; border-radius: 22px; background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 950; animation: pop .25s ease-out; }
@keyframes pop { from { transform: translateY(20px) scale(.96); opacity: 0; } }
.call-toast b { font-size: 1.1em; margin-top: 8px; }
.call-toast > span { color: var(--text-2); font-size: .9em; }
.call-av { position: relative; }
.call-av .ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); animation: ring 1.4s ease-out infinite; }
@keyframes ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.call-btns { display: flex; gap: 22px; margin-top: 14px; }

/* ---------------------------------------------------------------- modals */
.modal-back { position: fixed; inset: 0; background: rgba(3, 5, 8, .72); display: grid; place-items: center; z-index: 800; opacity: 0; transition: opacity .16s; padding: 20px; }
.modal-back.in { opacity: 1; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; transform: scale(.97) translateY(6px); transition: transform .16s; overflow: hidden; }
.modal-back.in .modal { transform: none; }
.modal.small { width: min(460px, 100%); }
.modal.settings { width: min(1040px, 100%); height: min(760px, calc(100vh - 40px)); }
.modal.picker { width: min(820px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 6px 24px; }
.modal-head h2 { margin: 0; font-size: 1.3em; letter-spacing: -.01em; }
.modal-head p { margin: 4px 0 0; color: var(--text-2); font-size: .92em; }
.modal-body { padding: 14px 24px 22px; overflow-y: auto; min-height: 0; flex: 1; }
.modal.settings .modal-head { display: none; }
.modal.settings .modal-body { padding: 0; display: flex; }
.modal-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.confirm-text { color: var(--text-2); margin: 4px 0 0; }
.confirm-text b { color: var(--text); }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs button { padding: 7px 14px; border-radius: 99px; color: var(--text-2); font-weight: 600; font-size: .9em; background: var(--bg-3); }
.tabs button.active { background: var(--accent); color: var(--accent-ink); }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; max-height: 420px; overflow-y: auto; padding: 2px; }
.pick { padding: 8px; border-radius: 12px; background: var(--bg-3); border: 2px solid transparent; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.pick:hover { background: var(--bg-4); }
.pick.sel { border-color: var(--accent); }
.pick > img { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #000; border-radius: 8px; }
.pick span { display: flex; align-items: center; gap: 6px; font-size: .85em; }
.pick span img { width: 16px; height: 16px; }
.icon-pick { display: flex; justify-content: center; margin: 4px 0 18px; }
.icon-drop { width: 88px; height: 88px; border-radius: 26px; border: 2px dashed var(--line-2); display: grid; place-content: center; justify-items: center; gap: 2px; color: var(--text-3); cursor: pointer; margin: 0; overflow: hidden; transition: border-color .15s, color .15s; font-size: .75em; }
.icon-drop:hover { border-color: var(--accent); color: var(--accent); }
.icon-drop img { width: 100%; height: 100%; object-fit: cover; }
.icon-drop.big { width: 110px; height: 110px; flex: none; }
.invite-preview { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-3); border-radius: 12px; margin-bottom: 4px; }
.invite-preview .rail-btn { width: 48px; height: 48px; }
.invite-preview div:last-child { display: flex; flex-direction: column; }
.invite-preview small { color: var(--text-3); }
.copy-row { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.copy-row input { margin: 0 !important; font-family: "Cascadia Code", Consolas, monospace; font-size: 13px !important; }
.type-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.type-pick label { margin: 0; cursor: pointer; }
.type-pick input { display: none; }
.type-pick span { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 12px; background: var(--bg-3); border: 2px solid transparent; color: var(--text); font-size: 1.2em; letter-spacing: 0; }
.type-pick span small { font-size: .78em; color: var(--text-3); font-weight: 400; }
.type-pick span .i { color: var(--text-2); margin-bottom: 4px; }
.type-pick input:checked + span { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.type-pick input:checked + span .i { color: var(--accent); }
.dm-suggest { max-height: 240px; overflow-y: auto; margin: 0 -8px; }

/* settings layout */
.set-layout { display: flex; width: 100%; height: 100%; }
.set-nav { width: 240px; flex: none; background: var(--bg-1); padding: 22px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); }
.set-nav-h { font-size: .7em; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); padding: 12px 10px 6px; }
.set-nav-h:first-child { padding-top: 0; }
.set-nav button { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 9px; color: var(--text-2); font-weight: 550; text-align: left; font-size: .93em; }
.set-nav button .i { width: 18px; height: 18px; }
.set-nav button:hover { background: var(--bg-3); color: var(--text); }
.set-nav button.active { background: var(--bg-4); color: var(--text); }
.set-nav button.active .i { color: var(--accent); }
.set-nav button.danger { color: var(--danger); }
.set-nav button.danger:hover { background: rgba(255, 93, 108, .1); }
.set-nav-sep { height: 1px; background: var(--line-2); margin: 10px 8px; }
.set-body { flex: 1; overflow-y: auto; padding: 28px 36px 90px; position: relative; min-width: 0; }
.set-body h3 { margin: 0 0 6px; font-size: 1.25em; letter-spacing: -.01em; }
.set-body > p.muted { margin: 0 0 18px; font-size: .92em; }
.modal.settings::after { content: ""; }
.set-body .narrow { max-width: 420px; margin-top: 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.save-bar { position: sticky; bottom: -70px; margin-top: 24px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg-0); border: 1px solid var(--line-2); box-shadow: var(--shadow); transform: translateY(40px); opacity: 0; pointer-events: none; transition: transform .2s, opacity .2s; }
.save-bar.show { transform: none; opacity: 1; pointer-events: auto; bottom: 0; }
.save-bar span { flex: 1; font-weight: 600; font-size: .92em; }
.so-form { display: flex; gap: 24px; margin-top: 16px; align-items: flex-start; }
.roles-split, .perm-split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; margin-top: 10px; }
.role-list, .perm-roles { display: flex; flex-direction: column; gap: 2px; }
.role-list .btn { margin-bottom: 8px; }
.role-list > button:not(.btn), .perm-roles button { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px; border-radius: 9px; color: var(--text-2); text-align: left; font-size: .93em; }
.role-list > button small, .perm-roles button small { margin-left: auto; color: var(--text-3); font-size: .78em; }
.role-list > button:hover, .perm-roles button:hover { background: var(--bg-3); color: var(--text); }
.role-list > button.active, .perm-roles button.active { background: var(--bg-4); color: var(--text); }
.rdot { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.role-edit.locked { opacity: .85; }
.notice { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 181, 71, .1); color: var(--warn); font-size: .88em; margin-bottom: 14px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sw { width: 32px; height: 32px; border-radius: 10px; border: 2px solid transparent; position: relative; margin: 0; cursor: pointer; }
.sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--bg-2) inset; }
.sw.custom input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.sw.custom::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-size: 16px; }
.sw.none { background: var(--bg-4); display: grid; place-items: center; color: var(--text-3); }
.sw.none .i { width: 16px; height: 16px; }
.perm-toggles .switch-row b { font-size: 1.1em; }
.perm-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.perm-row > div:first-child { flex: 1; display: flex; flex-direction: column; }
.perm-row small { color: var(--text-3); font-size: .82em; }
.tri { display: flex; background: var(--bg-0); border-radius: 9px; padding: 3px; gap: 2px; }
.tri button { width: 32px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); }
.tri button .i { width: 16px; height: 16px; stroke-width: 2.3; }
.tri button:hover { color: var(--text); }
.tri button.on { background: var(--bg-4); color: var(--text); }
.tri button.on.deny { background: var(--danger); color: #fff; }
.tri button.on.allow { background: var(--online); color: #04150d; }
.member-table { display: flex; flex-direction: column; }
.mt-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.mt-row .avatar { --status-ring: var(--bg-2); }
.mt-name { width: 200px; flex: none; display: flex; flex-direction: column; min-width: 0; }
.mt-name b { display: flex; align-items: center; gap: 4px; }
.mt-name small { color: var(--text-3); font-size: .82em; }
.mt-roles { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
.mt-act { display: flex; gap: 2px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: var(--bg-4); font-size: .78em; font-weight: 600; color: var(--text); }
.chip .rdot { width: 9px; height: 9px; }
.chip.add { width: 26px; height: 22px; padding: 0; justify-content: center; color: var(--text-2); }
.chip.add .i { width: 14px; height: 14px; }
.profile-edit { display: flex; gap: 28px; margin-top: 16px; align-items: flex-start; }
.pe-preview { width: 240px; flex: none; background: var(--bg-1); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-bottom: 16px; border: 1px solid var(--line); }
.pe-preview .pp-banner { width: 100%; }
.pe-av { margin: -44px 0 8px; position: relative; cursor: pointer; border-radius: 50%; border: 6px solid var(--bg-1); }
.pe-av span { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; opacity: 0; transition: opacity .15s; color: #fff; }
.pe-av:hover span { opacity: 1; }
.card-row { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--bg-1); border-radius: 14px; margin-top: 14px; }
.card-row > div:not(.avatar) { display: flex; flex-direction: column; }
.card-row small { color: var(--text-3); }
.meter { height: 10px; border-radius: 10px; background: var(--bg-0); overflow: hidden; margin-bottom: 8px; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #b7ffe5); border-radius: 10px; transition: width .06s linear; }
.cam-preview { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cam-preview video { width: 320px; aspect-ratio: 16/9; background: var(--bg-0); border-radius: 12px; transform: scaleX(-1); object-fit: cover; }
.update-card { display: flex; align-items: center; gap: 14px; padding: 16px; margin-top: 14px; border-radius: 14px; background: linear-gradient(120deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .02)), var(--bg-1); border: 1px solid var(--line); }
.update-card img { width: 46px; height: 46px; }
.update-card .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.update-card small { color: var(--text-2); font-size: .86em; }
.small-meter { height: 6px; margin: 6px 0 0; }
.update-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 960; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--bg-0); border: 1px solid rgba(var(--accent-rgb), .4); box-shadow: var(--shadow); animation: pop .25s ease-out; }
.update-bar > .i { color: var(--accent); }
.update-bar span { display: flex; flex-direction: column; line-height: 1.3; }
.update-bar small { color: var(--text-2); font-size: .8em; }
.accent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-bottom: 14px; }
.accent { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 12px; background: var(--bg-3); border: 2px solid transparent; font-size: .85em; font-weight: 600; margin: 0; cursor: pointer; color: var(--text); letter-spacing: 0; }
.accent i { width: 36px; height: 36px; border-radius: 50%; display: block; position: relative; overflow: hidden; }
.accent.on { border-color: var(--accent); }
.accent.custom input { position: absolute; inset: -8px; width: 60px; height: 60px; opacity: 0; cursor: pointer; }
.about { text-align: center; padding-top: 40px; }
.about img { width: 90px; height: 90px; }
.about h2 { margin: 10px 0 4px; }

/* ---------------------------------------------------------------- menus & popovers */
.menu { position: fixed; z-index: 1100; min-width: 210px; max-width: 290px; background: var(--bg-0); border: 1px solid var(--line-2); border-radius: 12px; padding: 6px; box-shadow: var(--shadow); animation: menuin .1s ease-out; }
@keyframes menuin { from { opacity: 0; transform: scale(.97); } }
.menu-item { width: 100%; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--text-2); font-size: .9em; font-weight: 550; text-align: left; }
.menu-item .i { width: 17px; height: 17px; }
.menu-item small { margin-left: auto; color: var(--accent); font-size: .78em; }
.menu-item:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
.menu-item:hover small { color: inherit; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger); color: #fff; }
.menu-sep { height: 1px; background: var(--line-2); margin: 5px 6px; }
.menu-title { font-size: .7em; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); padding: 6px 10px 6px; }
.pp-private { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .8em; color: var(--text-3); }
.pp-private .i { width: 14px; height: 14px; color: var(--accent); }
.pp-private b { color: var(--text-2); }
.menu-title .tag { text-transform: none; letter-spacing: 0; font-weight: 500; }
.menu-check { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; margin: 0; font-size: .9em; font-weight: 550; color: var(--text); cursor: pointer; letter-spacing: 0; }
.menu-check:hover { background: var(--bg-3); }
.menu-check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.menu-check.disabled { opacity: .45; cursor: not-allowed; }
.profile-pop { position: fixed; z-index: 1050; width: 320px; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; animation: menuin .12s ease-out; }
.pp-banner { height: 82px; background: linear-gradient(120deg, hsl(var(--h) 60% 45%), rgba(var(--accent-rgb), .8)); }
.pp-av { margin: -42px 0 0 16px; width: max-content; border-radius: 50%; border: 6px solid var(--bg-1); --status-ring: var(--bg-1); }
.pp-av .avatar { --status-ring: var(--bg-1); }
.pp-body { padding: 8px 16px 16px; }
.pp-body h3 { margin: 0; font-size: 1.3em; }
.pp-user { color: var(--text-2); font-size: .88em; }
.pp-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pp-sec h4 { margin: 0 0 6px; font-size: .7em; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); }
.pp-sec p { margin: 0; font-size: .92em; white-space: pre-wrap; }
.pp-roles { display: flex; flex-wrap: wrap; gap: 5px; }
.pp-actions { display: flex; gap: 8px; margin-top: 16px; }
.pp-mod { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.pp-mod button { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--bg-3); color: var(--text-2); font-size: .8em; font-weight: 600; }
.pp-mod button .i { width: 15px; height: 15px; }
.pp-mod button:hover { background: var(--bg-4); color: var(--text); }
.pp-mod button.danger:hover { background: var(--danger); color: #fff; }

.lightbox { position: fixed; inset: 0; z-index: 1200; background: rgba(3, 5, 8, .9); display: grid; place-content: center; justify-items: center; gap: 14px; padding: 30px; }
.lightbox img { max-width: 90vw; max-height: 80vh; border-radius: 12px; box-shadow: var(--shadow); cursor: zoom-out; }
.lb-bar { display: flex; gap: 8px; }

.tip { position: fixed; z-index: 1300; pointer-events: none; background: var(--bg-0); color: var(--text); font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); border: 1px solid var(--line-2); white-space: nowrap; animation: menuin .08s ease-out; }

#toast-root { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 1400; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; background: var(--bg-0); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: .92em; font-weight: 550; transform: translateY(12px); opacity: 0; transition: transform .2s, opacity .2s; max-width: 480px; }
.toast.in { transform: none; opacity: 1; }
.toast .i { width: 18px; height: 18px; color: var(--accent); }
.toast.t-error .i { color: var(--danger); }
.toast.t-error { border-color: rgba(255, 93, 108, .35); }

@media (max-width: 1100px) {
  .app { grid-template-columns: 76px 240px minmax(0, 1fr) 0; }
  .app .members { display: none; }
}

/* ---------------------------------------------------------------- Zugriff / Bewerbungen / Willkommen */
.btn.ok { background: var(--ok); color: #06231a; }
.btn.ok:hover:not(:disabled) { filter: brightness(1.08); }
.acc-opts { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.acc-opt { display: grid; grid-template-columns: auto 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg-1); border: 1.5px solid var(--line); cursor: pointer; transition: border-color .15s, background .15s; }
.acc-opt:hover:not(.disabled) { border-color: var(--line-2); background: var(--bg-3); }
.acc-opt.on { border-color: var(--accent); background: linear-gradient(120deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .02)), var(--bg-1); }
.acc-opt.disabled { cursor: not-allowed; opacity: .6; }
.acc-opt input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.acc-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-3); color: var(--accent); }
.acc-ic .i { width: 22px; height: 22px; }
.acc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acc-txt small { color: var(--text-2); line-height: 1.4; }
.acc-state { font-size: .78em; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(255, 181, 71, .14); color: var(--warn); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.acc-state.ok { background: rgba(46, 230, 168, .14); color: var(--ok); }
.acc-state .i { width: 13px; height: 13px; }
.disc-req { margin: -4px 0 0 30px; }
.acc-opts .disc-req { margin-bottom: 0; }
.disc-req .oc-row { grid-template-columns: 24px minmax(0, 1.2fr) minmax(0, 2fr) 90px 104px; }
.oc-state { font-size: .78em; font-weight: 700; color: var(--danger); text-align: right; }
.oc-state.ok { color: var(--ok); }
.disc-req > .row { margin-top: 14px; }
.apq-list { display: flex; flex-direction: column; gap: 8px; }
.apq-row { display: flex; align-items: center; gap: 8px; }
.apq-row input { flex: 1; }
.apq-n { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-size: .78em; font-weight: 700; color: var(--text-2); flex: none; }
.apply-head { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--bg-1); margin-bottom: 12px; }
.apply-head > .i { width: 30px; height: 30px; color: var(--accent); flex: none; }
.apply-head small { display: block; color: var(--text-2); margin-top: 2px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-1); margin: 4px 0 14px; }
.seg button { padding: 7px 14px; border-radius: 9px; font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.seg button.on { background: var(--bg-4); color: var(--text); }
.app-list { display: flex; flex-direction: column; gap: 12px; }
.app-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.app-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.app-head small { display: block; color: var(--text-3); }
.app-answers { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.app-answers small { color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .7em; }
.app-answers p { margin: 3px 0 0; white-space: pre-wrap; word-break: break-word; }
.app-st { font-size: .8em; font-weight: 700; padding: 5px 10px; border-radius: 99px; }
.app-st.accepted { background: rgba(46, 230, 168, .14); color: var(--ok); }
.app-st.declined { background: rgba(255, 93, 108, .14); color: var(--danger); }
.app-reason { margin-top: 10px; font-size: .88em; color: var(--text-2); }
.apps-cta { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 6px; border-radius: 11px; background: rgba(255, 181, 71, .1); color: var(--text); font-weight: 600; font-size: .88em; border: 1px solid rgba(255, 181, 71, .25); }
.apps-cta .i { color: var(--warn); }
.apps-cta span { flex: 1; text-align: left; }
.apps-cta:hover { background: rgba(255, 181, 71, .18); }
.set-nav button .pill-red { margin-left: auto; }
.wm-vars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wm-vars .chip { cursor: pointer; border: 0; }
.wm-vars .chip:hover { background: var(--bg-3); }
.wm-preview { border-radius: 12px; background: var(--bg-2); border: 1px dashed var(--line-2); padding: 10px 12px; display: flex; align-items: flex-start; gap: 12px; }
.wm-preview .sys-wave { pointer-events: none; }
.msg.sys { display: flex; align-items: flex-start; gap: 12px; padding-top: 8px; padding-bottom: 8px; margin-top: 4px; }
.sys-ic { width: 40px; flex: none; display: grid; place-items: center; height: 24px; color: var(--ok); }
.sys-ic .i { width: 20px; height: 20px; }
.sys-body { flex: 1; min-width: 0; }
.sys-text { color: var(--text); line-height: 1.45; }
.sys-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: .78em; color: var(--text-3); }
.sys-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-2); }
.sys-who:hover { text-decoration: underline; }
.sys-wave { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: var(--bg-3); color: var(--text-2); font-weight: 600; font-size: .85em; opacity: 0; transition: opacity .15s; }
.sys-wave .i { width: 16px; height: 16px; }
.msg.sys:hover .sys-wave, .wm-preview .sys-wave { opacity: 1; }
.sys-wave:hover { background: rgba(var(--accent-rgb), .16); color: var(--accent); }
@media (max-width: 700px) { .acc-opt { grid-template-columns: auto 36px minmax(0, 1fr); } .acc-opt .acc-state { grid-column: 3; justify-self: start; } .disc-req .oc-row { grid-template-columns: 24px minmax(0, 1fr) 80px; } .disc-req .oc-row .meter, .disc-req .oc-row .oc-state { display: none; } }
/* ---------------------------------------------------------------- Rechte v2 / Timeout / Formular-Baukasten */
.perm-group-h { display: flex; align-items: center; gap: 8px; margin: 18px 0 2px; font-size: .72em; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); }
.perm-group-h:first-child { margin-top: 6px; }
.perm-group-h .i { width: 14px; height: 14px; color: var(--accent); }
.perm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.perm-head .field-label { margin: 0; }
.perm-head .perm-search { flex: 1; min-width: 160px; margin: 0 !important; }
.btn.small { padding: 6px 10px; font-size: .82em; }
.ch-flag { display: inline-flex; margin-left: auto; color: var(--text-3); }
.ch-flag .i { width: 13px; height: 13px; }
.ch-flag + .count { margin-left: 6px; }
.ch .count.full { background: rgba(255, 93, 108, .18); color: var(--danger); }
.ptt-note { display: inline-flex; align-items: center; gap: 6px; font-size: .8em; font-weight: 700; color: var(--warn); background: rgba(255, 181, 71, .12); padding: 6px 10px; border-radius: 99px; }
.ptt-note .i { width: 14px; height: 14px; }
.composer-foot { display: flex; align-items: center; gap: 10px; min-height: 20px; }
.composer-foot .typing { flex: 1; min-width: 0; }
.slow-note { font-size: .76em; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding-right: 6px; }
.slow-note:empty { display: none; }
.slow-note .i { width: 12px; height: 12px; }
.slow-note.active { color: var(--warn); }
.mt-name small .bad { color: var(--danger); display: inline-flex; align-items: center; gap: 3px; }
.mt-name small .bad .i { width: 12px; height: 12px; }
.icon-btn.on.bad { color: var(--danger); background: rgba(255, 93, 108, .12); }
.to-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 12px 0; }
.to-opt { position: relative; }
.to-opt input { position: absolute; opacity: 0; }
.to-opt span { display: block; text-align: center; padding: 10px; border-radius: 10px; background: var(--bg-1); border: 1.5px solid var(--line); font-weight: 600; font-size: .9em; cursor: pointer; }
.to-opt input:checked + span { border-color: var(--danger); background: rgba(255, 93, 108, .1); color: var(--text); }
.to-opt input:focus-visible + span { outline: 2px solid var(--accent); }
/* Baukasten */
.ff-list { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.ff-card { background: var(--bg-1); border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ff-card.req { border-left-color: var(--danger); }
.ff-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ff-top select { width: auto; min-width: 190px; }
.ff-req { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; margin: 0 0 0 6px !important; font-size: .9em; }
.ff-req .bad { color: var(--danger); }
.ff-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.ff-grid:has(> label:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
.ff-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 70px; }
.ff-add .chip { cursor: pointer; border: 0; padding: 6px 12px; font-size: .82em; }
.ff-add .chip:hover { background: rgba(var(--accent-rgb), .16); color: var(--accent); }
.ff-add .chip .i { width: 13px; height: 13px; }
.muted.small { font-size: .82em; display: flex; align-items: center; gap: 6px; margin: 0; }
.muted.small .i { width: 14px; height: 14px; }
/* Bewerber-Formular */
.apply-modal { width: min(560px, 100%) !important; }
.apply-intro { background: var(--bg-1); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; line-height: 1.5; }
.af-list { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 4px; }
.af { display: flex; flex-direction: column; gap: 6px; }
.af-label { font-weight: 650; color: var(--text); display: flex; align-items: baseline; gap: 6px; }
.af-req { color: var(--danger); font-style: normal; font-weight: 800; }
.af-opt { font-weight: 500; color: var(--text-3); font-size: .8em; }
.af-help { color: var(--text-3); font-size: .82em; font-weight: 500; }
.af-opts { display: flex; flex-direction: column; gap: 6px; }
.af-o { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--bg-1); border: 1px solid var(--line); cursor: pointer; margin: 0 !important; font-weight: 500; }
.af-o:hover { border-color: var(--line-2); }
.af-o:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.af-o input, .af-check input { accent-color: var(--accent); width: 17px; height: 17px; margin: 0; flex: none; }
.af-check { flex-direction: row !important; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 10px; background: var(--bg-1); border: 1px solid var(--line); cursor: pointer; }
.af-check span { display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
.af.missing input, .af.missing textarea, .af.missing .af-o, .af-check.missing { border-color: var(--danger) !important; }
.app-answers p .ok, .app-answers p .bad { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.app-answers p .ok { color: var(--ok); } .app-answers p .bad { color: var(--danger); }
.app-answers p .i { width: 14px; height: 14px; }
@media (max-width: 700px) { .ff-grid { grid-template-columns: 1fr !important; } .ff-top select { min-width: 0; flex: 1; } }
/* ---------------------------------------------------------------- 1.5: Banner, Chat-Hintergrund, schönere Tabs */
.srv-banner { height: 132px; flex: none; position: relative; overflow: hidden; cursor: pointer; border-radius: 18px 18px 0 0; }
.srv-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srv-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .7)); }
.side-head.on-banner { margin-top: -54px; position: relative; z-index: 1; border-bottom-color: transparent; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.side-head.on-banner:hover { background: rgba(0, 0, 0, .25); }
.side-head.on-banner .i { color: #fff; }
.disc-banner.img { position: relative; }
.disc-banner.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.invite-preview.with-banner { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
.invite-preview .ip-banner { height: 96px; }
.invite-preview .ip-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.invite-preview .ip-row { display: flex; align-items: center; gap: 12px; padding: 12px; }
.invite-preview .ip-row > div:last-child { display: flex; flex-direction: column; }
.invite-preview small .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--online); margin-right: 4px; }
.invite-card.with-banner { padding-top: 0; overflow: hidden; }
.invite-card .ic-banner { height: 84px; margin: 0 -14px 10px; }
.invite-card .ic-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-edit { display: flex; flex-direction: column; gap: 10px; }
.banner-drop { position: relative; display: grid; place-content: center; justify-items: center; gap: 8px; aspect-ratio: 16 / 7; max-width: 520px; border-radius: 16px; border: 2px dashed var(--line-2); background: var(--bg-1); color: var(--text-3); cursor: pointer; overflow: hidden; }
.banner-drop.has { border-style: solid; border-color: var(--line); }
.banner-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-drop:hover { border-color: var(--accent); }
.banner-prog { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); overflow: hidden; z-index: 2; }
.banner-prog > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }
/* Chat-Hintergrund (nur für dich) */
.has-chat-bg { position: relative; isolation: isolate; }
.chat-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.chat-bg img, .chat-bg video { width: 100%; height: 100%; object-fit: var(--bg-fit, cover); filter: blur(var(--bg-blur, 0)); transform: scale(1.04); display: block; }
.chat-bg::after { content: ""; position: absolute; inset: 0; background: rgba(8, 10, 14, var(--bg-dim, .55)); }
.has-chat-bg > .main-head, .has-chat-bg > #stage-slot, .has-chat-bg > .messages, .has-chat-bg > .composer-wrap { position: relative; z-index: 1; }
.has-chat-bg > .main-head { background: rgba(10, 13, 18, .55); backdrop-filter: blur(12px); }
.has-chat-bg .composer { background: rgba(14, 17, 23, .78); backdrop-filter: blur(10px); }
.has-chat-bg .msg:hover { background: rgba(255, 255, 255, .05); }
.has-chat-bg .day-sep span { background: rgba(10, 13, 18, .7); border-radius: 99px; padding: 2px 10px; }
.cbg-edit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cbg-prev { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--bg-1); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); }
.cbg-prev > span { display: grid; justify-items: center; gap: 6px; font-size: .85em; }
.cbg-prev img, .cbg-prev video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--pf, cover); filter: blur(var(--pb, 0)); transform: scale(1.04); }
.cbg-shade { position: absolute; inset: 0; background: rgb(8, 10, 14); }
.cbg-demo { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 10px; align-items: center; }
.cbg-demo i { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); }
.cbg-demo div { display: flex; flex-direction: column; gap: 5px; }
.cbg-demo b { width: 70px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .8); }
.cbg-demo span { width: 130px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .45); }
.cbg-ctrl { display: flex; flex-direction: column; gap: 12px; }
.cbg-ctrl label b { color: var(--accent); font-weight: 700; margin-left: 6px; }
/* Bildschirm-Auswahl: Platzhalter während die Vorschau lädt */
.pick.skeleton { pointer-events: none; }
.pick.skeleton i { display: block; aspect-ratio: 16 / 9; border-radius: 8px; background: linear-gradient(90deg, var(--bg-2), var(--bg-4), var(--bg-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.pick.skeleton span { height: 12px; width: 60%; border-radius: 6px; background: var(--bg-4); }
.pick-ph { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; color: var(--text-3); }
.stage-grid .tile { cursor: pointer; }
/* Kacheln oben in Tabs */
.mini-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.mk { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); min-width: 0; }
.mk > div { display: flex; flex-direction: column; min-width: 0; }
.mk b { font-size: 1.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk small { color: var(--text-3); font-size: .78em; }
.mk-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .12); color: var(--accent); flex: none; }
.mk-ic.bad { background: rgba(255, 93, 108, .12); color: var(--danger); }
.mk-ic.ok { background: rgba(46, 230, 168, .12); color: var(--ok); }
.mk-ic .i { width: 19px; height: 19px; }
/* Bans */
.ban-list { display: flex; flex-direction: column; gap: 10px; }
.ban-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); border-left: 3px solid var(--danger); }
.ban-av { position: relative; flex: none; }
.ban-av > i { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); color: #fff; display: grid; place-items: center; border: 2px solid var(--bg-1); }
.ban-av > i .i { width: 11px; height: 11px; }
.ban-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ban-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ban-top small { color: var(--text-3); }
.ban-reason { color: var(--text); font-size: .92em; word-break: break-word; }
.ban-reason.none { color: var(--text-3); font-style: italic; }
.ban-meta { display: flex; align-items: center; gap: 5px; color: var(--text-3); font-size: .78em; flex-wrap: wrap; }
.ban-meta .i { width: 12px; height: 12px; }
.ban-meta .avatar { display: inline-grid; vertical-align: middle; }
/* Einladungen */
.vanity-card { padding: 16px; border-radius: 16px; background: linear-gradient(120deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .02)), var(--bg-1); border: 1px solid rgba(var(--accent-rgb), .3); display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.vc-head { display: flex; gap: 12px; align-items: center; }
.vc-head > .i { color: var(--accent); width: 28px; height: 28px; flex: none; }
.vc-head small { display: block; color: var(--text-2); }
.vc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-prefix { color: var(--text-3); font-size: .85em; font-family: ui-monospace, monospace; }
.vc-row input { flex: 1; min-width: 140px; font-family: ui-monospace, monospace; }
.vanity-mini { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .25); margin-bottom: 12px; }
.vanity-mini > .i { color: var(--accent); flex: none; }
.vanity-mini small { display: block; color: var(--text-3); font-size: .75em; }
.vanity-mini b { font-size: .85em; word-break: break-all; }
.inv-list { display: flex; flex-direction: column; gap: 10px; }
.inv-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); }
.inv-card.expired { opacity: .55; }
.inv-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .12); color: var(--accent); flex: none; }
.inv-card.expired .inv-ic { background: var(--bg-3); color: var(--text-3); }
.inv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.inv-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-badge { font-size: .74em; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--bg-3); color: var(--text-2); }
.inv-badge.ok { background: rgba(46, 230, 168, .14); color: var(--ok); }
.inv-badge.warn { background: rgba(255, 181, 71, .14); color: var(--warn); }
.inv-badge.bad { background: rgba(255, 93, 108, .14); color: var(--danger); }
.inv-meta { color: var(--text-3); font-size: .78em; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.inv-meta .avatar { display: inline-grid; }
.inv-usebar { display: flex; align-items: center; gap: 10px; font-size: .8em; color: var(--text-2); }
.inv-usebar .meter { flex: 1; max-width: 220px; margin: 0; }
.inv-card .inv-act { display: flex; gap: 6px; align-items: center; }
/* Audit */
.audit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.audit-chips .chip { cursor: pointer; border: 1px solid transparent; padding: 6px 12px; font-size: .8em; }
.audit-chips .chip .i { width: 13px; height: 13px; }
.audit-chips .chip.on { background: rgba(var(--accent-rgb), .16); color: var(--accent); border-color: rgba(var(--accent-rgb), .35); }
.audit-day { position: sticky; top: -1px; z-index: 1; padding: 10px 0 6px; background: var(--bg-2); }
.audit-day span { font-size: .72em; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.audit-row { border-radius: 12px; border-bottom: 0; margin-bottom: 4px; background: var(--bg-1); padding: 12px; }
.audit-row:hover { background: var(--bg-3); }
/* Statistik */
.kpi { position: relative; overflow: hidden; }
.kpi-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kpi-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .12); color: var(--accent); flex: none; }
.kpi-ic .i { width: 15px; height: 15px; }
.kpi .trend { margin-left: auto; font-style: normal; font-size: .72em; font-weight: 750; padding: 2px 7px; border-radius: 99px; background: var(--bg-3); color: var(--text-2); white-space: nowrap; }
.kpi .trend.up { background: rgba(46, 230, 168, .14); color: var(--ok); }
.kpi .trend.down { background: rgba(255, 93, 108, .14); color: var(--danger); }
.bar-chart .area { fill: rgba(var(--accent-rgb), .16); }
.bar-chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bar-chart .dot-end { fill: var(--accent); stroke: var(--bg-1); stroke-width: 2; }
.bar-chart .bar.neg { fill: var(--danger); opacity: .8; }
.bar-chart .grid.base { stroke: var(--text-3); opacity: .5; }
.bar-chart .bar.hot { fill: var(--accent); }
.lg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); margin: 0 2px 0 6px; }
.lg-dot.neg { background: var(--danger); }
@media (max-width: 700px) {
  .cbg-edit { grid-template-columns: 1fr; }
  .ban-card, .inv-card { flex-wrap: wrap; }
  .inv-card .inv-act, .ban-card > .btn { width: 100%; justify-content: flex-end; }
}
/* ---------------------------------------------------------------- Emojis & Benutzerlimit */
.emoji-c { width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -.3em; margin: 0 .05em; display: inline-block; }
.msg-text.jumbo .emoji-c { width: 3em; height: 3em; vertical-align: middle; }
.audit-text .emoji-c { width: 20px; height: 20px; }
.composer .emoji-btn { color: var(--text-2); }
.composer .emoji-btn:hover:not(:disabled) { color: var(--accent); }
.emoji-suggest { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 4px); background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 14px; padding: 6px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); z-index: 30; display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.emoji-suggest[hidden] { display: none; }
.es-head { font-size: .72em; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 4px 8px 6px; }
.es-head b { color: var(--text-2); text-transform: none; letter-spacing: 0; }
.es-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; text-align: left; color: var(--text); }
.es-item img { width: 26px; height: 26px; object-fit: contain; }
.es-uni { font-size: 22px; width: 26px; text-align: center; }
.es-item b { font-weight: 600; font-size: .9em; }
.es-item small { margin-left: auto; color: var(--text-3); font-size: .75em; }
.es-item.on, .es-item:hover { background: var(--bg-4); }
.emoji-pop { position: fixed; z-index: 1150; /* über Fenstern (.modal-back 800) und Menüs, z. B. Rollen-Emoji */ width: min(420px, calc(100vw - 16px)); height: min(460px, calc(100vh - 120px)); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 18px 60px rgba(0, 0, 0, .55); display: flex; flex-direction: column; overflow: hidden; }
.ep-top { padding: 10px; border-bottom: 1px solid var(--line); }
.ep-search { width: 100%; margin: 0 !important; }
.ep-body { flex: 1; min-height: 0; display: flex; }
.ep-nav { width: 46px; flex: none; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 8px 5px; border-right: 1px solid var(--line); background: var(--bg-1); }
.ep-nav button { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--text-3); flex: none; }
.ep-nav button.on, .ep-nav button:hover { background: var(--bg-3); color: var(--text); }
.ep-nav .i { width: 18px; height: 18px; }
.ep-srv { width: 26px; height: 26px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--bg-4); font-size: 10px; font-weight: 700; }
.ep-srv img { width: 100%; height: 100%; object-fit: cover; }
.ep-uni-ic { font-size: 18px; filter: grayscale(.4); }
.ep-nav button.on .ep-uni-ic { filter: none; }
.ep-list { flex: 1; min-width: 0; overflow-y: auto; padding: 6px 10px 12px; }
.ep-sec { margin-bottom: 8px; }
.ep-h { position: sticky; top: -6px; background: var(--bg-2); z-index: 1; padding: 8px 2px 6px; font-size: .72em; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.ep-h img { width: 16px; height: 16px; border-radius: 5px; object-fit: cover; }
.ep-h small { margin-left: auto; font-weight: 600; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px; }
.ep-e { aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; padding: 5px; }
.ep-e:hover { background: var(--bg-4); }
.ep-e img { width: 100%; height: 100%; object-fit: contain; }
.ep-e.uni { font-size: 24px; line-height: 1; }
.ep-more { font-size: .78em; color: var(--text-3); margin: 6px 2px; }
.ep-foot { padding: 8px 12px; border-top: 1px solid var(--line); font-size: .76em; color: var(--text-3); }
/* Emoji-Verwaltung */
.emo-meter { margin: 0 0 14px; }
.emo-drop { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; border-radius: 14px; border: 2px dashed var(--line-2); color: var(--text-3); cursor: pointer; margin-bottom: 14px; font-size: .9em; }
.emo-drop:hover, .emo-drop.over { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.emo-uploads { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-height: 220px; overflow-y: auto; }
.emo-up { display: grid; grid-template-columns: minmax(0, 1fr) 2fr 90px; gap: 10px; align-items: center; font-size: .85em; padding: 6px 10px; border-radius: 10px; background: var(--bg-1); }
.emo-up .meter { margin: 0; }
.emo-up small { color: var(--text-3); text-align: right; }
.emo-up.ok small { color: var(--ok); }
.emo-up.bad small { color: var(--danger); }
.emo-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.emo-tools .search { flex: 1; min-width: 180px; margin: 0 !important; }
.emo-tools .seg { margin: 0; }
.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.emo-card { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); }
.emo-img { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.emo-img img { width: 100%; height: 100%; object-fit: contain; }
.emo-gif { position: absolute; right: -4px; bottom: -4px; font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 4px; background: var(--accent); color: #06231a; }
.emo-name { flex: 1; min-width: 0; padding: 6px 8px !important; font-size: .82em !important; background: transparent !important; border-color: transparent !important; }
.emo-name:focus, .emo-name:hover { background: var(--bg-0) !important; border-color: var(--line-2) !important; }
.emo-card .icon-btn { width: 28px; height: 28px; opacity: .5; }
.emo-card:hover .icon-btn { opacity: 1; }
/* Benutzerlimit */
.ul-edit { display: flex; flex-direction: column; gap: 10px; }
.ul-edit .field-label b { color: var(--accent); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.ul-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ul-chips .chip { cursor: pointer; border: 1px solid transparent; padding: 6px 11px; font-size: .82em; }
.ul-chips .chip.on { background: rgba(var(--accent-rgb), .16); color: var(--accent); border-color: rgba(var(--accent-rgb), .35); }
.ul-custom { max-width: 260px; }
/* ---------------------------------------------------------------- 1.6: Lautstärke, Pause, Status, Gruppen */
.vol-item { padding: 8px 10px 6px; min-width: 220px; }
.vol-top { display: flex; align-items: center; gap: 8px; font-size: .88em; font-weight: 600; margin-bottom: 6px; }
.vol-top .i { width: 16px; height: 16px; color: var(--text-2); }
.vol-top b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--accent); min-width: 48px; text-align: right; }
.vol-top b.boost { color: var(--warn); }
.vol-top b.off { color: var(--danger); }
.vol-item input[type=range] { width: 100%; margin: 0; accent-color: var(--accent); }
.vol-marks { display: flex; justify-content: space-between; margin-top: 4px; }
.vol-marks button { font-size: .72em; color: var(--text-3); padding: 2px 6px; border-radius: 6px; }
.vol-marks button:hover { background: var(--bg-4); color: var(--text); }
.vc-vol { font-style: normal; font-size: .7em; font-weight: 700; color: var(--warn); background: rgba(255, 181, 71, .12); padding: 1px 5px; border-radius: 6px; }
.pause-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); margin-bottom: 12px; }
.pause-card .pc-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-3); color: var(--text-2); flex: none; }
.pause-card small { display: block; color: var(--text-2); margin-top: 2px; }
.pause-card.on { border-color: rgba(255, 93, 108, .45); background: linear-gradient(120deg, rgba(255, 93, 108, .14), rgba(255, 93, 108, .03)), var(--bg-1); }
.pause-card.on .pc-ic { background: rgba(255, 93, 108, .18); color: var(--danger); }
.pause-card.on b { color: var(--danger); letter-spacing: .04em; }
.pause-card.slim { padding: 10px 12px; }
.pause-card.slim .pc-ic { width: 32px; height: 32px; }
.ic-paused { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 93, 108, .14); color: var(--danger); font-weight: 800; font-size: .78em; letter-spacing: .05em; display: flex; align-items: center; gap: 6px; }
.ic-paused .i { width: 14px; height: 14px; }
.invite-preview .ic-paused { margin: 0 12px 12px; }
.invite-cta.paused em { margin-left: auto; font-style: normal; font-size: .72em; font-weight: 800; color: var(--danger); background: rgba(255, 93, 108, .14); padding: 2px 7px; border-radius: 99px; }
/* Freunde: Status */
.fr-status { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.fr-status .chip { cursor: pointer; border: 1px solid transparent; padding: 6px 12px; font-size: .8em; }
.fr-status .chip b { color: var(--text-3); font-weight: 700; }
.fr-status .chip.on { background: rgba(var(--accent-rgb), .16); color: var(--accent); border-color: rgba(var(--accent-rgb), .35); }
.st-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); flex: none; }
.st-dot.s-online { background: var(--online); }
.st-dot.s-idle { background: var(--warn); }
.st-dot.s-dnd { background: var(--danger); }
.st-dot.s-offline { background: #6b7280; }
.st-pill { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.st-pill.s-online { color: var(--online); }
.st-pill.s-idle { color: var(--warn); }
.st-pill.s-dnd { color: var(--danger); }
.st-pill.s-offline { color: var(--text-3); }
/* Gruppen */
.sec-btns { display: inline-flex; gap: 2px; }
.group-av { display: grid; place-items: center; overflow: hidden; background: hsl(var(--h, 160) 45% 32%); }
.group-av img { width: 100%; height: 100%; object-fit: cover; }
.group-av .i { width: 55%; height: 55%; color: #fff; }
.group-stack { position: relative; width: var(--s); height: var(--s); flex: none; }
.group-stack > .avatar { position: absolute; }
.group-stack > .avatar:first-child { left: 0; top: 0; }
.group-stack > .avatar:last-child { right: 0; bottom: 0; box-shadow: 0 0 0 2px var(--bg-2); }
.dm.group .dm-name { display: flex; flex-direction: column; line-height: 1.2; }
.dm.group .dm-name small { color: var(--text-3); font-size: .74em; font-weight: 500; }
.rail-dm .group-av, .rail-dm .group-stack { border-radius: 50%; }
.mem-kick { margin-left: auto; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); opacity: 0; }
.mem:hover .mem-kick { opacity: 1; }
.mem-kick:hover { background: rgba(255, 93, 108, .15); color: var(--danger); }
.mem-kick .i { width: 14px; height: 14px; }
.group-pick .gp-list { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 6px 0 10px; }
.gp-row { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; cursor: pointer; margin: 0 !important; }
.gp-row:hover { background: var(--bg-3); }
.gp-row.on { background: rgba(var(--accent-rgb), .1); }
.gp-row input { accent-color: var(--accent); width: 17px; height: 17px; margin: 0; }
.gp-row span b { display: block; }
.gp-row span small { color: var(--text-3); }
.gp-count { font-size: .82em; color: var(--text-2); }
.gs-top { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.gs-icon { cursor: pointer; flex: none; }
.gs-icon:hover { opacity: .85; }
.msg.sys.undelivered { background: rgba(255, 93, 108, .07); border-left: 3px solid var(--danger); border-radius: 0 10px 10px 0; }
.msg.sys.undelivered .sys-ic { color: var(--danger); }
/* ---------------------------------------------------------------- Kontostatus */
#suspended-screen { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(5, 7, 10, .92); backdrop-filter: blur(8px); padding: 16px; }
.susp-card { max-width: 460px; text-align: center; background: var(--bg-2); border: 1px solid rgba(255, 93, 108, .4); border-radius: 20px; padding: 30px 28px; display: grid; justify-items: center; gap: 10px; }
.susp-card > .i { width: 56px; height: 56px; color: var(--danger); }
.susp-card h2 { margin: 0; }
.susp-card p { color: var(--text-2); margin: 0 0 8px; line-height: 1.5; }
.acc-banner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); max-width: min(760px, calc(100vw - 24px)); font-size: .88em; }
.acc-banner > .i { width: 20px; height: 20px; flex: none; }
.acc-banner span { flex: 1; min-width: 0; }
.acc-banner small { color: var(--text-3); }
.acc-banner.warned { border-color: rgba(255, 181, 71, .5); } .acc-banner.warned > .i { color: var(--warn); }
.acc-banner.limited { border-color: rgba(255, 93, 108, .5); } .acc-banner.limited > .i { color: var(--danger); }
.acc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .78em; font-weight: 700; padding: 4px 9px; border-radius: 99px; white-space: nowrap; background: rgba(46, 230, 168, .12); color: var(--ok); }
.acc-pill .i { width: 13px; height: 13px; }
.acc-pill small { font-weight: 500; opacity: .8; }
.acc-pill.warned { background: rgba(255, 181, 71, .14); color: var(--warn); }
.acc-pill.limited { background: rgba(255, 93, 108, .14); color: var(--danger); }
.acc-pill.suspended { background: var(--danger); color: #fff; }
.standing { display: flex; gap: 16px; padding: 18px; border-radius: 16px; background: var(--bg-1); border: 1px solid rgba(46, 230, 168, .35); }
.standing .st-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(46, 230, 168, .12); color: var(--ok); flex: none; }
.standing .st-ic .i { width: 30px; height: 30px; }
.standing b { font-size: 1.2em; }
.standing p { margin: 4px 0 0; color: var(--text-2); line-height: 1.5; }
.standing.warned { border-color: rgba(255, 181, 71, .45); } .standing.warned .st-ic { background: rgba(255, 181, 71, .14); color: var(--warn); }
.standing.limited, .standing.suspended { border-color: rgba(255, 93, 108, .45); } .standing.limited .st-ic, .standing.suspended .st-ic { background: rgba(255, 93, 108, .14); color: var(--danger); }
.st-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.st-meta small { display: block; color: var(--text-3); font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.st-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 16px 0 4px; }
.st-step { display: flex; flex-direction: column; gap: 6px; font-size: .78em; color: var(--text-3); }
.st-step i { height: 6px; border-radius: 6px; background: var(--bg-3); }
.st-step.on.ok i { background: var(--ok); } .st-step.on.warned i { background: var(--warn); } .st-step.on.limited i, .st-step.on.suspended i { background: var(--danger); }
.st-step.cur span { color: var(--text); font-weight: 700; }
.acc-hist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ah-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--bg-1); }
.ah-row small { display: block; color: var(--text-3); margin-top: 3px; }
.acc-admin .aa-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.acc-admin .aa-top .search { flex: 1; min-width: 200px; margin: 0 !important; }
.acc-admin .aa-top .seg { margin: 0; }
.aa-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.aa-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-1); flex-wrap: wrap; }
.aa-name { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.aa-name small { color: var(--text-3); font-size: .78em; }
.acc-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.acc-opt2 { cursor: pointer; margin: 0 !important; }
.acc-opt2 input { position: absolute; opacity: 0; }
.acc-opt2 span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg-1); }
.acc-opt2 input:checked + span { border-color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.acc-opt2.warned input:checked + span { border-color: var(--warn); background: rgba(255, 181, 71, .1); }
.acc-opt2.limited input:checked + span, .acc-opt2.suspended input:checked + span { border-color: var(--danger); background: rgba(255, 93, 108, .1); }
.modal.acc-admin { width: min(980px, 100%); }

/* ---------------------------------------------------------------- E-Mail schützen */
.em-warn { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255, 181, 71, .1); color: var(--text); font-size: .9em; line-height: 1.45; }
.em-warn > .i { color: var(--warn); flex: none; margin-top: 2px; }
.em-step { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.em-step-h { display: flex; gap: 12px; align-items: flex-start; }
.em-step-h small { display: block; color: var(--text-2); margin-top: 2px; line-height: 1.45; }
.em-n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #06231a; font-weight: 800; display: grid; place-items: center; flex: none; font-size: .85em; }
.em-form { flex-wrap: wrap; }
.em-form input { flex: 1; min-width: 180px; }
#em-code { letter-spacing: .35em; font-size: 1.2em; font-weight: 700; text-align: center; max-width: 200px; }
/* ---------------------------------------------------------------- Meldungen & Team-Rechte */
.rp-quote { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-1); border-left: 3px solid var(--danger); margin-bottom: 10px; }
.rp-quote p { margin: 3px 0 0; color: var(--text-2); word-break: break-word; }
.rp-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.rp-cat { cursor: pointer; margin: 0 !important; }
.rp-cat input { position: absolute; opacity: 0; }
.rp-cat span { display: block; padding: 9px 11px; border-radius: 10px; background: var(--bg-1); border: 1.5px solid var(--line); font-size: .88em; font-weight: 600; }
.rp-cat input:checked + span { border-color: var(--danger); background: rgba(255, 93, 108, .1); }
.rp-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; max-height: 64vh; overflow-y: auto; }
.rp-card { padding: 14px 16px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-head .i { width: 13px; height: 13px; vertical-align: -2px; }
.rp-badge { font-size: .76em; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: rgba(255, 93, 108, .14); color: var(--danger); }
.rp-people { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .88em; align-items: center; }
.rp-people .avatar { display: inline-grid; vertical-align: middle; }
.rp-note { font-size: .9em; color: var(--text-2); font-style: italic; }
.rp-snap { border-radius: 10px; background: var(--bg-2); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.rp-msg { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: .9em; opacity: .7; }
.rp-msg time { color: var(--text-3); font-size: .78em; justify-self: end; }
.rp-msg > div { grid-column: 1 / -1; word-break: break-word; }
.rp-msg.hit { opacity: 1; background: rgba(255, 93, 108, .1); box-shadow: inset 3px 0 0 var(--danger); }
.rp-act { flex-wrap: wrap; }
.stf-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.stf-add input { flex: 1; min-width: 160px; }
.stf-list { display: flex; flex-direction: column; gap: 12px; max-height: 62vh; overflow-y: auto; }
.stf-card { padding: 14px 16px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.stf-card.owner { border-color: rgba(255, 181, 71, .4); }
.stf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stf-head small { display: block; color: var(--text-3); }
.stf-title-in { width: 150px; }
.stf-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.stf-perm { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); border: 1.5px solid var(--line); cursor: pointer; margin: 0 !important; font-size: .86em; font-weight: 600; }
.stf-perm input { accent-color: var(--accent); margin: 0; }
.stf-perm .i { width: 15px; height: 15px; color: var(--text-3); }
.stf-perm.on { border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .08); }
.stf-perm.on .i { color: var(--accent); }
.stf-perm.locked { cursor: default; opacity: .75; }
.acc-opt2.disabled { opacity: .4; cursor: not-allowed; }
.rail-btn.admin-btn { position: relative; }
.stf-head .stf-title-in { width: 170px !important; flex: none; }

/* ---------------------------------------------------------------- Themes: Hell + eigene Verläufe */
body.theme-light {
  --bg-0: #e9edf2; --bg-1: #ffffff; --bg-2: #f6f7f9; --bg-3: #eef1f4; --bg-4: #e2e6ec; --bg-5: #d4dae2;
  --line: rgba(15, 23, 42, .08); --line-2: rgba(15, 23, 42, .14);
  --text: #121821; --text-2: #465061; --text-3: #6b7485;
  --offline: #9aa3b0; --shadow: 0 18px 50px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .08);
  color-scheme: light;
}
body.theme-light .modal-back { background: rgba(15, 23, 42, .35); }
body.theme-light input, body.theme-light textarea, body.theme-light select { background: #fff; border-color: var(--line-2); }
body.theme-light .msg:hover { background: rgba(15, 23, 42, .035); }
body.theme-light .has-chat-bg > .main-head, body.theme-light .has-chat-bg .composer { background: rgba(255, 255, 255, .75); }
body.theme-custom { background: var(--tg) fixed, #07090d; }
body.theme-custom:not(.theme-custom-light) {
  --bg-0: rgba(4, 6, 10, calc(var(--tg-alpha) * .55)); --bg-1: rgba(10, 13, 19, var(--tg-alpha)); --bg-2: rgba(14, 18, 25, var(--tg-alpha));
  --bg-3: rgba(28, 34, 44, calc(var(--tg-alpha) + .08)); --bg-4: rgba(40, 48, 60, calc(var(--tg-alpha) + .1)); --bg-5: rgba(52, 61, 75, .9);
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
}
body.theme-custom-light { background: var(--tg) fixed, #fff;
  --bg-0: rgba(255, 255, 255, calc(var(--tg-alpha) * .45)); --bg-1: rgba(255, 255, 255, var(--tg-alpha)); --bg-2: rgba(250, 251, 253, var(--tg-alpha));
  --bg-3: rgba(240, 243, 247, calc(var(--tg-alpha) + .1)); --bg-4: rgba(228, 232, 238, calc(var(--tg-alpha) + .12));
}
body.theme-custom .side, body.theme-custom .main, body.theme-custom .members, body.theme-custom .rail, body.theme-custom .modal { backdrop-filter: blur(18px) saturate(1.2); }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.theme-tile { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg-1); font-size: .82em; font-weight: 600; }
.theme-tile.on { border-color: var(--accent); }
.tt-prev { display: flex; gap: 4px; padding: 8px; height: 58px; border-radius: 10px; }
.tt-prev.dark { background: #0e1218; } .tt-prev.light { background: #e9edf2; }
.tt-prev b { flex: 1; border-radius: 6px; background: rgba(255, 255, 255, .12); }
.tt-prev.light b { background: #fff; }
.tt-prev b:first-child { flex: .45; }
.theme-mixer { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); margin-bottom: 16px; }
.theme-mixer.collapsed { display: none; }
.tm-colors { display: flex; gap: 8px; align-items: center; }
.tm-c { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line-2); cursor: pointer; position: relative; overflow: hidden; margin: 0 !important; }
.tm-c input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tm-add { width: 44px; height: 44px; border-radius: 12px; border: 2px dashed var(--line-2); display: grid; place-items: center; color: var(--text-2); }
.tm-prev { height: 110px; border-radius: 14px; display: grid; place-items: center; }
.tm-card { width: 60%; height: 64px; border-radius: 12px; background: rgba(10, 13, 19, .6); backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 14px; }
.tm-card b { height: 8px; width: 40%; border-radius: 4px; background: var(--accent); }
.tm-card span { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.tm-card span:last-child { width: 70%; }

/* ---------------------------------------------------------------- Profil, Status, Aktivität */
.pp-banner.img, .fp-banner, .pb-prev { background-size: cover; background-position: center; }
.pp-status, .fp-status { font-size: .9em; padding: 8px 10px; border-radius: 10px; background: var(--bg-3); margin: 8px 0; word-break: break-word; }
.sub-act { color: var(--ok) !important; }
.sub-act .i { width: 12px; height: 12px; vertical-align: -1px; }
.sub-act.music { color: #1db954 !important; }
.act-card { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg-3); margin: 8px 0; }
.act-card small { display: block; color: var(--text-3); font-size: .75em; }
.act-card b { display: block; }
.act-card.music .act-ic { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; background: #1db954; color: #fff; }
.game-ic { width: var(--s); height: var(--s); border-radius: calc(var(--s) * .22); display: inline-grid; place-items: center; background: var(--gc, #475569); color: #fff; font-weight: 800; font-size: calc(var(--s) * .34); flex: none; overflow: hidden; }
.game-ic.img { background: #000; }
.game-ic.img img { width: 100%; height: 100%; object-fit: cover; }
.modal.full-profile { width: min(640px, 100%); padding: 0; overflow: hidden; }
.modal.full-profile .modal-head { position: absolute; right: 8px; top: 8px; z-index: 2; background: transparent; border: 0; }
.modal.full-profile .modal-head h2 { display: none; }
.fp-banner { height: 170px; background: linear-gradient(120deg, hsl(var(--h, 160) 55% 35%), hsl(calc(var(--h, 160) + 50) 60% 22%)); }
.fp-top { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 22px; margin-top: -56px; }
.fp-av .avatar { box-shadow: 0 0 0 6px var(--bg-2); }
.fp-actions { display: flex; gap: 8px; padding-bottom: 6px; }
.fp-main { padding: 12px 22px 22px; max-height: 60vh; overflow-y: auto; }
.fp-main h2 { margin: 0; }
.fp-user { color: var(--text-2); font-size: .9em; }
.fp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0 12px; overflow-x: auto; }
.fp-tabs button { padding: 8px 12px; font-weight: 600; font-size: .88em; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.fp-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.fp-sec h4 { margin: 12px 0 6px; font-size: .75em; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.fp-sec p { margin: 0; white-space: pre-wrap; }
.fp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 10px 0; }
.fp-facts > div { padding: 10px 12px; border-radius: 12px; background: var(--bg-1); }
.fp-facts small { display: block; color: var(--text-3); font-size: .74em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.fp-facts b { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .92em; }
.fp-facts .i { width: 14px; height: 14px; color: var(--accent); }
.fav-game { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: linear-gradient(120deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .02)), var(--bg-1); }
.fav-game small { display: flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 700; }
.fav-game small .i { width: 13px; height: 13px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.game-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); font-weight: 600; font-size: .9em; }
.game-card span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-card.fav { border-color: rgba(255, 181, 71, .5); }
.game-card > i .i { width: 15px; height: 15px; color: var(--warn); }
.game-card .icon-btn.on { color: var(--warn); }
.game-grid.edit .game-card .icon-btn { width: 26px; height: 26px; }
.g-add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.g-add input { flex: 1; min-width: 200px; }
.g-res { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 4px; border-radius: 12px; background: var(--bg-1); max-width: 420px; }
.g-opt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; text-align: left; }
.g-opt:hover { background: var(--bg-3); }
.conn-list { display: flex; flex-direction: column; gap: 8px; }
.conn { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-1); color: var(--text); border: 1px solid var(--line); }
.conn.link:hover { border-color: var(--accent); }
.conn small { display: block; color: var(--text-3); font-size: .74em; }
.conn b { word-break: break-all; }
.conn > .i { color: var(--text-3); }
.conn-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .72em; flex: none; }
.conn-edit { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.conn-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--bg-1); }
.conn-add { display: flex; gap: 8px; flex-wrap: wrap; }
.conn-add select { width: auto; min-width: 150px; }
.conn-add input { flex: 1; min-width: 200px; }
.mut-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.mut { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--bg-1); text-align: left; font-weight: 600; }
.mut:hover { background: var(--bg-3); }
.mut-srv { width: 32px; height: 32px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--bg-4); font-size: .7em; }
.mut-srv img { width: 100%; height: 100%; object-fit: cover; }
.pb-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pb-prev { aspect-ratio: 3 / 1; height: auto; border-radius: 14px; background-color: var(--bg-3); }
.pb-spec { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); font-size: .85em; color: var(--text-2); margin-bottom: 10px; line-height: 1.45; }
.pb-spec > .i { flex: none; color: var(--accent); margin-top: 2px; }
.pb-spec b { color: var(--text); }
.fp-banner { height: auto !important; aspect-ratio: 3 / 1; }
.pp-banner.img { height: auto; aspect-ratio: 3 / 1; }
.menu-user-head { display: flex; flex-direction: column; padding: 8px 10px 6px; line-height: 1.25; }
.menu-user-head b { font-size: .95em; font-weight: 750; color: var(--text); text-transform: none; word-break: break-word; }
.menu-user-head span { font-size: .78em; color: var(--text-3); }
.pb-ctrl { display: flex; flex-direction: column; gap: 10px; }
.pb-colors { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cs-row { display: flex; gap: 8px; }
.cs-emoji { width: 64px !important; text-align: center; font-size: 1.3em; }
.cs-durs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.cs-dur { cursor: pointer; margin: 0 !important; }
.cs-dur input { position: absolute; opacity: 0; }
.cs-dur span { display: flex; flex-direction: column; padding: 9px 11px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg-1); }
.cs-dur small { color: var(--text-3); font-size: .78em; }
.cs-dur input:checked + span { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
@media (max-width: 700px) { .pb-edit { grid-template-columns: 1fr; } .fp-top { flex-direction: column; align-items: flex-start; gap: 8px; } }
/* ---------------------------------------------------------------- GIFs */
.composer .gif-btn b { font-size: .68em; font-weight: 900; letter-spacing: .02em; border: 1.8px solid currentColor; border-radius: 5px; padding: 1px 4px; }
.composer .gif-btn { color: var(--text-2); }
.composer .gif-btn:hover:not(:disabled) { color: var(--accent); }
.gif-pop { width: min(460px, calc(100vw - 16px)); }
.gif-top { display: flex; flex-direction: column; gap: 8px; }
.gif-top .seg { margin: 0; align-self: flex-start; }
.gif-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.gif-grid { columns: 2; column-gap: 6px; }
.gif-it { position: relative; display: block; width: 100%; margin-bottom: 6px; border-radius: 10px; overflow: hidden; background: var(--bg-3); break-inside: avoid; }
.gif-it img { width: 100%; display: block; }
.gif-it:hover { outline: 2px solid var(--accent); }
.gif-star { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; opacity: 0; transition: opacity .12s; cursor: pointer; }
.gif-star .i { width: 15px; height: 15px; }
.gif-star.on { color: var(--warn); }
.att-img:hover .gif-star, .gif-it:hover .gif-star, .gif-star.on { opacity: 1; }
.att-img { position: relative; }
.gif-foot { display: flex; align-items: center; gap: 8px; }
.gif-foot label.btn { margin: 0 !important; display: inline-flex; flex-direction: row !important; align-items: center; gap: 6px; cursor: pointer; }
.modal.full-profile { position: relative; }
.sub-act .act-n { font-weight: 700; }
.game-grid.edit { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.fp-hint{display:flex;gap:8px;align-items:center;background:var(--bg-3,rgba(255,255,255,.05));border-radius:8px;padding:8px 10px;font-size:13px;margin:0 0 10px}


/* Verknüpfungen: Logos, Profilbilder, Hilfe */
.conn-ic { position: relative; overflow: visible; }
.conn-ic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; background: #fff; padding: 5px; box-sizing: border-box; }
.conn-ic.has-av > img { object-fit: cover; padding: 0; background: var(--bg-3); }
.conn-ic .conn-mini { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 2px var(--bg-1); overflow: hidden; }
.conn-ic .conn-mini img { width: 100%; height: 100%; object-fit: contain; padding: 2px; box-sizing: border-box; }
.conn-help { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); font-size: .88em; }
.conn-help:empty { display: none; }
/* Sprachauswahl */
.lang-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.lang-pick button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2, var(--line)); background: var(--bg-1); color: var(--text); cursor: pointer; font: inherit; }
.lang-pick .lang-code { font-size: .72em; font-weight: 800; letter-spacing: .04em; padding: 3px 5px; border-radius: 5px; background: var(--bg-3, var(--bg-2)); color: var(--text-2, var(--text)); line-height: 1; }
.lang-pick button.on .lang-code { background: var(--accent); color: #06110c; }
.lang-pick button:hover { border-color: var(--accent); }
.lang-pick button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-1)); }
.lang-pick.compact { justify-content: flex-end; gap: 4px; margin: 0 0 6px; }
.lang-pick.compact button { padding: 4px 7px; border-radius: 8px; }
.auth-lang { display: flex; justify-content: flex-end; }
/* Rollen-Emoji (neben dem Namen, wie das Rollen-Symbol bei Discord) */
.role-emo { display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; margin-left: 4px; vertical-align: -0.18em; font-size: 1em; line-height: 1; flex: none; object-fit: contain; font-style: normal; }
img.role-emo { border-radius: 3px; }
.role-list .role-emo { margin: 0 2px 0 0; }
.mem-group .role-emo { margin: 0 4px 0 0; font-size: 1.1em; }
.role-emo-edit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.role-emo-pick { width: 48px; height: 48px; border-radius: 12px; border: 2px dashed var(--line-2, var(--line)); background: var(--bg-1); display: grid; place-items: center; font-size: 26px; cursor: pointer; color: var(--text-3); }
.role-emo-pick:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.role-emo-pick .role-emo { width: 30px; height: 30px; margin: 0; font-size: 26px; }
.role-emo-pick svg { width: 22px; height: 22px; }
.role-emo-prev { display: flex; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--bg-1); }
.role-emo-prev small { margin-left: 10px; }
/* Steam verknüpfen */
.conn-row-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.conn-row-txt small { font-size: .78em; }
.conn-ok { display: inline-grid; place-items: center; color: var(--ok); flex: none; }
.conn-ok svg { width: 18px; height: 18px; }
.steam-link { margin-top: 10px; padding: 14px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.steam-link > p { margin: 0; }
.steam-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2, var(--line)); padding: 8px 16px 8px 8px; text-decoration: none; font-weight: 700; }
.steam-btn:hover { border-color: var(--accent); color: var(--text); }
.steam-btn.off { opacity: .55; cursor: not-allowed; }
.steam-btn.off:hover { border-color: var(--line-2, var(--line)); }
.steam-btn .conn-ic { width: 28px; height: 28px; }
.st-or { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: .82em; }
.st-or::before, .st-or::after { content: ''; flex: 1; height: 1px; background: var(--line-2, var(--line)); }
.steam-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid #66c0f433; }
.steam-card .grow { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.steam-card b { font-size: 1.08em; }
.st-av { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: none; display: grid; place-items: center; background: #1b2838; }
.st-av img { width: 100%; height: 100%; object-fit: cover; }
.st-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.st-err { margin: 0; color: var(--danger); font-size: .88em; }
#st-res:empty { display: none; }
.conn-help p { margin: 4px 0 8px; color: var(--text-2); line-height: 1.45; }
.conn-help b { color: var(--text); }

/* Profil-Seitenleiste in Direktnachrichten */
.app.dm-profile { grid-template-columns: 76px 264px minmax(0, 1fr) 320px; }
.members .dmp { height: 100%; overflow-y: auto; position: relative; }
.dmp-banner { aspect-ratio: 3 / 1; background: linear-gradient(120deg, hsl(var(--h, 160) 55% 35%), hsl(calc(var(--h, 160) + 50) 60% 22%)); background-size: cover; background-position: center; }
.dmp-av { margin: -46px 0 0 16px; width: max-content; cursor: pointer; position: relative; z-index: 1; }
.dmp-av .avatar { box-shadow: 0 0 0 6px var(--bg-1); }
.dmp-body { padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.dmp-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.dmp-card h3 { margin: 0; font-size: 1.2em; word-break: break-word; }
.dmp-card h4 { margin: 10px 0 4px; font-size: .7em; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.dmp-card h4:first-child { margin-top: 0; }
.dmp-card p { margin: 0; font-size: .9em; }
.dmp-card .act-card { margin: 0; background: transparent; padding: 0; }
.dmp-about { white-space: pre-wrap; word-break: break-word; }
.dmp-user { color: var(--text-2); font-size: .88em; }
.dmp-state { font-size: .8em; color: var(--text-3); margin-top: 4px; }
.dmp-fav { display: flex; align-items: center; gap: 10px; }
.dmp-games { display: flex; flex-wrap: wrap; gap: 6px; }
.dmp-conns { display: flex; flex-direction: column; gap: 6px; }
.dmp-conns .conn { padding: 7px 9px; gap: 10px; }
.dmp-conns .conn-ic { width: 28px; height: 28px; border-radius: 8px; }
.dmp-mut { padding: 4px; display: flex; flex-direction: column; }
.dmp-mut button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-weight: 600; font-size: .9em; text-align: left; }
.dmp-mut button:hover { background: var(--bg-3); }
.dmp-mut b { color: var(--text-3); }
.dmp-full { width: 100%; justify-content: center; }
@media (max-width: 1100px) { .app.dm-profile { grid-template-columns: 76px 240px minmax(0, 1fr) 0; } }

/* Aktivität: Spotify mit Cover + Fortschritt, Spielmodus, eigene Spiele, Spielzeit */
.act-card .grow { min-width: 0; }
.act-card .truncate { display: block; }
.act-cover { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.act-src { display: flex !important; align-items: center; gap: 4px; color: #1db954 !important; font-weight: 700; }
.act-src .i { width: 12px; height: 12px; }
.act-prog { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; margin-top: 7px; }
.theme-light .act-prog, .theme-custom-light .act-prog { background: rgba(0, 0, 0, .12); }
.act-prog > i { display: block; height: 100%; background: #1db954; border-radius: 4px; transition: width 1s linear; }
.act-prog.paused > i { background: var(--text-3); }
.act-time { display: flex; justify-content: space-between; font-size: .7em; color: var(--text-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.act-time .i { width: 10px; height: 10px; vertical-align: -1px; }
.act-mode { color: var(--accent) !important; font-weight: 700; }
.cg-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cg-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); }
.cg-row .grow { display: flex; flex-direction: column; min-width: 0; }
.cg-name { padding: 4px 8px !important; font-weight: 600; background: transparent !important; border-color: transparent !important; }
.cg-name:hover, .cg-name:focus { border-color: var(--line-2) !important; background: var(--bg-2) !important; }
.cg-row small { padding-left: 8px; font-size: .75em; }
.pt-list { display: flex; flex-direction: column; gap: 8px; }
.pt-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--bg-1); }
.pt-row .grow { min-width: 0; }
.pt-top { display: flex; justify-content: space-between; gap: 8px; font-size: .9em; }
.pt-top span { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-bar { height: 5px; border-radius: 5px; background: var(--bg-3); margin: 5px 0 3px; overflow: hidden; }
.pt-bar > i { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.pt-row small { font-size: .72em; }
.fp-h4 { margin: 14px 0 6px; font-size: .75em; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }

/* GIF-Bibliothek */
.gif-cats { display: flex; gap: 4px; overflow-x: auto; padding: 6px 0 2px; scrollbar-width: thin; }
.gif-cats button { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--bg-3); color: var(--text-2); font-size: .78em; font-weight: 600; white-space: nowrap; }
.gif-cats button.on { background: var(--accent); color: #06231a; }
.gif-grid.lib { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.gif-grid.lib .gif-it { margin: 0; aspect-ratio: 1; padding: 6px; background: var(--bg-1); }
.gif-grid.lib .gif-it img { width: 100%; height: 100%; object-fit: contain; }
.gif-grid.lib .gif-star { width: 22px; height: 22px; top: 3px; right: 3px; border-radius: 6px; }
.gif-grid.lib .gif-star .i { width: 12px; height: 12px; }
.gif-del { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: rgba(160, 20, 30, .8); color: #fff; opacity: 0; cursor: pointer; }
.gif-del .i { width: 12px; height: 12px; }
.gif-it:hover .gif-del { opacity: 1; }
.gif-credit { font-size: .68em; }

/* ================= v1.9: Liste mit Cover, Klingeltöne, Reaktionen, Freunde, Team, Einstellungen, Konto */
.sub-img { width: 14px; height: 14px; border-radius: 3px; object-fit: cover; vertical-align: -2px; margin-right: 2px; }
.ring-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin-bottom: 12px; }
.ring-opt { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--bg-1); border: 1.5px solid var(--line); cursor: pointer; margin: 0 !important; }
.ring-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ring-opt span { flex: 1; font-weight: 600; font-size: .9em; }
.ring-opt.on { border-color: var(--accent); background: linear-gradient(120deg, rgba(var(--accent-rgb), .14), transparent), var(--bg-1); }
.call-toast.video .call-av .ring { border-color: #60a5fa; }
.call-toast span .i { width: 14px; height: 14px; vertical-align: -2px; }

/* Nachrichten-Werkzeuge + Reaktionen */
.msg-tools { gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.msg-tools button { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); transition: background .12s, color .12s, transform .12s; }
.msg-tools button:hover { background: var(--bg-4, rgba(255, 255, 255, .08)); color: var(--text); transform: translateY(-1px); }
.msg-tools button.danger:hover { background: rgba(255, 93, 108, .16); color: var(--danger); }
.msg-tools .qr { font-size: 1.15em; }
.msg-tools .qr .rx-img { width: 20px; height: 20px; }
.mt-sep { width: 1px; align-self: stretch; margin: 5px 3px; background: var(--line-2); }
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.react { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border-radius: 9px; background: var(--bg-3); border: 1px solid transparent; font-size: .85em; color: var(--text-2); transition: border-color .12s, background .12s; }
.react:hover { border-color: var(--line-2); }
.react.on { background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .6); color: var(--text); }
.react b { font-weight: 700; font-variant-numeric: tabular-nums; }
.react .rx-uni { font-size: 1.15em; line-height: 1; }
.rx-img { width: 18px; height: 18px; object-fit: contain; display: block; }
.react.add { opacity: 0; color: var(--text-3); padding: 0 6px; gap: 1px; }
.react.add .i { width: 15px; height: 15px; }
.msg:hover .react.add { opacity: 1; }
.menu-reacts { display: flex; gap: 2px; padding: 4px 6px 6px; }
.menu-reacts button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2em; background: var(--bg-3); transition: transform .1s; }
.menu-reacts button:hover { transform: scale(1.15); background: var(--bg-4, rgba(255, 255, 255, .1)); }
.menu-reacts .rx-img { width: 22px; height: 22px; }

/* Live-Zähler „seit“ */
.live-since { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: .78em; color: var(--text-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.live-since .ls-sep { color: var(--text-3); }
.live-since .ls-t { color: var(--accent); font-weight: 600; }
.fp-facts > div.wide { grid-column: span 2; }
@media (max-width: 700px) { .fp-facts > div.wide { grid-column: auto; } }

/* Freunde */
.fr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 0; min-height: 100%; }
.fr-main { padding: 16px 20px; min-width: 0; }
.fr-aside { border-left: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.fr-aside h3 { margin: 0 0 4px; font-size: 1.05em; }
@media (max-width: 1180px) { .fr-layout { grid-template-columns: 1fr; } .fr-aside { display: none; } }
.fr-searchbar { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); margin-bottom: 10px; }
.fr-searchbar .i { color: var(--text-3); }
.fr-searchbar input { border: 0 !important; background: transparent !important; padding-left: 0 !important; margin: 0 !important; }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border-top: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.fr-row:hover { background: var(--bg-3); border-top-color: transparent; }
.fr-row:hover + .fr-row { border-top-color: transparent; }
.fr-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fr-top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-user { color: var(--text-3); font-size: .82em; opacity: 0; transition: opacity .12s; white-space: nowrap; }
.fr-row:hover .fr-user { opacity: 1; }
.fr-name small { color: var(--text-2); font-size: .82em; }
.fr-name small .i { width: 12px; height: 12px; vertical-align: -1px; }
.fr-since { font-size: .74em; color: var(--text-3); white-space: nowrap; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--bg-1); }
.fr-since .i { width: 12px; height: 12px; }
.fr-actions { display: flex; gap: 6px; }
.fr-btn { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--bg-1); color: var(--text-2); border: 1px solid var(--line); font-weight: 600; font-size: .85em; transition: background .12s, color .12s, transform .12s; }
.fr-btn.wide { border-radius: 999px; padding: 0 14px; }
.fr-btn:hover { color: var(--text); background: var(--bg-4, rgba(255, 255, 255, .08)); transform: translateY(-1px); }
.fr-btn.ok { color: var(--ok); } .fr-btn.ok:hover { background: rgba(46, 230, 168, .15); }
.fr-btn.danger:hover { color: var(--danger); background: rgba(255, 93, 108, .15); }
.fr-empty .btn { margin-top: 12px; }
.fa-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px 12px 0 0; background: var(--bg-1); text-align: left; width: 100%; }
.fa-card + .fa-card, .fa-act + .fa-card { margin-top: 6px; border-radius: 12px; }
.fa-act { background: var(--bg-1); border-radius: 0 0 12px 12px; padding: 0 10px 10px; margin-top: -8px; }
.fa-act .act-card { margin: 0; background: var(--bg-3); }
.fa-empty { text-align: center; padding: 22px 10px; color: var(--text-2); }
.fa-empty p { font-size: .85em; color: var(--text-3); }
.fr-add-hero { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: 16px; background: linear-gradient(120deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .02)), var(--bg-1); margin-bottom: 12px; }
.fr-add-hero > .i { width: 44px; height: 44px; color: var(--accent); flex: none; }
.fr-add-hero h2 { margin: 0 0 4px; }
.fr-add-hero p { margin: 0; }
.fr-sug-h { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 1em; }
.fr-sug { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.fr-sug-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); text-align: center; cursor: pointer; min-width: 0; }
.fr-sug-card b, .fr-sug-card small { max-width: 100%; }
.fr-sug-card small { color: var(--text-3); font-size: .75em; margin-bottom: 6px; }

/* Team & Rechte */
.stf-tabs { margin-bottom: 14px; }
.stf-tabs b { font-size: .8em; padding: 1px 7px; border-radius: 999px; background: var(--bg-3); margin-left: 4px; }
.stf-add.card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); margin-bottom: 14px; }
.stf-add-h { display: flex; align-items: center; gap: 6px; }
.stf-who-wrap { position: relative; }
.stf-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 12px; padding: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); max-height: 320px; overflow-y: auto; }
.stf-sg { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 9px; text-align: left; }
.stf-sg:hover { background: var(--bg-4, rgba(255, 255, 255, .08)); }
.stf-sg small { display: block; color: var(--text-3); font-size: .75em; }
.stf-sg.dis { opacity: .5; cursor: default; }
.stf-picked { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .5); }
.stf-picked small { display: block; color: var(--text-3); font-size: .78em; }
.stf-rolepick { display: flex; flex-wrap: wrap; gap: 6px; }
.stf-rp { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--bg-2); border: 1.5px solid var(--line); cursor: pointer; margin: 0 !important; font-weight: 600; font-size: .85em; }
.stf-rp input { position: absolute; opacity: 0; pointer-events: none; }
.stf-rp i, .stf-role i { width: 10px; height: 10px; border-radius: 50%; background: var(--rc); }
.stf-rp.on { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 18%, var(--bg-2)); }
.stf-role { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--rc) 16%, transparent); font-size: .75em; font-weight: 700; }
.stf-rolerow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; }
.stf-count { font-size: .72em; color: var(--text-3); margin-left: 4px; }
.stf-edit { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--line); }
.stf-perm.via-role { opacity: .75; border-style: dashed; }
.stf-more summary { cursor: pointer; color: var(--text-2); font-size: .88em; margin: 4px 0; }
.stf-rdot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.stf-roles { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.stf-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
[data-stf-open].on, [data-role-open].on { background: var(--bg-3); }

/* Servereinstellungen: Kategorien */
.set-nav-srv { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.set-nav-srv > div { min-width: 0; display: flex; flex-direction: column; }
.set-nav-srv small { color: var(--text-3); font-size: .75em; }
.set-nav button .grow { text-align: left; }
.req-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 12px 0; }
.req-tile { padding: 12px 14px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.req-tile.ok { border-color: rgba(46, 230, 168, .45); }
.rt-top { display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; }
.rt-top small { color: var(--text-2); font-size: .78em; font-weight: 600; }
.rt-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .7em; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg-3); color: var(--text-2); white-space: nowrap; }
.rt-badge .i { width: 11px; height: 11px; }
.req-tile.ok .rt-badge { background: rgba(46, 230, 168, .16); color: var(--ok); }
.rt-val { font-size: 1.5em; font-variant-numeric: tabular-nums; }
.rt-val span { font-size: .55em; color: var(--text-3); font-weight: 600; }
.rt-need { color: var(--text-3); font-size: .74em; }

/* Konto & Sicherheit */
.acc-hero { border-radius: 16px; overflow: hidden; background: var(--bg-1); border: 1px solid var(--line); margin-bottom: 12px; }
.ah-banner { aspect-ratio: 6 / 1; background: linear-gradient(120deg, hsl(var(--h, 160) 55% 35%), hsl(calc(var(--h, 160) + 50) 60% 22%)); background-size: cover; background-position: center; }
.ah-main { display: flex; align-items: flex-end; gap: 14px; padding: 0 16px 14px; margin-top: -30px; flex-wrap: wrap; }
.ah-main .avatar { box-shadow: 0 0 0 5px var(--bg-1); }
.ah-main .grow { min-width: 200px; padding-top: 34px; }
.ah-main b { font-size: 1.2em; display: block; }
.ah-main small { color: var(--text-2); }
.ah-since { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .82em; color: var(--text-2); margin-top: 4px; }
.ah-since .i { width: 13px; height: 13px; }
.ah-since .live-since { margin: 0; font-size: 1em; }
.sec-overview { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--bg-1); border: 1px solid var(--line); margin-bottom: 12px; --sc: var(--danger); }
.sec-overview.ok { --sc: var(--ok); } .sec-overview.mid { --sc: #60a5fa; } .sec-overview.warn { --sc: var(--warn); }
.so-ring { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--sc) calc(var(--p) * 1%), var(--bg-3) 0); position: relative; }
.so-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--bg-1); }
.so-ring b { position: relative; font-size: .95em; }
.sec-overview small { display: block; color: var(--text-2); font-size: .85em; margin: 2px 0 8px; }
.so-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.so-c { display: inline-flex; align-items: center; gap: 4px; font-size: .75em; padding: 3px 9px; border-radius: 999px; background: var(--bg-3); color: var(--text-3); }
.so-c .i { width: 12px; height: 12px; }
.so-c.ok { background: rgba(46, 230, 168, .14); color: var(--ok); }
.sec-quick .sq { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); margin-bottom: 12px; }
.sec-quick .sq > .i { width: 22px; height: 22px; color: var(--accent); }
.sec-quick small { display: block; color: var(--text-3); font-size: .8em; }
.sec-card { border-radius: 16px; background: var(--bg-1); border: 1px solid var(--line); margin-bottom: 12px; overflow: hidden; }
.sec-card > header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sec-card > header > .i { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgba(var(--accent-rgb), .14); color: var(--accent); flex: none; }
.sec-card > header small { display: block; color: var(--text-3); font-size: .8em; }
.sec-card.danger > header > .i { background: rgba(255, 93, 108, .14); color: var(--danger); }
.sec-card .acc-box { border: 0 !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; padding: 14px 16px !important; }
.sec-badge { font-size: .72em; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--bg-3); color: var(--text-2); }
.sec-badge.ok { background: rgba(46, 230, 168, .15); color: var(--ok); }
.sec-badge.warn { background: rgba(255, 181, 71, .15); color: var(--warn); }
.pw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; align-items: end; }
.pw-grid label { margin: 0; }
.pw-meter { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.pw-meter i { flex: 1; height: 5px; border-radius: 5px; background: var(--bg-3); position: relative; overflow: hidden; }
.pw-meter i::after { content: ""; position: absolute; inset: 0; width: 0; border-radius: 5px; transition: width .2s, background .2s; }
.pw-meter[data-lv="1"] i::after { width: 33%; background: var(--danger); }
.pw-meter[data-lv="2"] i::after { width: 66%; background: var(--warn); }
.pw-meter[data-lv="3"] i::after { width: 100%; background: var(--ok); }
.pw-meter span { font-size: .78em; color: var(--text-2); min-width: 110px; }
.pw-grid .btn { justify-self: start; }

.fa-card .grow { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.fa-card .grow small { font-size: .78em; }

.stf-perm input[type=checkbox] { width: 16px !important; height: 16px !important; min-width: 0 !important; flex: none; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
.stf-modal input[type=color] { width: 52px !important; height: 42px; padding: 3px !important; flex: none; cursor: pointer; }
.stf-modal .row.gap > input.grow { flex: 1; min-width: 0; }
.stf-modal .stf-perms { align-items: start; grid-auto-rows: auto; }
.stf-modal .stf-perm { height: auto !important; min-height: 0 !important; padding: 8px 10px !important; line-height: 1.3; }
.stf-modal .stf-perm span { flex: 1; }
.stf-modal input[type=color] { max-width: 56px !important; min-width: 56px; }

.stf-modal .stf-perms { align-content: start; height: auto !important; flex: none !important; }
.stf-modal .stf-add.card { flex: none; height: auto; }


.stf-add.card input { flex: none; min-width: 0; }
.stf-add.card .row.gap > input.grow { flex: 1 1 auto; }


.stf-modal .stf-perms { display: flex !important; flex-wrap: wrap; gap: 6px; }
.stf-modal .stf-perms > .stf-perm { flex: 1 1 200px; max-width: calc(25% - 5px); }
@media (max-width: 900px) { .stf-modal .stf-perms > .stf-perm { max-width: calc(50% - 3px); } }


/* ================= 1.8.2: Start/Anmeldung, Splash, Konten, App-Symbol, Serverbild, Spielstand */
.req { color: var(--danger); font-weight: 800; margin-left: 2px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-1); margin-bottom: 16px; }
.auth-tabs button { padding: 9px; border-radius: 9px; font-weight: 700; color: var(--text-2); }
.auth-tabs button.on { background: var(--bg-3); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.auth-card .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .auth-card .two-col { grid-template-columns: 1fr; } }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 42px !important; width: 100%; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--text-3); }
.pw-eye:hover, .pw-eye.on { color: var(--accent); background: var(--bg-3); }
.pw-match { font-size: .8em; min-height: 1em; margin: -2px 0 6px; }
.pw-match .ok { color: var(--ok); } .pw-match .bad { color: var(--danger); }
.pw-match .i { width: 13px; height: 13px; vertical-align: -2px; }
.auth-card .pw-meter span { font-size: .78em; }
.auth-art { position: relative; overflow: hidden; }
.auth-glow.two { left: auto; right: -120px; top: auto; bottom: -140px; background: radial-gradient(circle, rgba(96, 165, 250, .35), transparent 65%); }
.auth-brand { display: flex; align-items: center; gap: 16px; position: relative; }
.auth-brand .auth-logo { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 10px 40px rgba(var(--accent-rgb), .35); margin: 0; }
.auth-brand h1 { margin: 0; font-size: 2.6em; letter-spacing: .02em; line-height: 1; background: linear-gradient(90deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-brand span { color: var(--text-3); font-weight: 600; font-size: .9em; }
.auth-lead { position: relative; font-size: 1.08em; line-height: 1.55; color: var(--text-2); max-width: 460px; margin: 22px 0; }
.auth-feats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; }
.auth-feats > div { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); backdrop-filter: blur(6px); }
.auth-feats .i { width: 22px; height: 22px; color: var(--accent); display: block; margin-bottom: 8px; }
.auth-feats b { display: block; font-size: .95em; }
.auth-feats small { color: var(--text-3); font-size: .78em; }
.auth-foot-note { position: relative; margin-top: 22px; font-size: .82em; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.auth-foot-note .i { width: 14px; height: 14px; }
.acc-choose { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.acc-pick { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bg-1); border: 1.5px solid var(--line); text-align: left; transition: border-color .12s, transform .12s; }
.acc-pick:hover { border-color: var(--accent); transform: translateY(-1px); }
.acc-pick small { display: block; color: var(--text-3); font-size: .8em; }
.acc-pick > .i { color: var(--accent); }
/* Startbild */
.splash-logo { position: relative; width: 96px; height: 96px; }
.splash-logo img { width: 96px !important; height: 96px !important; border-radius: 26px; position: relative; z-index: 1; animation: pulse 1.6s ease-in-out infinite; }
.splash-logo i { position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .35), transparent 70%); animation: pulse 1.6s ease-in-out infinite reverse; }
.splash-name { text-align: center; line-height: 1.1; }
.splash-name b { font-size: 2.2em; letter-spacing: .06em; color: var(--text); }
.splash-name b span { color: var(--accent); }
.splash-name small { display: block; color: var(--text-3); font-size: .8em; margin-top: 2px; }
/* Passwort-Anzeige für das Team */
.pw-show { display: flex; gap: 10px; align-items: center; margin: 12px 0; }
.pw-show code { flex: 1; font-size: 1.3em; letter-spacing: .08em; padding: 12px 14px; border-radius: 10px; background: var(--bg-1); border: 1px dashed var(--accent); color: var(--accent); text-align: center; }
/* Nutzer-Meldung */
.rp-profile { border-radius: 12px; overflow: hidden; background: var(--bg-1); border: 1px solid var(--line); margin: 8px 0; }
.rpp-banner { height: 56px; background: linear-gradient(120deg, hsl(var(--h, 160) 55% 35%), hsl(calc(var(--h, 160) + 50) 60% 22%)); background-size: cover; background-position: center; }
.rpp-main { display: flex; gap: 12px; padding: 0 12px 12px; margin-top: -20px; }
.rpp-main > div:last-child { padding-top: 24px; min-width: 0; }
.rpp-main small { display: block; color: var(--text-3); }
.rpp-main p { margin: 4px 0 0; font-size: .88em; }
/* Eigenes App-Symbol */
.ai-edit { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.ai-prev { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; background: var(--bg-1); border: 1px solid var(--line); flex: none; }
.ai-prev img { width: 100%; height: 100%; object-fit: cover; }
/* Serverbild mit Vorschau */
.so-icon-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.icon-drop.big { position: relative; }
.icon-drop.big.pending { outline: 2px dashed var(--warn); outline-offset: 3px; }
.so-edit { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #06231a; box-shadow: 0 0 0 3px var(--bg-2); }
.so-edit .i { width: 13px; height: 13px; }
.so-pend { color: var(--warn); font-size: .75em; font-weight: 700; }
.srv-ic-prev { width: 36px; height: 36px; border-radius: 12px; overflow: hidden; flex: none; outline: 2px dashed var(--warn); }
.srv-ic-prev img { width: 100%; height: 100%; object-fit: cover; }
/* Serverbild oben in den Servereinstellungen: klein wie bei Discord */
.srv-ic-nav { width: 36px; height: 36px; border-radius: 12px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--bg-3); color: var(--text); font-weight: 700; }
.srv-ic-nav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-head .sh-icon { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; flex: none; margin-right: 2px; }
/* Spielstand + Statistik */
.act-card.game { position: relative; }
.act-time-live { display: flex !important; align-items: center; gap: 4px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.act-time-live .i { width: 11px; height: 11px; }
.act-score { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 74px; padding: 6px 10px; border-radius: 12px; background: var(--bg-1); flex: none; }
.act-score > b, .act-score > i { display: inline; }
.act-score { flex-direction: row; flex-wrap: wrap; gap: 3px; }
.act-score b { font-size: 1.35em; font-variant-numeric: tabular-nums; }
.act-score i { font-style: normal; color: var(--text-3); font-weight: 700; }
.act-score small { width: 100%; text-align: center; font-size: .66em; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.act-score.lead b:first-child { color: var(--ok); } .act-score.behind b:first-child { color: var(--danger); }
.gs-card { padding: 14px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.gs-head { display: flex; justify-content: space-between; align-items: center; }
.gs-rate { font-weight: 700; color: var(--accent); }
.gs-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.gs-nums > div { padding: 8px 10px; border-radius: 10px; background: var(--bg-3); text-align: center; }
.gs-nums b { display: block; font-size: 1.4em; font-variant-numeric: tabular-nums; }
.gs-nums small { color: var(--text-3); font-size: .72em; }
.gs-nums .w b, .gs-modes .w { color: var(--ok); } .gs-nums .l b, .gs-modes .l { color: var(--danger); }
.gs-bar { display: flex; height: 8px; border-radius: 8px; overflow: hidden; background: var(--bg-3); }
.gs-bar .w { background: var(--ok); } .gs-bar .l { background: var(--danger); }
.gs-modes { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .82em; color: var(--text-2); }
.gs-recent { display: flex; flex-wrap: wrap; gap: 5px; }
.gs-r { font-size: .75em; font-weight: 700; padding: 3px 8px; border-radius: 7px; font-variant-numeric: tabular-nums; background: var(--bg-3); }
.gs-r.win { background: rgba(46, 230, 168, .16); color: var(--ok); } .gs-r.loss { background: rgba(255, 93, 108, .16); color: var(--danger); }

/* ================= 1.8.5: eigene Profil-Karte unten links, schönere Knöpfe, Tages-Bilanz */
.menu.me-menu { width: 320px; padding-top: 0; overflow: hidden; }
.menu .menu-html:has(.me-card) { padding: 0; }
.me-card { margin: 0 0 6px; border-bottom: 1px solid var(--line); }
.mc-banner { aspect-ratio: 3 / 1; background: linear-gradient(120deg, hsl(var(--h, 160) 55% 35%), hsl(calc(var(--h, 160) + 50) 60% 22%)); background-size: cover; background-position: center; }
.mc-av { margin: -34px 0 0 14px; width: max-content; position: relative; }
.mc-av .avatar { box-shadow: 0 0 0 5px var(--bg-3); }
.mc-body { padding: 6px 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.mc-body > b { font-size: 1.1em; }
.mc-body > small { color: var(--text-3); }
.mc-status { font-size: .85em; padding: 6px 9px; border-radius: 9px; background: var(--bg-2); }
.mc-body .act-card { margin: 4px 0 0; padding: 8px; background: var(--bg-2); }
.mc-btns { display: flex; gap: 6px; margin-top: 6px; }
.pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: .86em; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2); transition: transform .12s, background .12s, border-color .12s, box-shadow .12s; white-space: nowrap; }
.pill-btn .i { width: 16px; height: 16px; }
.pill-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--accent); background: var(--bg-3); }
.pill-btn.primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #60a5fa)); color: #06231a; border-color: transparent; box-shadow: 0 6px 18px rgba(var(--accent-rgb), .3); }
.pill-btn.primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 8px 22px rgba(var(--accent-rgb), .4); }
.pill-btn.wide { flex: 1; }
.pill-btn.icon { width: 36px; padding: 0; flex: none; }
.pill-btn.ok { color: var(--ok); }
.pill-btn:disabled { opacity: .55; cursor: default; }
.pill-btn.report { width: 100%; margin-top: 8px; background: transparent; color: var(--text-3); border: 1px dashed var(--line-2); height: 32px; font-weight: 600; }
.pill-btn.report:hover { color: var(--danger); border-color: rgba(255, 93, 108, .6); background: rgba(255, 93, 108, .08); }
.pp-actions.pretty { display: flex; gap: 6px; align-items: center; }
.mc-btns .pill-btn { flex: 1; }
.act-today { font-size: .78em !important; }
.act-today .w { color: var(--ok); } .act-today .l { color: var(--danger); }
.menu-item.danger .i { color: var(--danger); }
.menu.me-menu { width: 340px !important; min-width: 340px !important; max-width: calc(100vw - 16px) !important; }
.me-card .act-card { flex-wrap: wrap; gap: 10px; }
.me-card .act-card > .game-ic, .me-card .act-card > .act-cover { --s: 44px !important; width: 44px; height: 44px; }
.me-card .act-card > .grow { flex: 1 1 150px; }
.me-card .act-score { width: 100%; min-width: 0; padding: 4px 8px; }
.me-card .act-score small { width: auto; margin-left: 6px; }
.me-card .act-time-live { font-size: .72em !important; }
.mc-btns .pill-btn { min-width: 0; padding: 0 10px; }

/* Geräte-Liste + eigener Klingelton */
.dev-list { display: flex; flex-direction: column; gap: 6px; }
.dev-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.dev-row.cur { border-color: rgba(var(--accent-rgb), .5); background: linear-gradient(120deg, rgba(var(--accent-rgb), .08), transparent), var(--bg-2); }
.dev-row small { display: flex; align-items: center; gap: 4px; color: var(--text-3); font-size: .78em; margin-top: 2px; }
.dev-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-3); color: var(--accent); flex: none; }
.chip.ok-chip { background: rgba(46, 230, 168, .15); color: var(--ok); font-style: normal; font-size: .7em; padding: 2px 8px; margin-left: 4px; }
.dev-foot { margin-top: 10px; flex-wrap: wrap; }
.ring-opt.custom span .i { width: 14px; height: 14px; vertical-align: -2px; }
.ring-own { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-1); border: 1px dashed var(--line-2); margin-bottom: 10px; }
.ring-own small { display: block; color: var(--text-3); font-size: .78em; margin-top: 2px; }
.ring-vol { display: block; margin-bottom: 12px; }

/* In-App-Benachrichtigungen (Standard: oben links, wie bei Discord) */
.inapp-notifs { position: fixed; z-index: 1200; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 24px)); pointer-events: none; }
.inapp-notifs.pos-tl { top: 14px; left: 90px; }
.inapp-notifs.pos-tr { top: 14px; right: 14px; }
.inapp-notifs.pos-bl { bottom: 14px; left: 90px; flex-direction: column-reverse; }
.inapp-notifs.pos-br { bottom: 14px; right: 14px; flex-direction: column-reverse; }
body.desktop .inapp-notifs.pos-tl, body.desktop .inapp-notifs.pos-tr { top: 46px; }
.inapp-n { pointer-events: auto; position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 34px 12px 12px; border-radius: 14px; background: color-mix(in srgb, var(--bg-3) 92%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--line-2); box-shadow: 0 14px 40px rgba(0, 0, 0, .45); cursor: pointer; overflow: hidden; opacity: 0; transform: translateX(-24px) scale(.97); transition: opacity .2s, transform .22s cubic-bezier(.2, .9, .3, 1.2); }
.pos-tr .inapp-n, .pos-br .inapp-n { transform: translateX(24px) scale(.97); }
.inapp-n.in { opacity: 1; transform: none; }
.inapp-n.out { opacity: 0; transform: translateY(-8px) scale(.97); }
.inapp-n:hover { border-color: rgba(var(--accent-rgb), .6); }
.in-body { flex: 1; min-width: 0; }
.in-top { display: flex; align-items: baseline; gap: 8px; }
.in-top small { color: var(--text-3); font-size: .74em; }
.in-body p { margin: 3px 0 0; font-size: .88em; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.in-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--accent-rgb), .15); color: var(--accent); flex: none; }
.in-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); opacity: 0; transition: opacity .12s; }
.inapp-n:hover .in-x { opacity: 1; }
.in-x:hover { background: var(--bg-4, rgba(255, 255, 255, .08)); color: var(--text); }
.in-x .i { width: 14px; height: 14px; }
.in-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); width: 100%; transform-origin: left; animation: inbar 7s linear forwards; }
.inapp-n.hold .in-bar { animation-play-state: paused; }
@keyframes inbar { to { transform: scaleX(0); } }
.in-reply { display: flex; gap: 6px; margin-top: 8px; }
.in-reply input { flex: 1; height: 32px; padding: 0 10px !important; margin: 0 !important; font-size: .85em; }
.in-reply .icon-btn { width: 32px; height: 32px; background: var(--accent); color: #06231a; border-radius: 9px; }
.nt-pos { margin-bottom: 8px; }

/* Rang-Fortschritt (VALORANT RR) + Match-Verlauf */
.rank-prog { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--bg-1); max-width: 320px; }
.rank-prog .rp-top { display: flex; align-items: center; gap: 6px; font-size: .82em; }
.rank-prog .rp-top span { color: var(--text-3); display: inline-flex; align-items: center; gap: 2px; }
.rank-prog .rp-top span .i { width: 12px; height: 12px; transform: rotate(-90deg); }
.rank-prog .rp-top em { margin-left: auto; font-style: normal; font-weight: 800; font-size: .95em; }
.rank-prog .rp-top em.up { color: var(--ok); } .rank-prog .rp-top em.down { color: var(--danger); }
.rank-prog .rp-bar { height: 7px; border-radius: 7px; background: var(--bg-3); margin: 6px 0 4px; overflow: hidden; }
.rank-prog .rp-bar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #60a5fa, var(--accent)); }
.rank-prog small { font-size: .72em !important; color: var(--text-3) !important; }
.rank-prog small b { color: var(--text); }
.gs-mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gs-mode { padding: 10px; border-radius: 10px; background: var(--bg-3); display: flex; flex-direction: column; gap: 4px; }
.gs-mode-n { display: flex; justify-content: space-between; gap: 6px; font-size: .8em; font-weight: 700; }
.gs-mode-n .w { color: var(--ok); } .gs-mode-n .l { color: var(--danger); }
.gs-mode small { color: var(--text-3); font-size: .72em; }
.gs-bar.sm { height: 5px; }
.gs-hist-h { font-weight: 700; font-size: .85em; }
.gs-hist-h small { color: var(--text-3); font-weight: 500; }
.gs-hist { display: flex; flex-direction: column; gap: 4px; }
.gs-row { display: grid; grid-template-columns: 96px 70px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: var(--bg-3); border-left: 3px solid var(--text-3); font-size: .85em; }
.gs-row.win { border-left-color: var(--ok); } .gs-row.loss { border-left-color: var(--danger); }
.gs-row .gs-res { font-weight: 800; } .gs-row.win .gs-res { color: var(--ok); } .gs-row.loss .gs-res { color: var(--danger); }
.gs-row .gs-sc { font-variant-numeric: tabular-nums; font-size: 1.05em; }
.gs-row .gs-m { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-row small { color: var(--text-3); white-space: nowrap; }
.gs-row.more { display: none; }
.gs-hist.open .gs-row.more { display: grid; }
.gs-all { align-self: flex-start; height: 30px; font-size: .8em; }
@media (max-width: 600px) { .gs-row { grid-template-columns: 80px 60px minmax(0, 1fr); } .gs-row small { display: none; } }

.act-card .act-today b, .act-card .rank-prog small b, .act-card .rank-prog .rp-top b { display: inline !important; }
.act-card .rank-prog small, .act-card .act-today { display: block; }


/* Banner im vollen Profil: ganzes Bild zeigen (vorher setzte eine spätere Regel die Größe zurück -> gezoomt) */
.fp-banner, .dmp-banner, .mc-banner, .ah-banner, .pp-banner.img, .rpp-banner { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
/* Spotify-Knopf */
.pill-btn.sp-open { height: 28px; padding: 0 12px; margin-top: 8px; font-size: .78em; background: #1db954; color: #04130a; border-color: transparent; text-decoration: none; width: max-content; }
.pill-btn.sp-open:hover { background: #1ed760; border-color: transparent; }
.pill-btn.sp-open .i { width: 13px; height: 13px; }
.update-bar .btn { white-space: nowrap; }

/* Kanäle/Kategorien ziehen + Blockieren */
[data-drag-ch], [data-drag-cat] { position: relative; }
[draggable="true"][data-drag-ch]:hover, [draggable="true"][data-drag-cat]:hover { cursor: grab; }
.dragging { opacity: .45; }
.drop-before::before, .drop-after::after { content: ""; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .7); z-index: 5; }
.drop-before::before { top: -2px; }
.drop-after::after { bottom: -2px; }
.drop-into { outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: 8px; background: rgba(var(--accent-rgb), .08); }
.msg.blocked-msg { display: flex; align-items: center; gap: 10px; padding: 6px 16px; opacity: .8; }
.msg.blocked-msg .sys-ic { width: 26px; height: 26px; display: grid; place-items: center; color: var(--text-3); }
.pp-danger { display: flex; gap: 6px; }
.pp-danger .pill-btn.report { flex: 1; }

.fr-row.blocked .avatar { filter: grayscale(.8); opacity: .75; }
.fr-blk-hint { margin-top: 14px; display: flex; gap: 6px; align-items: flex-start; }
.fr-blk-hint .i { flex: none; width: 14px; height: 14px; margin-top: 2px; }


/* mehrere Aktivitäten gleichzeitig */
.live-act .act-card + .act-card { margin-top: 8px; }
.fa-act .act-card + .act-card { margin-top: 6px; }
.sub-more { font-style: normal; font-size: .85em; font-weight: 800; padding: 0 5px; border-radius: 6px; background: rgba(var(--accent-rgb), .18); color: var(--accent); margin-left: 3px; }


/* Unterstützen & Zahlung */
.sup-hero { display: flex; gap: 16px; padding: 18px; border-radius: 16px; background: linear-gradient(120deg, rgba(255, 93, 140, .16), rgba(var(--accent-rgb), .08)), var(--bg-1); border: 1px solid var(--line); margin-bottom: 12px; }
.sup-hero > .i { width: 44px; height: 44px; color: #ff5d8c; flex: none; }
.sup-hero p { margin: 6px 0 0; color: var(--text-2); line-height: 1.5; }
.sup-thanks { margin-top: 10px; display: flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 700; font-size: .9em; }
.sup-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: rgba(255, 93, 140, .16); color: #ff7aa2; font-size: .62em; font-weight: 800; vertical-align: middle; }
.sup-hero .sup-badge { font-size: .8em; }
.sup-badge .i { width: 12px; height: 12px; }
.sup-kind { margin-bottom: 10px; }
.sup-amounts { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.sup-amt { height: 42px; min-width: 64px; padding: 0 14px; border-radius: 12px; background: var(--bg-2); border: 1.5px solid var(--line); font-weight: 800; font-size: 1em; }
.sup-amt.on { border-color: #ff5d8c; background: rgba(255, 93, 140, .12); }
.sup-own { margin: 0; font-size: .78em; display: flex; flex-direction: column; gap: 3px; }
.sup-own input { width: 110px; height: 42px; margin: 0 !important; }
.pill-btn.sup-go { height: 44px; font-size: .95em; margin-bottom: 8px; background: linear-gradient(135deg, #ff5d8c, #ff9a5d); color: #2a0714; box-shadow: 0 8px 22px rgba(255, 93, 140, .3); }
.pm-ic { font-size: .62em; font-weight: 900; letter-spacing: .03em; }

/* ---- RSGC Nitro + Server-Boosts ---- */
:root { --nitro-1: #8b5cf6; --nitro-2: #ec4899; --boost: #ff6bd6; }
.nav-nitro .i { color: var(--nitro-2); }
.nitro-badge, .boost-badge { display: inline-grid; place-items: center; flex: none; }
.nitro-badge .i { width: 14px; height: 14px; color: #c084fc; }
.boost-badge .i { width: 14px; height: 14px; color: var(--boost); }
.nitro-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(135deg, rgba(139, 92, 246, .25), rgba(236, 72, 153, .25)); color: #e9d5ff; font-size: .62em; font-weight: 800; vertical-align: middle; }
.nitro-pill .i { width: 12px; height: 12px; }
.fp-main h2 .boost-badge { vertical-align: middle; margin-left: 4px; }
.side-head .boost-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 7px; border-radius: 999px; background: rgba(255, 107, 214, .14); color: var(--boost); font-size: .78em; flex: none; }
.side-head .boost-chip .i { margin: 0; width: 14px; color: var(--boost); }
.side-head .boost-chip + .i { margin-left: 4px; }
.side-head.on-banner .boost-chip { background: rgba(0, 0, 0, .45); }
.side-head .boost-chip:hover { background: rgba(255, 107, 214, .26); }
.nitro-hero { border-radius: 18px; padding: 20px; margin-bottom: 14px; border: 1px solid rgba(192, 132, 252, .25); background: radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, .32), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(236, 72, 153, .22), transparent 60%), var(--bg-1); }
.nh-top { display: flex; gap: 16px; align-items: flex-start; }
.nh-top > .i { width: 48px; height: 48px; flex: none; color: #e9d5ff; filter: drop-shadow(0 4px 14px rgba(236, 72, 153, .5)); }
.nh-top b { font-size: 1.35em; background: linear-gradient(90deg, #e9d5ff, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nh-top p { margin: 4px 0 0; color: var(--text-2); line-height: 1.5; }
.nh-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); color: var(--ok); }
.nh-status .i { width: 16px; height: 16px; }
.nh-status span { color: var(--text-2); font-size: .88em; }
.nh-perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 14px; }
.nh-perk { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.nh-perk > .i { width: 20px; height: 20px; color: #f0abfc; flex: none; margin-top: 1px; }
.nh-perk b { display: block; font-size: .9em; }
.nh-perk small { color: var(--text-3); font-size: .78em; }
.np-currency { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; }
.np-currency label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9em; }
.np-currency select { width: auto; min-width: 210px; }
.np-currency small { color: var(--text-2); font-size: .82em; }
.nitro-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 12px; }
.np-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; background: var(--bg-1); border: 1.5px solid var(--line-2); }
.np-card.best { border-color: rgba(236, 72, 153, .55); background: linear-gradient(160deg, rgba(236, 72, 153, .12), transparent 60%), var(--bg-1); }
.np-card.owned { border-color: rgba(var(--accent-rgb), .45); }
.np-card > small { color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72em; }
.np-card > b { font-size: 1.8em; line-height: 1.1; }
.np-card > span { color: var(--text-2); font-size: .85em; }
.np-card > em { font-style: normal; color: var(--text-3); font-size: .8em; margin: 6px 0 10px; flex: 1; }
.np-card .pill-btn { white-space: normal; height: auto; min-height: 40px; padding: 8px 14px; line-height: 1.25; }
.np-card .pill-btn.primary, .bo-buy .pill-btn.primary, .pill-btn.bo-go { background: linear-gradient(135deg, var(--nitro-1), var(--nitro-2)); color: #fff; box-shadow: 0 8px 22px rgba(236, 72, 153, .3); }
.np-tag { position: absolute; top: -10px; right: 14px; font-style: normal; font-size: .7em; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: linear-gradient(135deg, var(--nitro-1), var(--nitro-2)); color: #fff; }
.nitro-consent { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line-2); margin-bottom: 14px; font-size: .86em; color: var(--text-2); line-height: 1.45; cursor: pointer; }
.nitro-consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--nitro-2); }
.nitro-consent.shake { animation: nshake .5s; border-color: var(--danger); }
@keyframes nshake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.nitro-theme { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.nt-prev { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(135deg, #7c5cff, #2ee6a8); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.nitro-theme label { display: grid; gap: 4px; font-size: .8em; color: var(--text-3); }
.nitro-theme input[type=color] { width: 54px; height: 36px; padding: 2px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); }
.tag-in { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); padding-left: 10px; }
.tag-in span { color: var(--text-3); white-space: nowrap; }
.tag-in input { border: 0 !important; background: transparent !important; width: 80px; }
.modal.nitro-themed { background: linear-gradient(170deg, color-mix(in srgb, var(--pt1) 40%, var(--bg-1)), color-mix(in srgb, var(--pt2) 30%, var(--bg-1))); border: 1.5px solid color-mix(in srgb, var(--pt1) 60%, transparent); }
.modal.nitro-themed .fp-tabs button.on { border-color: var(--pt2); }
.bo-head { padding: 4px 0 8px; }
.bo-srv { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bo-ic { width: 56px; height: 56px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: var(--bg-3); flex: none; font-weight: 800; }
.bo-ic img { width: 100%; height: 100%; object-fit: cover; }
.bo-srv b { display: block; font-size: 1.1em; }
.bo-srv small { color: var(--boost); font-weight: 700; }
.bo-bar { position: relative; height: 10px; border-radius: 99px; background: var(--bg-3); margin: 8px 6px 26px; }
.bo-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--nitro-1), var(--boost)); transition: width .4s; }
.bo-mark { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--bg-4); border: 2px solid var(--bg-1); }
.bo-mark.on { background: var(--boost); }
.bo-mark em { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .72em; font-weight: 800; color: var(--text-3); }
.bo-mark.on em { color: var(--boost); }
.bo-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.bo-lv { padding: 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.bo-lv.on { border-color: rgba(255, 107, 214, .5); background: linear-gradient(160deg, rgba(255, 107, 214, .1), transparent 70%), var(--bg-2); }
.bo-lv header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.bo-lv header .i { width: 16px; height: 16px; color: var(--boost); }
.bo-lv header small { margin-left: auto; color: var(--text-3); font-size: .75em; }
.bo-lv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .8em; color: var(--text-2); }
.bo-lv li { display: flex; gap: 6px; align-items: flex-start; }
.bo-lv li .i { width: 13px; height: 13px; color: var(--ok); flex: none; margin-top: 2px; }
.bo-levels.small .bo-lv { padding: 10px; }
.bo-me, .bo-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 10px; }
.bo-me b, .bo-buy b { display: block; }
.bo-me small, .bo-buy small { color: var(--text-3); font-size: .8em; }
.bo-buy { margin-top: 10px; }
.bo-buy .pill-btn { white-space: normal; height: auto; min-height: 38px; padding: 8px 14px; }
.bo-step { display: inline-flex; align-items: center; gap: 8px; }
.bo-step b { min-width: 22px; text-align: center; font-size: 1.1em; }
.bo-step .icon-btn { width: 30px; height: 30px; border-radius: 9px; background: var(--bg-3); font-weight: 800; }
.bo-list { display: grid; gap: 6px; }
.bo-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--bg-2); }
.bo-user small { display: block; color: var(--text-3); font-size: .78em; }
.bo-user > .i { width: 16px; height: 16px; color: var(--boost); }
.srv-ic-sm { overflow: hidden; }
.srv-ic-sm img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) { .nh-perks { grid-template-columns: 1fr; } .bo-me .pill-btn, .bo-buy .pill-btn { width: 100%; } }
.np-note { margin: 8px 0 0; color: var(--text-3); font-size: .78em; }

/* Qualität selbst wählen (Bildschirm teilen) */
.pick-q { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 12px 14px; margin: 10px 0 4px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); }
.pick-q label { display: grid; gap: 4px; font-size: .8em; color: var(--text-3); font-weight: 600; min-width: 170px; flex: 1 1 170px; }
.pick-q select { width: 100%; }
.pick-q select option:disabled { color: var(--text-3); }
.pq-more { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; font-weight: 700; font-size: .82em; color: #fff; background: linear-gradient(135deg, var(--nitro-1), var(--nitro-2)); cursor: pointer; }
.pq-more .i, .pq-ok .i { width: 15px; height: 15px; }
.pq-ok { display: inline-flex; align-items: center; gap: 6px; height: 36px; color: #f0abfc; font-weight: 700; font-size: .82em; }