:root{
  --bg:#0b0912; --surface:#141022; --surface-2:#1b1630; --border:#2a2440; --text:#ece9f5; --text-2:#a99fc7; --text-3:#766c92;
  --accent:#8b5cf6; --accent-hover:#a78bfa; --good:#22c55e; --warn:#fab219; --crit:#ef4444; --radius:14px;
  font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,rgba(139,92,246,.18),transparent),var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent-hover)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(11,9,18,.8);backdrop-filter:blur(8px);z-index:5}
.brand{font-weight:700;font-size:18px;display:flex;align-items:center;gap:10px}
.brand .sub{color:var(--text-3);font-weight:500}
.brand .mark{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#c4b5fd)}
.userbox{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)}
.app{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:28px 22px}
.foot{padding:16px 22px;border-top:1px solid var(--border);color:var(--text-3);font-size:13px;text-align:center}
.loading{color:var(--text-3);padding:60px;text-align:center}
.btn{all:unset;cursor:pointer;background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.btn:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text-2)}
.btn.ghost:hover{border-color:var(--accent);color:var(--text)}
.btn.sm{padding:6px 12px;font-size:13px}
.hero{text-align:center;padding:70px 20px}
.hero h1{font-size:34px;margin:0 0 10px}
.hero p{color:var(--text-2);max-width:520px;margin:0 auto 26px;line-height:1.6}
.discord-btn{background:#5865F2}.discord-btn:hover{background:#6a76f5}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:18px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.guild{cursor:pointer;display:flex;align-items:center;gap:12px;transition:border-color .15s}
.guild:hover{border-color:var(--accent)}
.guild .icon{width:46px;height:46px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;font-weight:700;color:var(--accent-hover);overflow:hidden;flex:none}
.guild .icon img{width:100%;height:100%;object-fit:cover}
.guild .meta{min-width:0}
.guild .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guild .id{color:var(--text-3);font-size:12px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.badge.owner{color:#fde68a;border-color:#5c4a12;background:#2a2109}
h2{font-size:22px;margin:0 0 4px}
.muted{color:var(--text-3)}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.back{all:unset;cursor:pointer;color:var(--text-2);font-size:14px;margin-bottom:14px;display:inline-flex;gap:6px}
.back:hover{color:var(--text)}
.section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-top:16px}
.section h3{margin:0 0 4px;font-size:16px}
.section .hint{color:var(--text-3);font-size:13px;margin:0 0 14px}
label{display:block;font-size:13px;color:var(--text-2);margin:12px 0 6px}
select,input[type=text],textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px}
textarea{min-height:70px;resize:vertical}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;margin:10px 0}
.toggle input{width:40px;height:22px;appearance:none;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;position:relative;cursor:pointer;flex:none}
.toggle input:checked{background:var(--accent)}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.toggle input:checked::after{left:20px}
.multi{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;font-size:13px}
.chip[data-on=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.savebar{position:sticky;bottom:0;margin-top:20px;padding:14px;background:rgba(20,16,34,.9);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--radius);display:flex;justify-content:flex-end;gap:10px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--surface-2);border:1px solid var(--border);padding:12px 18px;border-radius:12px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:20}
.toast.good{border-color:var(--good)}.toast.bad{border-color:var(--crit)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--surface-2)}
@media(max-width:560px){.app{padding:18px 14px}.hero{padding:40px 10px}}