/* A3.1 — Readability + Faceit-like flat panels
   ------------------------------------------------
   CSS-first rework to make the UI feel Faceit-esque:
   - flatter surfaces (less glass/blur/glow)
   - higher contrast borders
   - readable buttons + tables
   - tighter typography + spacing
*/

:root{
  --bg: #0b0d12;
  --panel: #12151b;
  --panel-2: #0f1217;

  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.16);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --muted-2: rgba(255,255,255,.52);

  /* Faceit-ish accent */
  --neon: #ff5500;
  --neon-rgb: 255,85,0;

  /* Tighter radii */
  --hud-radius: 14px;
  --hud-radius-sm: 10px;

  /* Shadows (subtle) */
  --shadow-tight: 0 10px 24px rgba(0,0,0,.45);
  --shadow-soft: 0 16px 40px rgba(0,0,0,.55);
  --shadow: 0 24px 70px rgba(0,0,0,.70);
  --shadow-glow: none;
  --shadow-glow-strong: none;
}

html, body{background: var(--bg)}

/* Remove old glow/grid layers for readability */
body::before,
body::after{display:none !important}

body{
  background: radial-gradient(900px 600px at 12% 0%, rgba(var(--neon-rgb), .08), transparent 55%), var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

/* Shell */
.container{max-width: 1680px; padding: 14px 18px 36px; gap: 16px}
.main{padding: 0;}

/* Topbar + Sidebar — flat surfaces */
.topbar{
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-tight) !important;
  backdrop-filter: none !important;
}

.sidebar{
  background: var(--panel-2) !important;
  border-color: var(--border) !important;
  backdrop-filter: none !important;
}

/* Nav links — clearer hit targets */
.nav a{
  border-radius: 10px;
  color: var(--muted);
  border: 1px solid transparent;
}
.nav a:hover{
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-color: rgba(255,255,255,.08);
}
.nav a.active{
  background: rgba(var(--neon-rgb), .12);
  border-color: rgba(var(--neon-rgb), .38);
  color: #fff;
}

/* Cards — no glass, no gradients */
.card, .hud-card,
.fc-kpi{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-tight) !important;
}
.card::before, .card::after,
.hud-card::before, .hud-card::after{display:none !important}

/* Buttons — readable */
.btn{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--border-strong) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
  transform: none !important;
}

.btn.primary{
  background: rgb(var(--neon-rgb)) !important;
  border-color: rgb(var(--neon-rgb)) !important;
  color: #101114 !important;
  font-weight: 700;
}
.btn.primary:hover{filter: brightness(1.05) !important}

