/* Nexus dashboard. Same system as the landing page (landing.css):
   dark only, sky-blue accent, Geist, glass surfaces over soft colour glows.
   Radius rule: containers 24px, everything you press is a full pill. */

:root {
  color-scheme: dark;
  --bg: #121417;
  --panel: #1a1d21;
  --panel-2: #23272d;
  --border: rgb(255 255 255 / .09);
  --text: #f2f4f7;
  --muted: #a0a7b2;
  --dim: #6b727d;
  --accent: #62cdf6;
  --accent-text: #062130;
  --ok: #3ddc84;
  --danger: #ff6b6b;
  --warn: #f5c451;
  --pink: #ff8fb1;
  --embed-bg: #2b2d31;
  --radius: 24px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pane: linear-gradient(rgb(255 255 255 / .03), rgb(255 255 255 / .03));
  --edge: 1px solid rgb(255 255 255 / .08);
  --lip: 0 0 #0000;
  --blur: blur(18px) saturate(160%);
  --glass: rgb(255 255 255 / .03);
  --head: Geist, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 40% at 95% 0%, rgb(98 205 246 / .07), transparent);
}
a { color: var(--accent); }
h1, h2, h3 { margin: 0 0 .4em; font-family: var(--head); line-height: 1.08; letter-spacing: -.03em; font-weight: 650; }
h1 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.045em; font-weight: 700; }
h2 { font-size: 22px; }
h3 { font-size: 17px; letter-spacing: -.02em; }
code, .mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-text); }

/* ---------- buttons ---------- */
button, .btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  min-height: 38px; padding: 0 18px; border-radius: 999px; border: var(--edge); background: rgb(255 255 255 / .05); box-shadow: var(--lip);
  color: var(--text); font: 600 14px/1 Geist, sans-serif; cursor: pointer; text-decoration: none;
  transition: transform .3s var(--ease), background .2s, border-color .2s, box-shadow .3s;
}
button:hover, .btn:hover { border-color: rgb(255 255 255 / .26); background: rgb(255 255 255 / .08); }
button:active, .btn:active { transform: translateY(1px) scale(.98); }
button:disabled { opacity: .5; cursor: default; transform: none; }
.btn-primary {
  color: var(--accent-text); border: 1px solid rgb(255 255 255 / .36);
  background: linear-gradient(135deg, rgb(130 216 249 / .97), rgb(98 205 246 / .78));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45);
}
.btn-primary:hover { background: linear-gradient(135deg, rgb(150 224 251), rgb(110 210 248 / .85)); border-color: rgb(255 255 255 / .5); transform: translateY(-1px); }

