/* Aura dashboard - themeable (dark/light/auto, accent colours, background effects, density, corner radius, motion). */
:root{
  --accent:#7c5cff;--accent2:#22d3ee;--radius:16px;--blur:14px;--gap:1rem;--pad:1.1rem;
  --bg:#0a0c13;--panel:rgba(255,255,255,.055);--panel-solid:#14172a;--line:rgba(255,255,255,.09);--text:#eaecf6;--muted:#98a2b8;
  --ok:#34d399;--warn:#fbbf24;--bad:#f87171;--shadow:0 20px 50px -25px rgba(0,0,0,.8);
}
html[data-theme=light]{--bg:#f3f4fb;--panel:rgba(255,255,255,.78);--panel-solid:#ffffff;--line:rgba(20,24,50,.11);--text:#161a2e;--muted:#59627e;--shadow:0 20px 50px -28px rgba(30,40,90,.35)}
html[data-density=compact]{--gap:.6rem;--pad:.75rem}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;transition:background .3s}
h1,h2,h3,p{margin:0}
.muted{color:var(--muted)}
.err{color:var(--bad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

/* backgrounds */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(90px);opacity:.33;animation:drift 24s ease-in-out infinite alternate}
.bg i:nth-child(1){background:var(--accent);top:-22vmax;left:-12vmax}
.bg i:nth-child(2){background:var(--accent2);bottom:-26vmax;right:-16vmax;animation-delay:-9s}
.bg i:nth-child(3){background:#ec4899;top:32vh;left:38vw;width:28vmax;height:28vmax;opacity:.16;animation-delay:-15s}
html[data-theme=light] .bg i{opacity:.22}
html[data-bg=gradient] .bg i{animation:none}
html[data-bg=gradient] .bg i:nth-child(3){display:none}
html[data-bg=none] .bg{display:none}
@keyframes drift{to{transform:translate3d(6vmax,4vmax,0) scale(1.15)}}
html[data-motion=reduced] *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* shell */
.shell{display:grid;grid-template-columns:15.5rem 1fr;min-height:100vh}
.side{position:sticky;top:0;z-index:20;height:100vh;padding:1.1rem .9rem;display:flex;flex-direction:column;gap:.4rem;border-right:1px solid var(--line);background:var(--panel);backdrop-filter:blur(var(--blur))}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.35rem;letter-spacing:-.02em;padding:.2rem .5rem 1rem;text-decoration:none}
.logo{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 20px -8px var(--accent)}
.brand b{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:grid;gap:.15rem}
.nav .label{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);padding:.8rem .6rem .3rem}
.nav a{display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;border-radius:calc(var(--radius) - 4px);text-decoration:none;color:var(--muted);font-weight:500;transition:background .15s,color .15s}
.nav a:hover{background:var(--line);color:var(--text)}
.nav a[aria-current=page]{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 28%,transparent),color-mix(in srgb,var(--accent2) 16%,transparent));color:var(--text)}
.nav .ico{width:1.2rem;text-align:center}
.spacer{flex:1}
@media (min-width:761px){.side .nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin-right:-.4rem;padding-right:.4rem}.side .spacer{flex:0 0 0}}
.me{display:flex;align-items:center;gap:.6rem;padding:.6rem;border:1px solid var(--line);border-radius:var(--radius)}
.me .name{flex:1;min-width:0;font-size:.9rem}
.kbd{font-size:.72rem;border:1px solid var(--line);border-radius:6px;padding:.05rem .4rem;color:var(--muted)}
.content{padding:2rem clamp(1rem,4vw,3rem) 4rem;max-width:62rem;width:100%}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.page-head h1{font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:-.025em}
.crumbs{display:flex;align-items:center;gap:.6rem}
.crumbs img,.crumbs .ph{width:40px;height:40px;border-radius:12px;background:var(--line);object-fit:cover}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:0;border-radius:calc(var(--radius) - 4px);padding:.6rem 1.1rem;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--accent2)));box-shadow:0 10px 26px -12px var(--accent);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px var(--accent);filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.small{padding:.35rem .8rem;font-size:.85rem}
.btn.danger{background:linear-gradient(135deg,#ef4444,#f97316)}
.input{background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--radius) - 4px);padding:.6rem .9rem;color:var(--text);font:inherit;min-width:0}
.tag{font-size:.74rem;padding:.18rem .6rem;border-radius:99px;background:var(--line);color:var(--muted);white-space:nowrap}
.tag.ok{background:rgba(52,211,153,.15);color:var(--ok)}
.tag.warn{background:rgba(251,191,36,.16);color:var(--warn)}
.tag.lock{background:color-mix(in srgb,var(--accent) 18%,transparent);color:color-mix(in srgb,var(--accent) 70%,var(--text))}
.switch{position:relative;width:46px;height:26px;border-radius:99px;border:0;background:var(--line);cursor:pointer;flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.switch[aria-checked=true]{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.switch[aria-checked=true]::after{transform:translateX(20px)}
.switch:disabled{opacity:.45;cursor:not-allowed}

/* cards with cursor spotlight */
.grid{display:grid;gap:var(--gap)}
.grid.cols{grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}
.card{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(var(--blur));padding:var(--pad);box-shadow:var(--shadow);animation:rise .45s ease both;animation-delay:calc(var(--i,0) * 45ms)}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(22rem circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%)}
.card:hover::before{opacity:1}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.row{display:flex;align-items:center;gap:.9rem}
.row .grow{flex:1;min-width:0}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guild img,.guild .ph{width:46px;height:46px;border-radius:14px;background:var(--line);flex:none;object-fit:cover}

/* stats */
.stat .k{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.stat .v{font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:.2rem 0}
.stat .s{font-size:.85rem;color:var(--muted)}
.ring{--p:0;width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--line) 0);transition:--p .6s}
.ring::after{content:"";width:48px;height:48px;border-radius:50%;background:var(--panel-solid)}
.bars{display:grid;gap:.7rem;margin-top:.8rem}
.bar .top{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.25rem}
.bar .track{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar .fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.status{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.status.pending .dot{background:var(--warn);animation:pulse 1.1s infinite}
@keyframes pulse{50%{opacity:.3}}

/* command manager */
.toolbar{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:0 0 1rem}
.toolbar .input{flex:1;min-width:12rem}
.module{margin-bottom:var(--gap)}
.module h3{font-size:1.05rem;text-transform:capitalize}
.cmd{padding:calc(var(--pad) * .65) 0;border-top:1px solid var(--line)}
.cmd.first{border-top:0}
.cmd code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem}
.cmd.off code{opacity:.5;text-decoration:line-through}

/* appearance */
.field{display:grid;gap:.5rem;margin-bottom:1.3rem}
.field>label,.field>.lbl{font-weight:600}
.swatches{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 2px var(--panel-solid)}
.sw[aria-pressed=true]{border-color:var(--text)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:calc(var(--radius) - 4px);overflow:hidden}
.seg button{background:transparent;border:0;color:var(--muted);padding:.5rem .9rem;font:inherit;cursor:pointer}
.seg button[aria-pressed=true]{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent2) 18%,transparent));color:var(--text)}
input[type=range]{accent-color:var(--accent);width:min(18rem,100%)}
input[type=color]{width:42px;height:34px;padding:0;border:1px solid var(--line);border-radius:10px;background:transparent}

