/* SCP ROLEPLAY Admin-Panel – Bediengefühl nach txAdmin v8.1.2 (panel/src/globals.css, tailwind.config.cjs).
   Werte aus Dokumentation/panel/REFERENZ_TXADMIN.md §2 ([Q] = Quellcode, [A] = abgeleitet). Keine Inline-Stile (CSP); dynamische Werte über CSSOM. */

@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-Regular.woff') format('woff'); font-weight: 300 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-Bold.woff') format('woff'); font-weight: 600 800; font-display: swap; }

/* Light (:root) – globals.css [Q] */
:root {
  --background: 224 33.3% 97.1%;
  --foreground: 224 10.2% 9.6%;
  --card: 224 16.1% 95%;
  --popover: 224 33.3% 97.1%;
  --primary: 224 10.2% 9.6%;
  --primary-foreground: 224 10% 96.1%;
  --secondary: 224 7% 86.1%;
  --secondary-foreground: 224 10.2% 9.6%;
  --muted: 224 5.4% 85.5%;
  --muted-foreground: 224 4.7% 25.1%;
  --accent: 341 92.3% 49%;
  --accent-foreground: 0 0% 100%;
  --border: 224 3.2% 81.4%;
  --input: 224 7% 86.1%;
  --ring: 224 10.2% 9.6%;
  --destructive: 0 84.5% 59.6%;
  --destructive-foreground: 0 0% 100%;
  --destructive-hint: 0 85.7% 97.3%;
  --destructive-inline: 0 72% 51%;
  --warning: 47.1 77.5% 56.5%;
  --warning-foreground: 48.9 77.1% 6.9%;
  --warning-hint: 53.3 75% 95.3%;
  --warning-inline: 39.75 78% 40%;
  --success: 136.6 77.6% 56.3%;
  --success-foreground: 137.5 80% 5.9%;
  --success-hint: 136 88.2% 96.7%;
  --success-inline: 137 86% 36%;
  --info: 191.1 77.6% 56.3%;
  --info-foreground: 195 66.7% 1.2%;
  --info-hint: 187.1 89.5% 96.3%;
  --info-inline: 194.8 83% 37%;
  --radius: 0.5rem;
  --pid-fg: #71717a; --pid-border: #d4d4d8; --pid-bg: #f4f4f5;
  --zinc-btn: #f4f4f5; --zinc-btn-hover: #e4e4e7; --zinc-btn-border: #e4e4e7;
  --dots: #d4d4d8;
  --thead: #e4e4e7;
  --page-pt: 1rem;
  --page-pb: 0rem;
  --navbar-vh: calc(3.5rem + 1px);
  --content-offset: calc(var(--navbar-vh) + var(--page-pt));
  --content-vh: calc(100vh - var(--content-offset) - var(--page-pb));
  --sidebar: 16rem;
  color-scheme: light;
}
/* Dark (.dark) – globals.css [Q] */
:root.dark {
  --background: 224 5.7% 10.4%;
  --foreground: 224 6.7% 97.1%;
  --card: 224 5.6% 14.1%;
  --popover: 224 5.7% 10.4%;
  --primary: 224 6.7% 97.1%;
  --primary-foreground: 224 7.1% 11%;
  --secondary: 224 5.3% 26.1%;
  --secondary-foreground: 224 6.7% 97.1%;
  --muted: 224 5% 15.7%;
  --muted-foreground: 224 4.9% 72%;
  --border: 224 5.6% 21.2%;
  --input: 224 5.3% 26.1%;
  --ring: 224 6.7% 97.1%;
  --destructive: 0 91.3% 68.4%;
  --destructive-hint: 0 74.7% 15.5%;
  --destructive-inline: 0 91.3% 68.4%;
  --warning: 47.2 75.9% 62.5%;
  --warning-hint: 21.9 72.2% 14.1%;
  --warning-inline: 47.2 75.9% 62.5%;
  --success: 136.7 73.1% 60.6%;
  --success-foreground: 136.2 72.2% 7.1%;
  --success-hint: 139.5 84.3% 10%;
  --success-inline: 136.7 73.1% 60.6%;
  --info: 191.1 69.2% 61.8%;
  --info-foreground: 197.1 63.6% 2.2%;
  --info-hint: 200.5 57.9% 14.9%;
  --info-inline: 191.1 69.2% 61.8%;
  --pid-fg: #a1a1aa; --pid-border: #27272a; --pid-bg: #18181b;
  --zinc-btn: #18181b; --zinc-btn-hover: #27272a; --zinc-btn-border: #27272a;
  --dots: #27272a;
  --thead: hsl(224 5% 15.7%);
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --page-pb: 1rem; } }

