/* Reine UwU — Sakura OS design layer shared with yuusocuti.xyz. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Quicksand:wght@500;600;700&display=swap');

:root {
  color-scheme: light;
  --ink-strong: #3f2943;
  --ink: #634d67;
  --ink-soft: #927b96;
  --ink-muted: var(--ink-soft);
  --pink: #ff4f91;
  --pink-strong: #ee347d;
  --pink-deep: var(--pink-strong);
  --pink-soft: #ff9fc3;
  --lavender: #9a79cf;
  --green: #25bd63;
  --glass: rgb(255 226 241 / 31%);
  --glass-inner: linear-gradient(145deg, rgb(255 255 255 / 72%), rgb(255 244 250 / 56%));
  --glass-strong: rgb(255 250 253 / 82%);
  --glass-border: rgb(255 255 255 / 90%);
  --glass-inner-border: rgb(255 255 255 / 74%);
  --glass-line: rgb(255 112 168 / 22%);
  --glass-shadow: 0 26px 72px rgb(124 55 92 / 15%), inset 0 1px 0 rgb(255 255 255 / 78%);
  --glass-inner-shadow: 0 7px 20px rgb(126 58 96 / 8%), inset 0 1px 0 rgb(255 255 255 / 84%);
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --sakura-accent: var(--pink);
  --sakura-dark: var(--pink-strong);
  --sakura-pink: var(--pink-soft);
  --sakura-light: rgb(255 159 195 / 25%);
  --sakura-bg: #fff0f6;
  --sakura-white: var(--glass-strong);
  --sakura-text: var(--ink);
  --sakura-text-light: var(--ink-soft);
  --radius: var(--radius-md);
  --shadow: var(--glass-inner-shadow);
  --shadow-hover: 0 18px 44px rgb(124 55 92 / 18%), inset 0 1px rgb(255 255 255 / 84%);
}

:root[data-theme="night"] {
  color-scheme: dark;
  --ink-strong: #fff2fa;
  --ink: #ead7e5;
  --ink-soft: #c0a9bc;
  --glass: rgb(43 29 51 / 68%);
  --glass-inner: linear-gradient(145deg, rgb(62 42 70 / 76%), rgb(43 27 51 / 65%));
  --glass-strong: rgb(48 31 57 / 84%);
  --glass-border: rgb(255 210 232 / 31%);
  --glass-inner-border: rgb(255 222 237 / 19%);
  --glass-line: rgb(255 126 174 / 28%);
  --glass-shadow: 0 28px 80px rgb(12 4 17 / 45%), inset 0 1px 0 rgb(255 255 255 / 10%);
  --glass-inner-shadow: 0 8px 24px rgb(8 3 12 / 24%), inset 0 1px 0 rgb(255 255 255 / 9%);
  --sakura-light: rgb(255 126 174 / 21%);
  --sakura-bg: #291d30;
  --sakura-white: var(--glass-strong);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: #f8dce9; }
body {
  position: relative;
  min-height: 100vh;
  padding: 0 0 108px;
  color: var(--ink);
  background: #f8dce9;
  font-family: "Quicksand", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body[data-page] { background: transparent !important; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, h4 { color: var(--ink-strong); font-family: "Nunito", "Quicksand", sans-serif; }
a { color: inherit; }
::selection { color: #fff; background: var(--pink); }

.reine-backdrop {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  background: #f9dfeb url("https://yuusocuti.xyz/assetsV2/bg_desktop.webp") center / cover no-repeat;
}
.reine-backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgb(255 247 252 / 14%), rgb(255 228 241 / 7%) 55%, rgb(69 39 66 / 9%));
}
:root[data-theme="night"] .reine-backdrop { filter: brightness(.44) saturate(.86) hue-rotate(7deg); }
.reine-petal {
  position: absolute;
  top: -8%;
  width: 15px;
  height: 10px;
  border-radius: 90% 10% 90% 10%;
  background: linear-gradient(135deg, #ff79aa, #ffd7e6);
  box-shadow: 0 2px 8px rgb(255 84 145 / 25%);
  opacity: .72;
  animation: reine-fall 13s linear infinite;
}
.reine-petal:nth-child(1) { left: 18%; animation-delay: -4s; }
.reine-petal:nth-child(2) { left: 42%; width: 11px; animation-delay: -9s; animation-duration: 16s; }
.reine-petal:nth-child(3) { left: 66%; animation-delay: -7s; animation-duration: 12s; }
.reine-petal:nth-child(4) { left: 84%; width: 12px; animation-delay: -2s; animation-duration: 18s; }
@keyframes reine-fall { to { transform: translate3d(14vw, 116vh, 0) rotate(540deg); } }

/* Shared glass surfaces */
.card, .sidebar, .server-card, .lp-section, .wrap .box, .profile-hero, .setup-confirm-modal {
  border: 1px solid var(--glass-border) !important;
  background: var(--glass) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(28px) saturate(138%);
  -webkit-backdrop-filter: blur(28px) saturate(138%);
}
.card, .server-card, .wrap .box { border-radius: var(--radius-lg); }
.card { padding: 22px; }

/* Floating top navigation */
.topbar {
  position: sticky;
  top: 14px;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  width: min(1390px, calc(100vw - 64px));
  min-height: 68px;
  margin: 14px auto 0;
  padding: 8px 12px 8px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: rgb(255 248 252 / 68%);
  box-shadow: 0 16px 42px rgb(107 54 90 / 13%), inset 0 1px rgb(255 255 255 / 88%);
  backdrop-filter: blur(30px) saturate(142%);
  -webkit-backdrop-filter: blur(30px) saturate(142%);
}
:root[data-theme="night"] .topbar { background: rgb(43 28 52 / 78%); }
.topbar .brand {
  display: flex;
  align-items: center;
  width: fit-content;
  min-width: 0;
  gap: 10px;
  color: var(--pink-strong);
  font: 900 1.08rem/1 "Nunito", sans-serif;
  letter-spacing: .015em;
}
.brand-flower { display: grid; flex: 0 0 auto; place-items: center; font-size: 1.65rem; line-height: 1; filter: drop-shadow(0 4px 8px rgb(255 79 145 / 24%)); }
.brand-word { white-space: nowrap; }
.brand-divider { width: 1px; height: 32px; margin: 0 6px; background: rgb(238 52 125 / 25%); }
.brand-note { color: var(--ink-soft); font: 700 .62rem/1.25 "Quicksand", sans-serif; }
.topbar .spacer { display: none; }
.shell-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 74%);
  border-radius: 19px;
  background: rgb(255 255 255 / 30%);
}
.shell-nav a {
  display: flex;
  align-items: center;
  min-height: 39px;
  gap: 8px;
  padding: 0 14px;
  border-radius: 14px;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
  transition: .2s ease;
}
.shell-nav a:hover { color: var(--pink-strong); transform: translateY(-1px); }
.shell-nav a.active { color: var(--pink-strong); background: rgb(255 150 190 / 25%); box-shadow: 0 8px 18px rgb(255 79 145 / 12%); }
.shell-nav .nav-glyph { color: var(--pink); font-size: .9rem; }
.topbar-actions { position: relative; grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 0; }
.topbar-actions #logoutBtn { display: none !important; }
.topbar > .user, .topbar > #logoutBtn, .topbar > #loginBtn, .topbar > .lang-select,
.topbar > .theme-button, .topbar > a.btn:not(.brand), .topbar > a.nav { display: none !important; }
.theme-button {
  display: grid;
  width: 43px;
  height: 43px;
  padding: 0;
  place-items: center;
  color: var(--ink-strong);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: rgb(255 255 255 / 46%);
  box-shadow: var(--glass-inner-shadow);
  cursor: pointer;
  transition: transform .2s ease, color .2s ease;
}
.theme-button:hover { color: var(--pink); transform: rotate(-9deg); }
.topbar-actions .lang-select {
  display: block !important;
  width: auto;
  max-width: 122px;
  height: 43px;
  margin: 0;
  padding: 0 31px 0 13px;
  color: var(--ink);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background-color: rgb(255 255 255 / 48%);
  box-shadow: var(--glass-inner-shadow);
  font-size: .75rem;
  font-weight: 800;
}
.topbar-actions .user.acct-trigger, .topbar-actions #loginBtn {
  display: flex !important;
}
.topbar .user.acct-trigger {
  min-height: 46px;
  margin: 0;
  padding: 4px 12px 4px 5px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgb(255 255 255 / 47%);
  box-shadow: var(--glass-inner-shadow);
  font-size: .78rem;
}
.topbar .user img { width: 36px; height: 36px; border: 2px solid rgb(255 255 255 / 86%); box-shadow: 0 4px 12px rgb(255 79 145 / 23%); }
.acct-menu { top: 68px; right: 12px; border-color: var(--glass-border); border-radius: 19px; background: var(--glass-strong); box-shadow: var(--glass-shadow); backdrop-filter: blur(24px); }