/* skeletons */
.skeleton{border-radius:var(--radius);height:5.2rem;background:linear-gradient(100deg,var(--line) 30%,color-mix(in srgb,var(--line) 40%,transparent) 50%,var(--line) 70%);background-size:200% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* dialogs + palette */
dialog{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-solid);color:var(--text);padding:1.3rem;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);max-width:min(30rem,92vw)}
dialog::backdrop{background:rgba(5,7,15,.6);backdrop-filter:blur(4px)}
dialog menu{display:flex;gap:.6rem;justify-content:flex-end;padding:0;margin:1.2rem 0 0}
#palette{padding:0;width:min(34rem,92vw)}
#palette .input{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:1rem 1.2rem;background:transparent}
#palette ul{list-style:none;margin:0;padding:.4rem;max-height:20rem;overflow:auto}
#palette li{padding:.6rem .8rem;border-radius:10px;cursor:pointer;display:flex;justify-content:space-between;gap:1rem}
#palette li[aria-selected=true]{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.toasts{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);display:grid;gap:.5rem;z-index:20;width:min(28rem,92vw)}
.toast{background:var(--panel-solid);border:1px solid var(--line);border-radius:12px;padding:.7rem 1rem;box-shadow:var(--shadow);animation:rise .25s ease both}
.toast.err{border-color:var(--bad)}

