From f7f43aa52a1f7e271c81a7c839dc0d065d148939 Mon Sep 17 00:00:00 2001
From: Pepe44DEV <pascal.priessnitz@synqtec.de>
Date: Wed, 1 Jul 2026 03:04:24 +0200
Subject: [PATCH] Redesign dashboard UI: modern glassmorphism, new brand
 identity, responsive layout, refined color palette

---
 src/web/routes/dashboard.ts | 292 ++++++++++++++++++++++--------------
 1 file changed, 179 insertions(+), 113 deletions(-)

diff --git a/src/web/routes/dashboard.ts b/src/web/routes/dashboard.ts
index c59b599..2388d1d 100644
--- a/src/web/routes/dashboard.ts
+++ b/src/web/routes/dashboard.ts
@@ -41,7 +41,13 @@ router.get('/', (req, res) => {
   //  - Grenzwerte, Whitelist/Badwords und Log-Ziel in ein Formular ueberfuehren.
   const sidebar = `
     <aside class="sidebar">
-      <div class="brand">Papo Control</div>
+      <div class="brand">
+        <div class="brand-mark">P</div>
+        <div class="brand-copy">
+          <strong>Papo Control</strong>
+          <span class="brand-sub">Guild management</span>
+        </div>
+      </div>
       <div class="nav">
         <a class="active" href="#overview" data-target="overview"><span class="icon">🏠</span> Uebersicht</a>
         <a href="#tickets" data-target="tickets"><span class="icon">🎫</span> Ticketsystem</a>
@@ -57,7 +63,10 @@ router.get('/', (req, res) => {
         <a href="#events" data-target="events" class="events-link"><span class="icon">📅</span> Events</a>
         <a href="#admin" data-target="admin" class="admin-link hidden"><span class="icon">🛠️</span> Admin</a>
       </div>
-<div class="muted">Angemeldet als <span id="userInfo"></span></div>
+      <div class="sidebar-user">
+        <div class="sidebar-user-label">Angemeldet als</div>
+        <div class="sidebar-user-name" id="userInfo"></div>
+      </div>
       <button id="logoutBtn" class="logout">Logout</button>
     </aside>
   `;
@@ -71,27 +80,38 @@ router.get('/', (req, res) => {
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Papo Dashboard - Auswahl</title>
       <style>
-        :root { --bg:#080c15; --card:rgba(18,20,28,0.65); --text:#f8fafc; --accent:#f97316; --accent-strong:#ff9b3d; --muted:#aab4c5; --border:rgba(255,255,255,0.08); }
-        body { margin:0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background:radial-gradient(circle at 14% 18%, rgba(249,115,22,0.12), transparent 32%), radial-gradient(circle at 80% -6%, rgba(255,153,73,0.12), transparent 30%), linear-gradient(135deg, #070a11 0%, #0b0f18 50%, #080c15 100%); color:var(--text); min-height:100vh; }
-        .layout { display:flex; width:100%; min-height:100vh; background:radial-gradient(circle at 50% 24%, rgba(255,153,73,0.06), transparent 30%); }
-        .sidebar { width:240px; background:linear-gradient(180deg, rgba(12,14,22,0.85), rgba(10,12,18,0.78)); border-right:1px solid var(--border); padding:24px 20px; box-sizing:border-box; display:flex; flex-direction:column; gap:18px; backdrop-filter:blur(14px); box-shadow:8px 0 32px rgba(0,0,0,0.45); }
-        .brand { font-size:20px; font-weight:800; letter-spacing:0.6px; }
+        @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
+        :root { --text:#f8f3ed; --muted:#b4ad9f; --border:rgba(255,255,255,0.08); }
+        * { box-sizing:border-box; }
+        body { margin:0; font-family:'Sora', 'Segoe UI', sans-serif; background:radial-gradient(circle at 14% 18%, rgba(249,115,22,0.16), transparent 28%), radial-gradient(circle at 82% 4%, rgba(255,176,102,0.12), transparent 28%), linear-gradient(135deg, #05070d 0%, #0a0f18 45%, #070b12 100%); color:var(--text); min-height:100vh; }
+        .layout { display:flex; width:100%; min-height:100vh; }
+        .sidebar { width:270px; padding:28px 18px 20px; display:flex; flex-direction:column; gap:18px; background:linear-gradient(180deg, rgba(8,11,19,0.95), rgba(8,11,19,0.86)); border-right:1px solid rgba(255,255,255,0.05); backdrop-filter:blur(18px); box-shadow:18px 0 48px rgba(0,0,0,0.34); }
+        .brand { display:flex; align-items:center; gap:14px; padding:4px 8px 14px; }
+        .brand-mark { width:42px; height:42px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:24px; color:#1c1207; background:linear-gradient(145deg, #ffbc7a, #f97316 62%, #c2410c); box-shadow:0 14px 28px rgba(249,115,22,0.32); }
+        .brand-copy { display:flex; flex-direction:column; gap:3px; }
+        .brand-copy strong { font-size:20px; letter-spacing:0.02em; }
+        .brand-sub { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; }
         .nav { display:flex; flex-direction:column; gap:8px; }
-        .nav a { display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:14px; color:var(--muted); text-decoration:none; font-weight:700; transition:background 140ms ease, color 140ms ease, box-shadow 140ms ease, border 140ms ease; border:1px solid transparent; background:rgba(255,255,255,0.02); }
-        .nav a .icon { opacity:0.85; width:18px; display:inline-flex; justify-content:center; }
-        .nav a.active { background:rgba(249,115,22,0.18); color:var(--accent-strong); border-color:rgba(249,115,22,0.45); box-shadow:0 10px 30px rgba(249,115,22,0.28); }
-        .nav a:hover { background:rgba(255,255,255,0.06); color:var(--text); border-color:rgba(255,255,255,0.08); box-shadow:0 8px 22px rgba(0,0,0,0.28); }
-        .content { flex:1; padding:24px 32px 48px; box-sizing:border-box; }
-        h1 { margin:0; font-size:24px; letter-spacing:0.5px; font-weight:800; }
-        .muted { color:var(--muted); font-size:13px; }
-        main { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin-top:18px; }
-        .card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:16px 18px; box-shadow:0 18px 36px rgba(0,0,0,0.35); backdrop-filter:blur(12px); cursor:pointer; transition:transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease; }
-        .card:hover { transform:translateY(-2px); border-color: rgba(249,115,22,0.35); box-shadow:0 22px 40px rgba(0,0,0,0.4); background:rgba(255,255,255,0.05); }
+        .nav a { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:16px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:700; transition:background 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease; border:1px solid transparent; background:rgba(255,255,255,0.02); }
+        .nav a.active { background:linear-gradient(90deg, rgba(249,115,22,0.34), rgba(249,115,22,0.14)); color:#fff2e6; border-color:rgba(255,176,102,0.26); box-shadow:0 16px 30px rgba(249,115,22,0.22); }
+        .nav a:hover { background:rgba(255,255,255,0.06); color:var(--text); border-color:rgba(255,255,255,0.08); }
+        .sidebar-user { margin-top:auto; padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,0.07); background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025)); }
+        .sidebar-user-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; margin-bottom:6px; }
+        .sidebar-user-name { font-size:14px; font-weight:700; color:#d4c8b7; }
+        .content { flex:1; padding:32px; }
+        h1 { margin:0; font-size:32px; letter-spacing:-0.03em; font-weight:800; }
+        .muted { color:var(--muted); font-size:13px; line-height:1.6; }
+        main { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; margin-top:22px; }
+        .card { background:linear-gradient(180deg, rgba(18,24,38,0.82), rgba(12,17,28,0.72)); border:1px solid var(--border); border-radius:24px; padding:18px 20px; box-shadow:0 26px 64px rgba(0,0,0,0.42); backdrop-filter:blur(18px); cursor:pointer; transition:transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease; }
+        .card:hover { transform:translateY(-2px); border-color:rgba(255,176,102,0.26); box-shadow:0 30px 70px rgba(0,0,0,0.5); background:linear-gradient(180deg, rgba(255,176,102,0.12), rgba(255,255,255,0.04)); }
         .row { display:flex; gap:12px; align-items:center; }
-        .pill { display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; background:rgba(249,115,22,0.16); color:var(--text); border:1px solid rgba(249,115,22,0.3); box-shadow:0 8px 18px rgba(249,115,22,0.18); }
-        img { width:42px; height:42px; border-radius:12px; object-fit:cover; }
-        .logout { margin-top:auto; border:none; color:white; padding:10px 12px; border-radius:12px; cursor:pointer; background:linear-gradient(135deg, #ef4444, #b91c1c); box-shadow:0 12px 28px rgba(239,68,68,0.32); width:100%; transition:transform 120ms ease, box-shadow 120ms ease; }
-        .logout:hover { transform:translateY(-1px); box-shadow:0 14px 32px rgba(239,68,68,0.36); }
+        .pill { display:inline-block; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; background:rgba(249,115,22,0.16); color:#fff0df; border:1px solid rgba(249,115,22,0.3); box-shadow:0 8px 18px rgba(249,115,22,0.18); }
+        img { width:46px; height:46px; border-radius:14px; object-fit:cover; }
+        .logout { margin-top:0; border:none; color:white; padding:12px; border-radius:16px; cursor:pointer; background:linear-gradient(135deg, #ef4444, #b91c1c); box-shadow:0 14px 28px rgba(185,28,28,0.28); width:100%; }
+        .loading-wrap { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:34px; color:var(--muted); }
+        .spinner { width:28px; height:28px; border:3px solid rgba(255,255,255,0.12); border-top-color:#f97316; border-radius:50%; animation:spin .6s linear infinite; }
+        @keyframes spin { to { transform:rotate(360deg); } }
+        @media (max-width: 1180px) { .layout { flex-direction:column; } .sidebar { width:100%; } .content { padding:22px 18px 36px; } }
       </style>
     </head>
     <body>
@@ -157,128 +177,174 @@ router.get('/', (req, res) => {
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Papo Dashboard</title>
     <style>
-      :root { --bg:#080c15; --card:rgba(16,19,28,0.65); --text:#f7fafc; --accent:#f97316; --accent-strong:#ff9b3d; --muted:#a8b2c5; --border:rgba(255,255,255,0.08); --surface:rgba(12,15,22,0.75); }
-      body { margin:0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background:radial-gradient(circle at 12% 18%, rgba(249,115,22,0.12), transparent 32%), radial-gradient(circle at 78% -6%, rgba(255,153,73,0.12), transparent 32%), linear-gradient(135deg, #070a11 0%, #0b0f18 50%, #080c15 100%); color:var(--text); min-height:100vh; }
-      .layout { display:flex; width:100%; min-height:100vh; background:radial-gradient(circle at 50% 20%, rgba(255,153,73,0.08), transparent 30%); }
-      .sidebar { width:240px; background:linear-gradient(180deg, rgba(12,14,22,0.85), rgba(10,12,18,0.78)); border-right:1px solid rgba(255,255,255,0.06); padding:24px 20px; box-sizing:border-box; display:flex; flex-direction:column; gap:18px; backdrop-filter:blur(14px); box-shadow:8px 0 32px rgba(0,0,0,0.45); }
-      .brand { font-size:20px; font-weight:800; letter-spacing:0.6px; color:var(--text); }
+      @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
+      :root { --bg:#05070d; --bg-soft:#0b101b; --surface:rgba(10,14,24,0.88); --surface-alt:rgba(14,18,29,0.82); --card:rgba(17,22,35,0.78); --card-strong:rgba(21,27,41,0.92); --text:#f8f3ed; --muted:#b4ad9f; --muted-strong:#d4c8b7; --accent:#f97316; --accent-strong:#ffb066; --accent-soft:rgba(249,115,22,0.18); --accent-glow:rgba(249,115,22,0.34); --border:rgba(255,255,255,0.08); --border-strong:rgba(255,176,102,0.26); --shadow:0 26px 64px rgba(0,0,0,0.42); --radius:24px; }
+      * { box-sizing:border-box; }
+      html { scroll-behavior:smooth; }
+      body { margin:0; font-family:'Sora', 'Segoe UI', sans-serif; background:
+        radial-gradient(circle at 14% 18%, rgba(249,115,22,0.16), transparent 24%),
+        radial-gradient(circle at 82% 4%, rgba(255,176,102,0.12), transparent 28%),
+        radial-gradient(circle at 50% 120%, rgba(249,115,22,0.10), transparent 30%),
+        linear-gradient(135deg, #05070d 0%, #0a0f18 45%, #070b12 100%);
+        color:var(--text);
+        min-height:100vh;
+      }
+      body::before { content:''; position:fixed; inset:0; pointer-events:none; background:
+        linear-gradient(120deg, rgba(255,255,255,0.035) 0%, transparent 34%),
+        radial-gradient(circle at 24% 18%, rgba(249,115,22,0.08), transparent 18%);
+        opacity:0.9;
+      }
+      .layout { display:flex; width:100%; min-height:100vh; position:relative; }
+      .sidebar { width:270px; padding:28px 18px 20px; display:flex; flex-direction:column; gap:18px; background:
+        linear-gradient(180deg, rgba(8,11,19,0.95), rgba(8,11,19,0.86));
+        border-right:1px solid rgba(255,255,255,0.05);
+        backdrop-filter:blur(18px);
+        box-shadow:18px 0 48px rgba(0,0,0,0.34);
+        position:sticky;
+        top:0;
+        min-height:100vh;
+        z-index:2;
+      }
+      .brand { display:flex; align-items:center; gap:14px; padding:4px 8px 14px; }
+      .brand-mark { width:42px; height:42px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:24px; color:#1c1207; background:linear-gradient(145deg, #ffbc7a, #f97316 62%, #c2410c); box-shadow:0 14px 28px rgba(249,115,22,0.32), inset 0 1px 0 rgba(255,255,255,0.28); }
+      .brand-copy { display:flex; flex-direction:column; gap:3px; }
+      .brand-copy strong { font-size:20px; letter-spacing:0.02em; }
+      .brand-sub { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; }
       .nav { display:flex; flex-direction:column; gap:8px; }
-      .nav a { display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:14px; color:var(--muted); text-decoration:none; font-weight:700; transition:background 140ms ease, color 140ms ease, box-shadow 140ms ease, border 140ms ease; border:1px solid transparent; background:rgba(255,255,255,0.02); }
-      .nav a .icon { opacity:0.85; width:18px; display:inline-flex; justify-content:center; }
-      .nav a.active { background:rgba(249,115,22,0.18); color:var(--accent-strong); border-color:rgba(249,115,22,0.45); box-shadow:0 10px 30px rgba(249,115,22,0.28); }
-      .nav a:hover { background:rgba(255,255,255,0.06); color:var(--text); border-color:rgba(255,255,255,0.08); box-shadow:0 8px 22px rgba(0,0,0,0.28); }
-      .content { flex:1; padding:28px 34px 56px; box-sizing:border-box; background:linear-gradient(145deg, rgba(255,153,73,0.05) 0%, rgba(255,255,255,0) 32%); }
-      h1 { margin:0; font-size:26px; letter-spacing:0.6px; font-weight:800; }
-      .muted { color:var(--muted); font-size:13px; }
-      main { padding-top:18px; display:flex; flex-direction:column; gap:18px; }
+      .nav a { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:16px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:700; transition:background 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease; border:1px solid transparent; background:rgba(255,255,255,0.02); position:relative; overflow:hidden; }
+      .nav a::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0.08), transparent 55%); opacity:0; transition:opacity 160ms ease; }
+      .nav a .icon { opacity:0.9; width:18px; display:inline-flex; justify-content:center; font-size:15px; }
+      .nav a.active { background:linear-gradient(90deg, rgba(249,115,22,0.34), rgba(249,115,22,0.14)); color:#fff2e6; border-color:var(--border-strong); box-shadow:0 16px 30px rgba(249,115,22,0.22); transform:translateX(2px); }
+      .nav a.active::before, .nav a:hover::before { opacity:1; }
+      .nav a:hover { background:rgba(255,255,255,0.06); color:var(--text); border-color:rgba(255,255,255,0.09); }
+      .nav a.hidden { display:none; }
+      .sidebar-user { margin-top:auto; padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,0.07); background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); }
+      .sidebar-user-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; margin-bottom:6px; }
+      .sidebar-user-name { font-size:14px; font-weight:700; color:var(--muted-strong); word-break:break-word; }
+      .content { flex:1; padding:28px 32px 54px; background:
+        linear-gradient(145deg, rgba(249,115,22,0.05) 0%, transparent 34%),
+        linear-gradient(180deg, rgba(255,255,255,0.015), transparent 20%);
+      }
+      .topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:22px 24px; border:1px solid rgba(255,255,255,0.06); border-radius:26px; background:linear-gradient(180deg, rgba(18,24,38,0.78), rgba(12,17,28,0.72)); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
+      h1 { margin:0; font-size:34px; letter-spacing:-0.03em; font-weight:800; }
+      .muted { color:var(--muted); font-size:13px; line-height:1.6; }
+      main { padding-top:22px; display:flex; flex-direction:column; gap:20px; }
       .section { display:none; }
       .section.active { display:block; }
       .section.hidden { display:none !important; }
-      .grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
-      .card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:18px 20px; box-shadow:0 18px 45px rgba(0,0,0,0.35); backdrop-filter:blur(14px); }
-      .stat { font-size:34px; font-weight:800; margin:0; color:var(--text); }
-      .label { color:var(--muted); margin:4px 0 0 0; letter-spacing:0.2px; }
-      .tickets-grid { display:grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap:18px; align-items:start; }
+      .grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
+      .card { background:linear-gradient(180deg, rgba(18,24,38,0.82), rgba(12,17,28,0.72)); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); backdrop-filter:blur(18px); position:relative; overflow:hidden; }
+      .card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,176,102,0.08), transparent 34%); pointer-events:none; }
+      .card > * { position:relative; z-index:1; }
+      .stat { font-size:38px; font-weight:800; margin:0; color:var(--text); letter-spacing:-0.04em; }
+      .label { color:var(--muted); margin:4px 0 0; letter-spacing:0.02em; font-size:12px; text-transform:uppercase; }
+      .tickets-grid { display:grid; grid-template-columns:repeat(3, minmax(260px, 1fr)); gap:18px; align-items:start; }
+      .ticket-list-pane, .log-list { scrollbar-width:thin; scrollbar-color:rgba(255,176,102,0.4) transparent; }
       .ticket-list-pane { display:flex; flex-direction:column; gap:10px; max-height:520px; overflow-y:auto; padding:6px; margin-top:12px; }
-      .ticket-list-pane::-webkit-scrollbar { width:6px; }
-      .ticket-list-pane::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.18); border-radius:10px; }
-      .ticket-list-item { border:1px solid var(--border); background:rgba(255,255,255,0.04); border-radius:14px; padding:13px 15px; display:flex; flex-direction:column; gap:6px; cursor:pointer; transition:transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; box-shadow:0 14px 32px rgba(0,0,0,0.3); }
-      .ticket-list-item:hover { transform:translateY(-2px); border-color:rgba(249,115,22,0.35); background:rgba(255,255,255,0.06); box-shadow:0 16px 38px rgba(0,0,0,0.36); }
+      .ticket-list-pane::-webkit-scrollbar, .log-list::-webkit-scrollbar { width:6px; height:6px; }
+      .ticket-list-pane::-webkit-scrollbar-thumb, .log-list::-webkit-scrollbar-thumb { background:rgba(255,176,102,0.36); border-radius:10px; }
+      .ticket-list-item, .module-item, .option-card, .detail-tile, .status-card, .log-item { border:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025)); border-radius:18px; box-shadow:0 16px 32px rgba(0,0,0,0.24); }
+      .ticket-list-item { padding:14px 16px; display:flex; flex-direction:column; gap:8px; cursor:pointer; transition:transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
+      .ticket-list-item:hover { transform:translateY(-2px); border-color:var(--border-strong); background:linear-gradient(180deg, rgba(255,176,102,0.12), rgba(255,255,255,0.04)); box-shadow:0 20px 36px rgba(0,0,0,0.3); }
       .ticket-item-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
       .ticket-title { font-weight:750; font-size:15px; }
       .ticket-meta { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:12px; }
-      .ticket-status-badge { padding:5px 11px; border-radius:999px; font-weight:700; font-size:12px; text-transform:capitalize; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05); color:var(--text); box-shadow:0 10px 22px rgba(0,0,0,0.24); }
-      .status-open { background:rgba(249,115,22,0.18); color:var(--accent-strong); border-color:rgba(249,115,22,0.45); }
-      .status-in-progress { background:rgba(255,184,70,0.16); color:#fbbf24; border-color:rgba(255,184,70,0.42); }
-      .status-closed { background:rgba(239,68,68,0.16); color:#f87171; border-color:rgba(239,68,68,0.42); }
-      .ticket-empty { padding:20px; text-align:center; color:var(--muted); border:1px dashed rgba(255,255,255,0.16); border-radius:14px; background:rgba(255,255,255,0.03); }
+      .ticket-status-badge, .status-badge, .log-level, .badge { padding:6px 11px; border-radius:999px; font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; }
+      .ticket-status-badge { border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05); color:var(--text); box-shadow:0 10px 22px rgba(0,0,0,0.2); }
+      .status-open, .badge.active { background:rgba(249,115,22,0.18); color:#ffd7b0; border-color:rgba(249,115,22,0.42); box-shadow:0 8px 20px rgba(249,115,22,0.18); }
+      .status-in-progress, .log-level.warn { background:rgba(251,191,36,0.16); color:#fcd34d; border:1px solid rgba(251,191,36,0.32); }
+      .status-closed, .status-down, .log-level.error { background:rgba(239,68,68,0.16); color:#fda4af; border:1px solid rgba(239,68,68,0.32); }
+      .status-up { background:rgba(34,197,94,0.16); color:#86efac; border:1px solid rgba(34,197,94,0.28); }
+      .status-unknown, .log-level.info { background:rgba(148,163,184,0.16); color:#cbd5e1; border:1px solid rgba(148,163,184,0.28); }
+      .ticket-empty { padding:22px; text-align:center; color:var(--muted); border:1px dashed rgba(255,255,255,0.14); border-radius:18px; background:rgba(255,255,255,0.03); }
       .ticket-tab { display:none; }
       .ticket-tab.active { display:block; }
-      .ticket-tab-btn.active { background:rgba(249,115,22,0.18); border-color:rgba(249,115,22,0.45); color:var(--accent-strong); }
+      .ticket-tab-btn.active { background:linear-gradient(135deg, rgba(249,115,22,0.24), rgba(255,176,102,0.16)); border-color:var(--border-strong); color:#fff0df; }
       form { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
-      .form-field { display:flex; flex-direction:column; gap:6px; }
-      .form-label { font-size:13px; color:var(--muted); letter-spacing:0.2px; font-weight:600; }
-      input, select, textarea { padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.06); color:var(--text); backdrop-filter:blur(8px); }
-      input::placeholder, textarea::placeholder { color:rgba(229,231,235,0.65); }
-      button { padding:12px 14px; border-radius:14px; border:1px solid rgba(249,115,22,0.4); background:linear-gradient(130deg, #ff9b3d, #f97316); color:white; font-weight:800; cursor:pointer; box-shadow:0 14px 30px rgba(249,115,22,0.35); transition:transform 140ms ease, box-shadow 140ms ease, filter 140ms ease; }
-      button:hover { transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 18px 40px rgba(249,115,22,0.4); }
-      .secondary-btn { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); box-shadow:0 10px 22px rgba(0,0,0,0.24); color:var(--text); }
-      .danger-btn { background:linear-gradient(135deg, #ef4444, #dc2626); box-shadow:0 12px 30px rgba(239,68,68,0.35); border-color:rgba(239,68,68,0.5); }
+      .form-field { display:flex; flex-direction:column; gap:8px; }
+      .form-label { font-size:12px; color:var(--muted); letter-spacing:0.08em; font-weight:700; text-transform:uppercase; }
+      input, select, textarea { width:100%; padding:13px 14px; border-radius:16px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.045); color:var(--text); backdrop-filter:blur(8px); font:inherit; transition:border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; }
+      input::placeholder, textarea::placeholder { color:rgba(229,231,235,0.48); }
+      input:focus, select:focus, textarea:focus { outline:none; border-color:var(--border-strong); box-shadow:0 0 0 4px rgba(249,115,22,0.12); background:rgba(255,255,255,0.06); }
+      button { padding:12px 16px; border-radius:16px; border:1px solid rgba(249,115,22,0.42); background:linear-gradient(135deg, #ffb066, #f97316 58%, #ea580c); color:#fff7ed; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 16px 32px rgba(249,115,22,0.28); transition:transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, border-color 140ms ease; }
+      button:hover { transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 20px 38px rgba(249,115,22,0.34); }
+      .secondary-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); box-shadow:0 12px 24px rgba(0,0,0,0.22); color:var(--text); }
+      .danger-btn, .logout { background:linear-gradient(135deg, #ef4444, #b91c1c); box-shadow:0 14px 28px rgba(185,28,28,0.28); border-color:rgba(248,113,113,0.3); }
+      .logout { margin-top:0; width:100%; }
       .row { display:flex; gap:12px; align-items:center; }
-      select { min-height:44px; }
-      .icon-button { width:40px; height:40px; border-radius:12px; border:1px solid rgba(249,115,22,0.3); background:rgba(249,115,22,0.16); color:var(--text); font-size:18px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; box-shadow:0 12px 28px rgba(0,0,0,0.28); }
-      .icon-button:hover { transform:translateY(-1px); border-color:rgba(249,115,22,0.6); background:rgba(249,115,22,0.22); box-shadow:0 14px 34px rgba(0,0,0,0.32); }
-      #status { margin-top:6px; color:#fbbf77; }
-      .logout { margin-top:auto; border:none; color:white; padding:10px 12px; border-radius:12px; cursor:pointer; background:linear-gradient(135deg, #ef4444, #b91c1c); width:100%; box-shadow:0 12px 28px rgba(239,68,68,0.32); }
-      .nav a.hidden { display:none; }
+      select { min-height:48px; }
+      .guild-select-shell { min-width:260px; padding:14px 16px; border-radius:18px; border:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); }
+      .icon-button { width:42px; height:42px; padding:0; border-radius:14px; border:1px solid rgba(249,115,22,0.3); background:rgba(249,115,22,0.16); color:var(--text); font-size:18px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; box-shadow:0 12px 28px rgba(0,0,0,0.24); }
+      .icon-button:hover { transform:translateY(-1px); border-color:rgba(249,115,22,0.52); background:rgba(249,115,22,0.24); }
+      #status { margin-top:8px; color:#f6c28b; }
       .module-list { display:flex; flex-direction:column; gap:10px; }
-      .module-item { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.03); box-shadow:0 12px 26px rgba(0,0,0,0.25); }
-      .toggle { position:relative; width:48px; height:26px; background:rgba(255,255,255,0.14); border-radius:999px; cursor:pointer; transition:background 140ms ease, border 140ms ease, box-shadow 140ms ease; border:1px solid rgba(255,255,255,0.1); box-shadow:inset 0 2px 8px rgba(0,0,0,0.2); }
-      .toggle::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#9ca3af; transition:transform 160ms ease, background 160ms ease, box-shadow 160ms ease; box-shadow:0 4px 10px rgba(0,0,0,0.3); }
-      .toggle.active { background:rgba(249,115,22,0.3); border-color:rgba(249,115,22,0.6); box-shadow:0 8px 20px rgba(249,115,22,0.24); }
-      .toggle.active::after { transform:translateX(22px); background:#ffd9b3; box-shadow:0 6px 14px rgba(249,115,22,0.35); }
+      .module-item { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; }
+      .toggle, .switch { position:relative; width:52px; height:28px; border-radius:999px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.12); cursor:pointer; transition:background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; box-shadow:inset 0 2px 8px rgba(0,0,0,0.2); flex-shrink:0; }
+      .toggle::after, .switch::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#9ca3af; transition:transform 160ms ease, background 160ms ease, box-shadow 160ms ease; box-shadow:0 4px 10px rgba(0,0,0,0.3); }
+      .toggle.active, .switch.on { background:rgba(249,115,22,0.32); border-color:rgba(249,115,22,0.58); box-shadow:0 8px 20px rgba(249,115,22,0.22); }
+      .toggle.active::after, .switch.on::after { transform:translateX(22px); background:#fff1df; box-shadow:0 6px 14px rgba(249,115,22,0.35); }
       .module-meta { display:flex; flex-direction:column; gap:4px; }
       .module-title { font-weight:700; color:var(--text); }
       .module-desc { color:var(--muted); font-size:13px; }
-      .toast { position:fixed; top:20px; right:24px; padding:12px 14px; border-radius:12px; background:rgba(249,115,22,0.18); border:1px solid rgba(249,115,22,0.45); color:#ffe6d0; font-weight:700; box-shadow:0 12px 32px rgba(0,0,0,0.34); opacity:0; transform:translateY(-10px); transition:opacity 150ms ease, transform 150ms ease; z-index:1100; backdrop-filter:blur(10px); }
-      .toast.error { background:rgba(239,68,68,0.18); border-color:rgba(239,68,68,0.4); color:#ffe4e6; }
+      .toast { position:fixed; top:24px; right:24px; padding:12px 14px; border-radius:14px; background:rgba(249,115,22,0.18); border:1px solid rgba(249,115,22,0.4); color:#fff0df; font-weight:700; box-shadow:0 12px 32px rgba(0,0,0,0.34); opacity:0; transform:translateY(-10px); transition:opacity 150ms ease, transform 150ms ease; z-index:1100; backdrop-filter:blur(10px); }
+      .toast.error { background:rgba(239,68,68,0.18); border-color:rgba(239,68,68,0.36); color:#ffe4e6; }
       .toast.show { opacity:1; transform:translateY(0); }
-      .option-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:10px; }
-      .option-card { border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:13px; background:rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:space-between; gap:10px; box-shadow:0 12px 26px rgba(0,0,0,0.25); }
+      .option-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:10px; }
+      .option-card { padding:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
       .option-card label { font-weight:700; color:var(--text); }
-      .switch { position:relative; width:52px; height:28px; border-radius:28px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.1); cursor:pointer; transition:background 140ms ease, border 140ms ease, box-shadow 140ms ease; box-shadow:inset 0 2px 8px rgba(0,0,0,0.2); }
-      .switch::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#9ca3af; transition:transform 160ms ease, background 160ms ease, box-shadow 160ms ease; box-shadow:0 4px 10px rgba(0,0,0,0.3); }
-      .switch.on { background:rgba(249,115,22,0.32); border-color:rgba(249,115,22,0.6); box-shadow:0 8px 20px rgba(249,115,22,0.22); }
-      .switch.on::after { transform:translateX(22px); background:#ffd9b3; box-shadow:0 6px 14px rgba(249,115,22,0.35); }
-      .admin-grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
-      .activity-bars { display:flex; gap:8px; align-items:flex-end; min-height:140px; padding:10px; border-radius:14px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); overflow:hidden; }
-      .activity-bar { flex:1; background:linear-gradient(130deg, rgba(249,115,22,0.4), rgba(249,115,22,0.24)); border-radius:10px 10px 4px 4px; position:relative; min-height:6px; box-shadow:0 10px 22px rgba(0,0,0,0.26); }
-      .activity-bar span { position:absolute; bottom:100%; left:50%; transform:translate(-50%, -4px); font-size:11px; color:var(--muted); white-space:nowrap; }
-      .log-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; max-height:280px; overflow:auto; }
-      .log-item { padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); display:flex; gap:10px; align-items:flex-start; }
-      .log-level { padding:4px 8px; border-radius:999px; font-weight:800; font-size:12px; }
-      .log-level.info { background:rgba(59,130,246,0.16); border:1px solid rgba(59,130,246,0.35); color:#bfdbfe; }
-      .log-level.warn { background:rgba(251,191,36,0.18); border:1px solid rgba(251,191,36,0.35); color:#fef08a; }
-      .log-level.error { background:rgba(239,68,68,0.18); border:1px solid rgba(239,68,68,0.4); color:#fecaca; }
-      .status-card { display:flex; flex-direction:column; gap:6px; border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:12px; background:rgba(255,255,255,0.03); box-shadow:0 12px 28px rgba(0,0,0,0.24); }
+      .admin-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
+      .activity-bars { display:flex; gap:10px; align-items:flex-end; min-height:160px; padding:14px; border-radius:18px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); overflow:hidden; }
+      .activity-bar { flex:1; background:linear-gradient(180deg, rgba(255,176,102,0.86), rgba(249,115,22,0.26)); border-radius:14px 14px 6px 6px; position:relative; min-height:6px; box-shadow:0 14px 26px rgba(0,0,0,0.26); }
+      .activity-bar span { position:absolute; bottom:100%; left:50%; transform:translate(-50%, -6px); font-size:10px; color:var(--muted); white-space:nowrap; }
+      .log-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; max-height:320px; overflow:auto; }
+      .log-item { padding:12px 14px; display:flex; gap:12px; align-items:flex-start; }
+      .status-card { display:flex; flex-direction:column; gap:6px; padding:12px; }
       .status-top { display:flex; justify-content:space-between; gap:8px; align-items:center; }
-      .status-meta { display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px; }
-      .status-badge { padding:4px 10px; border-radius:999px; font-weight:800; font-size:12px; }
-      .status-up { background:rgba(34,197,94,0.18); border:1px solid rgba(34,197,94,0.4); color:#bbf7d0; }
-      .status-down { background:rgba(239,68,68,0.18); border:1px solid rgba(239,68,68,0.4); color:#fecaca; }
-      .status-unknown { background:rgba(148,163,184,0.18); border:1px solid rgba(148,163,184,0.4); color:#e2e8f0; }
-      .module-badges { display:flex; gap:8px; flex-wrap:wrap; }
-      .badge { padding:6px 10px; border-radius:12px; font-weight:700; font-size:12px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.06); }
-      .badge.active { border-color:rgba(249,115,22,0.4); color:#f97316; box-shadow:0 6px 18px rgba(249,115,22,0.25); }
-      .inline { display:flex; align-items:center; gap:8px; }
+      .status-meta, .module-badges { display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px; }
+      .badge { border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.06); }
+      .inline { display:flex; align-items:center; gap:10px; }
       .form-row { display:flex; gap:12px; flex-wrap:wrap; }
       .form-row .form-field { flex:1; min-width:220px; }
-      .embed-preview { margin-top:10px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); border-radius:14px; padding:14px; display:flex; gap:12px; box-shadow:0 12px 28px rgba(0,0,0,0.26); }
-      .embed-color { width:6px; border-radius:6px; background:var(--accent); }
+      .embed-preview { margin-top:10px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); border-radius:18px; padding:14px; display:flex; gap:12px; box-shadow:0 12px 28px rgba(0,0,0,0.24); }
+      .embed-color { width:6px; border-radius:999px; background:var(--accent); }
       .embed-body { flex:1; display:flex; flex-direction:column; gap:6px; }
       .embed-title { font-weight:750; }
-      .embed-desc { white-space:pre-wrap; color:#d7dce6; }
-      .embed-footer { color:#9ca3af; font-size:12px; }
-      .embed-image { margin-top:8px; max-width:240px; border-radius:10px; display:block; }
-      .modal-backdrop { position:fixed; inset:0; background:rgba(4,5,8,0.7); opacity:0; pointer-events:none; transition:opacity 160ms ease; z-index:900; backdrop-filter:blur(4px); }
+      .embed-desc { white-space:pre-wrap; color:#e7dccd; }
+      .embed-footer { color:#a8a29e; font-size:12px; }
+      .embed-image { margin-top:8px; max-width:240px; border-radius:12px; display:block; }
+      .modal-backdrop { position:fixed; inset:0; background:rgba(4,5,8,0.72); opacity:0; pointer-events:none; transition:opacity 160ms ease; z-index:900; backdrop-filter:blur(8px); }
       .modal-backdrop.show { opacity:1; pointer-events:auto; }
-      .modal { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.98); width:min(540px, calc(100% - 32px)); background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:0 25px 70px rgba(0,0,0,0.5); padding:18px 18px 16px; opacity:0; pointer-events:none; transition:opacity 160ms ease, transform 160ms ease; z-index:1000; backdrop-filter:blur(14px); }
+      .modal { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.98); width:min(560px, calc(100% - 32px)); background:linear-gradient(180deg, rgba(18,24,38,0.96), rgba(10,14,24,0.92)); border:1px solid rgba(255,255,255,0.08); border-radius:24px; box-shadow:0 28px 80px rgba(0,0,0,0.56); padding:20px 20px 18px; opacity:0; pointer-events:none; transition:opacity 160ms ease, transform 160ms ease; z-index:1000; backdrop-filter:blur(18px); }
       .modal.show { opacity:1; pointer-events:auto; transform:translate(-50%, -50%) scale(1); }
       .modal-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
       .modal-body { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
       .modal-actions { margin-top:14px; display:flex; justify-content:flex-end; gap:10px; }
-      .detail-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
-      .detail-tile { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:10px 12px; box-shadow:0 12px 26px rgba(0,0,0,0.24); }
-      .detail-label { color:var(--muted); font-size:12px; margin:0 0 4px; }
+      .detail-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }
+      .detail-tile { padding:12px 14px; }
+      .detail-label { color:var(--muted); font-size:11px; margin:0 0 6px; text-transform:uppercase; letter-spacing:0.08em; }
       .detail-value { font-weight:700; font-size:14px; }
       .linkish { color:var(--accent-strong); text-decoration:none; font-weight:700; }
       .linkish:hover { text-decoration:underline; }
-      .section-title { font-size:17px; font-weight:800; margin:0; }
-      .section-sub { color:var(--muted); margin:0; font-size:13px; }
-      @media (max-width: 1100px) {
-        .tickets-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
-      }
+      .section-title { font-size:18px; font-weight:800; margin:0; letter-spacing:-0.02em; }
+      .section-sub { color:var(--muted); margin:4px 0 0; font-size:13px; line-height:1.5; }
       .spinner { width:28px; height:28px; border:3px solid rgba(255,255,255,0.12); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; margin:12px auto; }
+      @media (max-width: 1180px) {
+        .layout { flex-direction:column; }
+        .sidebar { width:100%; min-height:auto; position:relative; }
+        .content { padding:22px 18px 40px; }
+      }
+      @media (max-width: 900px) {
+        .topbar { flex-direction:column; }
+        .guild-select-shell { width:100%; min-width:0; }
+        h1 { font-size:28px; }
+      }
+      @media (max-width: 720px) {
+        .sidebar { padding:22px 14px 16px; }
+        .content { padding:16px 14px 32px; }
+        .card { padding:18px; border-radius:20px; }
+        .grid, .tickets-grid, .detail-grid { grid-template-columns:1fr; }
+        .row, .inline, .form-row { flex-direction:column; align-items:stretch; }
+      }
       @keyframes spin { to { transform:rotate(360deg); } }
       .loading-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; padding:24px; color:var(--muted); font-size:13px; }
     </style>
@@ -287,12 +353,12 @@ router.get('/', (req, res) => {
     <div class="layout">
       ${sidebar}
       <div class="content">
-        <div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
+        <div class="topbar">
           <div>
             <h1>Guild Dashboard</h1>
             <div class="muted">Dashboard & Guild-Config</div>
           </div>
-          <div>
+          <div class="guild-select-shell">
             <p class="label" style="margin:0;">Guild</p>
             <select id="guildSelect"></select>
             <div id="status" class="muted"></div>