* {padding: 2px;}
:root{
  --bg:#0b0f14;
  --card:#0f1720;
  --muted:#94a3b8;
  --accent:#1a73e8;
  --glass: rgba(255,255,255,0.03);
  --success: #22c55e;
  --danger: #ef4444;
  --radius: 12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, rgba(10,12,16,1) 0%, rgba(7,9,11,1) 100%);
  color:#e6eef6;
  padding:24px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.container{ width:100%; max-width:980px; }

/* Header */
.header{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:18px;
}
.brand{ display:flex; gap:12px; align-items:center; min-width:0; }
.logo{ width:48px;height:48px;border-radius:10px; background:linear-gradient(135deg,var(--accent),#6dd4ff); display:flex;align-items:center;justify-content:center;font-weight:700;color:#021223; font-size:20px; flex-shrink:0; box-shadow: 0 6px 20px rgba(26,115,232,0.15); }
.brand-info h1{ margin:0; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-info .small{ font-size:13px; color:var(--muted); }

/* Right area: hamburger + reload */
.user-bar{
  display:flex;
  align-items:center;
  gap:8px;
}
/* Hamburger */
.menu-toggle{
  background:var(--glass);
  border:1px solid rgba(255,255,255,0.04);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:18px;
}
.menu-toggle:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.6); }

/* Reload button */
.btn-accent{
  background: linear-gradient(90deg,var(--accent),#6dd4ff);
  color:#021223; font-weight:600; border:0; padding:8px 12px; border-radius:10px; cursor:pointer;
}

/* General buttons */
.btn{
  background:var(--glass); border:1px solid rgba(255,255,255,0.04); padding:4px 6px; border-radius:10px; color:inherit; cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.5); }

/* Account menu panel */
.account-menu{
  position: absolute;
  top:62px; /* below header */
  right:24px;
  width:240px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  padding:12px;
  border-radius:10px;
  box-shadow: 0 12px 30px rgba(2,6,10,0.6);
  z-index:50;
}
.hidden{ display:none; }
.account-menu .menu-header{ font-weight:600; margin-bottom:8px; }
.account-menu .menu-content .small{ font-size:14px; }

/* Grid */
.grid{ display:grid; grid-template-columns: 1fr 360px; gap:18px; align-items:start; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: 5px 7px; /* weniger Innenabstand */
  margin: 6px auto;   /* falls nicht schon global gesetzt */
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(2,6,10,0.4); /* etwas schwächerer Schatten */
  border: 1px solid rgba(255,255,255,0.05);
min-width:50%;
}

.input, textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background:transparent; color:inherit; font-size:14px; }
textarea{ min-height:120px; resize:vertical; }
.small{ font-size:13px; color:var(--muted); margin-top:6px; }
.user-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.user-item{ display:flex; justify-content:space-between; align-items:center; padding:8px; border-radius:8px; background: rgba(255,255,255,0.01) }
.tag{ font-size:12px; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,0.02); color:var(--muted) }
.event{ margin-bottom:12px; padding:12px; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); }
.flash { padding:10px 12px; border-radius:10px; margin-bottom:12px; }
.flash.success{ background: rgba(34,197,94,0.12); color: var(--success); border: 1px solid rgba(34,197,94,0.12) }
.flash.error{ background: rgba(239,68,68,0.08); color: var(--danger); border: 1px solid rgba(239,68,68,0.08) }

.footer { margin-top:16px; color:var(--muted); font-size:13px; text-align:center; }

/* Chatbox specifics */
#chatbox{ background: rgba(255,255,255,0.02); padding:12px; border-radius:10px; }

/* Responsive */
@media (max-width: 900px) {
  .grid{ grid-template-columns: 1fr; }
  .account-menu{ right:12px; left:12px; top:70px; width:auto; }
  .user-bar{ gap:6px; }
.btn{padding: 1px;}
}
.floating-btn {
  position: fixed;      /* Bleibt beim Scrollen sichtbar */
  bottom: 24px;         /* Abstand von unten */
  right: 24px;          /* Abstand von rechts */
  width: 56px;          /* Größe des Buttons */
  height: 56px;
  background: linear-gradient(90deg, #1a73e8, #6dd4ff);
  color: #021223;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  line-height: 56px;    /* Vertikal zentrieren */
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  text-decoration: none;
  z-index: 1000;        /* Immer oben */
  transition: transform 0.2s;
}
#infos {
  /* Serverinfo-Button */
  text-decoration: none;
  color: inherit;        /* behält die Textfarbe des Eltern-Elements */
  cursor: pointer;       /* zeigt beim Hover den "Klick"-Zeiger */
}
#infos:hover {
  text-decoration: underline; /* optional: Unterstreichung beim Hover */
}
.floating-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.menu-content .btn {
  display: inline-block;
  margin: 5px;
}
@media (max-width: 768px) {
  .menu-content .btn {
    display: block;
    width: 100%;
  }
}
.account-menu {
  position: absolute;
  top: 60px; /* unter Header */
  right: 10px;
  background: #222;
  color: #fff;
  border-radius: 8px;
  padding: 10px;
  min-width: 200px;
  z-index: 100;
}
.hidden {
  display: none;
}
.account-toggle button {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
/* Desktop-Optimierung */
@media (min-width: 1024px) {
  .container {
    max-width: 1280px;
    padding: 32px;
  }

  .grid {
    grid-template-columns: 2fr 1fr; /* Besseres Verhältnis */
    gap: 24px;
  }

  .card {
    padding: 16px 20px;
    margin: 12px auto;
  }

  .header {
    align-items: center;
  }

  .brand-info h1 {
    font-size: 20px;
  }

  .account-menu {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    border: 1px solid rgba(255,255,255,0.08);
    color: #e6eef6;
    top: 64px;
    right: 24px;
  }

  .footer {
    margin-top: 32px;
    font-size: 14px;
  }
}