/* Buttons and controls */
.btn {
  min-height: 43px;
  padding: 0 22px;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff70a8, var(--pink));
  box-shadow: 0 12px 26px rgb(255 79 145 / 30%);
  font-family: "Quicksand", sans-serif;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgb(255 79 145 / 36%); filter: saturate(1.06); }
.btn.ghost {
  color: var(--pink-strong);
  border: 1.5px solid rgb(255 79 145 / 46%);
  background: rgb(255 255 255 / 42%);
  box-shadow: inset 0 1px rgb(255 255 255 / 78%);
}
.btn.discord { background: linear-gradient(135deg, #ff70a8, var(--pink)); }
.btn.sm { min-height: 39px; padding: 0 17px; font-size: .78rem; }
.input, select, textarea {
  color: var(--ink);
  border: 1px solid rgb(255 141 184 / 28%);
  border-radius: 13px;
  background: rgb(255 255 255 / 53%);
  box-shadow: inset 0 1px rgb(255 255 255 / 72%);
}
.input:focus, select:focus, textarea:focus { border-color: rgb(255 79 145 / 62%); box-shadow: 0 0 0 4px rgb(255 79 145 / 10%); }
:root[data-theme="night"] .input, :root[data-theme="night"] select, :root[data-theme="night"] textarea { background: rgb(35 23 43 / 55%); }
.toggle, .stat, .mini, .sys-card, .setup-preview, .am-group, .am-filter, .levelup-template-card {
  border-color: var(--glass-inner-border) !important;
  background: var(--glass-inner) !important;
  box-shadow: var(--glass-inner-shadow);
}
.slider { background: rgb(162 141 169 / 45%); box-shadow: inset 0 1px 3px rgb(71 42 68 / 12%); }
.switch input:checked + .slider { background: linear-gradient(135deg, #ff78ad, var(--pink)); box-shadow: 0 5px 12px rgb(255 79 145 / 25%); }

/* Page canvas */
.container {
  width: min(1370px, calc(100vw - 72px));
  max-width: none;
  margin: 0 auto;
  padding: 30px 0 18px;
}
.container > h1 { margin: 4px 0 !important; color: var(--ink-strong); font-size: clamp(1.8rem, 3vw, 2.35rem); }
.container > h1 i { color: var(--pink) !important; }
.container > .muted { margin-top: 0; }
.muted { color: var(--ink-soft); }
.loading { color: var(--ink-soft); }
.loading i { color: var(--pink); }

/* Landing */
body[data-page="landing"] { padding-bottom: 98px; }
body[data-page="landing"] .topbar { position: relative; }
.lp-hero {
  width: min(980px, calc(100vw - 48px));
  max-width: none;
  margin: 0 auto;
  padding: 28px 20px 12px;
}
.lp-badge {
  padding: 6px 15px;
  color: var(--pink-strong);
  border: 1px solid var(--glass-border);
  background: rgb(255 245 251 / 57%);
  box-shadow: var(--glass-inner-shadow);
  backdrop-filter: blur(16px);
}
.lp-logo { margin-top: 10px; animation: none; }
.lp-logo-img {
  width: 100px;
  height: 100px;
  border: 7px solid rgb(255 255 255 / 79%);
  outline: 2px solid rgb(255 111 166 / 37%);
  box-shadow: 0 13px 34px rgb(255 79 145 / 25%), 0 0 0 10px rgb(255 255 255 / 20%);
}
.lp-hero h1 {
  margin: 15px 0 3px;
  color: var(--pink-strong);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -.025em;
  text-shadow: 0 6px 24px rgb(255 79 145 / 18%);
}
.lp-hero h1 .grad { color: var(--pink-strong); background: none; -webkit-text-fill-color: currentColor; }
.lp-sub { max-width: 760px; margin: 0 auto 14px; color: var(--ink-soft); font-size: .96rem; line-height: 1.5; }
.lp-cta { gap: 12px; }
.lp-cta .btn { min-width: 220px; min-height: 45px; padding: 0 24px; }
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(900px, 100%); margin: 15px auto 0; }
.stat-strip .ss {
  min-width: 0;
  padding: 10px 18px;
  text-align: left;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-inner);
  box-shadow: var(--glass-inner-shadow);
  backdrop-filter: blur(20px);
}
.stat-strip .n { color: var(--ink-strong); font: 900 1.32rem/1.1 "Nunito", sans-serif; }
.stat-strip .l { margin-top: 2px; color: var(--ink-soft); font-size: .69rem; font-weight: 700; }
.lp-trust { margin-top: 8px; font-size: .75rem; }
.lp-section {
  position: relative;
  width: min(1080px, calc(100vw - 72px));
  max-width: none;
  margin: 10px auto 0;
  padding: 18px 24px;
  border-radius: var(--radius-lg);
}
.lp-h2 { margin: 0 0 13px; color: var(--ink-strong); text-align: left; font-size: 1.18rem; }
.lp-h2::before { margin-right: 9px; content: "❀"; color: var(--pink); }
.step-grid { gap: 10px; }
.step-card {
  position: relative;
  display: grid;
  grid-template-columns: 35px 42px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 10px;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--glass-inner-border);
  border-radius: 15px;
  background: var(--glass-inner);
  box-shadow: var(--glass-inner-shadow);
}
.step-card .step-no { grid-row: 1 / 3; position: static; width: 29px; height: 29px; }
.step-card .fi { grid-row: 1 / 3; font-size: 1.5rem; }
.step-card h3 { margin: 0; font-size: .86rem; }
.step-card p { margin: 1px 0 0; font-size: .7rem; line-height: 1.35; }
.feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.feat-card, body[data-page="landing"] .feat-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  gap: 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--glass-inner-border);
  border-radius: 14px;
  background: var(--glass-inner);
  box-shadow: var(--glass-inner-shadow);
}
.feat-card::before { display: none; }
.feat-card .fi { grid-row: 1 / 3; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: rgb(255 128 177 / 14%); font-size: 1.3rem; }
.feat-card h3 { margin: 0; font-size: .8rem; }
.feat-card p { margin: 1px 0 0; font-size: .66rem; line-height: 1.32; }
.lp-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.lp-highlights .hl { border-color: var(--glass-inner-border); background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); }
.lp-final { text-align: center; }
.lp-final .lp-h2 { text-align: center; }
.lp-footer { margin-top: 10px; padding: 18px 20px; color: rgb(255 255 255 / 88%); text-shadow: 0 2px 10px rgb(52 28 50 / 42%); }
.lp-footer a { color: #fff; }
.reveal { opacity: 1; transform: none; }

/* Landing matched to the approved wide desktop composition. */
body[data-page="landing"] .topbar { position: relative; top: 0; width: min(1700px, calc(100vw - 64px)); min-height: 60px; }
body[data-page="landing"] .lp-hero { width: min(1320px, calc(100vw - 48px)); padding: 18px 20px 0; }
body[data-page="landing"] .lp-badge { margin-bottom: 10px; padding: 5px 14px; font-size: .72rem; }
body[data-page="landing"] .lp-badge::before,
body[data-page="landing"] .lp-badge::after { color: var(--pink); content: "\273f"; font-size: .72rem; }
body[data-page="landing"] .lp-logo { margin-top: 3px; }
body[data-page="landing"] .lp-logo-img { width: 106px; height: 106px; border-width: 6px; }
body[data-page="landing"] .lp-hero h1 { margin: 14px 0 5px; font-size: clamp(2rem, 2.55vw, 2.45rem); line-height: 1.08; }
body[data-page="landing"] .lp-sub { max-width: 760px; margin: 0 auto 14px; font-size: .84rem; line-height: 1.42; }
body[data-page="landing"] .lp-cta .btn { min-width: 230px; min-height: 46px; padding: 0 24px; }
body[data-page="landing"] .stat-strip { width: min(1240px, 100%); gap: 16px; margin-top: 20px; }
body[data-page="landing"] .stat-strip .ss { position: relative; display: flex; align-items: center; min-height: 72px; gap: 14px; padding: 11px 16px; }
.stat-strip .stat-icon { display: grid; width: 46px; height: 46px; place-items: center; color: var(--pink); border-radius: 13px; background: rgb(255 79 145 / 10%); font-size: 1.2rem; }
.stat-flower { position: absolute; right: 13px; bottom: 8px; color: var(--pink); font-size: .72rem; opacity: .68; }
body[data-page="landing"] .lp-trust { display: none; }
body[data-page="landing"] .lp-section { width: min(1320px, calc(100vw - 72px)); margin-top: 18px; padding: 18px 30px 21px; border-radius: 22px; }
.lp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.lp-section-head > div { min-width: 0; }
.lp-section-head div > p { margin: -1px 0 0 38px; color: var(--ink-soft); font-size: .69rem; }
.lp-section-head > a { flex: 0 0 auto; padding: 5px 11px; color: var(--pink-deep); border-radius: 999px; background: rgb(255 79 145 / 8%); font-size: .64rem; font-weight: 900; }
.section-note { padding-right: 12px; color: var(--lavender); font: italic 1rem/1.08 cursive; text-align: center; transform: rotate(-5deg); opacity: .74; }
body[data-page="landing"] .lp-h2 { margin: 0; }
body[data-page="landing"] .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
body[data-page="landing"] .step-card { grid-template-columns: 31px 52px minmax(0, 1fr); grid-template-rows: auto; min-height: 88px; gap: 11px; padding: 13px 16px 13px 13px; }
body[data-page="landing"] .step-card:not(:last-child)::after { position: absolute; top: 50%; right: -31px; color: var(--pink); content: "›"; font: 300 2.3rem/1 sans-serif; transform: translateY(-53%); }
body[data-page="landing"] .step-card .step-no { grid-row: auto; position: static; width: 29px; height: 29px; transform: none; }
body[data-page="landing"] .step-card .fi { grid-row: auto; display: grid; width: 50px; height: 50px; margin: 0; place-items: center; color: var(--pink); border-radius: 50%; background: rgb(255 79 145 / 10%); font-size: 1.4rem; }
.step-copy { min-width: 0; }
body[data-page="landing"] .step-card h3 { margin: 0; font-size: .86rem; }
body[data-page="landing"] .step-card p { margin: 1px 0 0; font-size: .68rem; line-height: 1.3; }
body[data-page="landing"] .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body[data-page="landing"] .feat-card { grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto; align-items: center; min-height: 76px; gap: 11px; padding: 11px 13px; }
body[data-page="landing"] .feat-card .fi { grid-row: auto; width: 44px; height: 44px; color: var(--pink); font-size: 1.22rem; }
body[data-page="landing"] .feat-card h3 { margin: 0; }
body[data-page="landing"] .lp-highlights,
body[data-page="landing"] .lp-final,
body[data-page="landing"] .lp-footer { display: none; }

/* Server selection */
body[data-page="servers"] .container { width: min(1040px, calc(100vw - 72px)); }
.server-breadcrumb { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 18px; padding: 8px 14px; color: var(--ink-soft); border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass-strong); box-shadow: var(--glass-inner-shadow); font-size: .72rem; font-weight: 800; }
.server-breadcrumb a { color: var(--ink); }
.server-breadcrumb > i { color: var(--pink-soft); font-size: .58rem; }
.server-breadcrumb span { color: var(--pink-deep); }
.server-breadcrumb { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px 22px; padding: 8px 15px; color: var(--ink-soft); border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass-strong); box-shadow: var(--glass-inner-shadow); font-size: .7rem; font-weight: 800; }
.server-breadcrumb a { color: var(--ink); }
.server-breadcrumb > i { color: var(--pink-soft); font-size: .55rem; }
.server-breadcrumb span { color: var(--pink-deep); }
.server-page-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 2px 0 20px; }
.server-page-head h1 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.45rem); }
.server-page-head h1::before { display: inline-grid; width: 42px; height: 42px; margin-right: 12px; place-items: center; content: "✦"; color: #fff; border-radius: 13px; background: linear-gradient(135deg, #ff7caf, var(--pink)); box-shadow: 0 9px 22px rgb(255 79 145 / 24%); font-size: 1.25rem; vertical-align: middle; }
.server-page-head p { margin: 3px 0 0; }
.server-toolbar { display: grid; gap: 9px; min-width: min(420px, 100%); }
.server-search { display: flex; align-items: center; min-height: 44px; gap: 10px; padding: 0 16px; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass-strong); box-shadow: var(--glass-inner-shadow); backdrop-filter: blur(20px); }
.server-search span { color: var(--lavender); }
.server-search input { width: 100%; color: var(--ink); border: 0; outline: 0; background: transparent; }
.server-filters { display: flex; justify-content: flex-end; gap: 7px; }
.server-filter { min-height: 34px; padding: 0 13px; color: var(--ink-soft); border: 1px solid var(--glass-border); border-radius: 999px; background: rgb(255 255 255 / 48%); font-size: .7rem; font-weight: 800; cursor: pointer; }
.server-filter.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #ff75ab, var(--pink)); box-shadow: 0 8px 18px rgb(255 79 145 / 24%); }
#serverList .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.server-card {
  position: relative;
  min-height: 232px;
  padding: 17px 14px 14px;
  overflow: hidden;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.server-card::after { position: absolute; inset: 7px; z-index: -1; border: 1px solid var(--glass-inner-border); border-radius: 18px; background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); content: ""; }