/* login */
.hero{min-height:100vh;display:grid;place-items:center;text-align:center;padding:2rem}
.hero h1{font-size:clamp(2.2rem,7vw,3.8rem);letter-spacing:-.035em;margin:1rem 0 .7rem}
.hero p{max-width:34rem;margin:0 auto 1.6rem}

/* mobile: sidebar becomes a bottom bar */
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;flex-direction:row;align-items:center;padding:.4rem .6rem;border-right:0;border-top:1px solid var(--line);z-index:15}
  .brand,.nav .label,.me .name,.side .kbd,.spacer{display:none}
  .nav{display:flex;gap:.2rem;flex:1;overflow-x:auto}
  .nav a{flex-direction:column;gap:.1rem;font-size:.7rem;padding:.4rem .6rem}
  .me{border:0;padding:0}
  .content{padding-bottom:6rem}
}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.seg{justify-self:start}
.field .row{max-width:30rem}

/* ---- polish round 2 ---- */
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.skip{position:fixed;left:.6rem;top:-3rem;z-index:50;background:var(--panel-solid);color:var(--text);padding:.5rem .9rem;border-radius:10px;border:1px solid var(--line);text-decoration:none;transition:top .15s}
.skip:focus{top:.6rem}
@keyframes fade{from{opacity:0}}
.content{animation:fade .25s ease;outline:0}
.card{animation-delay:calc(var(--i,0) * 30ms)}
.ring span{position:relative;z-index:1;font-size:.8rem;font-weight:700}
.mobile-top{display:none}
.activity{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.1rem}
.activity li{display:flex;gap:.8rem;align-items:baseline;padding:.55rem 0;border-top:1px solid var(--line)}
.activity li:first-child{border-top:0}
.activity .who{font-weight:600}
.activity time{margin-left:auto;font-size:.8rem;color:var(--muted);white-space:nowrap}
.empty{display:grid;place-items:center;text-align:center;gap:.6rem;padding:2.5rem 1rem;color:var(--muted)}
.empty .big{font-size:2rem}
@media (max-width:760px){
  .mobile-top{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.25rem;margin-bottom:1.2rem}
  .nav{scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .side .btn .kbd{display:none}
  .page-head .btn{align-self:flex-start}
}
.hero{position:relative}
.hero-theme{position:absolute;top:1rem;right:1rem}
@media (max-width:760px){.btn .lbl{display:none}}
.ring>*,.ring::after{grid-area:1/1}
.ring{width:56px;height:56px}
.ring::after{width:42px;height:42px}
.stat .k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.06em}
.me{flex-wrap:wrap;gap:.45rem}
.me .name{flex-basis:100%}
@media (max-width:760px){
  .side>.btn{display:none}
  .me{flex-wrap:nowrap}
  .me .btn{padding:.35rem .6rem}
  .nav a{min-width:3.6rem;align-items:center;white-space:nowrap}
}