*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: hsl(var(--border)); }
html { scrollbar-width: thin; scrollbar-gutter: stable; scrollbar-color: hsl(var(--secondary)) hsl(var(--background)); }
body { margin: 0; min-height: 100vh; background: hsl(var(--background)); color: hsl(var(--foreground)); font: 400 14px/1.5 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.muted { color: hsl(var(--muted-foreground)); }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t-success { color: hsl(var(--success-inline)); } .t-danger { color: hsl(var(--destructive-inline)); } .t-warning { color: hsl(var(--warning-inline)); } .t-info { color: hsl(var(--info-inline)); }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* ---------------------------------------------------------------- Knöpfe (button.tsx) [Q] */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; border-radius: calc(var(--radius) - 2px); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); transition: background-color .15s, color .15s, opacity .15s; user-select: none; }
.btn:hover { background: hsl(var(--primary) / .75); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn.sm { height: 2.25rem; padding: 0 .75rem; } .btn.xs { height: 1.75rem; padding: 0 .5rem; font-size: 13px; } .btn.lg { height: 2.75rem; padding: 0 2rem; } .btn.icon { width: 2.5rem; padding: 0; }
.btn.outline { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--input)); }
.btn.outline:hover, .btn.ghost:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn.secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .btn.secondary:hover { background: hsl(var(--secondary) / .8); }
.btn.ghost { background: transparent; color: hsl(var(--foreground)); }
.btn.muted-btn { background: hsl(var(--muted)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.btn.destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .btn.destructive:hover { background: hsl(var(--destructive) / .75); }
.btn.success { background: hsl(var(--success)); color: hsl(var(--success-foreground)); } .btn.success:hover { background: hsl(var(--success) / .75); }
.btn.warning { background: hsl(var(--warning)); color: hsl(var(--warning-foreground)); }
.btn.link { background: none; color: hsl(var(--accent)); padding: 0; height: auto; } .btn.link:hover { text-decoration: underline; background: none; }

/* Eingaben (input.tsx) [Q] */
.input, select.input, textarea.input { width: 100%; height: 2.5rem; padding: .5rem .75rem; border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px); background: rgb(0 0 0 / .05); font-size: 14px; }
:root.dark .input { background: rgb(0 0 0 / .3); }
.input::placeholder { color: hsl(var(--muted-foreground)); opacity: .5; }
.input:disabled { cursor: not-allowed; opacity: .5; }
textarea.input { height: auto; min-height: 5rem; resize: vertical; line-height: 1.5; }
.input.h8 { height: 2rem; }
label.check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-size: 14px; }
.switch { appearance: none; width: 2.75rem; height: 1.5rem; border-radius: 999px; background: hsl(var(--input)); position: relative; cursor: pointer; transition: background .15s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: hsl(var(--background)); transition: transform .15s; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.switch:checked { background: hsl(var(--primary)); } .switch:checked::after { transform: translateX(1.25rem); }

/* ---------------------------------------------------------------- Kopfzeile (Header.tsx) [Q] */
.header { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; background: hsl(var(--card)); color: hsl(var(--foreground)); border-bottom: 1px solid hsl(var(--border)); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.header-in { height: 3.5rem; width: 100%; max-width: 1920px; padding: 0 .5rem; display: flex; justify-content: space-between; }
@media (min-width: 1024px) { .header-in { padding: 0 .75rem; } }
.header-left { display: flex; align-items: center; flex-grow: 1; gap: 1.25rem; margin-right: 1.25rem; min-width: 0; }
.brand-wide { width: var(--sidebar); display: none; justify-content: center; }
.brand-wide img, .brand-wide .brand-mark { height: 2.25rem; transition: transform .15s, filter .15s; }
.brand-sq { display: none; }
.brand-sq .brand-mark { height: 2.5rem; }
.brand-wide a:hover > *, .brand-sq:hover > * { transform: scale(1.05); filter: brightness(1.1); }
@media (min-width: 1280px) { .brand-wide { display: flex; } }
@media (min-width: 640px) and (max-width: 1279.98px) { .brand-sq { display: block; } }
.brand-mark { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.brand-mark .logo { width: 2.25rem; height: 2.25rem; border-radius: 6px; background: hsl(var(--accent)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: 0; }
.brand-mark .wordmark { font-size: 15px; }
.brand-sq .wordmark { display: none; }
.header-title { display: block; min-width: 0; }
.header-title h1 { font-size: 16px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1024px) { .header-title { display: none; } }
.navbar { display: none; flex-grow: 1; }
@media (min-width: 1024px) { .navbar { display: block; } }
.navlist { display: flex; gap: .25rem; user-select: none; list-style: none; margin: 0; padding: 0; }
.navlink { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; padding: .5rem 1rem; border-radius: calc(var(--radius) - 2px); font-size: 14px; font-weight: 500; cursor: pointer; background: none; transition: background-color .15s, color .15s; }
.navlink:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.navlink.active { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.navlink.active:hover { background: hsl(var(--secondary) / .8); }
.navlink.locked { opacity: .5; cursor: help; }
.navlink .chev { width: .75rem; height: .75rem; margin-left: .25rem; position: relative; top: 1px; transition: transform .2s; }
.navdrop { position: relative; }
.navdrop.open .chev { transform: rotate(180deg); }
.navdrop.open > .navlink { background: hsl(var(--secondary) / .5); }
.navmenu { position: absolute; top: calc(100% + .375rem); left: 0; z-index: 30; display: none; flex-direction: column; gap: .5rem; padding: 1rem; list-style: none; margin: 0; background: hsl(var(--popover)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .2); }
.navdrop.open .navmenu { display: flex; animation: zoomIn .15s ease-out; }
.navmenu .navlink { width: 9rem; justify-content: flex-start; }
@keyframes zoomIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.header-right { display: flex; align-items: center; gap: .5rem; }
@media (min-width: 640px) { .header-right { gap: .75rem; } }
.navbtn { height: 2.75rem; width: 2.75rem; display: flex; align-items: center; justify-content: center; gap: .5rem; border-radius: calc(var(--radius) - 2px); font-size: 14px; border: 1px solid var(--zinc-btn-border); background: var(--zinc-btn); cursor: pointer; transition: background .15s; }
.navbtn:hover { background: var(--zinc-btn-hover); }
.navbtn svg { width: 1.5rem; height: 1.5rem; }
.navbtn .lbl { display: none; }
@media (min-width: 640px) { .navbtn { height: 2.5rem; width: auto; min-width: max-content; padding: 0 .5rem; } .navbtn svg { width: 1.25rem; height: 1.25rem; } .navbtn .lbl { display: flex; } }
@media (min-width: 1024px) { .navbtn { padding: 0 .75rem; } .navbtn.only-mobile { display: none; } }
@media (min-width: 1280px) { .navbtn.only-below-xl { display: none; } }
.acct { display: flex; align-items: center; gap: .75rem; border-radius: var(--radius); cursor: pointer; background: none; padding: 0; position: relative; }
.acct .acct-name { display: none; color: hsl(var(--muted-foreground)); }
@media (min-width: 1280px) { .acct .acct-name { display: block; } }
.avatar { width: 2.75rem; height: 2.75rem; border-radius: calc(var(--radius) - 2px); display: grid; place-items: center; font-size: 1.25rem; font-weight: 600; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border: 1px solid transparent; transition: border-color .15s; }
@media (min-width: 640px) { .avatar { width: 2.5rem; height: 2.5rem; } }
.acct:hover .avatar { border-color: #71717a; }

/* Dropdown / Popover (dropdown-menu.tsx) [Q] */
.menu { position: absolute; z-index: 50; min-width: 12rem; padding: .25rem; background: hsl(var(--popover)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); box-shadow: 0 4px 6px -1px rgb(0 0 0 / .2); animation: zoomIn .12s ease-out; }
.menu.right { right: 0; top: calc(100% + .5rem); }
.menu-item { display: flex; align-items: center; width: 100%; gap: .5rem; padding: .375rem .5rem; font-size: 14px; border-radius: calc(var(--radius) - 4px); cursor: pointer; background: none; text-align: left; }
.menu-item:hover, .menu-item:focus-visible { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); outline: none; }
.menu-item svg { width: 1rem; height: 1rem; }
.menu-item.checked::after { content: '✓'; margin-left: auto; }
.menu-sep { height: 1px; margin: .25rem -.25rem; background: hsl(var(--border)); }
.menu-label { padding: .375rem .5rem; font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); }

/* ---------------------------------------------------------------- Grundgerüst (MainShell.tsx) [Q] */
.shell { width: 100%; max-width: 1920px; margin: 0 auto; min-height: 100%; padding: var(--page-pt) 0 var(--page-pb); display: flex; flex-direction: row; gap: 1rem; }
@media (min-width: 768px) { .shell { padding-left: .75rem; padding-right: .75rem; } }
main.page { display: flex; flex: 1; min-height: var(--content-vh); min-width: 360px; }
main.page > * { width: 100%; }
.tx-sidebar { align-self: flex-start; position: sticky; flex-shrink: 0; width: var(--sidebar); z-index: 0; top: var(--content-offset); }
.card { background: hsl(var(--card)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: .75rem; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.card.p4 { padding: 1rem; }

/* Serverleiste (ServerSidebar) [Q] */
.server-sidebar { display: none; flex-direction: column; gap: 1rem; z-index: 10; }
@media (min-width: 1024px) { .server-sidebar { display: flex; } }
.server-sidebar h2 { margin-bottom: .375rem; font-size: 18px; font-weight: 600; letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-menu { list-style: none; margin: 0; padding: 0; user-select: none; }
.server-menu li + li { margin-top: .25rem; }
.server-menu .btn { width: 100%; justify-content: flex-start; padding-top: .25rem; padding-bottom: .25rem; }
.server-menu .btn svg { margin-right: .5rem; }
.ctl-row { display: flex; justify-content: space-between; gap: .5rem; }
.ctl-btn { flex-grow: 1; height: 2.5rem; display: grid; place-items: center; border-radius: calc(var(--radius) - 2px); border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); box-shadow: 0 1px 2px rgb(0 0 0 / .05); cursor: pointer; position: relative; transition: background .15s, color .15s; }
@media (min-width: 640px) { .ctl-btn { height: 2rem; } }
.ctl-btn svg { height: 1.25rem; width: 1.25rem; }
.ctl-btn.start:hover { background: hsl(var(--success)); color: hsl(var(--success-foreground)); }
.ctl-btn.stop:hover { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.ctl-btn.restart:hover { background: hsl(var(--warning)); color: hsl(var(--warning-foreground)); }
.ctl-btn.plain:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.ctl-btn:disabled { opacity: .5; pointer-events: none; }
.ctl-btn.start.pulse::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: hsl(var(--success) / .5); filter: blur(6px); animation: pulse 2s ease-in-out infinite; z-index: -1; }
@keyframes pulse { 50% { opacity: .35; } }
.status-rows { display: flex; flex-direction: column; gap: .375rem; }
.status-row { display: flex; justify-content: space-between; align-items: center; gap: .375rem; font-size: 14px; color: hsl(var(--muted-foreground)); }
.badge { border-radius: calc(var(--radius) - 4px); font-size: 12px; font-weight: 600; padding: .125rem .25rem; letter-spacing: .1em; text-align: center; cursor: help; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge.success { background: hsl(var(--success)); color: hsl(var(--success-foreground)); }
.badge.warning { background: hsl(var(--warning)); color: hsl(var(--warning-foreground)); }
.badge.destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.badge.info { background: hsl(var(--info)); color: hsl(var(--info-foreground)); }
.sched h3 { margin-bottom: .25rem; font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.sched-btns { display: flex; justify-content: space-between; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.sched-btns .btn { flex-grow: 1; }
.version-foot { display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: 14px; font-weight: 300; opacity: .85; }
.version-foot:hover { opacity: 1; }

/* Live-Spielerliste (PlayerlistSidebar) [Q] */
.player-sidebar { display: none; flex-direction: column; gap: 1rem; height: var(--content-vh); z-index: 10; }
@media (min-width: 1280px) { .player-sidebar { display: flex; } }
.pl-head { flex-shrink: 0; padding: 1rem; display: flex; align-items: center; gap: 1rem; }
.pl-circle { width: 4rem; height: 4rem; border-radius: 50%; background: rgb(212 212 216 / .75); display: grid; place-items: center; }
:root.dark .pl-circle { background: rgb(82 82 91 / .5); }
.pl-circle svg { width: 2.5rem; height: 2.5rem; stroke-width: 1; color: #71717a; }
:root.dark .pl-circle svg { color: #a1a1aa; }
.pl-count { font: 200 36px/1.1 'JetBrains Mono', monospace; }
.pl-count-lbl { opacity: .8; font-size: 18px; font-weight: 300; letter-spacing: .05em; }
.pl-list-card { display: flex; flex-direction: column; gap: .5rem; flex-grow: 1; overflow: hidden; min-height: 480px; }
.pl-filter { padding: .5rem .5rem 0; display: flex; gap: .5rem; position: relative; }
.pl-filter .kbd { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-25%); font-size: 12px; letter-spacing: .025em; color: hsl(var(--muted-foreground)); pointer-events: none; }
.pl-filter .clr { position: absolute; right: .75rem; top: .75rem; background: none; cursor: pointer; padding: .125rem; }
.pl-scroll { flex-grow: 1; overflow-y: auto; position: relative; }
.pl-row { width: 100%; padding: .25rem .5rem; display: flex; align-items: center; cursor: pointer; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; text-align: left; transition: background-color 75ms, color 75ms; line-height: 1.7; }
.pl-row:hover, .pl-row:focus-visible { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); outline: none; }
.pid { padding: .125rem .25rem 0; border: 1px solid var(--pid-border); border-radius: .35rem; background: var(--pid-bg); color: var(--pid-fg); font: 400 12.5px/1.5 'JetBrains Mono', monospace; letter-spacing: .05em; text-align: center; flex-shrink: 0; }
.pname { margin-left: .5rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.pl-tag { margin-left: auto; padding-left: .25rem; color: hsl(var(--warning-inline)); }
.pl-status { text-align: center; margin: .25rem; color: hsl(var(--warning-inline)); letter-spacing: .05em; font-style: italic; font-size: 12px; }
.pl-empty { text-align: center; padding: 2rem 1rem; color: hsl(var(--muted-foreground)); }
.pl-empty b { display: block; color: hsl(var(--foreground)); font-weight: 600; }
.stale { color: hsl(var(--warning-inline)); font-size: 12px; text-align: center; font-family: 'JetBrains Mono', monospace; }

/* Einschübe (sheet.tsx) [Q] */
.sheet-overlay { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .8); animation: fadeIn .3s ease-in-out; }
.sheet { position: fixed; top: 0; bottom: 0; z-index: 51; width: 100%; background: hsl(var(--background)); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .3); overflow-y: auto; animation: slideL .5s ease-in-out; }
.sheet.left { left: 0; border-right: 1px solid hsl(var(--border)); } .sheet.right { right: 0; border-left: 1px solid hsl(var(--border)); animation-name: slideR; }
@media (min-width: 480px) { .sheet { width: 75%; } }
@media (min-width: 640px) { .sheet { max-width: 24rem; } }
.sheet .x { position: absolute; right: 1rem; top: 1rem; background: none; cursor: pointer; opacity: .7; } .sheet .x:hover { opacity: 1; }
.sheet .server-sidebar, .sheet .player-sidebar { display: flex; width: 100%; padding: 1.5rem 1rem; position: static; height: 100vh; }
.sheet .player-sidebar { padding: 0; }
.sheet .pl-head { border-width: 0 0 1px; border-radius: 0; padding-right: 3rem; }
.sheet-sec { padding: 1rem; }
.sheet-sec h3 { font-size: 18px; font-weight: 600; margin-bottom: .75rem; }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sheet-grid .btn { justify-content: flex-start; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideL { from { transform: translateX(-100%); } }
@keyframes slideR { from { transform: translateX(100%); } }

/* ---------------------------------------------------------------- Seiten */
.page-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; font-size: 24px; }
.page-header svg { width: 1.5rem; height: 1.5rem; }
.page-header .sub { font-size: 14px; color: hsl(var(--muted-foreground)); margin-left: .25rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.grow { flex-grow: 1; }
.tabs { display: inline-flex; height: 2.5rem; align-items: center; justify-content: center; border-radius: calc(var(--radius) - 2px); background: hsl(var(--muted)); padding: .25rem; color: hsl(var(--muted-foreground)); flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: calc(var(--radius) - 4px); padding: .375rem .75rem; font-size: 14px; font-weight: 500; cursor: pointer; background: none; transition: all .15s; }
.tab:hover { color: hsl(var(--primary)); }
.tab[aria-selected='true'] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
.tab:disabled { opacity: .5; cursor: not-allowed; }

/* Dashboard [Q] */
.dash { display: flex; flex-direction: column; gap: 1rem; min-width: 24rem; width: 100%; }
.dash-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (min-width: 1600px) { .dash-row { grid-template-columns: repeat(8, 1fr); } }
.dcard { padding: .5rem 0; display: flex; flex-direction: column; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
@media (min-width: 768px) { .dcard { border-radius: .75rem; } }
.dcard-head { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem .5rem; color: hsl(var(--muted-foreground)); }
.dcard-head h3 { font-size: 14px; font-weight: 500; letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard-head .stamp { font: 12px 'JetBrains Mono', monospace; color: hsl(var(--warning-inline)); }
.dcard.drops { grid-column: span 3; height: 20rem; min-width: 16rem; }
.dcard.stats { grid-column: span 3; min-width: 13rem; padding: .5rem 1rem; }
.dcard.stats .dcard-head { padding: 0 0 .5rem; }
.dcard.perf { grid-column: span 3; height: 20rem; }
@media (min-width: 640px) { .dcard.drops { grid-column: span 2; } .dcard.stats { grid-column: span 1; } }
@media (min-width: 1600px) { .dcard.drops { grid-column: span 3; } .dcard.stats { grid-column: span 2; } .dcard.perf { grid-column: span 3; } }
.dcard.full { height: 28rem; padding-top: .5rem; }
.stat-line { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .375rem 0; }
.stat-line .v { font-size: 20px; color: hsl(var(--primary)); text-align: right; }
.perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.5rem; padding: .25rem 1rem; overflow: auto; }
.perf-grid .stat-line { padding: .2rem 0; border-bottom: 1px solid hsl(var(--border) / .5); }
.perf-grid .stat-line .v { font-size: 15px; font-family: 'JetBrains Mono', monospace; }
.perf-grid .stat-line .l { color: hsl(var(--muted-foreground)); font-size: 13px; }
.stat-line .l { font-size: 14px; }
.stat-line .v.warn { color: hsl(var(--warning)); } .stat-line .v.bad { color: hsl(var(--destructive)); }
.chart { flex: 1; min-height: 0; position: relative; padding: 0 .5rem; }
.chart svg { width: 100%; height: 100%; display: block; }
.chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .25rem; color: hsl(var(--muted-foreground)); padding: 1rem; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; font-size: 13px; padding: 0 1rem; }
.legend i { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; margin-right: .25rem; vertical-align: -3px; }

/* Kennzahlen und Tabellen (PageCalloutRow, Players) [Q] */
.callouts { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1rem; padding: 0 .5rem; }
@media (min-width: 480px) { .callouts { gap: 1rem; } }
@media (min-width: 768px) { .callouts { padding: 0; margin-bottom: 1.5rem; } }
@media (min-width: 1024px) { .callouts { grid-template-columns: repeat(4, 1fr); } }
.callout { padding: .5rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.callout .l { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; }
.callout .l svg { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); }
.callout .v { font-size: 24px; font-weight: 700; }
.searchbox { padding: 1rem; margin-bottom: .5rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
@media (min-width: 768px) { .searchbox { border-radius: .75rem; margin-bottom: 1rem; } }
.searchbox .row > .input { flex: 1 1 14rem; }
.searchbox select.input { width: auto; flex: 0 0 auto; min-width: 12rem; }
.table-wrap { width: 100%; overflow: auto; border: 1px solid hsl(var(--border)); min-height: 24rem; }
@media (min-width: 768px) { .table-wrap { border-radius: var(--radius); } }
table.tbl { width: 100%; caption-side: bottom; font-size: 14px; border-collapse: collapse; user-select: none; }
.tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--thead); color: hsl(var(--secondary-foreground)); font-size: 16px; font-weight: 300; letter-spacing: .05em; text-align: left; padding: .5rem 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); white-space: nowrap; }
.tbl thead th.sortable { cursor: pointer; } .tbl thead th.sortable:hover { background: #d4d4d8; } :root.dark .tbl thead th.sortable:hover { background: #52525b; }
.tbl thead th.sorted { font-weight: 500; } :root.dark .tbl thead th.sorted { background: #3f3f46; }
.tbl td { padding: .5rem 1rem; border-right: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.tbl tbody tr { cursor: pointer; } .tbl tbody tr:hover { background: hsl(var(--muted) / .5); }
.tbl tr.revoked td { opacity: .4; }
.tbl .end { text-align: center; padding: 1rem; color: hsl(var(--muted-foreground)); cursor: default; }
.act-cell { display: flex; align-items: center; gap: .5rem; width: 10.4rem; font-family: 'JetBrains Mono', monospace; }
.act-ico { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 4px; }
.act-ico svg { width: 1rem; height: 1rem; }
.act-ico.warn { color: hsl(var(--warning)); background: hsl(var(--warning-hint)); } .act-ico.ban { color: hsl(var(--destructive)); background: hsl(var(--destructive-hint)); }
.name-icons { display: inline-flex; gap: .25rem; margin-left: .5rem; vertical-align: -3px; }
.name-icons svg { height: 1.1rem; width: 1.1rem; }
.pager { display: flex; justify-content: center; align-items: center; gap: .5rem; padding: .75rem; }

/* Live Console [Q] */
.console { display: flex; flex-direction: column; height: var(--content-vh); width: 100%; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); overflow: clip; color: hsl(var(--primary)); position: relative; }
@media (min-width: 768px) { .console { border-radius: .75rem; } }
.console-head { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-bottom: 1px solid hsl(var(--border)); font: 14px 'JetBrains Mono', monospace; }
.console-head svg { width: 1rem; height: 1rem; color: #22c55e; }
.console-head .grow { flex: 1; }
.term { flex: 1; overflow-y: auto; padding: .25rem .5rem; font: 300 14px/1.1 'JetBrains Mono', monospace; letter-spacing: .8px; white-space: pre-wrap; word-break: break-all; color: #F8F8F8; background: #222326; }
:root:not(.dark) .term { background: #F0F1F4; color: #16171B; }
.term .ln { min-height: 1.1em; } .term .ln.sys { color: #FFCB6B; } .term .ln.cmd { color: #82AAFF; } .term .ln.err { color: #FF5370; }
.term mark { background: #732268; color: inherit; } .term mark.cur { background: #FF00DC; }
.console.small .term { font-size: 12px; } .console.large .term { font-size: 16px; }
.to-bottom { position: absolute; right: 1rem; bottom: 4.5rem; z-index: 10; opacity: .75; background: hsl(var(--secondary)); border-radius: 50%; width: 3rem; height: 3rem; display: grid; place-items: center; cursor: pointer; animation: pulse 2s infinite; }
.to-bottom:hover { animation: none; transform: scale(1.1); }
.console-foot { display: flex; flex-direction: column; gap: .5rem; padding: .5rem 1rem; border-top: 1px solid hsl(var(--border)); }
@media (min-width: 480px) { .console-foot { flex-direction: row; align-items: center; } }
.prompt { display: flex; align-items: center; gap: .5rem; flex: 1; }
.prompt svg { width: 1rem; height: 1rem; }
.prompt input { flex: 1; background: transparent; border: 0; height: 2rem; font-family: 'JetBrains Mono', monospace; outline: none; }
.prompt input:disabled::placeholder { color: hsl(var(--destructive)); opacity: 1; }
.cbtns { display: flex; gap: .25rem; }
.cbtn { display: flex; align-items: center; justify-content: center; gap: .375rem; padding: .5rem .375rem; border-radius: var(--radius); cursor: pointer; background: hsl(var(--secondary)); min-width: 2.5rem; }
@media (min-width: 480px) { .cbtn { background: transparent; } }
.cbtn:hover { background: hsl(var(--secondary)); } .cbtn svg { width: 1.25rem; height: 1.25rem; } .cbtn .lbl { display: none; }
@media (min-width: 1400px) { .cbtn .lbl { display: inline; } }
.cbtn:disabled { opacity: .5; pointer-events: none; }
.searchbar { position: absolute; top: 2.6rem; right: 1rem; z-index: 10; display: flex; align-items: center; gap: .25rem; padding: .25rem; background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 20px 25px -5px rgb(0 0 0 / .3); }
.searchbar input { height: 2rem; width: 12rem; }
.drawer-bg { position: absolute; inset: 0; z-index: 20; background: rgb(0 0 0 / .6); }
.drawer { position: absolute; z-index: 21; top: 0; bottom: 0; right: 0; width: 100%; max-width: 42rem; background: hsl(var(--background)); padding: 1.5rem 1rem 1rem; border-left: 1px solid hsl(var(--border)); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .3); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; overflow: auto; animation: slideR .3s ease-in-out; }
.drawer h4 { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: .5rem; }
.cmd-row { padding: .25rem .5rem; display: flex; justify-content: space-between; align-items: center; border-radius: var(--radius); background: hsl(var(--card)); cursor: pointer; margin-bottom: .25rem; font-family: 'JetBrains Mono', monospace; font-size: 13px; gap: .5rem; }
.cmd-row:hover { background: hsl(var(--muted)); }

/* Logs (Server Log, Action Log) */
.log-page { display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; }
@media (min-width: 1200px) { .log-page { grid-template-columns: 3fr 9fr; } }
.log-box { height: calc(100vh - 270px); min-height: 20rem; overflow-y: auto; padding: .5rem .75rem; font: 13px/1.6 'JetBrains Mono', monospace; }
.log-line .ts { color: #71717a; margin-right: .5rem; } .log-line .src { font-weight: 700; margin-right: .5rem; } .log-line .src.player { color: hsl(var(--accent)); cursor: pointer; }
.log-line.denied .act, .log-line.failed .act { color: hsl(var(--destructive-inline)); }
.filters label.check { display: flex; justify-content: space-between; width: 100%; padding: .25rem 0; }
.mode-live { color: hsl(var(--success-inline)); font-weight: 700; } .mode-log { color: hsl(var(--warning-inline)); font-weight: 700; }

/* Settings [Q] */
.settings { width: 100%; margin-bottom: 2.5rem; }
.scard { margin-top: 1.5rem; overflow: hidden; }
.scard-head { background: hsl(var(--muted) / .5); border-bottom: 1px solid hsl(var(--border)); padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; user-select: none; font-size: 14px; color: hsl(var(--muted-foreground)); letter-spacing: .025em; }
.scard-head .unsaved { color: hsl(var(--warning-inline)); font-style: italic; }
.scard-body { padding: 1.5rem 1rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; }
.sitem { max-width: 56rem; display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 640px) { .sitem { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1rem; align-items: start; } .sitem > .sl { grid-column: span 2; } .sitem > .sf { grid-column: span 6; } }
.sl { display: flex; flex-direction: column; font-size: 14px; font-weight: 500; line-height: 1.5rem; }
.sf { display: flex; flex-direction: column; gap: .5rem; }
.sdesc { font-size: 14px; color: hsl(var(--muted-foreground)); }
.sbtns { display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: .5rem; }
@media (min-width: 480px) { .sbtns { justify-content: flex-start; } }
.radio-list { display: flex; flex-direction: column; gap: .5rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 999px; background: hsl(var(--secondary)); font: 13px 'JetBrains Mono', monospace; }
.chip button { background: none; cursor: pointer; opacity: .7; }
.na { font-size: 13px; padding: .5rem .75rem; border-radius: var(--radius); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

/* Dialoge (dialog.tsx) [Q] */
.dlg-overlay { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .8); animation: fadeIn .2s; }
.dlg { position: fixed; left: 50%; top: 50%; z-index: 51; transform: translate(-50%, -50%); width: 100%; max-width: 32rem; max-height: 100vh; overflow: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .3); animation: dlgIn .2s ease-out; }
@media (min-width: 640px) { .dlg { border-radius: var(--radius); } }
.dlg.wide { max-width: 42rem; }
@keyframes dlgIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.95); } }
.dlg h2 { font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: -.025em; }
.dlg .x { position: absolute; right: 1rem; top: 1rem; width: 1.5rem; height: 1.5rem; background: none; cursor: pointer; opacity: .7; }
.dlg .x:hover { opacity: 1; }
.dlg-foot { display: flex; flex-direction: column-reverse; gap: .5rem; }
@media (min-width: 640px) { .dlg-foot { flex-direction: row; justify-content: flex-end; } }
.suggest { display: flex; gap: .5rem; flex-wrap: wrap; }
.tzwarn { color: hsl(var(--destructive)); font-size: 13px; }

/* Spielerakte (PlayerModal) [Q] */
.pm { max-width: 42rem; padding: 0; gap: .25rem; height: 100%; }
@media (min-width: 640px) { .pm { height: auto; gap: 1rem; } }
.pm-head { padding: .75rem 1rem; border-bottom: 1px solid hsl(var(--border)); }
.pm-head h2 { letter-spacing: .025em; line-height: 1.75rem; margin-right: 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pm-head .on { color: hsl(var(--success-inline)); font-family: 'JetBrains Mono', monospace; margin-right: .5rem; }
.pm-head .off { color: hsl(var(--destructive-inline)); font-family: 'JetBrains Mono', monospace; margin-right: .5rem; }
.pm-body { display: flex; flex-direction: column; height: 100%; }
@media (min-width: 768px) { .pm-body { flex-direction: row; padding: 0 1rem; } }
.pm-tabs { display: flex; flex-direction: row; gap: .25rem; background: hsl(var(--muted)); padding: .25rem; margin: 0 .5rem; border-radius: calc(var(--radius) - 2px); }
@media (min-width: 768px) { .pm-tabs { flex-direction: column; background: transparent; padding: 0; margin: 0; min-width: 9rem; } }
.pm-tab { width: 100%; justify-content: center; height: 1.75rem; border-radius: calc(var(--radius) - 4px); padding: 0 .5rem; font-size: 14px; letter-spacing: .05em; background: transparent; display: flex; align-items: center; cursor: pointer; color: hsl(var(--foreground)); }
@media (min-width: 768px) { .pm-tab { justify-content: flex-start; height: 2.5rem; font-size: 16px; } }
.pm-tab svg { width: 1.25rem; height: 1.25rem; margin-right: .5rem; display: none; }
@media (min-width: 480px) { .pm-tab svg { display: block; } }
.pm-tab:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.pm-tab[aria-selected='true'] { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.pm-tab.ban:hover { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.pm-content { min-height: 16rem; width: 100%; padding: .75rem .5rem 0; max-height: calc(100vh - 3.125rem - 4rem - 5rem); overflow-y: auto; }
@media (min-width: 768px) { .pm-content { max-height: 50vh; padding: 0 1rem; } }
.info-row { padding: .125rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: center; }
.info-row dt { font-size: 14px; font-weight: 500; line-height: 1.5rem; color: hsl(var(--muted-foreground)); }
.info-row dd { margin: 0; grid-column: span 2; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sbadge { font-size: 12px; padding: .1rem .5rem; border-radius: 4px; background: hsl(var(--secondary)); }
.sbadge.ban { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .sbadge.warn { background: hsl(var(--warning)); color: hsl(var(--warning-foreground)); }
.banbar { border: 1px solid hsl(var(--warning) / .7); background: hsl(var(--warning-hint)); padding: .5rem .75rem; border-radius: var(--radius); margin-bottom: .75rem; font-size: 14px; }
.notes label { display: block; font-size: 14px; font-weight: 500; margin: 1rem 0 .25rem; }
.notes .hint { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: .25rem; }
.hist-item { padding-left: .5rem; border-left: 4px solid transparent; border-radius: 0 4px 4px 0; background: hsl(var(--muted) / .3); cursor: pointer; margin-bottom: .5rem; padding-right: .5rem; }
.hist-item:hover { background: hsl(var(--muted)); }
.hist-item.ban { border-left-color: hsl(var(--destructive)); } .hist-item.warn { border-left-color: hsl(var(--warning)); } .hist-item.revoked { border-left-color: transparent; }
.hist-item .top { display: flex; justify-content: space-between; gap: .5rem; } .hist-item .meta { text-align: right; font-size: 10px; } .hist-item .foot { font-size: 12px; color: hsl(var(--muted-foreground)); }
.ids-list { position: relative; border: 1px solid hsl(var(--border)); border-radius: 4px; font: 12px/1.5rem 'JetBrains Mono', monospace; letter-spacing: .05em; color: hsl(var(--muted-foreground)); }
.ids-list div { padding: 0 .5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid hsl(var(--border) / .5); }
.ids-list div:last-child { border-bottom: 0; }
.ids-list b { color: hsl(var(--foreground)); font-weight: 600; }
.ids-list button { background: none; cursor: pointer; opacity: 0; } .ids-list div:hover button { opacity: 1; }
.pm-foot { gap: .5rem; padding: .5rem; border-top: 1px solid hsl(var(--border)); display: grid; grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .pm-foot { display: flex; } .pm-foot .give { margin-right: auto; } }
@media (min-width: 768px) { .pm-foot { padding: 1rem; } }
.banform { display: flex; flex-direction: column; gap: .75rem; }
.banform .reason-row { display: flex; gap: .5rem; }
.tpl-btn { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); background: rgb(0 0 0 / .2); display: grid; place-items: center; cursor: pointer; position: relative; }
.tpl-btn:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.dur-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.dur-row select { flex: 1 1 12rem; } .dur-row .num { width: 6rem; flex: 0 0 auto; } .dur-row .unit { width: 9rem; flex: 0 0 auto; }

/* Toasts (TxToaster) [Q] */
.toasts { position: fixed; top: var(--content-offset); left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: 36rem; padding: 0 .5rem; pointer-events: none; }
.toast { pointer-events: auto; position: relative; padding: .75rem 2.5rem .75rem .75rem; border-radius: .75rem; border: 1px solid; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .25); background: hsl(var(--card)); font-size: 14px; animation: toastIn .2s ease-out; display: flex; gap: .5rem; align-items: flex-start; }
@media (min-width: 640px) { .toast { min-width: 28rem; width: auto; } }
.toast.info { border-color: hsl(var(--info) / .7); background: hsl(var(--info-hint)); } .toast.success { border-color: hsl(var(--success) / .7); background: hsl(var(--success-hint)); } .toast.warning { border-color: hsl(var(--warning) / .7); background: hsl(var(--warning-hint)); } .toast.error { border-color: hsl(var(--destructive) / .7); background: hsl(var(--destructive-hint)); }
.toast .x { position: absolute; right: .5rem; top: .5rem; background: none; cursor: pointer; opacity: .6; }
.toast .spin { animation: spin 1s linear infinite; }
@keyframes toastIn { from { opacity: 0; transform: scale(.9); } }
@keyframes spin { to { transform: rotate(360deg); } }
.warnbar { position: fixed; top: var(--navbar-vh); left: 50%; transform: translateX(-50%); z-index: 40; width: 100%; min-height: 2.25rem; padding: .5rem 1rem; background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); text-align: center; font-size: 14px; box-shadow: 0 20px 25px -5px rgb(0 0 0 / .3); }
@media (min-width: 640px) { .warnbar { width: 28rem; border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px); } }

/* Tooltip */
.tip { position: fixed; z-index: 70; padding: .375rem .75rem; font-size: 13px; background: hsl(var(--popover)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); box-shadow: 0 4px 6px -1px rgb(0 0 0 / .2); pointer-events: none; max-width: 18rem; white-space: pre-line; }
.tip.danger { color: hsl(var(--destructive-inline)); text-align: center; }

/* Login (AuthShell) [Q] */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 20px 20px; }
.auth-col { width: 100%; min-width: 20rem; margin: 1rem 0; }
@media (min-width: 480px) { .auth-col { max-width: 25rem; margin: 1rem; } }
.auth-logo { display: flex; justify-content: center; }
.auth-logo .brand-mark .logo { width: 3.5rem; height: 3.5rem; font-size: 18px; } .auth-logo .wordmark { font-size: 22px; }
.auth-card { min-height: 20rem; margin-top: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: hsl(var(--card) / .4); padding: 1.5rem; border: 1px solid hsl(var(--border)); }
@media (min-width: 480px) { .auth-card { margin-top: 2rem; border-radius: var(--radius); } }
.auth-card h2 { font-size: 20px; font-weight: 600; text-align: center; } .auth-card p { color: hsl(var(--muted-foreground)); text-align: center; }
.steam-btn { width: 100%; }
.auth-msg { padding: .5rem .75rem; border-radius: var(--radius); background: hsl(var(--destructive-hint)); border: 1px solid hsl(var(--destructive) / .7); font-size: 14px; text-align: center; }
.auth-foot { margin-top: 1rem; text-align: center; font-size: 13px; color: hsl(var(--muted-foreground)); }
.auth-lang { display: flex; justify-content: center; gap: .25rem; margin-top: .75rem; flex-wrap: wrap; }

/* Seitenkarten allgemein */
.pcard { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
@media (min-width: 768px) { .pcard { border-radius: .75rem; } }
.pcard-head { padding: .75rem 1rem; border-bottom: 1px solid hsl(var(--border)); display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.pcard-body { padding: 1rem; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; }
@media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .two-col.xl { grid-template-columns: 1fr 1fr; } }
.kv { display: grid; grid-template-columns: 10rem 1fr; gap: .25rem 1rem; font-size: 14px; }
.kv dt { color: hsl(var(--muted-foreground)); } .kv dd { margin: 0; font-family: 'JetBrains Mono', monospace; word-break: break-all; }
.empty-state { text-align: center; padding: 2rem 1rem; color: hsl(var(--muted-foreground)); }
.perm-grid { display: grid; grid-template-columns: 1fr; gap: .25rem 1rem; max-height: 22rem; overflow-y: auto; padding-right: .5rem; }
@media (min-width: 640px) { .perm-grid { grid-template-columns: 1fr 1fr; } }
.perm-grid .grp { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); margin-top: .5rem; letter-spacing: .05em; }
.perm-grid label.danger { color: hsl(var(--destructive-inline)); }
.cfg-editor { width: 100%; height: calc(100vh - 250px); min-height: 18rem; font: 15px/1.5 'JetBrains Mono', monospace; padding: .75rem; background: #222326; color: #F8F8F8; border-radius: var(--radius); border: 1px solid hsl(var(--border)); resize: vertical; tab-size: 4; }
:root:not(.dark) .cfg-editor { background: #F0F1F4; color: #16171B; }
.diff { font: 12px/1.4 'JetBrains Mono', monospace; max-height: 50vh; overflow: auto; white-space: pre; border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: .5rem; }
.diff .add { background: hsl(var(--success-hint)); color: hsl(var(--success-inline)); } .diff .del { background: hsl(var(--destructive-hint)); color: hsl(var(--destructive-inline)); }
.res-card { margin-bottom: .75rem; }
.res-card summary { cursor: pointer; padding: .75rem 1rem; font-weight: 600; }
.res-row { display: flex; justify-content: space-between; gap: .5rem; padding: .375rem 1rem; border-top: 1px solid hsl(var(--border)); font-size: 14px; }
.ingame .header, .ingame .server-sidebar, .ingame .player-sidebar, .ingame .navbtn { display: none !important; }
.ingame .shell { padding: .5rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.act-cell svg { width: 1rem; height: 1rem; flex-shrink: 0; }
/* Schmale Fenster: Seitentitel nicht am Rand kleben lassen; Zähler im Spieler-Knopf mit Abstand */
@media (max-width: 767.98px) { .page-header { padding-left: .5rem; } .row:has(> .page-header) { padding-right: .5rem; } }
.navbtn .lbl .mono { margin-left: .35rem; }