.server-card:hover { transform: translateY(-4px); box-shadow: 0 27px 65px rgb(124 55 92 / 20%) !important; }
.server-card .icon, .server-card .icon-fallback { width: 78px; height: 78px; margin-bottom: 8px; border: 5px solid rgb(255 255 255 / 75%); outline: 1px solid rgb(255 79 145 / 28%); box-shadow: 0 10px 25px rgb(124 55 92 / 18%); }
.server-card .name { margin-bottom: 5px; color: var(--ink-strong); font: 900 1rem/1.25 "Nunito", sans-serif; }
.server-state { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; color: var(--ink-soft); background: rgb(151 137 178 / 12%); font-size: .66rem; font-weight: 800; }
.server-state::before { width: 7px; height: 7px; border-radius: 50%; background: #9990b3; content: ""; }
.server-card.is-connected .server-state { color: #168b4a; background: rgb(37 189 99 / 11%); }
.server-card.is-connected .server-state::before { background: var(--green); box-shadow: 0 0 0 4px rgb(37 189 99 / 10%); }
.server-card .btn { width: calc(100% - 16px); }

/* Guild dashboard */
body[data-page="server"] .container,
body[data-page="admin"] .container {
  width: min(1440px, calc(100vw - 52px));
  padding-top: 20px;
}
.dash-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 15px; }
.sidebar {
  top: 96px;
  max-height: calc(100vh - 122px);
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: var(--glass-strong);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(26px) saturate(1.22);
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 99px; background: rgb(255 79 145 / 24%); }
.sidebar .guild {
  margin: 0 0 9px;
  padding: 9px 10px 14px;
  border-color: var(--glass-border);
  border-radius: 16px;
}
.sidebar .guild img, .sidebar .guild .gi { width: 46px; height: 46px; border: 3px solid rgb(255 255 255 / 70%); box-shadow: 0 7px 16px rgb(124 55 92 / 13%); }
.sidebar .guild .gi { background: var(--pink-soft); }
.sidebar .guild b { color: var(--ink-strong); font-weight: 900; }
.sidebar .nav { display: grid; gap: 2px; }
.nav-section-label { margin: 8px 10px 3px; color: var(--ink-muted); font-size: .55rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.nav-item {
  min-height: 39px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 800;
}
.nav-item:hover { color: var(--pink-deep); background: rgb(255 255 255 / 42%); }
.nav-item.active {
  color: var(--pink-deep);
  border-color: rgb(255 122 174 / 16%);
  background: linear-gradient(90deg, rgb(255 94 156 / 20%), rgb(255 255 255 / 38%));
  box-shadow: inset 3px 0 0 var(--pink);
}
.nav-item i { color: var(--pink); }
.sidebar-promo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--glass-inner-border);
  border-radius: 15px;
  background: var(--glass-inner);
  color: var(--ink-soft);
  font-size: .66rem;
  font-weight: 700;
}
.sidebar-promo img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.sidebar-promo strong { display: block; color: var(--pink-deep); font-size: .72rem; }

