:root {
  color-scheme: dark;
  --bg: #030303;
  --surface: #0b0b0b;
  --surface-strong: #141414;
  --surface-soft: #080808;
  --border: #303030;
  --text: #f7f7f7;
  --muted: #a7a7a7;
  --dim: #707070;
  --purple: #f5f5f5;
  --purple-soft: #242424;
  --green: #ededed;
  --red: #d0d0d0;
  --amber: #b8b8b8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: #070c14; }
body { position: relative; isolation: isolate; margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background: #070c14; color: var(--text); letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

.cosmic-scene { position: fixed; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 50% 120%, #0d3d42 0, #091622 28%, #070c14 67%), linear-gradient(155deg, #070c14, #08101b 55%, #07171b); }
.cosmic-scene::before { content: ""; position: absolute; inset: 0; opacity: .28; background: radial-gradient(circle at 22% 18%, #ecffff 0 1px, transparent 1.8px), radial-gradient(circle at 76% 13%, #7cfff2 0 1px, transparent 1.7px), radial-gradient(circle at 85% 69%, #fff 0 1px, transparent 1.8px), radial-gradient(circle at 12% 75%, #b5fff8 0 1px, transparent 1.7px); background-size: 211px 197px, 277px 239px, 319px 283px, 363px 331px; }
.cosmic-nebula { position: absolute; border-radius: 50%; opacity: .24; }
.nebula-one { width: min(56vw, 940px); height: min(56vw, 940px); left: 13%; top: -42%; background: radial-gradient(circle, #18bdb35c 0, #0d76733b 36%, transparent 70%); }
.nebula-two { width: min(46vw, 780px); height: min(46vw, 780px); right: -12%; bottom: -26%; background: radial-gradient(circle, #284fb34d 0, #19378330 38%, transparent 70%); }
.nebula-three { width: min(34vw, 600px); height: min(34vw, 600px); left: -10%; bottom: 1%; background: radial-gradient(circle, #1a8d8142 0, transparent 69%); }
.star-field { position: absolute; inset: -18%; opacity: .5; }
.stars-distant { background-image: radial-gradient(circle, #b9fffa 0 1px, transparent 1.4px), radial-gradient(circle, #fff 0 .75px, transparent 1.2px), radial-gradient(circle, #69eadd 0 .8px, transparent 1.25px); background-position: 0 0, 35px 64px, 81px 22px; background-size: 137px 149px, 191px 213px, 253px 271px; }
.stars-near { opacity: .42; background-image: radial-gradient(circle, #fff 0 1.35px, transparent 2px), radial-gradient(circle, #68f6e8 0 1.1px, transparent 1.8px); background-position: 21px 44px, 96px 17px; background-size: 307px 331px, 419px 383px; }
.shooting-star { position: absolute; width: 150px; height: 1px; border-radius: 999px; opacity: 0; background: linear-gradient(90deg, transparent, #8cfff4, #fff); filter: drop-shadow(0 0 5px #5df6e7); transform: rotate(-35deg); }
.shooting-star::after { content: ""; position: absolute; right: 0; top: -1px; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #8cfff4; }
.shooting-star-one { top: 16%; left: 68%; }
.shooting-star-two { top: 39%; left: 10%; }
.shooting-star-three { top: 75%; left: 78%; }
body[data-page="login"] .star-field { will-change: transform; }
body[data-page="login"] .cosmic-nebula { filter: blur(70px); }
body[data-page="login"] .stars-distant { animation: star-drift 110s linear infinite; }
body[data-page="login"] .stars-near { filter: drop-shadow(0 0 4px #8afff3); animation: star-drift 76s linear -24s infinite reverse; }
body:not([data-page="login"]) .shooting-star { display: none; }
body[data-page="login"] .shooting-star-one { animation: shooting-star 9s ease-in 1.5s infinite; }
body[data-page="login"] .shooting-star-two { animation: shooting-star 13s ease-in 7s infinite; }
body[data-page="login"] .shooting-star-three { animation: shooting-star 16s ease-in 11s infinite; }
#app { position: relative; z-index: 1; min-height: 100vh; }

.loading-screen, .landing { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: clamp(24px, 5vw, 64px); }
.loading-screen p { color: var(--muted); }
.brand-mark { display: block; width: 62px; height: 62px; margin: 0 auto 14px; object-fit: contain; border-radius: 18px; mix-blend-mode: screen; filter: drop-shadow(0 12px 22px #19c9b46b); }

.landing { width: 100%; }
.landing-card { position: relative; isolation: isolate; width: min(590px, 100%); overflow: hidden; padding: clamp(36px, 5vw, 58px); background: linear-gradient(145deg, #152134e8, #0d1726ed 72%); border: 1px solid #4bb9b94a; border-radius: 30px; box-shadow: 0 38px 100px #000a, 0 0 0 1px #ffffff08 inset, 0 0 90px #16b8a320; backdrop-filter: blur(24px) saturate(125%); }
body[data-page="login"] .landing-card { animation: landing-card-enter .8s cubic-bezier(.16, .84, .28, 1) both; }
.landing-card::before { content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(125deg, #7dfff387, transparent 28%, transparent 68%, #6384ff54); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.landing-card::after { content: ""; position: absolute; z-index: -2; width: 320px; height: 320px; top: -235px; left: calc(50% - 160px); border-radius: 50%; background: #2be1d45c; filter: blur(60px); }
.landing-card-grid { position: absolute; z-index: -1; inset: 0; opacity: .1; background-image: linear-gradient(#72fff01c 1px, transparent 1px), linear-gradient(90deg, #72fff01c 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%); mask-image: linear-gradient(to bottom, #000, transparent 72%); }
.landing-logo-wrap { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 18px; }
.landing-logo { position: relative; z-index: 2; width: 74px; height: 74px; margin: 0; border-radius: 22px; filter: drop-shadow(0 10px 25px #15d4c78f); animation: logo-float 5s ease-in-out infinite; }
.logo-orbit { position: absolute; inset: 2px; border: 1px solid #61f8e75c; border-radius: 50%; box-shadow: 0 0 24px #21cbb926, inset 0 0 18px #21cbb91f; animation: orbit-spin 11s linear infinite; }
.logo-orbit::before, .logo-orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #aafff7; box-shadow: 0 0 12px #44e7d5; }
.logo-orbit::before { top: 8px; right: 14px; }
.logo-orbit::after { left: 6px; bottom: 19px; width: 4px; height: 4px; }
.eyebrow { margin: 0 0 8px; color: #4de1d0; font-size: .74rem; letter-spacing: .23em; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: 14px; letter-spacing: -.045em; }
.landing-card h1 { max-width: 470px; margin-right: auto; margin-left: auto; background: linear-gradient(160deg, #fff 22%, #dce9ff 65%, #92fff2); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; text-shadow: 0 16px 48px #0005; }
h2 { font-size: 1.35rem; margin-bottom: 6px; }
h3 { font-size: 1rem; margin-bottom: 5px; }
.lead { color: var(--muted); line-height: 1.65; margin-bottom: 28px; }
.landing-card .lead { max-width: 475px; margin-right: auto; margin-left: auto; color: #aebbd2; }
.login-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -8px 0 24px; }
.login-benefits span { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border: 1px solid #32465e; border-radius: 999px; color: #b7c5dc; background: #0b1421a8; font-size: .72rem; font-weight: 700; }
.login-benefits i { width: 5px; height: 5px; border-radius: 50%; background: #4de1d0; box-shadow: 0 0 9px #4de1d0; }

.primary-button, .secondary-button, .danger-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font-weight: 750; text-decoration: none; transition: transform .15s ease, filter .15s ease, border-color .15s ease, box-shadow .15s ease; }
.primary-button:hover, .secondary-button:hover, .danger-button:hover, .ghost-button:hover { transform: translateY(-1px); filter: brightness(1.1); }
.primary-button { background: linear-gradient(115deg, #43e5d2, #17a89e); color: #062522; box-shadow: 0 9px 24px #21cbb94d; }
.primary-button:hover { box-shadow: 0 12px 32px #21cbb966; }
.login-button { position: relative; justify-content: space-between; min-height: 52px; overflow: hidden; padding: 0 20px 0 24px; border-radius: 13px; box-shadow: 0 14px 32px #10ae9d3d, inset 0 1px 0 #d8fffa94; }
.login-button::before { content: ""; position: absolute; top: -80%; bottom: -80%; left: -40%; width: 26%; background: #fff5; transform: rotate(16deg); animation: button-shine 4.8s ease-in-out 2s infinite; }
.login-button span, .login-button b { position: relative; z-index: 1; }
.login-button b { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: #dffffb; background: #062e2b57; font-size: 1.05rem; transition: transform .18s ease; }
.login-button:hover b { transform: translateX(3px); }
.login-footnote { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 15px 0 -17px; color: #74859f; font-size: .72rem; }
.login-footnote span { color: #37d8c7; font-size: .58rem; }
.secondary-button { color: #7bf3e6; background: #12343266; border-color: #21cbb9; }
.danger-button { color: white; background: #d84c66; }
.ghost-button { color: var(--muted); background: transparent; border-color: var(--border); }
.wide { width: 100%; }

.notice { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #228f8b; border-radius: 10px; color: #a5f4eb; background: #103c3a77; font-size: .9rem; }
.notice.error { color: #ffb5c0; border-color: #a53851; background: #54152455; }

.server-page { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 80px; }
.page-header { display: flex; align-items: center; gap: 15px; justify-content: space-between; margin-bottom: 28px; }
.page-header .brand-mark { width: 52px; height: 52px; margin: 0; border-radius: 14px; }
.page-header-copy { flex: 1; text-align: left; }
.page-header h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.35rem); }
.page-header .lead { margin: 4px 0 0; font-size: .92rem; }
.account-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px 4px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-weight: 750; }
.avatar, .guild-icon, .avatar-fallback { object-fit: cover; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: #28344a; }
.account-button .avatar { width: 32px; height: 32px; border-radius: 50%; }
.avatar-fallback { display: grid; place-items: center; color: #d8fffb; font-weight: 850; background: linear-gradient(135deg, #249f9a, #185060); }

.server-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.server-card { display: grid; gap: 18px; min-height: 175px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.server-card:hover, .server-card.installed { border-color: #249f98; }
.server-card.installed { background: linear-gradient(135deg, #152a33, var(--surface) 60%); }
.server-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.server-card-title { min-width: 0; text-align: left; font-weight: 800; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.server-card-title small { display: block; margin-top: 4px; color: #6ee8da; font-size: .72rem; font-weight: 700; }

.dashboard-shell { display: grid; min-height: 100vh; grid-template-columns: 240px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; padding: 16px 10px; background: linear-gradient(180deg, #101825 0%, #0b111c 100%); border-right: 1px solid #1d2738; }
.switcher { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; color: var(--text); background: transparent; border: 0; text-align: left; border-radius: 10px; }
.switcher:hover { background: #161f30; }
.switcher .guild-icon, .switcher .avatar-fallback { width: 38px; height: 38px; border-radius: 9px; }
.switcher strong { display: block; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher small { display: block; margin-top: 2px; color: var(--muted); }
.caret { margin-left: auto; color: var(--muted); }
.switcher-menu { margin: 6px 0 14px; padding: 8px; border: 1px solid #202b3f; border-radius: 11px; background: #0b1019; }
.switcher-menu p { margin: 4px 8px 8px; color: var(--dim); font-size: .68rem; letter-spacing: .1em; font-weight: 800; }
.switcher-option { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; font-weight: 700; }
.switcher-option:hover, .switcher-option.active { background: #1c2740; }
.switcher-option .guild-icon, .switcher-option .avatar-fallback { width: 27px; height: 27px; border-radius: 7px; font-size: .72rem; }
.all-servers { margin-top: 6px; text-align: center; }

.nav { display: grid; gap: 4px; }
.nav-button { display: flex; align-items: center; gap: 12px; min-height: 43px; padding: 0 11px; color: #aab9d4; background: transparent; border: 0; border-radius: 9px; text-align: left; font-weight: 700; }
.nav-button:hover { background: #151f31; color: #f3f6ff; }
.nav-button.active { color: white; background: #1d2843; }
.nav-icon { width: 18px; color: #45dcca; font-size: 1.05rem; text-align: center; }
.nav-dot { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #536078; }
.nav-button.active .nav-dot { background: #33d9c7; box-shadow: 0 0 10px #33d9c7; }
.sidebar-footer { margin-top: auto; padding: 12px 8px 2px; border-top: 1px solid #1e2838; color: var(--muted); font-size: .8rem; }
.sidebar-logo { width: 28px; height: 28px; margin-right: 7px; vertical-align: middle; object-fit: contain; mix-blend-mode: screen; }

.dashboard-main { min-width: 0; padding: 42px clamp(22px, 5vw, 72px) 72px; }
.dashboard-header { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.dashboard-header .guild-icon, .dashboard-header .avatar-fallback { width: 72px; height: 72px; border-radius: 16px; font-size: 1.25rem; }
.dashboard-header h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.45rem); }
.dashboard-header p { margin: 7px 0 0; color: var(--muted); }
.view-server { margin-left: auto; white-space: nowrap; }
.dashboard-panel { max-width: 1060px; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.module-card { min-height: 144px; padding: 18px; text-align: left; background: linear-gradient(145deg, #172133, #111927); border: 1px solid var(--border); border-radius: 15px; color: var(--text); box-shadow: 0 10px 30px #04070e22; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.module-card:hover, .module-card.active { border-color: #278f8d; background: linear-gradient(145deg, #1a3140, #132431); transform: translateY(-2px); }
.module-card.active { box-shadow: inset 0 0 0 1px #21cbb94d, 0 15px 34px #04111950; }
.module-card-head { display: flex; align-items: center; gap: 11px; }
.module-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 11px; background: #173d42; color: #49dfcd; font-size: 1.1rem; }
.module-card:nth-child(2n) .module-icon { color: #62a3ff; background: #1e3154; }
.module-card:nth-child(3n) .module-icon { color: #4ed6bb; background: #173d42; }
.module-card:nth-child(4n) .module-icon { color: #ffa867; background: #412c1e; }
.module-card h3 { margin: 0; flex: 1; }
.status { padding: 4px 9px; border-radius: 999px; font-size: .69rem; font-weight: 800; color: #94a5c1; background: #253146; }
.status.on { color: #8bf0b4; background: #153a2d; }
.module-card p { margin: 13px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }

.section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.section-header h2 { margin: 0; font-size: 1.65rem; }
.section-header p { margin: 6px 0 0; color: var(--muted); }
.settings-card { padding: 24px; background: linear-gradient(145deg, #172133, #121b2a); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 14px 34px #03070e1f; }
.settings-card + .settings-card { margin-top: 16px; }
.settings-card h3 { margin-bottom: 15px; }
.settings-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-title-row h3 { margin: 0 0 15px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.field { display: grid; gap: 7px; color: #bfcae2; font-size: .85rem; font-weight: 700; }
.field.full { grid-column: 1 / -1; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 11px; border: 1px solid #2d3a52; border-radius: 9px; outline: none; color: var(--text); background: #0b121e; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #21cbb9; box-shadow: 0 0 0 3px #21cbb933; }
.field textarea { min-height: 95px; resize: vertical; }
.field select[multiple] { min-height: 118px; }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.saved-message { color: var(--green); font-size: .85rem; font-weight: 700; }
.hint { color: var(--muted); font-size: .84rem; line-height: 1.5; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #273247; }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row strong { display: block; }
.toggle-row small { display: block; margin-top: 4px; color: var(--muted); }
.switch { position: relative; display: inline-block; width: 45px; height: 25px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; border-radius: 999px; background: #3a465d; transition: .15s; }
.slider::before { content: ""; position: absolute; width: 19px; height: 19px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .15s; }
.switch input:checked + .slider { background: var(--purple); }
.switch input:checked + .slider::before { transform: translateX(20px); }

.log-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #273247; border-radius: 12px; overflow: hidden; margin: 16px 0; }
.log-option { display: flex; align-items: center; gap: 11px; min-height: 76px; padding: 13px; border-bottom: 1px solid #273247; color: var(--text); cursor: pointer; }
.log-option:nth-child(odd) { border-right: 1px solid #273247; }
.log-option:nth-last-child(-n + 2) { border-bottom: 0; }
.log-option input { width: 18px; height: 18px; accent-color: var(--purple); }
.log-option strong, .log-option small { display: block; }
.log-option small { margin-top: 3px; color: var(--muted); font-size: .76rem; line-height: 1.35; }

.leveling-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 16px; margin-top: 16px; }
.leaderboard-list, .department-list, .reminder-list { display: grid; gap: 8px; }
.leader-row, .department-row, .reminder-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 11px 12px; border: 1px solid #273247; border-radius: 10px; background: #111927; }
.leader-row strong { display: grid; place-items: center; min-width: 28px; color: #55e4d4; }
.leader-row span, .department-row div:first-child, .reminder-row div:first-child { min-width: 0; flex: 1; }
.leader-row small, .department-row small, .reminder-row small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.department-row, .reminder-row { justify-content: space-between; }
.department-row > div:last-child, .reminder-row > div:last-child { display: flex; gap: 7px; }
.reward-list { display: grid; gap: 9px; margin: 14px 0; }
.reward-row { display: grid; grid-template-columns: auto 64px auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px dashed #31445e; border-radius: 10px; color: var(--muted); font-size: .77rem; font-weight: 800; }
.reward-row input, .reward-row select { min-width: 0; padding: 9px; border: 1px solid #2d3a52; border-radius: 8px; color: var(--text); background: #0d1420; }
.empty-copy { margin: 0; padding: 22px 12px; border: 1px dashed #334158; border-radius: 10px; color: var(--muted); text-align: center; font-size: .87rem; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: #040911be; backdrop-filter: blur(5px); }
.settings-modal { width: min(900px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 24px; border: 1px solid #2b5860; border-radius: 18px; background: linear-gradient(145deg, #172233, #0f1724); box-shadow: 0 30px 100px #000b; }
.settings-modal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.settings-modal > header h2 { margin: 0; }

.embed-layout { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.embed-preview { max-width: 510px; padding: 16px; border: 1px solid #26354c; border-radius: 13px; background: #101725; }
.embed-preview > p { margin-bottom: 10px; color: #66ddd0; font-size: .68rem; letter-spacing: .14em; font-weight: 800; }
.discord-preview { padding: 13px; border-radius: 10px; background: #0b111c; color: #eff8ff; font-size: .86rem; }
.discord-author { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.discord-author img { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; mix-blend-mode: screen; }
.discord-author strong { font-size: .9rem; }
.discord-author small { margin-left: 4px; padding: 2px 4px; border-radius: 4px; color: #052724; background: #44d8c8; font-size: .62rem; }
.discord-author time { color: #8290aa; font-size: .7rem; }
.preview-content { margin: 0 0 9px 37px; color: #d8e3f4; white-space: pre-line; line-height: 1.45; }
.preview-embed { display: grid; gap: 8px; padding: 12px 13px; border-left: 4px solid var(--purple); border-radius: 4px; background: #151e2e; }
.preview-embed span { color: #d1dcf2; line-height: 1.45; white-space: pre-line; }
.preview-embed em { color: var(--muted); font-size: .76rem; font-style: normal; }

.reminder-modal { width: min(1120px, 100%); }
.reminder-editor-layout { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(290px, .84fr); gap: 18px; align-items: start; }
.reminder-editor-fields { display: grid; gap: 16px; min-width: 0; }
.reminder-preview-column { position: sticky; top: 0; display: grid; gap: 12px; }
.reminder-live-preview { max-width: none; background: linear-gradient(145deg, #111a29, #0d1421); }
.reminder-fire-card { display: grid; gap: 13px; padding: 15px; border: 1px solid #2d3c54; border-radius: 13px; background: #101827; }
.reminder-fire-card h3 { margin: 0 0 4px; }
.reminder-fire-card .hint { margin: 0; }
.reminder-mode-picker { display: inline-flex; align-self: start; max-width: 100%; padding: 4px; border: 1px solid #27364c; border-radius: 10px; background: #0a101a; }
.reminder-mode-picker button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 7px; color: #aebbd2; background: transparent; font-size: .78rem; font-weight: 800; }
.reminder-mode-picker button.active { color: #eafffc; background: linear-gradient(115deg, #2ee4cf, #168f8b); box-shadow: 0 5px 14px #21cbb940; }
.reminder-mode-picker button:disabled { opacity: .52; }
.preview-note { display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; border: 1px solid #24595a; border-radius: 11px; color: #a6dad4; background: #10363455; }
.preview-note span { color: #54e4d3; font-size: 1rem; }
.preview-note p { margin: 0; font-size: .79rem; line-height: 1.45; }

@keyframes nebula-float-one {
  from { transform: translate3d(-5%, -2%, 0) scale(.95); }
  to { transform: translate3d(12%, 10%, 0) scale(1.12); }
}
@keyframes nebula-float-two {
  from { transform: translate3d(4%, 5%, 0) scale(1); }
  to { transform: translate3d(-12%, -8%, 0) scale(1.15); }
}
@keyframes star-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(7%, -11%, 0); }
}
@keyframes shooting-star {
  0%, 70% { opacity: 0; transform: translate3d(-80px, 60px, 0) rotate(-35deg) scaleX(.4); }
  73% { opacity: .9; }
  82% { opacity: 0; transform: translate3d(380px, -230px, 0) rotate(-35deg) scaleX(1); }
  100% { opacity: 0; }
}
@keyframes landing-card-enter {
  from { opacity: 0; transform: translateY(24px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes landing-card-breathe {
  0%, 100% { box-shadow: 0 38px 100px #000a, 0 0 0 1px #ffffff08 inset, 0 0 70px #16b8a316; }
  50% { box-shadow: 0 42px 110px #000a, 0 0 0 1px #ffffff0d inset, 0 0 105px #16b8a329; }
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}
@keyframes button-shine {
  0%, 55% { left: -45%; opacity: 0; }
  62% { opacity: .55; }
  76%, 100% { left: 125%; opacity: 0; }
}

/* Dashboard motion is limited to navigation and opening a panel so busy
   server controls stay responsive and easy to scan. */
@keyframes panel-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes section-swap-in {
  from { opacity: 0; transform: translate3d(0, 9px, 0) scale(.997); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes section-control-tap {
  0% { transform: scale(1); }
  48% { transform: scale(.965); }
  100% { transform: scale(1); }
}
@keyframes soft-pulse {
  0%, 100% { box-shadow: 0 0 0 0 #21cbb900; }
  50% { box-shadow: 0 0 0 7px #21cbb915; }
}
@keyframes accent-sweep {
  from { transform: translateX(-115%); }
  to { transform: translateX(210%); }
}
.section-content { transition: opacity .115s ease-out, transform .115s ease-out; }
.section-content.section-leaving { opacity: 0; transform: translate3d(0, 5px, 0); }
.section-content.section-entering { animation: section-swap-in .3s cubic-bezier(.2, .75, .25, 1) both; }
.module-card { position: relative; overflow: hidden; }
.module-card::after { content: ""; position: absolute; inset: 0 auto 0 -42%; width: 28%; pointer-events: none; background: linear-gradient(90deg, transparent, #7cf7ea18, transparent); transform: translateX(-115%); }
.module-card:hover::after { animation: accent-sweep .85s ease both; }
.nav-button.section-triggered, .module-card.section-triggered { animation: section-control-tap .18s ease-out both; }
.settings-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.settings-card:hover { border-color: #35556a; box-shadow: 0 18px 42px #02060f35; }
.section-header { position: relative; padding-bottom: 15px; border-bottom: 1px solid #253149; }
.section-header::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 96px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #38e4d0, transparent); }
.nav-button { position: relative; overflow: hidden; transition: color .15s ease, background .15s ease, transform .15s ease; }
.nav-button::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 4px 4px 0; background: #47e5d2; opacity: 0; transform: scaleY(.45); transition: opacity .15s ease, transform .15s ease; }
.nav-button:hover { transform: translateX(2px); }
.nav-button.active::before { opacity: 1; transform: scaleY(1); }
.nav-button.active .nav-icon { text-shadow: 0 0 14px #41decdb5; }
.status.on { box-shadow: 0 0 0 1px #21cbb91f; }
.form-actions { padding-top: 3px; }
.form-actions .primary-button { min-width: 132px; }

.button-timer-settings, .button-panel-design { display: grid; gap: 15px; padding: 16px; border: 1px solid #2c425b; border-radius: 13px; background: linear-gradient(135deg, #121d2c, #101725); }
.button-timer-settings > .toggle-row, .button-panel-design .toggle-row { margin: 0; }
.button-panel-design h3 { margin: 0 0 3px; }
.button-panel-design > .hint { margin: -10px 0 0; }
.timer-unit-picker, .button-style-picker { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border: 1px solid #26364e; border-radius: 10px; background: #0a101a; }
.timer-unit-picker button, .button-style-option { min-height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; color: #aab8cf; background: transparent; font-size: .77rem; font-weight: 800; transition: transform .14s ease, color .14s ease, background .14s ease, border-color .14s ease; }
.timer-unit-picker button:hover, .button-style-option:hover { color: #e7fffb; background: #173334; }
.timer-unit-picker button.active { color: #eafffc; background: linear-gradient(115deg, #2ee4cf, #168f8b); box-shadow: 0 5px 14px #21cbb940; }
.button-style-option.active { color: #fff; border-color: #6b9ffd; background: #335fad; box-shadow: 0 5px 14px #4468d540; }
.button-style-option[data-style="grey"].active { border-color: #8190a8; background: #526074; }
.button-style-option[data-style="green"].active { border-color: #45d38c; background: #287b58; }
.button-style-option[data-style="red"].active { border-color: #ff7188; background: #a44055; }
.button-reminder-row { border-color: #255f60; background: linear-gradient(100deg, #143034, #111927); }
.button-reminder-row strong { color: #9ef7ec; }

.music-live-card { display: grid; gap: 22px; overflow: hidden; padding: 26px; border: 1px solid #285d62; border-radius: 18px; background: radial-gradient(520px 240px at 100% 0, #1b827229, transparent 72%), linear-gradient(145deg, #172537, #101927 72%); box-shadow: 0 20px 55px #02080f52; }
.music-live-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.music-live-top h3 { margin: 0 0 5px; font-size: 1.32rem; }
.music-live-top p { margin: 0; color: var(--muted); font-size: .88rem; }
.music-live-top .status.error { color: #ffbbc8; background: #491c2b; }
.music-now-playing { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; border: 1px solid #2b4258; border-radius: 14px; background: #0c1420a8; }
.music-artwork { width: 128px; height: 128px; object-fit: cover; border: 1px solid #396674; border-radius: 13px; background: #152a35; box-shadow: 0 12px 30px #0008; }
.music-artwork-fallback { display: grid; place-items: center; color: #7bf3e6; font-size: 3.3rem; background: linear-gradient(135deg, #1b6965, #18264a); }
.music-track-copy { min-width: 0; }
.music-track-copy h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.32rem; }
.music-track-copy h3 a { color: var(--text); text-decoration: none; }
.music-track-copy h3 a:hover { color: #70f5e5; text-decoration: underline; }
.music-track-copy > p { margin: 6px 0 18px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #27364a; box-shadow: inset 0 1px 3px #0009; }
.music-progress span { display: block; height: 100%; min-width: 8px; border-radius: inherit; background: linear-gradient(90deg, #26cdbd, #77f2db); box-shadow: 0 0 14px #4bedda8a; transition: width .45s linear; }
.music-time { display: flex; justify-content: space-between; margin-top: 7px; color: #9fafc6; font-size: .78rem; font-variant-numeric: tabular-nums; }
.music-controls { display: flex; flex-wrap: wrap; gap: 9px; }
.music-controls .ghost-button.active-control { color: #c8fffa; border-color: #2acbbb; background: #14504d; box-shadow: inset 0 0 0 1px #54ead847; }
.music-volume-row { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(130px, 1fr) auto auto; gap: 12px; align-items: center; padding: 15px 16px; border: 1px solid #2b4258; border-radius: 13px; background: #0d1624; }
.music-volume-row strong, .music-volume-row small { display: block; }
.music-volume-row small { margin-top: 3px; color: var(--muted); font-size: .76rem; }
.music-volume-row input { width: 100%; accent-color: #35d6c6; }
.music-volume-row output { min-width: 45px; color: #92f4e8; font-weight: 800; font-variant-numeric: tabular-nums; }
.music-queue-card { padding: 17px; border: 1px solid #2b4258; border-radius: 13px; background: #101827b8; }
.music-queue-card .settings-title-row { margin-bottom: 10px; }
.music-queue-card h3 { margin: 0; }
.music-queue-card p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.music-queue-count { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 999px; color: #a9fff6; background: #174744; font-size: .78rem; font-weight: 800; }
.music-queue { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.music-queue li { display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid #26374d; border-radius: 9px; background: #0c1420; }
.music-queue li > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #91f3e7; background: #193f43; font-size: .75rem; font-weight: 800; }
.music-queue li div { min-width: 0; }
.music-queue li strong, .music-queue li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-queue li small { margin-top: 3px; color: var(--muted); font-size: .75rem; }
.music-queue-empty { margin: 0; padding: 18px; border: 1px dashed #34445a; border-radius: 9px; text-align: center; }
.music-empty { grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: 172px; }
.music-empty-icon { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 18px; color: #78f3e5; background: linear-gradient(135deg, #225d5c, #19314d); box-shadow: 0 12px 28px #0007; font-size: 2rem; }
.music-empty h3 { margin: 0 0 6px; font-size: 1.25rem; }
.music-empty p { margin: 0; color: var(--muted); line-height: 1.5; }
.music-empty small { display: block; margin-top: 8px; color: #ffbbc8; font-size: .76rem; }

.command-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 540px; overflow: auto; padding-right: 4px; }
.command-toggle { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 9px; border: 1px solid #2b374d; border-radius: 8px; color: #cbd6ed; background: #0e1623; font-size: .86rem; }
.command-toggle:has(input:checked) { color: #ffbcc6; border-color: #824253; background: #371a263d; }
.command-toggle input { accent-color: #e45770; }
.command-toggle.protected { opacity: .65; }

.empty-state { padding: 38px 20px; border: 1px dashed #334158; border-radius: 14px; text-align: center; color: var(--muted); }

/* Shadow's Helper — monochrome noir theme */
html, body { background: #020202; }
.cosmic-scene {
  background:
    radial-gradient(ellipse at 50% 118%, #242424 0, #080808 34%, #020202 69%),
    linear-gradient(155deg, #020202, #080808 55%, #000);
}
.cosmic-scene::before {
  opacity: .3;
  background:
    radial-gradient(circle at 22% 18%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 13%, #bdbdbd 0 1px, transparent 1.7px),
    radial-gradient(circle at 85% 69%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 12% 75%, #8d8d8d 0 1px, transparent 1.7px);
  background-size: 211px 197px, 277px 239px, 319px 283px, 363px 331px;
}
.nebula-one { background: radial-gradient(circle, #ffffff22 0, #8b8b8b12 40%, transparent 70%); }
.nebula-two { background: radial-gradient(circle, #d8d8d81a 0, #7777770d 40%, transparent 70%); }
.nebula-three { background: radial-gradient(circle, #ffffff12 0, transparent 69%); }
.stars-distant {
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.4px), radial-gradient(circle, #adadad 0 .75px, transparent 1.2px), radial-gradient(circle, #ededed 0 .8px, transparent 1.25px);
}
.stars-near {
  background-image: radial-gradient(circle, #fff 0 1.35px, transparent 2px), radial-gradient(circle, #bcbcbc 0 1.1px, transparent 1.8px);
}
body[data-page="login"] .stars-near { filter: drop-shadow(0 0 4px #ffffff); }
.shooting-star { background: linear-gradient(90deg, transparent, #bdbdbd, #fff); filter: drop-shadow(0 0 5px #fff); }
.shooting-star::after { box-shadow: 0 0 10px #fff; }

.brand-mark { filter: grayscale(1) contrast(1.1) drop-shadow(0 10px 22px #ffffff24); }
.landing-card {
  width: min(620px, 100%);
  padding: clamp(38px, 5vw, 58px);
  background: linear-gradient(145deg, #111111ed, #060606f4 72%);
  border-color: #4b4b4b;
  border-radius: 22px;
  box-shadow: 0 38px 100px #000d, 0 0 0 1px #ffffff0b inset, 0 0 80px #ffffff0b;
  backdrop-filter: blur(18px);
}
.landing-card::before { background: linear-gradient(125deg, #ffffff9c, transparent 27%, transparent 68%, #6b6b6b8c); }
.landing-card::after { background: #ffffff20; }
.landing-card-grid {
  opacity: .09;
  background-image: linear-gradient(#ffffff26 1px, transparent 1px), linear-gradient(90deg, #ffffff26 1px, transparent 1px);
}
.landing-logo-wrap { width: 188px; height: 188px; margin-bottom: 24px; }
.landing-logo {
  width: 166px;
  height: 166px;
  border: 1px solid #4d4d4d;
  border-radius: 12px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.18) drop-shadow(0 16px 34px #ffffff20);
  animation: none;
}
.logo-orbit { inset: 0; border-color: #ffffff5e; border-radius: 15px; box-shadow: 0 0 30px #ffffff16, inset 0 0 20px #ffffff0d; animation: none; }
.logo-orbit::before, .logo-orbit::after { background: #fff; box-shadow: 0 0 12px #fff; }
.eyebrow, .nav-icon, .leader-row strong { color: #fff; }
.landing-card h1 { background: linear-gradient(155deg, #fff 28%, #9b9b9b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-card .lead { color: #b3b3b3; }
.login-benefits span { color: #c6c6c6; background: #080808cc; border-color: #393939; }
.login-benefits i { background: #fff; box-shadow: 0 0 9px #fff; }
.login-footnote { color: #7d7d7d; }
.login-footnote span { color: #fff; }

.primary-button { color: #050505; background: linear-gradient(115deg, #fff, #bdbdbd); box-shadow: 0 9px 24px #ffffff1f; }
.primary-button:hover { box-shadow: 0 13px 32px #ffffff32; }
.login-button { box-shadow: 0 14px 32px #ffffff18, inset 0 1px 0 #fff; }
.login-button b { color: #fff; background: #050505; }
.secondary-button { color: #f5f5f5; background: #151515; border-color: #5f5f5f; }
.danger-button { color: #f5f5f5; background: #171717; border-color: #696969; }
.ghost-button { color: #c1c1c1; background: #0c0c0c; border-color: #363636; }
.notice { color: #e7e7e7; background: #151515; border-color: #626262; }
.notice.error { color: #f2f2f2; background: #1a1a1a; border-color: #8a8a8a; }

.account-button, .server-card, .switcher-menu, .settings-card, .leader-row, .department-row, .reminder-row, .empty-state {
  background: linear-gradient(145deg, #121212, #080808);
  border-color: #303030;
}
.avatar-fallback { color: #fff; background: linear-gradient(135deg, #383838, #111); }
.server-card:hover, .server-card.installed { border-color: #9a9a9a; }
.server-card.installed { background: linear-gradient(135deg, #1a1a1a, #090909 65%); }
.server-card-title small { color: #d4d4d4; }
.sidebar { background: linear-gradient(180deg, #090909 0%, #030303 100%); border-right-color: #202020; }
.switcher:hover, .switcher-option:hover, .switcher-option.active, .nav-button:hover { background: #151515; }
.switcher-menu { border-color: #292929; }
.nav-button { color: #adadad; }
.nav-button.active { color: #fff; background: #1c1c1c; }
.nav-dot { background: #585858; }
.nav-button.active .nav-dot { background: #fff; box-shadow: 0 0 10px #fff; }
.nav-button::before { background: #fff; }
.nav-button.active .nav-icon { text-shadow: 0 0 14px #ffffff8c; }
.sidebar-footer { border-color: #222; }

.module-card { background: linear-gradient(145deg, #151515, #090909); border-color: #303030; box-shadow: 0 10px 30px #0005; }
.module-card:hover, .module-card.active { border-color: #929292; background: linear-gradient(145deg, #202020, #0d0d0d); }
.module-card.active { box-shadow: inset 0 0 0 1px #ffffff24, 0 15px 34px #0009; }
.module-card::after { background: linear-gradient(90deg, transparent, #ffffff1a, transparent); }
.module-icon, .module-card:nth-child(2n) .module-icon, .module-card:nth-child(3n) .module-icon, .module-card:nth-child(4n) .module-icon { color: #fff; background: #222; border: 1px solid #353535; }
.status { color: #aaa; background: #242424; }
.status.on { color: #fff; background: #303030; box-shadow: 0 0 0 1px #ffffff26; }
.settings-card { box-shadow: 0 14px 34px #0005; }
.settings-card:hover { border-color: #5c5c5c; box-shadow: 0 18px 42px #0008; }
.section-header { border-color: #2d2d2d; }
.section-header::after { background: linear-gradient(90deg, #fff, transparent); }

.field { color: #cecece; }
.field input, .field select, .field textarea, .reward-row input, .reward-row select { color: #f7f7f7; background: #050505; border-color: #343434; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #fff; box-shadow: 0 0 0 3px #ffffff20; background: #090909; }
.toggle-row, .log-options, .log-option { border-color: #292929; }
.slider { background: #3b3b3b; }
.switch input:checked + .slider { background: #f5f5f5; }
.switch input:checked + .slider::before { background: #050505; }
.log-option input { accent-color: #fff; }
.reward-row, .empty-copy { border-color: #414141; }
.saved-message { color: #fff; }

.modal-backdrop { background: #000000d6; }
.settings-modal { border-color: #565656; background: linear-gradient(145deg, #151515, #070707); box-shadow: 0 30px 100px #000e; }
.embed-preview, .reminder-live-preview { background: #0c0c0c; border-color: #353535; }
.embed-preview > p { color: #c9c9c9; }
.discord-preview { color: #f7f7f7; background: #030303; }
.discord-author img { filter: grayscale(1) contrast(1.1); }
.discord-author small { color: #050505; background: #fff; }
.discord-author time { color: #898989; }
.preview-content { color: #ddd; }
.preview-embed { background: #171717; }
.preview-embed span { color: #dedede; }
.reminder-fire-card, .button-timer-settings, .button-panel-design { border-color: #363636; background: linear-gradient(135deg, #111, #080808); }
.reminder-mode-picker, .timer-unit-picker, .button-style-picker { border-color: #333; background: #030303; }
.reminder-mode-picker button, .timer-unit-picker button, .button-style-option { color: #b9b9b9; }
.reminder-mode-picker button.active, .timer-unit-picker button.active { color: #050505; background: linear-gradient(115deg, #fff, #bdbdbd); box-shadow: 0 5px 14px #ffffff24; }
.timer-unit-picker button:hover, .button-style-option:hover { color: #fff; background: #1b1b1b; }
.button-style-option.active, .button-style-option[data-style="grey"].active, .button-style-option[data-style="green"].active, .button-style-option[data-style="red"].active { color: #050505; border-color: #fff; background: #fff; box-shadow: 0 5px 14px #ffffff24; }
.preview-note { color: #d1d1d1; background: #131313; border-color: #464646; }
.preview-note span, .button-reminder-row strong { color: #fff; }
.button-reminder-row { border-color: #4b4b4b; background: linear-gradient(100deg, #181818, #0a0a0a); }

.music-live-card { border-color: #444; background: radial-gradient(520px 240px at 100% 0, #ffffff12, transparent 72%), linear-gradient(145deg, #151515, #080808 72%); box-shadow: 0 20px 55px #000b; }
.music-live-top .status.error { color: #e7e7e7; background: #242424; }
.music-now-playing, .music-volume-row, .music-queue-card { border-color: #343434; background: #070707cc; }
.music-artwork { border-color: #555; background: #111; }
.music-artwork-fallback, .music-empty-icon { color: #fff; background: linear-gradient(135deg, #353535, #0c0c0c); }
.music-track-copy h3 a:hover { color: #fff; }
.music-progress { background: #292929; }
.music-progress span { background: linear-gradient(90deg, #a0a0a0, #fff); box-shadow: 0 0 14px #ffffff5c; }
.music-time { color: #a0a0a0; }
.music-controls .ghost-button.active-control { color: #050505; border-color: #fff; background: #fff; box-shadow: none; }
.music-volume-row input { accent-color: #fff; }
.music-volume-row output { color: #fff; }
.music-queue-count, .music-queue li > span { color: #fff; background: #292929; }
.music-queue li { border-color: #2f2f2f; background: #050505; }
.music-queue-empty { border-color: #3e3e3e; }
.music-empty small { color: #c7c7c7; }

.command-toggle { color: #d5d5d5; border-color: #333; background: #070707; }
.command-toggle:has(input:checked) { color: #fff; border-color: #777; background: #1b1b1b; }
.command-toggle input { accent-color: #fff; }

@media (max-width: 860px) {
  .server-grid, .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid #1d2738; }
  .nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-button { justify-content: center; padding: 0 6px; }
  .nav-button span:not(.nav-icon), .nav-dot, .sidebar-footer { display: none; }
  .dashboard-main { padding-top: 28px; }
  .log-options { grid-template-columns: 1fr; }
  .log-option:nth-child(odd) { border-right: 0; }
  .log-option:nth-last-child(-n + 2) { border-bottom: 1px solid #273247; }
  .log-option:last-child { border-bottom: 0; }
  .leveling-grid { grid-template-columns: 1fr; }
  .reminder-editor-layout { grid-template-columns: 1fr; }
  .reminder-preview-column { position: static; }
  .music-volume-row { grid-template-columns: 1fr auto; }
  .music-volume-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 540px) {
  .landing { padding: 18px; }
  .landing-card { padding: 34px 22px; border-radius: 23px; }
  .landing-logo-wrap { width: 138px; height: 138px; margin-bottom: 18px; }
  .landing-logo { width: 122px; height: 122px; border-radius: 10px; }
  .landing-card h1 { font-size: clamp(2rem, 11vw, 2.75rem); }
  .login-benefits { gap: 6px; }
  .login-benefits span { padding: 0 8px; font-size: .66rem; }
  .login-footnote { margin-bottom: -11px; }
  .server-page { width: min(100% - 28px, 1120px); padding-top: 24px; }
  .page-header { align-items: flex-start; flex-wrap: wrap; }
  .account-button { margin-left: 60px; }
  .server-grid, .module-grid, .field-grid, .command-list { grid-template-columns: 1fr; }
  .dashboard-main { padding: 26px 16px 50px; }
  .dashboard-header .guild-icon, .dashboard-header .avatar-fallback { width: 54px; height: 54px; }
  .settings-card { padding: 18px; }
  .settings-modal { max-height: calc(100vh - 28px); padding: 18px; }
  .reminder-mode-picker { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reminder-mode-picker button { padding: 0 5px; font-size: .7rem; }
  .timer-unit-picker button, .button-style-option { flex: 1 1 auto; padding: 0 8px; }
  .reward-row { grid-template-columns: auto 58px auto minmax(0, 1fr); }
  .reward-row .remove-reward { grid-column: 1 / -1; }
  .music-live-card { padding: 18px; }
  .music-now-playing { grid-template-columns: 78px minmax(0, 1fr); gap: 13px; padding: 12px; }
  .music-artwork { width: 78px; height: 78px; border-radius: 10px; }
  .music-track-copy h3 { font-size: 1rem; }
  .music-track-copy > p { margin-bottom: 12px; }
  .music-live-top { align-items: flex-start; }
  .music-live-top .status { white-space: nowrap; }
  .music-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .music-controls button { width: 100%; padding: 0 8px; font-size: .76rem; }
  .music-volume-row { grid-template-columns: 1fr auto; }
  .music-volume-row > :nth-child(2) { grid-column: 1 / -1; }
  .music-volume-row .secondary-button { grid-column: 1 / -1; }
  .music-empty { grid-template-columns: 1fr; text-align: center; }
  .music-empty-icon { margin: 0 auto; }
}

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