.btn-danger { color: #ff9a9a; }
.btn-danger:hover { border-color: rgb(255 107 107 / .5); background: rgb(255 107 107 / .1); }
.btn-sm { min-height: 30px; padding: 0 12px; font-size: 13px; }
.btn-lg { min-height: 50px; padding: 0 28px; font-size: 16px; }
.btn-icon { width: 34px; min-height: 34px; padding: 0; }

/* ---------- inputs ---------- */
input[type=text], input[type=number], input[type=url], input[type=search], input[type=time], textarea, select {
  width: 100%; padding: 10px 14px; border-radius: 14px; border: var(--edge); background: rgb(0 0 0 / .22); box-shadow: inset 0 1px 2px rgb(0 0 0 / .25);
  color: var(--text); font: 14.5px Geist, sans-serif; transition: border-color .2s, background .2s;
}
input:hover, textarea:hover, select:hover { border-color: rgb(255 255 255 / .2); }
input:focus, textarea:focus, select:focus { outline: none; border-color: rgb(98 205 246 / .6); background: rgb(0 0 0 / .3); box-shadow: 0 0 0 3px rgb(98 205 246 / .15); }
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
select { appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a0a7b2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
select option { background: #1f2328; }
input[type=color] { width: 46px; height: 38px; padding: 3px; border: var(--edge); border-radius: 12px; background: rgb(0 0 0 / .22); cursor: pointer; }
input[type=checkbox] { accent-color: var(--accent); }

/* toggle switch */
.switch { position: relative; display: inline-block; width: 46px; height: 27px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 27px; background: rgb(255 255 255 / .14); box-shadow: inset 0 1px 2px rgb(0 0 0 / .3); cursor: pointer; transition: background .35s var(--ease); }
.switch span::before { content: ''; position: absolute; width: 21px; height: 21px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .35); transition: transform .35s var(--ease); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(19px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.switch.big { width: 58px; height: 33px; }
.switch.big span::before { width: 27px; height: 27px; }
.switch.big input:checked + span::before { transform: translateX(25px); }

/* ---------- layout ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 22px;
  background: linear-gradient(180deg, rgb(98 205 246 / .05), transparent), rgb(18 20 23 / .66);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--border);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.brand-logo { width: 30px; height: 30px; transition: transform .6s var(--ease); }
.brand:hover .brand-logo { transform: rotate(-12deg) scale(1.08); }
.spacer { flex: 1; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: var(--edge); background: rgb(255 255 255 / .04); font-size: 13px; color: var(--muted); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.status.on i { background: var(--ok); box-shadow: 0 0 0 4px rgb(61 220 132 / .15); animation: beat 2.4s ease-in-out infinite; }
.status.off i { background: var(--danger); }
@keyframes beat { 50% { box-shadow: 0 0 0 7px rgb(61 220 132 / 0); } }
.user { display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--panel-2); }

.layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 0; min-height: calc(100vh - 64px); }
.sidebar { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: 18px 14px 30px; border-right: 1px solid var(--border); scrollbar-width: thin; }
.side-guild { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 10px; border-radius: 20px; background: var(--glass); border: var(--edge); box-shadow: var(--lip); }
.side-guild b { display: block; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-guild span { font-size: 12.5px; color: var(--muted); }
.sidebar a.nav { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--muted); text-decoration: none; font-weight: 500; transition: background .2s, color .2s; }
.sidebar a.nav .i { flex: none; opacity: .85; }
.sidebar a.nav:hover { background: rgb(255 255 255 / .05); color: var(--text); }
.sidebar a.nav.active { color: var(--text); background: rgb(255 255 255 / .06); }
.sidebar a.nav.active .i { color: var(--accent); opacity: 1; }
.sidebar a.nav.active::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sidebar .sec { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); padding: 18px 12px 6px; }
.sidebar .dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / .15); }
.sidebar .dot.on { background: var(--ok); }
.sidebar .wizard-link { margin-top: 6px; color: var(--accent); }

.main { padding: 34px 40px 120px; max-width: 1080px; width: 100%; }
.menu-btn { display: none; }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; position: fixed; inset: 64px 0 0; z-index: 25; height: auto; background: rgb(18 20 23 / .96); border: 0; }
  .sidebar.open { display: block; }
  .menu-btn { display: inline-flex; }
  .main { padding: 24px 16px 120px; }
  .topbar { padding: 0 14px; gap: 10px; }
  .status span, .user .uname { display: none; }
}

/* ---------- page header ---------- */
.page-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head .grow { flex: 1; min-width: 240px; }
.page-head p { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }
.page-head .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--accent); flex: none;
  background: rgb(98 205 246 / .1); border: 1px solid rgb(98 205 246 / .2); }
.page-head .guild-icon { width: 56px; height: 56px; border-radius: 18px; font-size: 18px; }
.eyebrow { display: block; font: 600 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.crumb { font: 500 12.5px var(--mono); color: var(--dim); margin-bottom: 8px; display: block; text-decoration: none; }
.crumb:hover { color: var(--muted); }

/* ---------- surfaces ---------- */
.card { position: relative; background: var(--glass); border: var(--edge); border-radius: 20px; padding: 24px; margin-bottom: 16px; }
.card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 18px; }
.card-title .muted { font-weight: 500; font-size: 13px; letter-spacing: 0; }
.card.blue { color: var(--accent-text); border: 1px solid rgb(255 255 255 / .34); background: linear-gradient(135deg, rgb(130 216 249 / .95), rgb(98 205 246 / .75));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -12px 26px rgb(43 168 222 / .3), 0 10px 34px rgb(98 205 246 / .2); }
.card.blue p, .card.blue .muted { color: rgb(6 33 48 / .75); }
.card.blue .btn { background: var(--accent-text); color: #fff; border-color: transparent; box-shadow: none; }
.card.blue .btn:hover { background: #0b3348; }
.card.dimmed .field, .card.dimmed .form-sec { opacity: .55; }
.off-note { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: 0 0 16px; border-radius: 16px; background: rgb(245 196 81 / .1); border: 1px solid rgb(245 196 81 / .3); color: #ffd98a; font-size: 14px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat { padding: 16px 18px; border-radius: 20px; background: var(--glass); border: var(--edge); box-shadow: var(--lip); margin: 0; }
.stat dt { font-size: 12.5px; color: var(--muted); }
.stat dd { margin: 4px 0 0; font: 650 26px/1.1 var(--head); letter-spacing: -.03em; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; color: var(--text); text-decoration: none;
  background: var(--glass); border: var(--edge); transition: border-color .2s, background .2s; }
.tile:hover { border-color: rgb(255 255 255 / .16); background: rgb(255 255 255 / .045); }
.tile .desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--muted); font-size: 13.5px; font-weight: 550; text-decoration: none; transition: color .2s, gap .2s; }
.tile-link:hover, .tile:hover .tile-link { color: var(--accent); gap: 9px; }
.tile .row { display: flex; align-items: center; gap: 12px; }
.tile .icon, .chip-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgb(255 255 255 / .06); border: var(--edge); color: var(--muted); flex: none; transition: color .3s, background .3s; }
.tile.is-on .icon { color: var(--accent); background: rgb(98 205 246 / .12); border-color: rgb(98 205 246 / .3); }
.tile .name { flex: 1; font-weight: 650; font-size: 16px; letter-spacing: -.01em; }
.tile .desc { color: var(--muted); font-size: 13.5px; flex: 1; }
.tile .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }


.guild-icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-weight: 700; background: var(--panel-2); object-fit: cover; flex: none; border: var(--edge); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 500 12px var(--mono); background: rgb(255 255 255 / .07); color: var(--muted); border: 1px solid rgb(255 255 255 / .06); }
.badge.ok { background: rgb(61 220 132 / .12); color: #7ff0ae; border-color: rgb(61 220 132 / .25); }
.badge.bad { background: rgb(255 107 107 / .12); color: #ff9a9a; border-color: rgb(255 107 107 / .25); }
.badge.blue { background: rgb(98 205 246 / .14); color: var(--accent); border-color: rgb(98 205 246 / .3); }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar input[type=search] { max-width: 320px; border-radius: 999px; padding-left: 40px;
  background: rgb(0 0 0 / .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a0a7b2' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5.5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat 15px center; }
.seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px; background: var(--glass); border: var(--edge); box-shadow: var(--lip); }
.seg button { min-height: 30px; padding: 0 14px; border: 1px solid transparent; background: none; box-shadow: none; color: var(--muted); font-size: 13px; }
.seg button.on { color: var(--accent-text); background: linear-gradient(135deg, rgb(130 216 249 / .96), rgb(98 205 246 / .78)); border-color: rgb(255 255 255 / .34); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5); }

/* ---------- forms ---------- */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field > label, .field-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }
.field .help { font-size: 13px; color: var(--muted); margin-top: 6px; }
.warn-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #ffd98a; margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: rgb(245 196 81 / .08); border: 1px solid rgb(245 196 81 / .22); }
.field-inline { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 16px; background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .06); }
.field-inline > label { margin: 0; font-weight: 550; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 12px; border-radius: 999px; background: rgb(255 255 255 / .06); border: var(--edge); font-size: 13.5px; font-weight: 500; }
.chip.warn { border-color: rgb(245 196 81 / .45); background: rgb(245 196 81 / .1); }
.chip button { min-height: 22px; width: 22px; padding: 0; border: 0; background: rgb(255 255 255 / .08); box-shadow: none; color: var(--muted); font-size: 14px; }
.chip button:hover { background: rgb(255 107 107 / .25); color: #fff; }
.chip .swatch { width: 10px; height: 10px; border-radius: 50%; }

.list-item { border-radius: 20px; margin-bottom: 10px; background: rgb(255 255 255 / .03); border: var(--edge); overflow: hidden; }
.list-item > header { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; cursor: pointer; user-select: none; }
.list-item > header .title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item > header .caret { color: var(--dim); transition: transform .3s var(--ease); }
.list-item:not(.collapsed) > header .caret { transform: rotate(90deg); }
.list-item > .body { padding: 14px 16px 16px; border-top: 1px solid var(--border); }
.list-item.collapsed > .body { display: none; }
.list-item .list-item { background: rgb(0 0 0 / .15); }
.add-btn { width: 100%; min-height: 44px; border-style: dashed; background: transparent; color: var(--muted); box-shadow: none; }
.add-btn:hover { color: var(--accent); border-color: rgb(98 205 246 / .5); background: rgb(98 205 246 / .06); }

/* message builder */
.msg-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 16px; border-radius: 20px; background: rgb(0 0 0 / .16); border: var(--edge); }
@media (max-width: 980px) { .msg-builder { grid-template-columns: 1fr; } }
.msg-builder .field { margin-bottom: 12px; }
.msg-builder .field > label { font-size: 13px; color: var(--muted); font-weight: 500; }
.embed-fields-row { display: grid; grid-template-columns: 1fr 1.6fr auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.pv-col { position: sticky; top: 80px; align-self: start; }
.pv-label { font: 500 11.5px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.preview { background: var(--embed-bg); border-radius: 14px; padding: 14px 16px; font-size: 14.5px; overflow-wrap: anywhere; border: 1px solid rgb(0 0 0 / .3); }
.preview .pv-author { display: flex; align-items: center; gap: 8px; }
.preview .pv-bot { width: 38px; height: 38px; border-radius: 50%; background: var(--accent) url(/img/logo.svg) center / 84% no-repeat; flex: none; }
.preview .pv-name { font-weight: 600; }
.preview .pv-tag { background: #5865f2; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; font-weight: 700; }
.preview .pv-time { color: #949ba4; font-size: 12px; }
.pv-body { margin: -14px 0 0 46px; }
.pv-embed { display: grid; grid-template-columns: 1fr auto; gap: 8px; border-left: 4px solid var(--accent); background: #232428; border-radius: 4px; padding: 10px 14px 12px; margin-top: 6px; max-width: 460px; }
.pv-embed .t { font-weight: 700; }
.pv-embed .thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.pv-embed .img { grid-column: 1 / -1; max-width: 100%; border-radius: 6px; }
.pv-embed .f { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
.pv-embed .f > div { flex: 1 1 100%; }
.pv-embed .f > div.inline { flex: 1 1 30%; }
.pv-embed .foot { grid-column: 1 / -1; font-size: 12px; color: #949ba4; }
.pv-text { white-space: pre-wrap; color: #dbdee1; }
.test-row { display: flex; gap: 8px; margin-top: 12px; }
.test-row select { flex: 1; }
.vars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vars code { cursor: pointer; background: rgb(98 205 246 / .1); color: var(--accent); border: 1px solid rgb(98 205 246 / .2); padding: 2px 8px; border-radius: 8px; font-size: 12px; transition: background .2s; }
.vars code:hover { background: rgb(98 205 246 / .22); }
details summary { cursor: pointer; color: var(--muted); font-size: 13px; }

/* save bar */
.savebar { position: fixed; left: 50%; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 10px; width: min(620px, calc(100% - 28px)); padding: 10px 10px 10px 20px; border-radius: 999px;
  transform: translateX(-50%); background: var(--pane), rgb(26 29 33 / .88); border: var(--edge); box-shadow: var(--lip), 0 20px 60px rgb(0 0 0 / .5);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); animation: barIn .5s var(--ease); }
.savebar .spacer { flex: 1; }
.savebar kbd { font: 500 11px var(--mono); padding: 2px 6px; border-radius: 6px; background: rgb(255 255 255 / .08); color: var(--muted); }
.savebar.shake { animation: shake .45s var(--ease); }
@keyframes barIn { from { transform: translate(-50%, 30px); opacity: 0; } }
@keyframes shake { 20% { transform: translate(calc(-50% - 9px), 0); } 45% { transform: translate(calc(-50% + 7px), 0); } 70% { transform: translate(calc(-50% - 4px), 0); } }
@media (max-width: 560px) { .savebar kbd, .savebar .msg { display: none; } }

/* tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { color: var(--dim); font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: rgb(255 255 255 / .025); }

/* toast */
.toast { position: fixed; top: 78px; right: 18px; z-index: 60; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 36px); padding: 12px 18px; border-radius: 18px;
  background: var(--pane), rgb(26 29 33 / .92); border: var(--edge); border-left: 4px solid var(--ok); box-shadow: var(--lip), 0 16px 40px rgb(0 0 0 / .4);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); animation: toastIn .5s var(--ease); }
.toast.err { border-left-color: var(--danger); }
@keyframes toastIn { from { transform: translateY(-14px); opacity: 0; } }

.empty { text-align: center; padding: 50px 16px; color: var(--muted); }
.empty img { width: 90px; margin: 0 auto 14px; display: block; opacity: .9; }

/* leaderboard */
.lb-row { display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-bottom: 1px solid var(--border); }
.lb-row:last-child { border-bottom: 0; }
.lb-row .rank { width: 42px; flex: none; text-align: center; font: 650 15px var(--mono); color: var(--muted); }
.lb-row .rank.top { color: var(--accent-text); background: linear-gradient(135deg, #9be2fb, #62cdf6); border-radius: 999px; padding: 3px 0; }
.lb-row .name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 7px; background: rgb(255 255 255 / .08); border-radius: 7px; overflow: hidden; margin-top: 6px; }
.bar > div { height: 100%; border-radius: 7px; background: linear-gradient(90deg, #2fa9da, #9be2fb); }

/* ---------- setup wizard ---------- */
.wiz { max-width: 860px; }
.wiz-steps { display: flex; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.wiz-steps span { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; font-size: 13px; font-weight: 550; color: var(--dim); background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .06); transition: all .4s var(--ease); }
.wiz-steps span i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--mono); font-style: normal; background: rgb(255 255 255 / .08); }
.wiz-steps span.done { color: var(--muted); }
.wiz-steps span.done i { background: var(--ok); color: #05210f; }
.wiz-steps span.cur { color: var(--accent-text); background: linear-gradient(135deg, rgb(130 216 249 / .96), rgb(98 205 246 / .8)); border-color: rgb(255 255 255 / .34); }
.wiz-steps span.cur i { background: rgb(6 33 48 / .2); }
.wiz-progress { height: 4px; border-radius: 4px; background: rgb(255 255 255 / .06); margin-bottom: 24px; overflow: hidden; }
.wiz-progress div { height: 100%; background: linear-gradient(90deg, #2fa9da, #9be2fb); transition: width .6s var(--ease); }
.wiz-card { animation: stepIn .6s var(--ease); padding: 30px; }
@keyframes stepIn { from { opacity: 0; transform: translateY(18px); } }
.wiz-card h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.04em; margin-bottom: 8px; }
.wiz-card > p.lead { color: var(--muted); margin: 0 0 24px; font-size: 16px; max-width: 60ch; }
.wiz-nav { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
.wiz-nav .spacer { flex: 1; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pick { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: rgb(255 255 255 / .03); border: var(--edge); transition: all .3s var(--ease); }
.pick:hover { border-color: rgb(255 255 255 / .25); transform: translateY(-2px); }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pick .ic { color: var(--muted); line-height: 0; padding-top: 1px; }
.pick.on .ic { color: var(--accent); }
.pick b { display: block; font-size: 14.5px; }
.pick small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.pick .tick { margin-left: auto; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgb(255 255 255 / .25); flex: none; display: grid; place-items: center; font-size: 13px; color: transparent; transition: all .3s var(--ease); }
.pick.on { background: rgb(98 205 246 / .1); border-color: rgb(98 205 246 / .45); }
.pick.on .tick { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.create-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.review { display: grid; gap: 10px; }
.review > div { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: rgb(255 255 255 / .03); border: var(--edge); }
.review .ic { color: var(--accent); line-height: 0; padding-top: 2px; }
.review b { display: block; }
.review ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; }
.done-art { width: 150px; margin: 4px auto 18px; display: block; animation: bob 3.6s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgb(98 205 246 / .3)); }
@keyframes bob { 50% { transform: translateY(-10px) rotate(4deg); } }

/* public leaderboard page */
.lb-page { max-width: 820px; margin: 0 auto; padding: 40px 18px 80px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- topbar search (Ctrl K), user menu, server switcher ---------- */
.topbar { display: grid; grid-template-columns: auto 1fr auto; }
.topbar .left, .topbar .right { display: flex; align-items: center; gap: 12px; }
.topbar .right { justify-content: flex-end; }
.search { position: relative; width: min(460px, 100%); justify-self: center; }
.search input { width: 100%; padding: 9px 70px 9px 40px; border-radius: 12px; background: rgb(0 0 0 / .25); }
.search > .i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 11px var(--mono); padding: 3px 7px; border-radius: 7px; background: rgb(255 255 255 / .07); color: var(--dim); border: 1px solid rgb(255 255 255 / .08); pointer-events: none; }
.menu { position: absolute; z-index: 50; min-width: 240px; padding: 6px; border-radius: 16px; background: var(--pane), rgb(24 27 31 / .97); border: var(--edge);
  box-shadow: var(--lip), 0 24px 60px rgb(0 0 0 / .55); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); animation: menuIn .25s var(--ease); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } }
.search .menu { left: 0; right: 0; top: calc(100% + 8px); max-height: 60vh; overflow-y: auto; }
.menu a, .menu button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; color: var(--text); cursor: pointer; font-size: 14px; }
.menu a:hover, .menu button:hover, .menu .sel { background: rgb(98 205 246 / .12); }
.menu .i { color: var(--muted); flex: none; }
.menu small { margin-left: auto; color: var(--dim); font-size: 12px; white-space: nowrap; }
.menu .sep { height: 1px; background: var(--border); margin: 6px 4px; }
.menu .label { padding: 8px 12px 4px; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.menu .empty-row { padding: 12px; color: var(--muted); font-size: 13.5px; }
.menu .guild-icon { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }
.user-btn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 999px; transition: background .2s; }
.user-btn:hover { background: rgb(255 255 255 / .06); }
.user-btn > .i { color: var(--dim); }
.user-wrap { position: relative; }
.user-wrap .menu { right: 0; top: calc(100% + 8px); }
.switcher { position: relative; margin-bottom: 14px; }
.switcher > button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 16px; background: var(--glass); border: var(--edge); box-shadow: var(--lip); transition: border-color .2s; }
.switcher > button:hover { border-color: rgb(255 255 255 / .22); }
.switcher > button .guild-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 13px; }
.switcher b { display: block; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher span.sub { font-size: 12px; color: var(--muted); }
.switcher > button > .i { margin-left: auto; color: var(--dim); }
.switcher .menu { left: 0; right: 0; top: calc(100% + 6px); max-height: 50vh; overflow-y: auto; }
@media (max-width: 860px) {
  .topbar { grid-template-columns: auto auto 1fr; }
  .search { display: none; }
  .user-btn .uname { display: none; }
}

/* ---------- home: greeting, glow, section titles, quick actions ---------- */
.main { position: relative; }
.glow { position: absolute; z-index: -1; top: -40px; right: 0; width: 340px; height: 340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 40%, rgb(98 205 246 / .55), rgb(43 168 222 / .18) 45%, transparent 70%); filter: blur(30px); }
.hello { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.04em; margin: 0; }
.hello em { font-style: normal; color: var(--accent); }
.hello-sub { color: var(--muted); font-size: 15px; margin: 6px 0 0; white-space: pre-wrap; }
.sec-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 30px 0 14px; }
.sec-title h2 { position: relative; margin: 0; padding-bottom: 10px; font-size: 19px; letter-spacing: -.02em; }
.sec-title h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--accent); }
.sec-title .toolbar { margin: 0; flex-wrap: nowrap; }
.sec-title .toolbar input[type=search] { width: 240px; }
@media (max-width: 600px) { .sec-title .toolbar { flex-wrap: wrap; } .sec-title .toolbar input[type=search] { width: 100%; } }
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.quick a { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: 18px; text-decoration: none; color: var(--text);
  background: var(--glass); border: var(--edge); box-shadow: var(--lip); transition: transform .4s var(--ease), border-color .3s; }
.quick a:hover { border-color: rgb(255 255 255 / .16); background: rgb(255 255 255 / .045); }
.quick .chip-ico { margin-bottom: 12px; color: var(--accent); background: rgb(98 205 246 / .1); border-color: rgb(98 205 246 / .2); }
.quick b { font-weight: 600; }
.quick span { color: var(--muted); font-size: 13.5px; }
.quick .corner { position: absolute; top: 16px; right: 16px; color: var(--dim); }

@media (max-width: 980px) { .quick { grid-template-columns: 1fr 1fr; } }
.tile .name { font-weight: 600; }
.tile .foot .btn { margin-left: auto; }
.field.flash { animation: flash 1.6s var(--ease); border-radius: 14px; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px rgb(98 205 246 / .5); background: rgb(98 205 246 / .06); } }