.panel.card {
  position: relative;
  padding: 20px;
  overflow: hidden;
  border-radius: 24px;
}
.panel.card::after {
  position: absolute;
  inset: 8px;
  z-index: -1;
  border: 1px solid var(--glass-inner-border);
  border-radius: 17px;
  background: var(--glass-inner);
  box-shadow: var(--glass-inner-shadow);
  content: "";
}
.panel > h2 {
  margin: 0 0 17px;
  padding-bottom: 12px;
  color: var(--pink-deep);
  border-bottom: 1px solid var(--glass-border);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}
.panel > h2::before { margin-right: 9px; content: "✿"; color: var(--pink); }
.field { margin-bottom: 16px; }
.field label { color: var(--ink-strong); font-size: .76rem; font-weight: 900; }
.field .hint { color: var(--ink-muted); font-size: .69rem; }
.toggle, .stat, .sys-card, .setup-preview, .levelup-template-card, .role-check, .rr-panel, .bw-guide, .am-actions-box, .am-action-row, .mod-chip {
  border-color: var(--glass-inner-border);
  background: var(--glass-inner);
  box-shadow: var(--glass-inner-shadow);
}
.toggle { padding: 12px 14px; }
.toggle .t-label span { color: var(--ink-muted); font-size: .7rem; }
.switch { display: inline-block; width: 50px; min-width: 50px; height: 28px; flex: 0 0 auto; }
.slider { background: rgb(143 132 168 / 28%); }
.switch input:checked + .slider { background: linear-gradient(135deg, #ff79ae, var(--pink)); box-shadow: 0 5px 13px rgb(255 79 145 / 24%); }
.stat .num, .sys-value { color: var(--pink-deep); }
.tag { color: var(--pink-deep); background: var(--pink-soft); }
.save-bar {
  position: static;
  z-index: auto;
  bottom: auto;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* Dashboard 2.0 — information architecture and module workspaces */
[data-panel="overview"] > h2 { display: none; }
.overview-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.overview-titlebar h2 { margin: 0; color: var(--pink-deep); font-size: 1.65rem; }
.overview-titlebar p { margin: 2px 0 0; color: var(--ink-muted); font-size: .76rem; }
.today-card { display: flex; align-items: center; gap: 10px; min-width: 230px; padding: 10px 14px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); font-size: .72rem; }
.today-card i { display: grid; width: 34px; height: 34px; place-items: center; color: var(--pink); border-radius: 10px; background: rgb(255 79 145 / 13%); }
.guild-hero { display: grid; grid-template-columns: auto minmax(230px, 1fr) auto auto auto; align-items: center; gap: 17px; margin-bottom: 12px; padding: 16px 18px; border: 1px solid var(--glass-border); border-radius: 18px; background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); }
.guild-hero > img, .guild-hero > .gi { width: 70px; height: 70px; border: 4px solid rgb(255 255 255 / 75%); border-radius: 50%; object-fit: cover; outline: 2px solid rgb(255 79 145 / 28%); }
.guild-hero-copy > div { display: flex; align-items: center; gap: 10px; }
.guild-hero h3 { margin: 0; font-size: 1.05rem; }
.guild-hero-copy small, .guild-hero-copy p { display: block; margin: 3px 0 0; color: var(--ink-muted); font-size: .68rem; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 4px 9px; color: #168b4a; border-radius: 999px; background: rgb(37 189 99 / 11%); font-size: .62rem; font-style: normal; font-weight: 800; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.guild-count { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px; min-width: 100px; padding: 4px 16px; border-left: 1px solid var(--glass-line); }
.guild-count > i { grid-row: 1 / 3; color: var(--pink); font-size: 1.1rem; }
.guild-count b { color: var(--ink-strong); font-size: 1rem; }
.guild-count small { color: var(--ink-muted); font-size: .6rem; }
.overview-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.overview-kpis article { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--glass-border); border-radius: 17px; background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); }
.overview-kpis article > span { display: grid; width: 43px; height: 43px; place-items: center; color: var(--pink); border-radius: 13px; background: rgb(255 79 145 / 12%); font-size: 1.08rem; }
.overview-kpis b { display: block; color: var(--ink-strong); font: 900 1.25rem/1 "Nunito", sans-serif; }
.overview-kpis small { color: var(--ink-muted); font-size: .63rem; }
.overview-kpis em { grid-column: 2; color: #169251; font-size: .58rem; font-style: normal; }
.overview-kpis em.down { color: var(--pink-deep); }
.overview-content-grid { display: grid; grid-template-columns: 1.45fr .85fr; gap: 11px; }
.overview-left { display: grid; gap: 11px; }
.mini-card, .feature-status { padding: 14px 16px; border: 1px solid var(--glass-border); border-radius: 17px; background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); }
.mini-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-card-title h3 { margin: 0; color: var(--pink-deep); font-size: .87rem; }
.mini-card-title button { color: var(--pink-deep); border: 0; background: transparent; font-size: .62rem; font-weight: 900; cursor: pointer; }
.moderation-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.moderation-stats div { padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / 37%); }
.moderation-stats b { display: block; color: var(--ink-strong); font-size: 1.1rem; }
.moderation-stats span { color: var(--ink-muted); font-size: .62rem; }
.overview-split { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.big-inline-stat { margin-top: 12px; }
.big-inline-stat b { margin-right: 7px; color: var(--ink-strong); font-size: 1.35rem; }
.big-inline-stat span, .mini-card p { color: var(--ink-muted); font-size: .65rem; }
.next-tasks { padding-bottom: 7px; }
.task-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; width: 100%; gap: 10px; padding: 11px 0; color: var(--ink); border: 0; border-bottom: 1px solid var(--glass-line); background: transparent; text-align: left; cursor: pointer; }
.task-row > b { display: grid; width: 25px; height: 25px; place-items: center; color: #fff; border-radius: 50%; background: var(--pink); }
.task-row span strong, .task-row span small { display: block; }
.task-row span strong { color: var(--ink-strong); font-size: .7rem; }
.task-row span small { color: var(--ink-muted); font-size: .59rem; }
.task-row > i { color: var(--pink); }
.task-row.done { opacity: .62; }
.feature-status { margin-top: 11px; }
.feature-status > div:last-child { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.feature-chip { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 9px 10px; color: var(--ink); border: 1px solid var(--glass-inner-border); border-radius: 12px; background: rgb(255 255 255 / 35%); text-align: left; cursor: pointer; }
.feature-chip > span { grid-row: 1 / 3; display: grid; width: 30px; height: 30px; place-items: center; color: var(--pink); border-radius: 10px; background: rgb(255 79 145 / 12%); }
.feature-chip b { color: var(--ink-strong); font-size: .68rem; }
.feature-chip small { color: var(--ink-muted); font-size: .53rem; }
.feature-chip.on small { color: #168b4a; }

/* Overview composition mirrors the approved dashboard reference. */
body[data-page="server"] { padding-bottom: 76px; }
[data-panel="overview"] { padding: 16px !important; }
.overview-titlebar h2 > i,
.mini-card-title h3 > .fa-fan,
.feature-status .fa-fan { margin-right: 7px; color: var(--pink); font-size: .86em; }
.today-card span { display: grid; gap: 1px; }
.today-card span small { color: var(--ink-muted); font-size: .55rem; }
.guild-hero > .btn { display: grid; grid-template-columns: auto auto auto; justify-content: center; min-width: 235px; column-gap: 7px; }
.guild-hero > .btn small { grid-column: 1 / -1; margin-top: 2px; color: rgb(255 255 255 / 82%); font-size: .5rem; }
.overview-primary-kpis { margin-bottom: 10px; }
.overview-moderation-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.overview-moderation-kpis article { min-height: 82px; padding: 11px 12px; }
.overview-moderation-kpis article > span { width: 38px; height: 38px; }
.tempvoice-inline { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.tempvoice-inline > div { padding: 3px 12px; border-right: 1px solid var(--glass-line); }
.tempvoice-inline > div:last-child { border-right: 0; }
.tempvoice-inline b, .tempvoice-inline span { display: block; }
.tempvoice-inline b { color: var(--ink-strong); font-size: 1.1rem; }
.tempvoice-inline span { color: var(--ink-muted); font-size: .56rem; }
.backup-card { position: relative; }
.backup-card .btn { position: absolute; right: 12px; bottom: 10px; }

/* Overview composition mirrors the approved dashboard reference. */
body[data-page="server"] { padding-bottom: 76px; }
[data-panel="overview"] { padding: 16px !important; }
.overview-titlebar h2 > i,
.mini-card-title h3 > .fa-fan,
.feature-status .fa-fan { margin-right: 7px; color: var(--pink); font-size: .86em; }
.today-card span { display: grid; gap: 1px; }
.today-card span small { color: var(--ink-muted); font-size: .55rem; }
.guild-hero > .btn { display: grid; grid-template-columns: auto auto auto; justify-content: center; column-gap: 7px; min-width: 235px; }
.guild-hero > .btn small { grid-column: 1 / -1; margin-top: 2px; color: rgb(255 255 255 / 82%); font-size: .52rem; font-weight: 600; }
.overview-primary-kpis { margin-bottom: 10px; }
.overview-primary-kpis article { min-height: 88px; }
.overview-content-grid { grid-template-columns: 1.55fr .9fr; }
.overview-moderation-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.overview-moderation-kpis article { min-height: 86px; padding: 12px; }
.overview-moderation-kpis article > span { width: 39px; height: 39px; }
.overview-moderation-kpis b { font-size: 1.05rem; }
.overview-moderation-kpis em { white-space: nowrap; }
.tempvoice-inline { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.tempvoice-inline > div { padding: 3px 12px; border-right: 1px solid var(--glass-line); }
.tempvoice-inline > div:last-child { border-right: 0; }
.tempvoice-inline b,
.tempvoice-inline span { display: block; }
.tempvoice-inline b { color: var(--ink-strong); font-size: 1.1rem; }
.tempvoice-inline span { color: var(--ink-muted); font-size: .58rem; }
.backup-card { position: relative; }
.backup-card .btn { position: absolute; right: 13px; bottom: 12px; }
.next-tasks { min-height: 100%; }
.feature-status { padding-block: 11px; }
.feature-status > div:last-child { margin-top: 7px; }

.workspace-panel { padding: 18px !important; }
.workspace-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 0 4px; }
.workspace-heading h2 { margin: 0; color: var(--pink-deep); font-size: 1.45rem; }
.workspace-heading p { margin: 1px 0 0; color: var(--ink-muted); font-size: .72rem; }
.workspace-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; color: var(--pink); border-radius: 13px; background: rgb(255 79 145 / 12%); font-size: 1.1rem; }
.workspace-card { padding: 14px 16px; border: 1px solid var(--glass-border); border-radius: 17px; background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); }
.workspace-card-title { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
.workspace-card-title > span { color: var(--pink); font-size: 1rem; }
.workspace-card-title h3 { margin: 0; font-size: .85rem; }
.workspace-card-title p { margin: 1px 0 0; color: var(--ink-muted); font-size: .62rem; }
.workspace-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.automod-master { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; margin-bottom: 10px; }
.master-toggle { display: flex; align-items: center; gap: 10px; }
.master-toggle > div { display: grid; flex: 1; }
.master-toggle b { color: var(--ink-strong); font-size: .8rem; }
.master-toggle small { color: var(--ink-muted); font-size: .61rem; }
.preset-picker { display: flex; align-items: center; gap: 13px; padding-left: 17px; border-left: 1px solid var(--glass-line); }
.preset-picker > span { color: var(--ink-strong); font-size: .68rem; font-weight: 800; }
.preset-picker > div { display: flex; gap: 5px; }
.automod-preset { padding: 7px 12px; color: var(--ink); border: 1px solid var(--glass-border); border-radius: 999px; background: rgb(255 255 255 / 36%); font-size: .62rem; font-weight: 800; cursor: pointer; }
.automod-preset.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #ff77ab, var(--pink)); box-shadow: 0 6px 16px rgb(255 79 145 / 20%); }
.automod-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 11px; }
.automod-main { display: grid; max-height: none; gap: 10px; padding-right: 0; overflow: visible; }
.automod-main .am-group { margin: 0; padding: 16px 18px; border-radius: 17px; background: var(--glass-inner); }
.automod-tips { position: sticky; top: 103px; }
.automod-tips ol { display: grid; gap: 13px; margin: 0; padding: 0; counter-reset: tips; list-style: none; }
.automod-tips li { display: grid; grid-template-columns: auto 1fr; gap: 8px; counter-increment: tips; }
.automod-tips li::before { display: grid; width: 25px; height: 25px; place-items: center; color: var(--pink-deep); border-radius: 50%; background: rgb(255 79 145 / 13%); content: counter(tips); font-size: .65rem; font-weight: 900; }
.automod-tips li b, .automod-tips li span { display: block; }
.automod-tips li b { color: var(--ink-strong); font-size: .66rem; }
.automod-tips li span { grid-column: 2; margin-top: -7px; color: var(--ink-muted); font-size: .58rem; }
.tips-art { margin-top: 15px; padding: 32px 12px; color: var(--lavender); border-radius: 13px; background: linear-gradient(135deg, rgb(255 195 220 / 30%), rgb(213 196 255 / 30%)); font: italic 1.1rem/1.3 cursive; text-align: center; }
.workspace-savebar { margin-top: 10px; }

/* AutoMod keeps one visual container per feature group. Nested controls use
   dividers instead of repeating glass cards inside glass cards. */
.automod-main .am-group > .toggle,
.automod-main .am-filter > .toggle {
  margin: 0;
  padding: 8px 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
.automod-main .am-filter {
  margin: 0;
  padding: 10px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--glass-line) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
.automod-main .am-filter:first-of-type { border-top: 0 !important; }
.automod-main .am-sub { margin: 5px 0 0; padding: 8px 0 1px; border-left: 0; }
.automod-main .am-wl { margin-top: 8px; }
.automod-main .am-wl-toggle {
  margin: 0;
  padding: 9px 0 !important;
  border: 0 !important;
  border-top: 1px dashed var(--glass-line) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}
.automod-main .am-act {
  padding: 7px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.automod-main .bw-guide {
  border-color: var(--glass-line);
  background: rgb(255 255 255 / 22%);
  box-shadow: none;
}

.setup-stepper { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; margin-bottom: 10px; padding: 7px; border: 1px solid var(--glass-border); border-radius: 17px; background: var(--glass-inner); }
.setup-stepper > i { color: var(--pink-soft); font-size: .65rem; }
.setup-stepper button { display: flex; align-items: center; gap: 9px; min-height: 50px; padding: 7px 10px; color: var(--ink); border: 0; border-radius: 13px; background: transparent; text-align: left; cursor: pointer; }
.setup-stepper button.active { color: var(--pink-deep); background: rgb(255 79 145 / 12%); }
.setup-stepper button > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: rgb(148 135 171 / 16%); }
.setup-stepper button.active > b { color: #fff; background: var(--pink); }
.setup-stepper strong, .setup-stepper small { display: block; }
.setup-stepper strong { font-size: .68rem; }
.setup-stepper small { color: var(--ink-muted); font-size: .53rem; }
.setup-builder { display: grid; grid-template-columns: minmax(0, 1fr) 285px; align-items: start; gap: 11px; }
.setup-stage-host { min-width: 0; max-height: calc(100vh - 300px); padding: 15px; overflow: auto; border: 1px solid var(--glass-border); border-radius: 17px; background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); scrollbar-width: thin; scrollbar-color: rgb(255 79 145 / 28%) transparent; }
.setup-stage { display: none; }
.setup-stage.active { display: block; animation: stage-in .22s ease; }
@keyframes stage-in { from { opacity: 0; transform: translateY(4px); } }
.setup-stage-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--glass-line); }
.setup-final-note { display: grid; margin-bottom: 12px; padding: 13px; color: var(--pink-deep); border-radius: 13px; background: rgb(255 79 145 / 9%); }
.setup-final-note span { color: var(--ink-muted); font-size: .63rem; }
.setup-live-preview { position: sticky; top: 103px; }
.setup-preview-server { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 13px; background: rgb(255 255 255 / 36%); }
.setup-preview-server img { width: 46px; height: 46px; border-radius: 13px; object-fit: cover; }
.setup-preview-server b, .setup-preview-server span { display: block; }
.setup-preview-server b { color: var(--ink-strong); font-size: .7rem; }
.setup-preview-server span { width: max-content; margin-top: 3px; padding: 2px 7px; color: var(--pink-deep); border-radius: 999px; background: rgb(255 79 145 / 11%); font-size: .55rem; }
.preview-divider { height: 1px; margin: 12px 0; background: var(--glass-line); }
.setup-live-preview h4 { margin: 0 0 8px; font-size: .7rem; }
.setup-live-preview ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.setup-live-preview li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 7px; border-radius: 10px; background: rgb(255 255 255 / 26%); }
.setup-live-preview li > i { color: var(--pink); }
.setup-live-preview li span { color: var(--ink-strong); font-size: .62rem; }
.setup-live-preview li small { display: block; color: var(--ink-muted); font-size: .52rem; }
.setup-live-preview li > b { color: var(--green); }
.preview-estimate { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.preview-estimate div { padding: 9px; border-radius: 11px; background: rgb(255 79 145 / 8%); text-align: center; }
.preview-estimate b, .preview-estimate span { display: block; }
.preview-estimate b { color: var(--pink-deep); font-size: 1rem; }
.preview-estimate span { color: var(--ink-muted); font-size: .55rem; }

/* Auto Setup first stage follows the five-card builder reference. */
.setup-stage[data-stage="1"] { display: none; }
.setup-stage[data-stage="1"].active { display: grid; gap: 10px; }
.setup-stage[data-stage="1"] > .setup-template-card {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(300px, .9fr);
  align-items: center;
  max-width: none !important;
  min-height: 58px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-inner);
}
.setup-template-card label { margin: 0; color: var(--ink-strong); font-size: .76rem; }
.setup-template-card label::before { display: inline-grid; width: 32px; height: 32px; margin-right: 9px; place-items: center; color: var(--pink); border-radius: 10px; background: rgb(255 79 145 / 11%); content: "\f1b3"; font: 900 .9rem/1 "Font Awesome 5 Free"; vertical-align: middle; }
.setup-template-card select { min-height: 40px; }
.setup-section-heading { display: flex; align-items: flex-start; gap: 9px; margin-top: 1px; }
.setup-section-heading > i { display: grid; width: 29px; height: 29px; place-items: center; color: var(--pink); border-radius: 9px; background: rgb(255 79 145 / 11%); }
.setup-section-heading h3 { margin: 0; color: var(--ink-strong); font-size: .75rem; }
.setup-section-heading p { margin: 1px 0 0; color: var(--ink-muted); font-size: .56rem; }
.setup-component-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.setup-component-card.toggle { position: relative; display: block; min-height: 108px; margin: 0; padding: 12px; border: 1px solid var(--glass-border); border-radius: 14px; background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); }
.setup-component-card .t-label b { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; padding-right: 34px; color: var(--ink-strong); font-size: .67rem; }
.setup-component-card .t-label b i { display: grid; width: 34px; height: 34px; place-items: center; color: var(--pink); border-radius: 10px; background: rgb(255 79 145 / 11%); }
.setup-component-card .t-label > span { display: block; margin-top: 8px; font-size: .56rem; line-height: 1.32; }
.setup-component-card > .switch { position: absolute; top: 14px; right: 10px; transform: scale(.72); transform-origin: right top; }
.setup-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.setup-detail-card { min-width: 0; padding: 12px; border: 1px solid var(--glass-border); border-radius: 15px; background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); }
.setup-detail-card > header { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; }
.setup-detail-card > header > i { color: var(--pink); font-size: 1.05rem; }
.setup-detail-card h3 { margin: 0; font-size: .76rem; }
.setup-detail-card header p { margin: 1px 0 0; color: var(--ink-muted); font-size: .55rem; }
.setup-detail-card > .toggle { min-height: 36px; margin: 5px 0; padding: 6px 8px !important; border-radius: 10px; box-shadow: none; }
.setup-detail-card > .toggle .t-label span { display: none; }
.setup-detail-card > .row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.setup-detail-card > .row > .field { min-width: 0; margin: 0; }
.setup-detail-card > .row input { min-height: 36px; padding: 7px 10px; }
.setup-detail-card > .row label { margin-bottom: 3px; font-size: .56rem; }
.setup-stage[data-stage="1"] > .setup-stage-actions { margin-top: 0; }

