:root{
  --bg:#0e1015; --panel:#171a21; --panel-2:#1e222b; --line:#2a2f3a;
  --text:#e8eaf0; --muted:#8b93a7; --brand:#5865F2; --brand-2:#8b5cf6;
  --danger:#ED4245; --ok:#3BA55D; --radius:14px;
  --font:"Sarabun","Noto Sans Thai","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1{font-size:1.7rem;margin:0 0 .3em;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:.5em}
h2{font-size:1.2rem;margin:2rem 0 .6rem;color:#cbd2e4;font-weight:600;display:flex;align-items:center;gap:.5em}
h3{margin:0 0 .4rem;font-weight:600;display:flex;align-items:center;gap:.5em}
code{background:#0b0d12;border:1px solid var(--line);padding:.1em .45em;border-radius:6px;font-size:.9em}
code.block{display:block;padding:.7em;margin:.6em 0}
.muted{color:var(--muted)}

/* ---- ไอคอน Lucide (ฝัง SVG ตอน render) ---- */
.lucide{
  width:1.05em;height:1.05em;
  stroke-width:2;vertical-align:-.15em;
  flex:none;
}
h1 .lucide,h2 .lucide,h3 .lucide{stroke-width:2.1}
.icon-head{display:flex;align-items:center;gap:.55em}
.big-icon{margin:0 0 .4em;color:var(--brand)}
.big-icon .lucide{width:3.4rem;height:3.4rem;stroke-width:1.5;vertical-align:middle}

/* topbar */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 26px;border-bottom:1px solid var(--line);
  background:rgba(14,16,21,.9);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:20;
}
.brand{font-weight:700;letter-spacing:.2px}
.brand a,.brand{display:flex;align-items:center;gap:9px}
.brand .lucide{width:20px;height:20px;color:var(--brand)}
.user{display:flex;align-items:center;gap:12px;font-size:.92rem}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);cursor:pointer;
  font-family:var(--font);font-size:.92rem;font-weight:500;
  transition:.15s;
}
.btn .lucide{width:16px;height:16px}
.btn:hover{border-color:#3d4454;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:0;font-weight:600}
.btn.ghost{background:transparent}
.btn.danger{background:var(--danger);border:0}
.btn.lg{padding:13px 26px;font-size:1rem}
.btn.sm{padding:5px 11px;font-size:.82rem}

/* hero */
.hero{max-width:900px;margin:0 auto;padding:80px 24px 40px;text-align:center}
.hero h1{font-size:2.9rem;line-height:1.25;display:block;font-weight:700;letter-spacing:-.02em}
.grad{background:linear-gradient(90deg,var(--brand),var(--brand-2),#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-actions{display:flex;gap:12px;justify-content:center;margin:28px 0}
.stats{display:flex;gap:40px;justify-content:center;margin-top:36px}
.stats div{display:flex;flex-direction:column}
.stats strong{font-size:1.7rem}
.stats span{color:var(--muted);font-size:.85rem}

/* grid + cards */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.features{max-width:1100px;margin:40px auto 80px;padding:0 24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.card h3 .lucide{
  width:34px;height:34px;padding:7px;border-radius:9px;
  background:rgba(88,101,242,.14);color:#a5b1ff;stroke-width:2;
}
.guild-grid{max-width:1100px}
.guild{text-align:center}
.guild img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:10px}
.wrap{max-width:1100px;margin:0 auto;padding:40px 24px}
.center-box{max-width:520px;margin:14vh auto;text-align:center;padding:24px}

/* layout */
.layout{display:grid;grid-template-columns:270px 1fr;min-height:calc(100vh - 59px)}
.sidebar{border-right:1px solid var(--line);padding:20px 14px;background:var(--panel)}
.guild-head{display:flex;gap:12px;align-items:center;padding:8px 10px 18px;border-bottom:1px solid var(--line);margin-bottom:14px}
.guild-head img{width:44px;height:44px;border-radius:50%}
.guild-head small{display:block;color:var(--muted);font-size:.78rem}
.menu{display:flex;flex-direction:column;gap:3px}
.menu a{
  display:flex;align-items:center;gap:11px;
  padding:10px 13px;border-radius:9px;font-size:.93rem;color:#b9c0d2;
  transition:.13s;
}
.menu .lucide{width:18px;height:18px;opacity:.85}
.menu a.active .lucide{opacity:1;color:#c3b5ff}
.menu a:hover{background:var(--panel-2);color:#fff}
.menu a.active{background:linear-gradient(135deg,rgba(88,101,242,.25),rgba(139,92,246,.18));color:#fff;font-weight:600}
.content{padding:32px 40px;max-width:820px}

/* forms */
form{display:flex;flex-direction:column;gap:16px;margin-top:18px}
label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:#c3cadb;font-weight:500}
input[type=text],input[type=url],input[type=number],select,textarea{
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;color:var(--text);font-family:var(--font);font-size:.93rem;width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand)}
textarea{resize:vertical}
select[multiple]{padding:6px}
input[type=color]{width:60px;height:38px;padding:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px}
input[type=range]{accent-color:var(--brand)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.switch{flex-direction:row;align-items:center;gap:10px;cursor:pointer}
.switch input{width:18px;height:18px;accent-color:var(--brand)}
.hint{
  font-size:.85rem;color:var(--muted);background:var(--panel);
  border-left:3px solid var(--brand);padding:10px 14px;border-radius:0 8px 8px 0;
}
.hint .lucide{width:15px;height:15px;vertical-align:-.2em;margin-right:.15em}
button[type=submit]{align-self:flex-start}

/* misc */
.toast{
  display:flex;align-items:center;gap:9px;
  background:rgba(59,165,93,.15);border:1px solid var(--ok);color:#8ff0b0;
  padding:10px 16px;border-radius:10px;margin-bottom:18px;
}
.toast.error{background:rgba(237,66,69,.15);border-color:var(--danger);color:#ffb3b5}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table td{border-bottom:1px solid var(--line);padding:9px 8px;vertical-align:middle}
.table form{margin:0}
.cmds{margin:.4rem 0;padding-left:1.1rem;color:#c3cadb}
.cmds li{margin:.3rem 0}
.cmds .lucide{width:14px;height:14px;vertical-align:-.15em}
.queue{color:#c3cadb;font-size:.92rem}
.player{display:flex;gap:20px;align-items:center}
.player img{width:120px;border-radius:10px}
.player-info{flex:1}
.controls{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.controls .btn{padding:9px 13px}
.controls .lucide{width:17px;height:17px}
.foot{display:flex;gap:10px;align-items:center;justify-content:center;padding:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.foot img{width:26px;border-radius:50%}

@media (max-width:820px){
  .layout{grid-template-columns:1fr}
  .sidebar{border-right:0;border-bottom:1px solid var(--line)}
  .content{padding:24px 18px}
  .row{grid-template-columns:1fr}
  .hero h1{font-size:2rem}
  .player{flex-direction:column;align-items:flex-start}
}