/* ---------- stats page ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stats .stat { display: flex; flex-direction: column; gap: 4px; }
.stat-label { font-size: 12.5px; color: var(--muted); }
.stat-value { font: 650 26px/1.1 var(--head); letter-spacing: -.03em; color: var(--text); }
.c-wrap { position: relative; }
.c-svg { display: block; width: 100%; height: auto; overflow: visible; }
.c-grid { stroke: rgb(255 255 255 / .08); stroke-width: 1; }
.c-cross { stroke: rgb(255 255 255 / .28); stroke-width: 1; }
.c-tick { fill: var(--dim); font: 500 11px var(--mono); }
.c-label { fill: var(--muted); font: 600 12px var(--head); }
.c-tip { display: none; position: absolute; transform: translate(-50%, -100%); pointer-events: none; padding: 8px 10px; border-radius: 10px;
  background: #0c0d0f; border: var(--edge); font-size: 12.5px; color: var(--text); white-space: nowrap; box-shadow: 0 8px 24px rgb(0 0 0 / .4); z-index: 5; }
.c-tip div:first-child { color: var(--muted); margin-bottom: 2px; }
.c-legend { display: flex; gap: 16px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.c-legend span { display: inline-flex; align-items: center; gap: 7px; }
.c-legend i { width: 14px; height: 3px; border-radius: 2px; }
.c-bars { display: grid; gap: 10px; }
.c-bar { display: grid; grid-template-columns: minmax(90px, 180px) 1fr 48px; align-items: center; gap: 12px; font-size: 13.5px; }
.c-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-bar-track { height: 14px; }
.c-bar-track span { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.c-bar-value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- history window ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / .55); backdrop-filter: blur(4px); }
.modal-card { width: min(560px, 100%); max-height: 86vh; overflow: auto; padding: 20px; border-radius: 22px; background: var(--panel); border: var(--edge); box-shadow: 0 30px 80px rgb(0 0 0 / .5); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.modal-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; }
.history { display: grid; gap: 8px; }
.history-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--glass); border: var(--edge); }
.history-row .grow { min-width: 0; }
.history-row .btn-sm { display: inline-flex; align-items: center; gap: 4px; }
.chip.off { opacity: .55; }
.tile .chips { margin: 0; }
.tile .chip { padding: 2px 10px; font-size: 12px; }

/* ---------- richer preview markdown ---------- */
.pv-mention { background: rgb(88 101 242 / .3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.pv-h1, .pv-h2, .pv-h3 { display: block; font-weight: 700; color: #f2f3f5; line-height: 1.25; margin: 4px 0; }
.pv-h1 { font-size: 1.5em; } .pv-h2 { font-size: 1.25em; } .pv-h3 { font-size: 1.05em; }
.pv-sub { display: block; font-size: 12px; color: #949ba4; }
.pv-quote { display: block; padding-left: 10px; border-left: 4px solid #4e5058; }
.pv-li { display: block; padding-left: 16px; position: relative; }
.pv-li::before { content: '•'; position: absolute; left: 4px; }
.pv-spoiler { background: #1e1f22; color: transparent; border-radius: 3px; transition: color .2s; }
.pv-spoiler:hover { color: inherit; }
.pv-ts { background: rgb(255 255 255 / .08); border-radius: 3px; padding: 0 3px; }
.preview a { color: #00a8fc; text-decoration: none; }
.preview pre { margin: 4px 0; padding: 8px; white-space: pre-wrap; background: #1e1f22; border-radius: 4px; font: 13px var(--mono); }
input[type=time] { max-width: 180px; color-scheme: dark; }
.history-row .grow { flex: 1; }
.history-row .btn-sm { flex: none; }

/* Terms · Privacy, small, under Log out */
.menu .menu-legal { padding: 6px 12px 4px; font-size: 12px; color: var(--dim); }
.menu .menu-legal a { display: inline; padding: 0; color: var(--dim); background: none; }
.menu .menu-legal a:hover { color: var(--text); background: none; text-decoration: underline; }

/* member lookup */
.member-head { display: flex; gap: 16px; align-items: center; }
.member-av { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; margin-top: 18px; }
.fact { display: flex; flex-direction: column; gap: 2px; }
.fact b { font-weight: 600; font-size: 14.5px; }

/* automod test box */
.test-result { margin-top: 4px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); font-weight: 600; }
.test-result.ok { color: #7ff0ae; border-color: rgb(61 220 132 / .35); background: rgb(61 220 132 / .08); }
.test-result.bad { color: #ff9a9a; border-color: rgb(255 107 107 / .35); background: rgb(255 107 107 / .08); }

/* Health check */
.health-top { display: flex; align-items: center; gap: 20px; }
.grade { width: 76px; height: 76px; flex: none; border-radius: 22px; display: grid; place-items: center; font: 700 40px/1 var(--head); border: var(--edge); }
.g-A { background: rgb(61 220 132 / .14); color: #7ff0ae; }
.g-B { background: rgb(98 205 246 / .14); color: var(--accent); }
.g-C { background: rgb(245 196 81 / .14); color: #f5c451; }
.g-D, .g-F { background: rgb(255 107 107 / .14); color: #ff9a9a; }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid rgb(255 255 255 / .06); }
.check:first-of-type { border-top: 0; }
.check .grow, .feed-row .grow { flex: 1; min-width: 0; }
.check-ico { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: rgb(245 196 81 / .14); color: #f5c451; }
.check.ok .check-ico { background: rgb(61 220 132 / .14); color: #7ff0ae; }
.check.ok b { font-weight: 500; color: var(--muted); }
/* Control room */
.live-dot { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #7ff0ae; margin-bottom: 12px; }
.live-dot i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; animation: livepulse 1.6s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgb(61 220 132 / .6); } 100% { box-shadow: 0 0 0 10px rgb(61 220 132 / 0); } }
.feed { max-height: 560px; overflow-y: auto; }
.feed-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgb(255 255 255 / .06); animation: feedin .3s ease; }
.feed-row:first-child { border-top: 0; }
.feed-ico { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgb(255 255 255 / .05); }
.feed-row .row-actions { display: flex; gap: 6px; flex: none; }
@keyframes feedin { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 640px) { .feed-row { flex-wrap: wrap; } .feed-row .row-actions { width: 100%; padding-left: 44px; } .health-top { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .live-dot i, .feed-row { animation: none; } }

/* Owner dashboard */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-2 > .card { margin-bottom: 16px; min-width: 0; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.ofield { display: block; margin-top: 10px; }
.ofield > span { display: block; margin-bottom: 6px; }
.owner-table .guild-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 11px; flex: none; }
.owner-table td { vertical-align: middle; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; align-items: center; gap: 12px; padding: 5px 0; }
.bar-label { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 8px; border-radius: 999px; background: rgb(255 255 255 / .06); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.notice-bar { display: flex; gap: 10px; align-items: center; padding: 10px 16px; font-size: 14px; border-bottom: 1px solid rgb(98 205 246 / .25); background: rgb(98 205 246 / .1); color: var(--text); }
.notice-bar.warn { border-color: rgb(245 196 81 / .35); background: rgb(245 196 81 / .12); }

/* Server list: the three Syntra DEV bots per server */
.tile-main { display: block; color: inherit; text-decoration: none; }
.family { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .06); }
.chip.fam { padding: 4px 10px; font-size: 12.5px; text-decoration: none; color: var(--text); }
.chip.fam.add { opacity: .75; }
.chip.fam:hover { border-color: rgb(98 205 246 / .45); opacity: 1; }