.tv-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .72fr); align-items: start; gap: 11px; }
.tv-main, .tv-side { display: grid; gap: 11px; }
.tv-join-card { display: grid; grid-template-columns: 1fr minmax(240px, .9fr); align-items: center; }
.tv-join-card .workspace-card-title, .tv-join-card .field { margin: 0; }
.quick-action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.quick-save .btn { width: 100%; min-width: 0; padding-inline: 9px; }
.tv-permissions { display: grid; gap: 5px; }
.tv-permissions > label { display: flex; align-items: center; justify-content: space-between; min-height: 31px; color: var(--ink-strong); font-size: .65rem; }
.permission-note { color: var(--pink-deep); font-size: .65rem; }
.permission-note p { margin: 5px 0 0; color: var(--ink-muted); font-size: .58rem; }
.discord-channel-preview { padding: 12px; border: 1px solid var(--glass-inner-border); border-radius: 13px; background: rgb(255 255 255 / 31%); }
.discord-channel-preview small { color: var(--ink-muted); font-size: .58rem; font-weight: 900; }
.discord-channel-preview > div { display: flex; align-items: center; gap: 9px; margin-top: 7px; color: var(--ink); }
.discord-channel-preview > div > i { color: var(--lavender); }
.discord-channel-preview strong { flex: 1; font-size: .7rem; }
.discord-channel-preview span { padding: 3px 8px; border-radius: 999px; background: rgb(151 137 178 / 13%); font-size: .57rem; }
.server-members { margin: -1px 0 7px; color: var(--ink-muted); font-size: .6rem; }
.generic-workspace > .workspace-heading { padding-bottom: 12px; border-bottom: 1px solid var(--glass-line); }
.generic-workspace > .toggle,
.generic-workspace > .field,
.generic-workspace > .row,
.generic-workspace > h3 { position: relative; z-index: 1; }
.generic-workspace > .field,
.generic-workspace > .row,
.generic-workspace > .stat-row,
.generic-workspace > [id$="Panels"],
.generic-workspace > [id$="List"] { margin-block: 9px; padding: 12px 14px; border: 1px solid var(--glass-border); border-radius: 15px; background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); }
.generic-workspace > h3 { margin: 15px 3px 7px !important; color: var(--ink-strong); font-size: .9rem; }
.generic-workspace > h3 i { color: var(--pink) !important; }
.generic-workspace > hr { margin: 14px 0 !important; border-top-color: var(--glass-line) !important; }
.generic-workspace > .muted { margin-inline: 3px; }
.ov-head { padding: 13px; border: 1px solid var(--glass-inner-border); border-radius: 17px; background: var(--glass-inner); box-shadow: var(--glass-inner-shadow); }
.ov-head img, .ov-head .gi { width: 62px; height: 62px; border-radius: 50%; outline: 3px solid rgb(255 122 174 / 18%); }
.ov-head .nm { color: var(--ink-strong); font-weight: 900; }
.ov-section-title { color: var(--pink-deep); }
.loading { color: var(--ink-muted); }
.admin-log-view { border-color: var(--glass-border); background: var(--glass-inner); }