/* moderation page */
.case .ico{font-size:1.4rem;width:2rem;text-align:center}
.case-meta{display:grid;gap:.25rem;justify-items:end;text-align:right;font-size:.8rem}
.case.ban{border-left:3px solid #f87171}.case.kick{border-left:3px solid #fb923c}.case.timeout{border-left:3px solid #fbbf24}.case.warn{border-left:3px solid #facc15}.case.unban,.case.untimeout{border-left:3px solid #34d399}.case.note{border-left:3px solid var(--line)}
.seg{flex-wrap:wrap}
@media (max-width:760px){.case-meta{display:none}}
/* server cards: roomy enough for icon + name + status + action without overlap */
.grid.cols:has(.guild){grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.guild .grow{overflow:hidden}
.guild .grow .tag{display:inline-block;margin-top:.3rem;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.guild .btn{flex:none;position:static}

/* searchable server switcher */
.srvsw{position:relative;min-width:0;font-weight:500;font-size:.95rem}
.srvsw-btn{width:100%;justify-content:space-between}
.srvsw-menu{position:absolute;left:0;width:max(100%,19rem);top:calc(100% + .35rem);z-index:30;padding:.5rem;background:var(--panel-solid,var(--bg));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(var(--blur));}
.srvsw-menu[hidden]{display:none}
.srvsw-menu .input{width:100%;margin-bottom:.4rem}
.srvsw-list{list-style:none;margin:0;padding:0;max-height:min(18rem,50vh);overflow-y:auto;overscroll-behavior:contain}
.srvsw-item{display:flex;align-items:center;gap:.6rem;width:100%;padding:.45rem .5rem;border:0;border-radius:calc(var(--radius) - 6px);background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.srvsw-item:hover,.srvsw-item:focus-visible{background:var(--line)}
.srvsw-item img,.srvsw-item .ph{width:24px;height:24px;border-radius:8px;flex:none;background:var(--line)}
.srvsw-list [aria-selected=true] .srvsw-item{font-weight:700}
.srvsw-empty{padding:.6rem}
.mobile-top .srvsw{margin-left:auto;width:11rem}
@media (max-width:760px){.side .srvsw{display:none}.mobile-top .srvsw-menu{left:auto;right:0;width:min(20rem,calc(100vw - 2rem))}}
@media (min-width:761px){.mobile-top .srvsw{display:none}}
/* language picker */
.lang-select{width:100%;cursor:pointer}
.lang-select.compact{padding:.35rem .6rem;font-size:.85rem}
.hero-theme{display:flex;gap:.5rem;align-items:center}
.me .lang-select{margin-bottom:.4rem}
[dir=rtl] .side{border-right:0;border-left:1px solid var(--line)}
@media (max-width:760px){.me .lang-select{display:none}}

/* collapsible modules, favourites and groups */
.fold{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0;background:none;border:0;color:inherit;font:inherit;text-align:start;cursor:pointer;padding:.2rem 0}
.fold:hover .chev{color:var(--accent)}
.fold .grow{min-width:0}
.fold h3{margin:0}
.chev{width:1.1rem;color:var(--muted);transition:color .15s}
.card.closed{padding-block:calc(var(--pad) * .6)}
.star{background:none;border:0;cursor:pointer;font-size:1.25rem;line-height:1;color:var(--muted);padding:.2rem .35rem;border-radius:8px}
.star:hover{color:#f59e0b;background:var(--line)}
.star.on{color:#f59e0b}
.grp-select{width:7.2rem;padding:.3rem .5rem;font-size:.8rem}
h2.sect{font-size:1rem;color:var(--muted);margin:1.6rem 0 .8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.rendered .card{animation:none}

/* update banner */
.update-banner{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:60;display:flex;gap:.8rem;align-items:center;background:var(--panel-solid);border:1px solid var(--accent);border-radius:var(--radius);padding:.6rem 1rem;box-shadow:var(--shadow);max-width:calc(100vw - 2rem)}
@media (max-width:760px){.update-banner{bottom:5.5rem}}

/* permission warning (Overview and AutoMod) */
.card.permwarn{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,var(--panel))}
.permwarn h3{margin:0 0 .3rem}
.permwarn ul{margin:.6rem 0;padding-inline-start:1.2rem}
.permwarn li{margin:.35rem 0}
.permwarn .miss{font-weight:700}