/* Inputs */
input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], select, textarea{
  background: var(--panel-2) !important;
  border: 1px solid var(--border-strong) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
input::placeholder, textarea::placeholder{color: rgba(255,255,255,.45) !important}

/* Tables — more readable */
table{width:100%; border-collapse: separate; border-spacing: 0}

thead th{
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--border);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

tbody td{
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
}

tbody tr:nth-child(even){background: rgba(255,255,255,.02)}

tbody tr:hover{background: rgba(255,255,255,.05)}

/* Pills / badges */
.pill, .badge, .tag{
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* Mobile scrim contrast */
.scrim{background: rgba(0,0,0,.70) !important}

/* Focus */
:focus-visible{ outline: 2px solid rgba(var(--neon-rgb), .65); outline-offset: 2px; }
    :root {
      --bg-dark: #0d0d0f;
      --bg-main: #111115;
      --bg-card: #16161a;
      --bg-elevated: #1c1c21;
      --bg-hover: #222228;
      --border: #2a2a32;
      --border-light: #3a3a44;
      --text: #ffffff;
      --text-secondary: #a0a0a8;
      --text-muted: #666670;
      --accent: #ff5500;
      --accent-hover: #ff6b1f;
      --success: #00d26a;
      --success-bg: rgba(0, 210, 106, 0.12);
      --warning: #ffaa00;
      --warning-bg: rgba(255, 170, 0, 0.12);
      --danger: #ff4757;
      --danger-bg: rgba(255, 71, 87, 0.12);
      --ct: #5fa5d9;
      --t: #dea945;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-dark);
      color: var(--text);
      min-height: 100vh;
      line-height: 1.5;
    }

    /* NAVBAR */
    .topnav {
      background: var(--bg-main);
      border-bottom: 1px solid var(--border);
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 24px;
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .topnav-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--text);
    }

    .topnav-logo {
      width: 10px;
      height: 10px;
      background: var(--accent);
    }

    .topnav-title {
      font-weight: 800;
      font-size: 14px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .topnav-links {
      display: flex;
      align-items: center;
      margin-left: 40px;
      gap: 8px;
    }

    .topnav-link {
      padding: 8px 16px;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      border-bottom: 2px solid transparent;
    }

    .topnav-link:hover { color: var(--text); }
    .topnav-link.active { color: var(--text); border-bottom-color: var(--accent); }

    .topnav-spacer { flex: 1; }

    .topnav-avatar {
      width: 36px;
      height: 36px;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      overflow: hidden;
    }

    .topnav-avatar img { width: 100%; height: 100%; object-fit: cover; }

    /* MAIN - kompatibel mit Sidebar-Layout */
    .main {
      flex: 1;
      min-width: 0;
      padding: 24px;
    }
    
    .main-inner {
      max-width: 1400px;
      margin: 0 auto;
    }

    /* HERO */
    .hero {
      background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-main) 100%);
      border: 1px solid var(--border);
      padding: 32px;
      margin-bottom: 24px;
      position: relative;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--accent), transparent);
    }

    .hero-inner {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 32px;
    }

    @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } }

    .hero-kicker {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 8px;
    }

    .hero-h1 {
      font-size: 32px;
      font-weight: 900;
      margin-bottom: 8px;
    }

    .hero-sub { color: var(--text-secondary); font-size: 14px; }

    .hero-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

    /* FOCUS CARD */
    .focus-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    .focus-name { font-weight: 700; font-size: 14px; }
    .focus-sub { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }

    .focus-right { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

    /* STATUS BOX */
    .hero-right {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      padding: 20px;
    }

    .focus-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .focus-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .focus-hint { font-size: 11px; color: var(--text-muted); }

    /* PILL */
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      font-size: 12px;
      font-weight: 600;
    }

    .pill i {
      width: 8px;
      height: 8px;
      background: var(--success);
      box-shadow: 0 0 6px var(--success);
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .pill.bad i { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
    .pill.warn i { background: var(--warning); box-shadow: 0 0 6px var(--warning); }

    .subhint { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

    /* SELECT */
    .select {
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 10px 32px 10px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a0a0a8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
    }

    .select:hover { border-color: var(--border-light); }
    .select:focus { outline: none; border-color: var(--accent); }

    /* BUTTONS */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 24px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: 1px solid var(--border);
      background: var(--bg-elevated);
      color: var(--text);
      cursor: pointer;
      transition: all 0.15s;
      text-decoration: none;
    }

    .btn:hover { background: var(--bg-hover); border-color: var(--border-light); }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }

    .btn.primary { background: var(--accent); border-color: var(--accent); color: #000; }
    .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
    .btn.ct { background: var(--ct); border-color: var(--ct); color: #000; }
    .btn.t { background: var(--t); border-color: var(--t); color: #000; }

    /* BADGE */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text-secondary);
    }

    .badge.ok { background: var(--success-bg); border-color: var(--success); color: var(--success); }
    .badge.warn { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
    .badge.bad { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

    /* GRID */
    .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
    @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

    .row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
    @media (max-width: 900px) { .row2 { grid-template-columns: 1fr; } }

    /* CARDS */
    .card {
      background: var(--bg-card);
      border: 1px solid var(--border);
    }

    .card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }

    .card-head h2 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
    .badges { display: flex; gap: 8px; }

    /* TABS */
    .room-tabs { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }

    /* TIMELINE */
    .tl { display: flex; gap: 8px; flex-wrap: wrap; }

    .tl-step {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .tl-step .dot { width: 8px; height: 8px; background: var(--text-muted); }
    .tl-step.done .dot { background: var(--success); box-shadow: 0 0 6px var(--success); }
    .tl-step.current { border-color: var(--accent); background: rgba(255, 85, 0, 0.08); }
    .tl-step.current .dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
    .tl-step.failed { border-color: var(--danger); background: var(--danger-bg); }
    .tl-step.failed .dot { background: var(--danger); }
    .tl-step .tl-meta { font-weight: 600; color: var(--text-muted); font-size: 11px; }

    /* TEAM BOX */
    .teambox {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      padding: 16px;
    }

    .t-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }

    .t-name { font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }

    .list { display: grid; gap: 8px; }

    .p {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: var(--bg-card);
      border: 1px solid var(--border);
    }

    .pl { display: flex; align-items: center; gap: 12px; min-width: 0; }

    .ava {
      width: 32px; height: 32px;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      overflow: hidden;
      flex-shrink: 0;
    }

    .ava img { width: 100%; height: 100%; object-fit: cover; }

    .nick { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .tags { display: flex; gap: 6px; flex-wrap: wrap; }

    .tag {
      padding: 4px 8px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      background: var(--bg-hover);
      border: 1px solid var(--border);
    }

    .tag.ok { background: var(--success-bg); border-color: var(--success); color: var(--success); }
    .tag.bad { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
    .tag.warn { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
    .tag.neutral { background: var(--bg-hover); border-color: var(--border); }

    /* VETO */
    .veto-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 10px;
      margin-top: 16px;
    }

    .map-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      padding: 16px 12px;
      text-align: center;
      cursor: pointer;
      transition: all 0.15s;
    }

    .map-card:hover { border-color: var(--accent); background: rgba(255, 85, 0, 0.08); }
    .map-card.banned { opacity: 0.4; pointer-events: none; text-decoration: line-through; }
    .map-name { font-weight: 700; font-size: 13px; text-transform: uppercase; }
    .map-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

    .side-choice { display: flex; gap: 12px; margin-top: 16px; }

    /* FEED */
    .feed {
      height: 400px;
      overflow-y: auto;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      padding: 12px;
    }

    .msg {
      padding: 12px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      margin-bottom: 8px;
    }

    .msg:last-child { margin-bottom: 0; }
    .msg-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

    .sev {
      padding: 4px 8px;
      font-size: 10px;
      font-weight: 700;
      background: var(--bg-hover);
      border: 1px solid var(--border);
    }

    .sev.s2 { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
    .sev.s3 { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

    /* CONNECT */
    .cmd { display: flex; gap: 10px; flex-wrap: wrap; }

    .cmd pre {
      margin: 0;
      padding: 12px 16px;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      color: var(--text);
      font-family: 'Consolas', 'Monaco', monospace;
      max-width: 100%;
      overflow: auto;
    }

    /* OVERLAY */
    .mf-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: 24px;
    }

    .mf-modal {
      width: 100%;
      max-width: 560px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    }

    .mf-modal::before {
      content: '';
      display: block;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--warning));
    }

    .mf-title { font-size: 28px; font-weight: 900; padding: 32px 32px 0; }
    .mf-sub { color: var(--text-secondary); font-size: 14px; padding: 8px 32px 0; }
    .mf-row { display: flex; gap: 12px; flex-wrap: wrap; padding: 16px 32px; }
    .mf-actions { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 32px 24px; }

    .mf-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 32px;
      background: var(--bg-elevated);
      border-top: 1px solid var(--border);
    }

    .mf-sound { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }

    .mf-loader {
      display: inline-block;
      width: 14px; height: 14px;
      border: 2px solid rgba(255,255,255,0.2);
      border-top-color: var(--text);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* UTILITIES */
    .hidden { display: none !important; }
    .muted { color: var(--text-muted); }
    .mono { font-family: 'Consolas', 'Monaco', monospace; }
    .empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }

    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg-dark); }
    ::-webkit-scrollbar-thumb { background: var(--border); }

    .tabpane { margin-top: 16px; }

    /* QUEUE LAYOUT */
    .queue-layout {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 20px;
    }
    @media (max-width: 1100px) {
      .queue-layout { grid-template-columns: 1fr; }
      .queue-right { order: -1; }
    }

    .queue-left, .queue-right {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* FRIENDS */
    .friend-search { margin-bottom: 16px; }
    .friend-search .input {
      width: 100%;
      padding: 10px 14px;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 14px;
    }
    .friend-search .input:focus {
      outline: none;
      border-color: var(--accent);
    }

    .friends-list {
      max-height: 400px;
      overflow-y: auto;
    }

    .friends-group { margin-bottom: 16px; }
    .friends-group-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-muted);
      margin-bottom: 8px;
      padding: 0 4px;
    }

    .friend-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      margin-bottom: 6px;
      transition: background 0.15s;
    }
    .friend-row:hover {
      background: var(--bg-hover);
    }
    .friend-row.online {
      border-left: 2px solid var(--success);
    }
    .friend-row.offline {
      opacity: 0.7;
    }
    .friend-row.pending {
      border-left: 2px solid var(--warning);
    }

    .friend-avatar {
      width: 36px;
      height: 36px;
      object-fit: cover;
    }

    .friend-info { flex: 1; min-width: 0; }
    .friend-name {
      font-weight: 600;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .friend-status {
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .friend-actions {
      display: flex;
      gap: 6px;
    }

    .status-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .status-dot.online { background: var(--success); }
    .status-dot.offline { background: var(--text-muted); }

    .pending-section { margin-bottom: 16px; }
    .pending-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--warning);
      margin-bottom: 8px;
    }

    /* PARTY */
    .party-empty {
      text-align: center;
      padding: 24px;
    }
    .party-empty-text {
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .party-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .party-title {
      font-weight: 700;
      font-size: 16px;
    }
    .party-meta {
      font-size: 12px;
      color: var(--text-muted);
    }

    .party-members { margin-bottom: 16px; }

    .party-member {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      margin-bottom: 6px;
    }
    .party-member.leader {
      border-left: 2px solid var(--accent);
    }
    .party-member.invited {
      opacity: 0.6;
    }

    .party-avatar {
      width: 40px;
      height: 40px;
      object-fit: cover;
    }

    .party-member-info { flex: 1; }
    .party-member-name {
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .party-member-status {
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .crown { font-size: 14px; }

    .party-invited-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-muted);
      margin: 12px 0 8px;
    }

    .party-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .party-invites-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--warning);
      margin-bottom: 8px;
    }

    .party-invite {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: var(--bg-card);
      border: 1px solid var(--warning);
      margin-bottom: 8px;
    }
    .party-invite-info { flex: 1; }
    .party-invite-leader { font-weight: 600; }
    .party-invite-meta { font-size: 12px; color: var(--text-muted); }
    .party-invite-actions { display: flex; gap: 6px; }

    /* Small buttons */
    .btn-sm {
      padding: 6px 12px;
      font-size: 12px;
    }
    .btn-ghost {
      background: transparent;
      border-color: transparent;
      color: var(--text-muted);
    }
    .btn-ghost:hover {
      color: var(--danger);
      background: var(--danger-bg);
    }