@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rajdhani:wght@600;700&display=swap');
/* =====================================================
   WalnaroRP Bot-Dashboard v2
   ===================================================== */
:root{--bg:#08070f;--panel:#12101c;--panel2:#1a1727;--panel3:#221e33;--line:#2a2540;--line2:#3a3358;--text:#eeebf8;--mute:#9b94b8;
  --acc:#8b5cf6;--acc2:#6d28d9;--pink:#ec4899;--cyan:#22d3ee;--ok:#22c55e;--bad:#ef4444;--warn:#f59e0b;--r:16px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font:14px/1.55 Inter,"Segoe UI",system-ui,sans-serif;min-height:100vh;
  background:radial-gradient(900px 500px at 0% -10%,rgba(139,92,246,.28),transparent 60%),radial-gradient(800px 500px at 110% 0%,rgba(236,72,153,.14),transparent 60%),var(--bg)}
a{color:#c4b5fd}
::selection{background:rgba(139,92,246,.45)}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#2f2848;border-radius:9px}::-webkit-scrollbar-track{background:transparent}
.center{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}
.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.auth{width:100%;max-width:400px;padding:30px;animation:pop .35s ease;border-color:rgba(139,92,246,.35);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(139,92,246,.12)}
.auth .brand{justify-content:center;font-size:22px;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:11px;font:700 20px Rajdhani,sans-serif;letter-spacing:1px;margin-bottom:14px}
.brand .dot{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--acc),var(--pink));display:grid;place-items:center;font:800 18px Inter,sans-serif;box-shadow:0 8px 22px rgba(139,92,246,.4)}
label{display:block;color:var(--mute);font-size:11.5px;font-weight:600;margin:12px 0 5px;text-transform:uppercase;letter-spacing:.06em}
input,select,textarea{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px 12px;font:inherit;outline:none;transition:border .15s,background .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:var(--line2)}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(139,92,246,.18);background:var(--panel3)}
textarea{min-height:120px;resize:vertical}
button{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:0;border-radius:10px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;transition:transform .1s,filter .15s,box-shadow .15s;box-shadow:0 6px 18px rgba(139,92,246,.25)}
button:hover{filter:brightness(1.12)}button:active{transform:scale(.97)}
button.sec{background:var(--panel2);border:1px solid var(--line);box-shadow:none}
button.sec:hover{border-color:var(--line2);filter:none;background:var(--panel3)}
button.bad{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 6px 18px rgba(239,68,68,.25)}
button.ok{background:linear-gradient(135deg,#22c55e,#15803d);box-shadow:0 6px 18px rgba(34,197,94,.25)}
button.full{width:100%;margin-top:18px;padding:12px 16px}
.err{color:#fca5a5;min-height:20px;margin-top:10px;text-align:center}
.hint{color:var(--mute);font-size:12px}
.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
nav{background:rgba(10,9,18,.85);border-right:1px solid var(--line);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px}
nav .brand{padding:0 8px 14px;margin-bottom:8px;border-bottom:1px solid var(--line)}
nav a{display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:10px;color:var(--mute);text-decoration:none;cursor:pointer;font-weight:500;transition:background .15s,color .15s,transform .1s}
nav a:hover{background:var(--panel2);color:var(--text);transform:translateX(2px)}
nav a.on{background:linear-gradient(90deg,rgba(139,92,246,.28),rgba(139,92,246,.04));color:#fff;box-shadow:inset 3px 0 0 var(--acc)}
nav .foot{margin-top:auto}
main{padding:28px 32px;max-width:1240px;width:100%}
h1{margin:0 0 18px;font:700 30px Rajdhani,sans-serif;letter-spacing:.5px}
h2{margin:0 0 12px;font-size:16px;font-weight:700}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.stat{display:flex;flex-direction:column;gap:4px;overflow:hidden}
.stat::after{content:attr(data-ico);position:absolute;right:16px;top:14px;font-size:30px;opacity:.85;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sc,var(--acc))}
.stat b{font:700 34px Rajdhani,sans-serif;line-height:1.1}
.stat:nth-child(1){--sc:#8b5cf6}.stat:nth-child(2){--sc:#22d3ee}.stat:nth-child(3){--sc:#ec4899}.stat:nth-child(4){--sc:#f59e0b}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:600;background:var(--panel2);border:1px solid var(--line)}
.pill.ok{color:#4ade80;border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.1)}
.pill.bad{color:#f87171;border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.1)}
.pill.warn{color:#fbbf24}
.row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.row>*{flex:1;min-width:140px}.row>button{flex:0 0 auto}
.sec-page{display:none;animation:fade .25s ease}.sec-page.on{display:block}
table{width:100%;border-collapse:separate;border-spacing:0}
td,th{padding:10px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
tbody tr{transition:background .12s}tbody tr:hover{background:rgba(255,255,255,.025)}
th{color:var(--mute);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.log{font-size:13px;white-space:pre-wrap;word-break:break-word}
.logtype{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:rgba(139,92,246,.14);color:#c4b5fd;border:1px solid rgba(139,92,246,.3)}
.toast{position:fixed;right:20px;bottom:20px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--ok);padding:13px 18px;border-radius:12px;animation:pop .25s ease;z-index:9;max-width:380px;box-shadow:0 16px 40px rgba(0,0,0,.5);font-weight:500}
.toast.bad{border-left-color:var(--bad)}
.member{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:14px;margin-top:12px;background:var(--panel2);transition:border-color .15s}
.member:hover{border-color:var(--line2)}
.member img{width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 3px rgba(139,92,246,.35)}
.role{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;border:1px solid;margin:3px 3px 0 0}
.warnbox{border:1px solid rgba(245,158,11,.4);background:rgba(245,158,11,.08);color:#fcd34d;padding:12px 14px;border-radius:12px;margin-bottom:16px}
/* Live-Vorschau fuer Discord-Nachrichten */
.dc-prev{margin-top:16px;padding:16px;border-radius:12px;background:#313338;color:#dbdee1;font:15px/1.4 "gg sans","Noto Sans",Inter,sans-serif}
.dc-prev .dc-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dc-prev .dc-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--pink));display:grid;place-items:center;font:800 16px Inter,sans-serif;color:#fff}
.dc-prev .dc-name{font-weight:600;color:#fff}.dc-prev .dc-bot{font-size:10px;font-weight:700;background:#5865f2;color:#fff;border-radius:4px;padding:1px 5px;margin-left:4px}
.dc-prev .dc-time{font-size:12px;color:#949ba4;margin-left:6px}
.dc-embed{margin-left:50px;max-width:520px;border-left:4px solid var(--ec,#8b5cf6);background:#2b2d31;border-radius:4px;padding:10px 14px 12px}
.dc-embed .t{font-weight:700;color:#fff;margin-bottom:4px}
.dc-embed .d{white-space:pre-wrap;word-break:break-word;font-size:14px}
.dc-embed .f{font-size:12px;color:#949ba4;margin-top:8px}
.dc-plain{margin-left:50px;white-space:pre-wrap;word-break:break-word}
.dc-ping{background:rgba(88,101,242,.3);color:#c9cdfb;border-radius:3px;padding:0 3px;font-weight:500}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:860px){.layout{grid-template-columns:1fr}nav{position:static;height:auto;flex-direction:row;flex-wrap:wrap;gap:4px;padding:10px}nav .brand,nav .foot{display:none}nav a{padding:7px 10px}main{padding:16px}h1{font-size:24px}}
#p-home .grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
input[type=color]{padding:4px;height:42px;cursor:pointer}