/* Compact pages: profile, music, legal and administration */
body[data-page="profile"] .container,
body[data-page="music"] .container,
body[data-page="privacy"] .container,
body[data-page="terms"] .container { width: min(1040px, calc(100vw - 48px)); }
body[data-page="profile"] .card,
body[data-page="music"] .card,
body[data-page="privacy"] .card,
body[data-page="terms"] .card { border-radius: 24px; }
.profile-head img { outline: 4px solid rgb(255 122 174 / 16%); box-shadow: 0 12px 30px rgb(124 55 92 / 18%); }
.music-now, .music-card { border-color: var(--glass-inner-border) !important; background: var(--glass-inner) !important; box-shadow: var(--glass-inner-shadow); }
.sys-bar { background: rgb(255 122 174 / 12%); }
.sys-bar span { background: linear-gradient(90deg, #ff82b5, var(--pink)); }

/* Fixed navigation dock and quiet corner signatures */
.reine-dock {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: 13px;
  display: flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  max-width: calc(100vw - 28px);
  min-height: 58px;
  padding: 6px 9px;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 24px;
  background: rgb(255 248 252 / 70%);
  box-shadow: 0 15px 45px rgb(74 31 65 / 20%), inset 0 1px 0 rgb(255 255 255 / 78%);
  backdrop-filter: blur(28px) saturate(1.3);
  transform: translateX(-50%);
}
:root[data-theme="night"] .reine-dock { background: rgb(32 27 48 / 74%); }
.reine-dock a {
  display: grid;
  min-width: 69px;
  min-height: 46px;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 4px 10px;
  color: var(--ink-soft);
  border-radius: 17px;
  font-size: .59rem;
  font-weight: 800;
}
.reine-dock a i { font-size: 1rem; }
.reine-dock a:hover, .reine-dock a.active { color: var(--pink-deep); background: rgb(255 255 255 / 54%); }
.reine-dock a.active { box-shadow: inset 0 -2px 0 var(--pink); }
.dock-brand { display: flex; align-items: center; gap: 7px; margin-left: 6px; padding: 0 10px; color: var(--ink-muted); border-left: 1px solid var(--glass-border); font-size: .59rem; line-height: 1.2; white-space: nowrap; }
.dock-brand b { color: var(--pink-deep); }
.dock-brand span { font-size: 1.3rem; }
.shell-signature { position: fixed; z-index: 5; bottom: 18px; color: rgb(255 255 255 / 90%); font-size: .64rem; font-weight: 700; line-height: 1.4; text-shadow: 0 2px 10px rgb(36 20 42 / 60%); }
.shell-signature.left { left: 24px; }
.shell-signature.right { right: 24px; text-align: right; }

@media (max-width: 1120px) {
  .topbar { width: min(1120px, calc(100vw - 34px)); grid-template-columns: auto 1fr auto; }
  .brand-note, .brand-divider { display: none; }
  .shell-nav a { padding: 8px 9px; }
  .shell-nav a span { display: none; }
  #serverList .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-layout { grid-template-columns: 225px minmax(0, 1fr); }
  .guild-hero { grid-template-columns: auto 1fr auto auto; }
  .guild-hero > .btn { grid-column: 2 / -1; }
  .overview-kpis { grid-template-columns: repeat(2, 1fr); }
  .feature-status > div:last-child { grid-template-columns: repeat(3, 1fr); }
  .automod-layout, .setup-builder { grid-template-columns: 1fr; }
  .automod-master { grid-template-columns: 1fr; }
  .preset-picker { justify-content: space-between; padding: 10px 0 0; border-top: 1px solid var(--glass-line); border-left: 0; }
  .setup-component-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .automod-tips, .setup-live-preview { position: static; }
  .automod-main { max-height: none; overflow: visible; }
  .reine-backdrop { background-image: linear-gradient(180deg, rgb(255 248 252 / 12%), rgb(255 242 248 / 6%)), url("https://yuusocuti.xyz/assetsV2/bg_tablet.webp"); }
}

@media (max-width: 820px) {
  body { padding-bottom: 84px; }
  .topbar { top: 10px; width: calc(100vw - 24px); grid-template-columns: 1fr auto; }
  .topbar-actions { grid-column: 2; }
  .shell-nav { display: none; }
  .topbar-actions { justify-self: end; }
  .container, body[data-page="server"] .container, body[data-page="admin"] .container,
  body[data-page="servers"] .container, body[data-page="profile"] .container,
  body[data-page="music"] .container, body[data-page="privacy"] .container,
  body[data-page="terms"] .container { width: calc(100vw - 24px); padding-top: 14px; }
  .dash-layout { position: relative; grid-template-columns: 1fr; gap: 11px; }
  /*
   * backdrop-filter makes the sidebar its own stacking context. Keep that
   * context above the workspace on mobile so the guild switcher can escape
   * the sidebar visually, while remaining below the topbar (100) and dock
   * (70).
   */
  .sidebar { position: relative; z-index: 60; max-height: none; overflow: visible; }
  .dash-layout > main { position: relative; z-index: 1; }
  .sidebar .guild.gsw { z-index: 1; }
  .sidebar .gsw-menu { z-index: 2; }
  .sidebar .nav { display: flex; gap: 4px; padding-bottom: 3px; overflow-x: auto; scrollbar-width: none; }
  .nav-section-label { display: none; }
  .sidebar .nav::-webkit-scrollbar { display: none; }
  .nav-item { flex: 0 0 auto; box-shadow: none; }
  .sidebar-promo { display: none; }
  .panel { display: none !important; margin-bottom: 0; }
  .panel.active { display: block !important; }
  .panel.active:not(.open) > *:not(h2) { display: revert; }
  /* Restore component layout after the legacy accordion reset above. */
  .panel.active > .toggle { display: flex !important; }
  .panel.active > .row { display: flex !important; }
  .panel.active > .form-grid { display: grid !important; }
  .panel.active > .field { display: block !important; }
  .panel.active > .stat-row { display: flex !important; }
  .panel.active > .save-bar { display: flex !important; }
  .panel.active > .workspace-heading { display: flex !important; }
  .panel.active > .automod-master,
  .panel.active > .automod-layout,
  .panel.active > .setup-builder { display: grid !important; }
  .panel > h2 { cursor: default; }
  .panel > h2::after { display: none; }
  .server-page-head { align-items: stretch; flex-direction: column; gap: 14px; }
  .overview-titlebar { align-items: flex-start; flex-direction: column; }
  .today-card { min-width: 0; }
  .guild-hero { grid-template-columns: auto 1fr; }
  .guild-count { border-left: 0; }
  .guild-hero > .btn { grid-column: 1 / -1; }
  .overview-content-grid { grid-template-columns: 1fr; }
  .panel.active > .setup-stepper { display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: stretch; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .setup-stepper::-webkit-scrollbar { display: none; }
  .setup-stepper > i { transform: rotate(0); }
  .setup-stepper button { flex: 0 0 155px; width: 155px; }
  .automod-master { grid-template-columns: 1fr; }
  .preset-picker { align-items: flex-start; flex-direction: column; padding: 10px 0 0; border-top: 1px solid var(--glass-line); border-left: 0; }
  .automod-workspace { overflow: hidden; }
  .automod-layout, .automod-main { min-width: 0; }
  .automod-main { gap: 0; padding-right: 0; }
  .automod-main .am-group {
    margin: 0;
    padding: 18px 8px;
    border: 0 !important;
    border-top: 1px solid var(--glass-line) !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
  }
  .automod-main .am-group:first-child { padding: 8px 8px 18px; border-top: 0 !important; }
  .automod-main .am-filter {
    margin: 0;
    padding: 9px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--glass-line) !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
  }
  .automod-main .am-filter:first-of-type { border-top: 0 !important; }
  .automod-main .am-filter > .toggle {
    margin: 0;
    padding: 6px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none;
  }
  .automod-main .am-sub { margin: 5px 0 0; padding: 8px 0 1px; border-left: 0; }
  .automod-main .am-wl-toggle { margin-bottom: 0; padding: 9px 10px !important; box-shadow: none; }
  .automod-tips { display: none; }
  .tv-layout { grid-template-columns: 1fr; }
  .setup-stage-host { max-height: none; overflow: visible; }
  .setup-stage[data-stage="1"] > .setup-template-card { grid-template-columns: 1fr; gap: 8px; }
  .setup-component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-detail-grid { grid-template-columns: 1fr; }
  .server-toolbar { width: 100%; min-width: 0; }
  .server-filters { justify-content: flex-start; overflow-x: auto; }
  #serverList .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-grid { grid-template-columns: 1fr; }
  body[data-page="landing"] .step-grid { grid-template-columns: 1fr; gap: 10px; }
  body[data-page="landing"] .step-card:not(:last-child)::after { display: none; }
  body[data-page="landing"] .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="landing"] .lp-section-head { align-items: flex-start; }
  body[data-page="landing"] .section-note { display: none; }
  .step-card::after { display: none; }
  .lp-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell-signature { display: none; }
}

@media (max-width: 560px) {
  .reine-backdrop { background-image: linear-gradient(180deg, rgb(255 248 252 / 12%), rgb(255 242 248 / 6%)), url("https://yuusocuti.xyz/assetsV2/bg_mobile.webp"); }
  .topbar { min-height: 58px; padding: 7px 9px 7px 10px; border-radius: 18px; grid-template-columns: 40px minmax(0, 1fr); }
  .brand-mark { font-size: 1.05rem; }
  .brand-name { font-size: .82rem; }
  .topbar .brand { width: 36px; gap: 0; overflow: visible; font-size: .78rem; }
  .topbar .brand-word { display: none; }
  .brand-flower { width: 32px; height: 32px; font-size: 1.45rem; }
  .topbar-actions { grid-column: 2; width: 100%; gap: 4px; overflow: visible; }
  .topbar-actions .lang-select { width: 104px; max-width: 104px; margin: 0; padding: 0 22px 0 9px; font-size: .61rem; }
  .theme-button { width: 37px; height: 37px; }
  .topbar .user span, .topbar .user-name { display: none; }
  .topbar .user { max-width: none; padding: 3px; overflow: visible; }
  body[data-page="landing"] .container { width: calc(100vw - 20px); }
  body[data-page="landing"] .lp-hero { width: calc(100vw - 20px); padding: 24px 14px 17px; }
  .lp-logo-img { width: 78px; height: 78px; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="landing"] .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body[data-page="landing"] .stat-strip .ss { min-height: 58px; gap: 8px; padding: 7px 9px; }
  body[data-page="landing"] .stat-strip .stat-icon { width: 36px; height: 36px; font-size: .95rem; }
  body[data-page="landing"] .lp-section { width: calc(100vw - 20px); margin-top: 14px; padding: 16px 14px 18px; }
  body[data-page="landing"] .feat-grid { grid-template-columns: 1fr; }
  body[data-page="landing"] .lp-section-head { flex-direction: column; gap: 4px; }
  body[data-page="landing"] .lp-section-head > a { align-self: flex-end; }
  .feat-grid, .lp-highlights, #serverList .grid { grid-template-columns: 1fr; }
  .server-card { min-height: 226px; }
  .server-filters { padding-bottom: 2px; }
  .server-filter { white-space: nowrap; }
  .panel.card { padding: 15px; }
  .automod-workspace.panel.card { padding: 13px 12px; }
  .workspace-heading { align-items: flex-start; gap: 9px; }
  .workspace-heading .workspace-icon { width: 36px; height: 36px; border-radius: 11px; }
  .workspace-heading h2 { font-size: 1.18rem; line-height: 1.2; }
  .workspace-heading p { margin-top: 3px; line-height: 1.35; }
  .automod-master { padding: 12px; }
  .master-toggle { align-items: flex-start; }
  .master-toggle .workspace-icon { display: none; }
  .preset-picker > div { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .automod-preset { min-width: 0; padding: 7px 5px; white-space: nowrap; }
  .am-h3 .hint { display: block; margin: 3px 0 0 24px; }
  .bw-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 6px; }
  .bw-row .bw-word { grid-column: 1 / -1; width: 100%; }
  .bw-row .bw-mode { width: 100%; min-width: 0; }
  .bw-row .del { width: 40px; }
  .am-act { display: grid; grid-template-columns: 66px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .am-act-cell { min-width: 0; }
  .am-act-cell input.input { width: 100%; min-width: 0; }
  .save-bar { margin-top: 14px; }
  .overview-kpis, .overview-split, .workspace-form-grid { grid-template-columns: 1fr; }
  .feature-status > div:last-child { grid-template-columns: repeat(2, 1fr); }
  .moderation-stats { grid-template-columns: 1fr; }
  .guild-hero-copy > div { align-items: flex-start; flex-direction: column; }
  .guild-count { padding: 4px; }
  .tv-join-card { grid-template-columns: 1fr; gap: 10px; }
  .panel.active > .setup-stepper { display: grid !important; grid-template-columns: 1fr 1fr; gap: 5px; overflow: visible; }
  .setup-stepper > i { display: none; }
  .setup-stepper button { min-width: 0; min-height: 46px; padding: 6px 8px; }
  .setup-component-grid { grid-template-columns: 1fr; }
  .setup-component-card.toggle { min-height: 92px; }
  .setup-detail-card > .row { grid-template-columns: 1fr; }
  .preset-picker > div { width: 100%; overflow-x: auto; }
  .reine-dock { bottom: 8px; width: calc(100vw - 20px); min-height: 55px; justify-content: space-around; padding: 5px; border-radius: 20px; }
  .reine-dock a { min-width: 0; flex: 1; padding-inline: 4px; }
  .dock-brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}