/* Component baseline: style.css */
:root {
  color-scheme:dark;
  --bg:#111318;
  --panel:#1a1d24;
  --line:#2d313b;
  --text:#f5f2ec;
  --muted:#a1a7b3;
  --gold:#dca84b;
  --green:#77d8af;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text)
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  outline-offset:4px
}

button,a {
  touch-action:manipulation
}

button {
  cursor:pointer
}

button:disabled {
  opacity:.5;
  cursor:wait
}

a {
  color:var(--gold);
  text-decoration:none
}

button {
  border:1px solid var(--line);
  border-radius:9px;
  padding:11px 16px;
  background:#242833;
  color:var(--text);
  font-weight:600
}

button:hover {
  background:#303642
}

button.primary {
  background:var(--gold);
  color:#17130c;
  border-color:var(--gold)
}

button.danger {
  color:#ffa4a4;
  background:#352326
}

header {
  height:83px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  background:#15181e
}

.wordmark {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:750
}

.brandmark {
  height:39px;
  width:39px;
  background:var(--gold);
  color:#18130a;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-weight:850;
  font-size:24px
}

.wordmark img {
  width:40px;
  height:40px;
  border-radius:10px;
  object-fit:cover
}

.wordmark small {
  display:block;
  color:var(--muted);
  font-weight:400;
  font-size:11px;
  letter-spacing:1px;
  margin-top:4px
}

.account {
  display:flex;
  align-items:center;
  gap:16px;
  font-size:13px;
  color:var(--muted)
}

.layout {
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:calc(100vh - 83px)
}

aside {
  border-right:1px solid var(--line);
  padding:28px 15px;
  display:flex;
  flex-direction:column;
  gap:6px
}

aside button {
  text-align:left;
  background:none;
  border-color:transparent;
  color:var(--muted);
  font-weight:500;
  padding:13px 16px
}

aside button.active {
  color:var(--gold);
  background:#dca84b10;
  border-color:#dca84b26
}

.nav-label {
  color:#697180;
  font-size:10px;
  letter-spacing:1.8px;
  padding:15px 16px 12px
}

.aside-foot {
  margin-top:auto;
  padding:24px 16px;
  color:#767f8e;
  font-size:12px;
  line-height:1.8
}

main.content {
  padding:38px 46px 70px;
  max-width:1550px;
  width:100%;
  margin:auto
}

.pagehead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:28px
}

.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  color:var(--gold);
  font-weight:700;
  margin:0 0 12px
}

h1 {
  font-size:32px;
  letter-spacing:-1px;
  font-weight:650;
  margin:0 0 10px
}

h2 {
  font-size:18px;
  font-weight:600;
  margin:0 0 10px
}

h3 {
  font-size:15px;
  margin:0 0 10px
}

p {
  line-height:1.65
}

.muted,.pagehead p {
  color:var(--muted);
  margin:0;
  line-height:1.6
}

.hero {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 100% 0%,#dca84b20,transparent 55%),linear-gradient(120deg,#252720,#1b1e25);
  border:1px solid #dca84b38;
  padding:35px;
  border-radius:16px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  margin-bottom:25px
}

.hero h2 {
  font-size:26px;
  max-width:520px;
  line-height:1.3
}

.hero p {
  max-width:600px;
  color:var(--muted);
  margin-bottom:0
}

.hero .badge {
  align-self:flex-start;
  white-space:nowrap
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:600;
  border:1px solid var(--line);
  padding:7px 10px;
  border-radius:99px;
  color:var(--muted)
}

.badge.good {
  background:#77d8af0d;
  border-color:#77d8af30;
  color:var(--green)
}

.badge.warn {
  color:var(--gold);
  border-color:#dca84b40;
  background:#dca84b0c
}

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:25px
}

.grid.two {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:13px;
  padding:23px;
  min-width:0
}

.metric {
  font-size:33px;
  font-weight:650;
  letter-spacing:-1px;
  margin:17px 0 7px
}

.card-label {
  font-size:12px;
  color:var(--muted)
}

.card .muted {
  font-size:12px
}

.section {
  margin-top:30px
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 0 16px
}

.feature {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:17px 0;
  border-bottom:1px solid var(--line)
}

.feature:last-child {
  border-bottom:0
}

.feature p {
  color:var(--muted);
  font-size:12px;
  margin:5px 0 0
}

.feature h3 {
  margin:0
}

.notice {
  border:1px solid #dca84b40;
  background:#dca84b0a;
  padding:17px 20px;
  border-radius:11px;
  color:#e5c898;
  font-size:13px;
  line-height:1.7;
  margin-bottom:25px
}

.notice ul {
  padding-left:18px;
  margin-bottom:0
}

label {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:18px
}

label input,label textarea,label select {
  margin-top:8px
}

input,textarea,select {
  display:block;
  width:100%;
  background:#11141b;
  border:1px solid #373d49;
  border-radius:8px;
  color:var(--text);
  padding:12px;
  font-size:14px
}

textarea {
  min-height:120px;
  resize:vertical;
  line-height:1.6
}

input:focus,textarea:focus,select:focus {
  border-color:var(--gold)
}

.formgrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 22px
}

.actions {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap
}

.embed-preview {
  background:#30333d;
  border-left:4px solid var(--gold);
  border-radius:6px;
  padding:23px;
  min-height:230px;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

.embed-preview h3 {
  font-size:20px
}

.embed-preview p {
  font-size:14px
}

.embed-preview small {
  font-size:11px;
  color:#b6bac4
}

.tablewrap {
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px
}

table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  background:var(--panel);
  font-size:13px
}

th {
  color:var(--muted);
  font-weight:500;
  background:#171a21;
  padding:15px 18px;
  white-space:nowrap
}

td {
  padding:17px 18px;
  border-top:1px solid var(--line);
  vertical-align:top;
  max-width:600px
}

td.message {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.6
}

td button {
  font-size:11px;
  padding:7px 10px
}

.ticket-editor {
  margin-bottom:16px
}

.empty {
  padding:40px;
  text-align:center;
  color:var(--muted)
}

.login {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:25px;
  background:radial-gradient(ellipse at 50% 20%,#dca84b13,transparent 60%)
}

.login .brandmark {
  height:66px;
  width:66px;
  font-size:39px;
  margin-bottom:30px
}

.login h1 {
  font-size:48px;
  line-height:1.15;
  max-width:650px
}

.login p:not(.eyebrow) {
  max-width:550px;
  color:var(--muted)
}

code {
  background:#2d313b;
  padding:3px 7px;
  border-radius:5px;
  color:var(--text)
}

#toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  max-width:90vw;
  padding:14px 24px;
  background:#343b47;
  border:1px solid #566277;
  border-radius:10px;
  box-shadow:0 10px 40px #0008;
  display:none;
  z-index:5
}

.config-state {
  color:var(--gold);
  font-size:12px
}

.logo-preview {
  height:70px;
  width:70px;
  object-fit:cover;
  border-radius:15px
}

.wide {
  grid-column:1/-1
}

.archive {
  white-space:pre-wrap;
  font-size:12px;
  max-height:600px;
  overflow:auto
}

.footerline {
  font-size:11px;
  color:#6f7784;
  margin-top:32px;
  display:flex;
  justify-content:space-between
}

.logs-filter {
  max-width:260px;
  margin-bottom:18px
}

@media(max-width:1050px) {
  main.content {
    padding:28px
  }

  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .layout {
    grid-template-columns:180px 1fr
  }

  header {
    padding:0 25px
  }

  .hero {
    padding:25px
  }

  .hero .badge {
    display:none
  }

}

@media(max-width:720px) {
  header {
    height:72px;
    padding:0 16px
  }

  .wordmark {
    font-size:12px
  }

  .wordmark small {
    font-size:9px
  }

  .account span {
    display:none
  }

  .account button {
    font-size:11px;
    padding:8px
  }

  .layout {
    display:block
  }

  aside {
    flex-direction:row;
    overflow:auto;
    padding:9px;
    border-right:0;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    background:var(--bg);
    z-index:2
  }

  aside button {
    white-space:nowrap;
    font-size:12px;
    padding:10px 13px
  }

  .nav-label,.aside-foot {
    display:none
  }

  main.content {
    padding:25px 16px 60px
  }

  .grid,.grid.two,.formgrid {
    grid-template-columns:1fr
  }

  .grid {
    gap:12px
  }

  h1 {
    font-size:26px
  }

  .pagehead {
    align-items:flex-start
  }

  .pagehead button {
    font-size:12px
  }

  .hero h2 {
    font-size:23px
  }

  .hero {
    padding:23px
  }

  .card {
    padding:20px
  }

  .metric {
    font-size:30px
  }

  .login h1 {
    font-size:35px
  }

  .footerline {
    display:block
  }

}

/* SouthSide ACP: compact reference-inspired layout, purple identity. */
:root {
  --bg:#10101b;
  --panel:#1c1c2d;
  --line:#303044;
  --text:#f4f2ff;
  --muted:#a5a3ba;
  --gold:#a78bfa;
  --green:#70dfbc;
  font-size:14px
}

body {
  background:radial-gradient(ellipse at 85% 0%,#7132be12,transparent 42%),var(--bg)
}

header {
  height:76px;
  padding:0 max(24px,calc((100vw - 1160px)/2));
  background:#1a1929;
  border-bottom:1px solid #373049
}

.wordmark {
  font-size:15px;
  gap:13px;
  white-space:nowrap
}

.wordmark img {
  width:49px;
  height:49px;
  border-radius:14px
}

.wordmark small {
  font-size:9px;
  letter-spacing:1.8px;
  color:#b2a4cf
}

.account button {
  padding:8px 13px;
  font-size:12px
}

.layout {
  display:block;
  min-height:calc(100vh - 76px)
}

aside {
  max-width:1160px;
  margin:auto;
  display:flex;
  flex-direction:row;
  gap:3px;
  overflow:auto;
  border:0;
  border-bottom:1px solid var(--line);
  padding:12px 0;
  background:transparent
}

aside button {
  font-size:12px;
  white-space:nowrap;
  padding:10px 12px;
  border-radius:7px;
  color:#afabc5
}

aside button.active {
  background:#9670f222;
  border:1px solid #a78bfa44;
  color:#d6c5ff
}

.nav-label,.aside-foot {
  display:none
}

main.content {
  max-width:1160px;
  margin:0 auto;
  padding:34px 0 60px
}

h1 {
  font-size:25px;
  letter-spacing:-.7px
}

h2 {
  font-size:17px
}

h3 {
  font-size:14px
}

.pagehead {
  margin-bottom:25px
}

.pagehead .eyebrow {
  font-size:9px;
  letter-spacing:1.8px;
  color:#9a80c9
}

.pagehead p {
  font-size:12px
}

button {
  border-radius:7px;
  padding:10px 14px;
  background:#303047;
  color:#eee9ff
}

button:hover {
  background:#3d3758;
  border-color:#79629d
}

button.primary {
  background:#8755dc;
  color:#fff;
  border-color:#a77aea;
  box-shadow:0 3px 12px #6a2fba24
}

button.primary:hover {
  background:#9964ed
}

button:disabled {
  cursor:not-allowed
}

.card {
  border-radius:10px;
  padding:23px;
  background:linear-gradient(140deg,#222133,#1b1b2b);
  border-color:#343047;
  box-shadow:0 5px 20px #00000012
}

.grid {
  gap:17px
}

.stats-grid {
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.metric {
  font-size:30px;
  margin:13px 0 10px;
  color:#c5a9ff
}

.online-text {
  color:var(--green);
  font-size:26px
}

.badge {
  border-radius:6px;
  padding:5px 8px;
  font-size:10px
}

.badge.warn {
  border-color:#b69bf14a;
  background:#a78bfa10;
  color:#ccb4ff
}

.notice {
  background:#9873df0c;
  border-color:#a78bfa38;
  color:#ccbce7
}

.overview-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px;
  padding:7px 2px 15px
}

.overview-heading h2 {
  font-size:27px;
  margin:13px 0 9px;
  letter-spacing:-.7px
}

.overview-heading img {
  width:86px;
  height:86px;
  border-radius:23px;
  box-shadow:0 6px 30px #9e66e71c
}

.module-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px
}

.module-card {
  display:flex;
  gap:17px;
  align-items:center;
  text-align:left;
  padding:24px;
  border-radius:10px;
  background:#211f32;
  border:1px solid #363048;
  font-weight:400
}

.module-card h3 {
  font-size:15px;
  margin:0 0 7px
}

.module-card p {
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
  margin:0
}

.module-icon {
  display:grid;
  place-items:center;
  flex:0 0 42px;
  height:42px;
  font-size:23px;
  border-radius:10px;
  background:#9360da1c;
  color:#b48bf4
}

.module-arrow {
  margin-left:auto;
  color:#a78bfa;
  font-size:20px
}

input,select,textarea {
  background:#2b2a40;
  border:1px solid #434058;
  border-radius:7px;
  font-size:13px;
  padding:11px 12px
}

input::placeholder,textarea::placeholder {
  color:#938da9
}

input:focus,select:focus,textarea:focus {
  outline:2px solid #b890f755;
  border-color:#a780e6
}

label {
  font-size:12px;
  color:#c0b9d2
}

th {
  background:#1a1829
}

td {
  border-color:#353044
}

.tablewrap {
  border-color:#353044
}

.embed-preview {
  background:#282438
}

.section {
  margin-top:24px
}

.member-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px
}

.member-card {
  display:flex;
  align-items:center;
  gap:15px;
  padding:18px;
  border:1px solid #3a334d;
  border-radius:9px;
  background:#252235
}

.member-card[hidden] {
  display:none
}

.member-card img {
  width:48px;
  height:48px;
  border-radius:50%
}

.member-card h3 {
  margin:0 0 4px
}

.member-tags {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:9px
}

.edit-dialog {
  background:#201d31;
  color:var(--text);
  border:1px solid #63507d;
  border-radius:15px;
  max-width:580px;
  width:calc(100% - 32px);
  padding:28px;
  box-shadow:0 30px 100px #0008
}

.edit-dialog::backdrop {
  background:#080612bb;
  backdrop-filter:blur(5px)
}

.edit-dialog label {
  margin-bottom:17px
}

.login {
  background:radial-gradient(ellipse at 50% 20%,#8b4dca26,transparent 65%),#10101b
}

.login-logo {
  height:110px;
  width:110px;
  border-radius:28px;
  margin-bottom:28px;
  box-shadow:0 15px 60px #8955d42b
}

.login h1 {
  font-size:42px
}

.footerline {
  color:#80778f;
  font-size:10px
}

.hero {
  background:#211d32;
  border-color:#a78bfa33
}

@media(max-width:1200px) {
  main.content {
    padding:30px 24px 60px
  }

  aside {
    margin:0 24px
  }

  header {
    padding:0 24px
  }

}

@media(max-width:850px) {
  .stats-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .module-card {
    padding:20px
  }

  .member-grid {
    grid-template-columns:1fr
  }

}

@media(max-width:720px) {
  header {
    height:72px;
    padding:0 16px
  }

  .wordmark {
    font-size:12px
  }

  .wordmark img {
    width:42px;
    height:42px
  }

  .wordmark small {
    font-size:8px
  }

  .account span {
    display:none
  }

  aside {
    margin:0;
    padding:10px 12px;
    position:sticky;
    top:0;
    z-index:2;
    background:#151321
  }

  main.content {
    padding:25px 16px 50px
  }

  .module-grid,.grid.two {
    grid-template-columns:1fr
  }

  .stats-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .stats-grid .card {
    padding:17px 13px
  }

  .metric {
    font-size:26px
  }

  .card-label {
    font-size:11px
  }

  .overview-heading h2 {
    font-size:23px
  }

  .overview-heading img {
    width:65px;
    height:65px;
    margin-left:15px
  }

  .overview-heading p {
    font-size:12px
  }

  .pagehead {
    gap:12px
  }

  .pagehead h1 {
    font-size:23px
  }

  .module-card {
    padding:20px
  }

  .footerline {
    line-height:1.8
  }

  .login h1 {
    font-size:32px
  }

}

@media(min-width:721px) {
  aside {
    flex-wrap:wrap;
    overflow:visible
  }

}

/* Module workspace: dark purple sidebar, matching the supplied structure. */
.priority-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:20px 0 30px
}

.priority-red {
  border-top:3px solid #fb7185!important
}

.priority-red h2 {
  color:#fb7185
}

.priority-orange {
  border-top:3px solid #fbbf24!important
}

.priority-orange h2 {
  color:#fbbf24
}

.priority-green {
  border-top:3px solid #6ee7b7!important
}

.priority-green h2 {
  color:#6ee7b7
}

.priority-item {
  display:block;
  text-align:left;
  width:100%;
  margin-top:12px;
  background:transparent;
  white-space:normal
}

.priority-item small {
  display:block;
  color:var(--muted);
  font-weight:400;
  margin-top:8px;
  line-height:1.5
}

@media(max-width:1000px) {
  .priority-grid {
    grid-template-columns:1fr
  }

}

:root {
  --custom-accent:#a78bfa;
  --custom-background:#0d0b14;
  --custom-panel:#191523;
  --custom-radius:16px
}

body {
  background:var(--custom-background)!important
}

.card,.module-card {
  background:var(--custom-panel)!important;
  border-radius:var(--custom-radius)!important
}

button.primary {
  background:var(--custom-accent)!important;
  color:#111!important;
  border-color:var(--custom-accent)!important
}

aside button.active,a,.eyebrow {
  color:var(--custom-accent)!important
}

.embed-preview {
  border-left-color:var(--custom-accent)
}

button,input,textarea,select {
  border-radius:var(--custom-radius)
}

body {
  background:#0d0b14
}

.card {
  background:#191523;
  border-color:#342840;
  border-radius:16px
}

.module-setting {
  display:flex;
  flex-direction:column;
  min-height:205px
}

.module-setting .actions {
  margin-top:auto;
  padding-top:24px
}

.module-setting .section-head {
  align-items:flex-start;
  gap:12px
}

.module-setting .badge {
  white-space:nowrap
}

.wordmark img {
  object-fit:contain;
  flex-shrink:0;
  background:#23192f
}

.module-overview {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:22px 25px;
  margin:18px 0 26px;
  border:1px solid #493660;
  border-radius:13px;
  background:linear-gradient(110deg,#24172f,#1b1928)
}

.module-overview .eyebrow {
  margin:0 0 6px
}

.module-overview h2 {
  margin:0 0 12px;
  font-size:19px
}

.module-overview h2 span {
  font-size:12px;
  font-weight:450;
  color:var(--muted)
}

.module-overview .muted {
  font-size:11px;
  margin-top:7px
}

.module-progress {
  height:6px;
  max-width:520px;
  overflow:hidden;
  border-radius:10px;
  background:#3b3546
}

.module-progress i {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#8c52df,#d946ef)
}

.module-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:0 0 18px
}

.module-summary>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:17px 19px;
  background:#191523;
  border:1px solid #342840;
  border-radius:11px
}

.module-summary strong {
  font-size:25px;
  color:#c5a9ff
}

.module-section {
  margin:28px 0 34px
}

.module-section>.section-head {
  margin:0 0 15px
}

.module-section .eyebrow {
  margin:0 0 5px
}

.module-section .section-head h2 {
  font-size:18px
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px
}

.feature-card {
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:205px;
  padding:19px;
  background:linear-gradient(145deg,#1d1828,#181521);
  border:1px solid #30273b;
  border-radius:13px;
  transition:border-color .15s,transform .15s
}

.feature-card:hover {
  border-color:#79569c;
  transform:translateY(-1px)
}

.feature-card-head {
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0
}

.feature-title {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  flex:1
}

.feature-title h3 {
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px
}

.feature-card .module-icon {
  flex-basis:39px;
  height:39px;
  font-size:20px
}

.status-dot {
  display:block;
  width:8px;
  height:8px;
  flex:0 0 8px;
  background:#e14b62;
  border-radius:50%;
  box-shadow:0 0 11px #e14b623c
}

.feature-card.good .status-dot {
  background:#61d7ac;
  box-shadow:0 0 11px #61d7ac55
}

.feature-card.integrated .status-dot {
  background:#a78bfa;
  box-shadow:0 0 11px #a78bfa55
}

.feature-status {
  font-size:10px;
  font-weight:650;
  padding:6px 8px;
  border-radius:7px;
  white-space:nowrap;
  color:#f2a2ad;
  background:#5b24322e
}

.feature-status.good {
  color:#82dfbc;
  background:#1c503b42
}

.feature-status.integrated {
  color:#c9afff;
  background:#593a792e
}

.feature-status.off {
  color:#f0bc7c;
  background:#64432236
}

.feature-status.unavailable {
  color:#8f8b9b;
  background:#3a37422e
}

.feature-card p {
  color:#a39eaf;
  font-size:12px;
  line-height:1.65;
  margin:0
}

.feature-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:1px
}

.feature-actions button {
  padding:8px 10px;
  font-size:11px
}

.feature-card.unavailable {
  opacity:.78;
  background:#191720;
  border-color:#292632
}

.feature-card.unavailable:hover {
  transform:none;
  border-color:#393343
}

.command-toolbar {
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(190px,280px) minmax(160px,210px);
  align-items:end;
  gap:20px;
  margin-bottom:25px
}

.command-toolbar h2 {
  margin-bottom:6px
}

.command-toolbar p {
  font-size:12px
}

.command-toolbar label {
  margin:0
}

.command-toolbar input,.command-toolbar select {
  margin-top:7px
}

.command-section {
  margin:25px 0 33px
}

.command-section .section-head {
  margin-bottom:13px
}

.command-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

.command-card {
  padding:17px 19px;
  border:1px solid #332b3e;
  border-radius:11px;
  background:#191722
}

.command-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.command-title code {
  font-size:14px;
  font-weight:650;
  color:#f5efff;
  background:#0e0c15;
  padding:5px 8px;
  border-radius:6px
}

.command-card>p {
  margin:11px 0 0;
  color:#a7a2b2;
  font-size:12px;
  line-height:1.55
}

.command-options {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:12px
}

.option-chip {
  font-size:10px;
  color:#c2b9d2;
  background:#2a2534;
  border:1px solid #393044;
  border-radius:6px;
  padding:5px 7px
}

.command-card[hidden],.command-section[hidden] {
  display:none!important
}

@media(min-width:900px) {
  header {
    padding:0 32px;
    height:84px
  }

  .layout {
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    min-height:calc(100vh - 84px)
  }

  aside {
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    width:250px;
    margin:0;
    padding:24px 16px;
    background:#14101e;
    border-right:1px solid #352642;
    border-bottom:0
  }

  aside button {
    text-align:left;
    padding:13px 16px;
    font-size:13px
  }

  .nav-label {
    display:block
  }

  .aside-foot {
    display:block;
    margin-top:auto
  }

  main.content {
    max-width:1360px;
    padding:38px 36px 64px;
    margin:0 auto
  }

  .module-grid {
    gap:20px
  }

  aside button.active {
    background:#9c68ed22;
    border-color:#9c68ed55
  }

}

@media(max-width:1100px) {
  .feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .command-toolbar {
    grid-template-columns:1fr 1fr
  }

  .command-toolbar>div {
    grid-column:1/-1
  }

}

@media(max-width:720px) {
  .module-overview {
    align-items:flex-start;
    flex-direction:column;
    padding:19px
  }

  .module-overview .actions {
    width:100%
  }

  .module-summary {
    grid-template-columns:1fr
  }

  .module-summary>div {
    padding:14px 16px
  }

  .feature-grid,.command-grid {
    grid-template-columns:1fr
  }

  .feature-card {
    min-height:unset
  }

  .command-toolbar {
    grid-template-columns:1fr
  }

  .command-toolbar>div {
    grid-column:auto
  }

  .command-title {
    align-items:flex-start;
    flex-direction:column
  }

}

/* Component baseline: admin-clear.css */
:root {
  --gold:var(--custom-accent,#e0b679);
  --bg:var(--custom-background,#141c1e);
  --panel:var(--custom-panel,#1b2729);
  --line:#ffffff24;
  --muted:#b9c5bf;
  --text:#f5f4ef;
  font-family:Arial,Helvetica,sans-serif
}

body {
  background:#141c1e url('/assets/southside-sunset.png') center/cover fixed no-repeat
}

body:before {
  content:'';
  position:fixed;
  inset:0;
  background:#101617be;
  z-index:-1;
  pointer-events:none
}

header {
  position:sticky;
  top:0;
  z-index:20;
  background:#11191af5;
  height:76px;
  padding:0 30px
}

button,input,select,textarea,.card,.badge,.notice,.embed-preview,.ticket-editor,dialog,.primary,.login-button {
  border-radius:var(--custom-radius,3px)!important;
  box-shadow:none!important
}

button {
  font-size:12px;
  padding:10px 14px;
  background:#233032
}

button.primary,a.primary {
  background:var(--gold)!important;
  color:#211b11;
  border-color:var(--gold)!important
}

button:hover {
  background:#344446
}

button.primary:hover {
  background:#f0c98c!important
}

input,select,textarea {
  background:#10191b;
  color:#f5f4ef;
  border-color:#ffffff35
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid #e0b679;
  outline-offset:3px
}

.wordmark img {
  border-radius:3px;
  width:34px;
  height:34px
}

.wordmark small {
  font-size:9px;
  letter-spacing:1.5px;
  color:#b9c5bf
}

.layout {
  grid-template-columns:230px minmax(0,1fr);
  min-height:calc(100vh - 76px)
}

aside {
  background:#11191aec;
  padding:18px 14px;
  align-self:start;
  position:sticky;
  top:76px;
  max-height:calc(100vh - 76px);
  overflow-y:auto;
  min-height:calc(100vh - 76px)
}

aside button {
  font-size:12px;
  padding:10px;
  text-align:left
}

aside button.active {
  background:#e0b67914;
  color:#edc68b;
  border-color:#e0b67955
}

.nav-label {
  font-size:9px;
  color:#a6b7af;
  padding:18px 10px 8px;
  letter-spacing:1px
}

.nav-search {
  margin:0 0 8px
}

.nav-search input {
  font-size:12px;
  padding:11px
}

.advanced-nav summary {
  font-size:12px;
  padding:14px 10px;
  cursor:pointer;
  color:#c4cdc8
}

.advanced-nav button {
  display:block;
  width:100%;
  margin-top:5px
}

.aside-links {
  display:grid;
  gap:12px;
  padding:18px 10px;
  font-size:11px
}

.aside-foot {
  display:none
}

.content {
  padding:30px!important;
  max-width:1600px;
  margin:0!important;
  min-width:0
}

.pagehead {
  margin-bottom:25px
}

.pagehead h1 {
  font-size:30px
}

.pagehead p {
  font-size:13px
}

.eyebrow {
  letter-spacing:1.3px
}

.card {
  background:#172123ee
}

.dashboard-status {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line);
  background:#172123ee;
  margin-bottom:30px
}

.dashboard-status>div {
  padding:22px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:10px
}

.dashboard-status>div:last-child {
  border-right:0
}

.dashboard-status small {
  font-size:10px;
  color:#b9c5bf;
  letter-spacing:1px
}

.dashboard-status strong {
  font-size:28px
}

.dashboard-status span {
  font-size:12px;
  color:#b9c5bf
}

.dashboard-status button {
  align-self:start;
  background:none;
  padding:0;
  border:0;
  color:#edc68b
}

.module-toolbar {
  display:grid;
  grid-template-columns:minmax(250px,1fr) 280px 180px;
  gap:22px;
  align-items:end;
  background:#172123ed;
  border:1px solid var(--line);
  padding:24px
}

.module-toolbar p {
  font-size:13px;
  color:#b9c5bf;
  max-width:560px;
  margin:0
}

.module-toolbar label {
  margin:0
}

.module-toolbar h2 {
  font-size:22px
}

#feature-results {
  font-size:11px;
  padding:15px 0
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}

.feature-card {
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  background:#172123ed;
  padding:22px;
  min-width:0;
  border-radius:3px
}

.feature-card-head {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:10px
}

.feature-title {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0
}

.feature-title h3 {
  font-size:15px;
  margin:0;
  line-height:1.3
}

.status-dot {
  height:6px;
  width:6px;
  background:#82caa2;
  flex-shrink:0
}

.feature-card.off .status-dot {
  background:#a4aaa8
}

.feature-status {
  font-size:10px;
  color:#aac9ba;
  white-space:nowrap
}

.feature-status.off {
  color:#b9c5bf
}

.feature-card>p {
  font-size:12px;
  color:#b9c5bf;
  line-height:1.7;
  margin:14px 0 22px
}

.feature-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto
}

.feature-actions button {
  font-size:11px
}

.feature-card [hidden],[hidden] {
  display:none!important
}

.unavailable-modules summary {
  font-size:13px;
  cursor:pointer
}

.unavailable-modules>p {
  font-size:12px;
  color:#b9c5bf
}

.unavailable-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}

.unavailable-list strong {
  font-size:13px
}

.unavailable-list p {
  font-size:12px;
  color:#b9c5bf
}

.footerline {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#a6b7af;
  border-top:1px solid var(--line);
  margin-top:30px;
  padding-top:20px
}

.setup-grid,.command-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}

.command-card {
  background:#172123ed;
  padding:20px;
  border:1px solid var(--line);
  border-radius:3px
}

.command-title {
  display:flex;
  justify-content:space-between;
  gap:10px
}

.command-card p {
  font-size:12px;
  color:#b9c5bf
}

.command-options {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.option-chip {
  font-size:10px;
  border:1px solid var(--line);
  padding:5px
}

.command-section {
  margin-top:30px
}

.command-toolbar {
  display:grid;
  grid-template-columns:1fr 250px 170px;
  gap:20px
}

.command-toolbar label {
  margin:0
}

.member-card,.availability-row {
  border:1px solid var(--line);
  border-radius:3px;
  background:#172123ed;
  padding:18px
}

.member-card img {
  border-radius:3px
}

.module-icon,.quick-icon,.welcome-art {
  display:none
}

.login {
  max-width:520px;
  margin:10vh auto;
  background:#11191af5;
  border:1px solid var(--line);
  padding:40px;
  text-align:left;
  border-radius:3px
}

.login h1 {
  font-size:34px
}

.login p {
  font-size:14px;
  color:#c4cdc8
}

.login-logo {
  width:48px;
  height:48px;
  margin-bottom:24px
}

.login-button {
  display:flex;
  padding:14px 18px;
  align-items:center;
  justify-content:space-between;
  font-size:14px;
  margin:25px 0 16px
}

.login-home {
  display:block;
  margin-top:22px;
  font-size:13px
}

.login .badge {
  font-size:10px
}

.dashboard-menu {
  display:none
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}

.visit-site {
  color:#e0b679
}

.edit-dialog {
  background:#172123;
  color:#f5f4ef;
  max-width:600px;
  width:90vw;
  border:1px solid var(--line)
}

.edit-dialog::backdrop {
  background:#000a
}

#toast {
  background:#1b2729;
  border:1px solid #e0b679;
  color:#f5f4ef;
  border-radius:3px
}

* {
  animation:none!important;
  scroll-behavior:auto!important
}

@media(max-width:1250px) {
  .feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .module-toolbar {
    grid-template-columns:1fr 1fr
  }

  .module-toolbar>div {
    grid-column:1/-1
  }

  .command-toolbar {
    grid-template-columns:1fr 1fr
  }

  .command-toolbar>div {
    grid-column:1/-1
  }

}

@media(max-width:850px) {
  header {
    padding:0 20px
  }

  .account .visit-site {
    display:none
  }

  .layout {
    display:block
  }

  .dashboard-menu {
    display:block;
    width:calc(100% - 40px);
    margin:15px 20px;
    background:#172123;
    position:relative
  }

  aside {
    display:none;
    position:static;
    min-height:0;
    max-height:none;
    border:1px solid var(--line);
    margin:0 20px
  }

  aside.is-open {
    display:flex
  }

  .content {
    padding:20px!important
  }

  .feature-grid,.setup-grid,.command-grid,.unavailable-list {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .login {
    margin:8vh 5vw;
    max-width:none
  }

  .footerline {
    gap:10px;
    flex-wrap:wrap
  }

}

@media(max-width:540px) {
  .feature-grid,.setup-grid,.command-grid,.grid,.grid.two,.member-grid,.unavailable-list {
    grid-template-columns:1fr
  }

  .module-toolbar,.command-toolbar {
    display:block
  }

  .module-toolbar label,.command-toolbar label {
    margin-top:18px
  }

  .dashboard-status {
    grid-template-columns:1fr
  }

  .dashboard-status>div {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:18px
  }

  .dashboard-status>div:last-child {
    border-bottom:0
  }

  .pagehead {
    align-items:start;
    flex-wrap:wrap
  }

  .pagehead h1 {
    font-size:27px
  }

  .account span {
    display:none
  }

  .wordmark {
    font-size:13px
  }

  .wordmark small {
    font-size:8px
  }

  .login {
    padding:28px
  }

  .login h1 {
    font-size:29px
  }

  .feature-card {
    padding:20px
  }

  .formgrid {
    grid-template-columns:1fr
  }

  .tablewrap {
    overflow-x:auto
  }

  .section-head {
    gap:15px;
    flex-wrap:wrap
  }

  .command-title {
    flex-wrap:wrap
  }

}

body {
  background:var(--bg) url(/assets/southside-sunset.png) center/cover fixed no-repeat!important
}

.feature-card.integrated .status-dot {
  background:var(--gold);
  box-shadow:none
}

.feature-status.integrated {
  background:#e0b67918;
  color:var(--gold)
}

.feature-card {
  background:color-mix(in srgb,var(--panel) 94%,transparent)!important
}

.module-toolbar {
  background:color-mix(in srgb,var(--panel) 94%,transparent)!important
}

/* Lilac accents carry the SouthSide logo into administration. */
:root {
  --muted:#cdc4d8;
  --line:#d0b7ff2b
}

body:before {
  background:#17101f91
}

header {
  background:#191320e8;
  border-color:#c4a1e84a;
  backdrop-filter:blur(16px)
}

.wordmark img {
  width:49px;
  height:49px;
  border-radius:9px!important;
  border:1px solid #c4a1e870
}

.wordmark small {
  color:#c5a3ed
}

aside {
  background:#1a1524d9;
  backdrop-filter:blur(18px);
  border-color:#c4a1e838
}

.content {
  padding:32px!important
}

.pagehead {
  border-bottom:1px solid #c4a1e847;
  padding-bottom:24px;
  margin-bottom:25px
}

.pagehead h1 {
  letter-spacing:-1px
}

.eyebrow,.visit-site,.aside-links a {
  color:#c6a5f3!important
}

aside button.active {
  background:#b798ec20;
  border-color:#b798ec70;
  color:#e5d1ff;
  box-shadow:inset 3px 0 #b798ec!important
}

aside button:hover {
  background:#b798ec15
}

.nav-search input,input,select,textarea {
  background:#17111fe3;
  border-color:#b69acd45
}

.feature-card,.module-toolbar,.card,.module-status-strip {
  background:color-mix(in srgb,var(--panel) 91%,transparent)!important;
  backdrop-filter:blur(15px);
  border-color:#c5a3f140;
  box-shadow:0 8px 25px #07030c2b!important
}

.feature-card {
  border-top:2px solid #bb94ea66;
  border-radius:12px!important
}

.feature-card:hover {
  border-color:#c5a3f185;
  box-shadow:0 12px 30px #07030c45!important
}

.feature-card h3 {
  font-size:15px
}

.feature-status.integrated {
  color:#d4b6ff;
  background:#b798ec1c
}

.feature-card.integrated .status-dot {
  background:#b798ec
}

.module-status-strip {
  border-radius:12px;
  overflow:hidden
}

.module-status-strip strong {
  letter-spacing:-1px
}

.module-toolbar {
  border-radius:12px
}

.module-toolbar h2 {
  letter-spacing:-.7px
}

.feature-actions button {
  border-radius:7px!important;
  padding:10px 12px;
  background:#352b43
}

.feature-actions button.primary,button.primary,a.primary {
  background:var(--gold)!important;
  color:#21172f;
  border-color:var(--gold)!important
}

.login {
  background:#201728df!important;
  backdrop-filter:blur(18px);
  border:1px solid #c5a3f15e!important;
  box-shadow:0 20px 70px #08040c75!important;
  border-radius:18px!important
}

.login .login-logo {
  width:125px;
  height:125px;
  border-radius:12px!important;
  object-fit:cover
}

.login h1 {
  letter-spacing:-1.5px
}

.login-button {
  border-radius:9px!important
}

.footerline {
  border-color:#c4a1e84a
}

.aside-foot img {
  width:42px;
  height:42px;
  border-radius:8px
}

.dashboard-menu {
  background:#281d36;
  border-color:#bd98ed66;
  border-radius:8px!important
}

@media(max-width:700px) {
  .content {
    padding:22px 16px!important
  }

  .wordmark img {
    width:38px;
    height:38px
  }

  .login {
    margin:45px 16px!important;
    padding:30px 25px!important
  }

  .login h1 {
    font-size:38px
  }

  .module-toolbar {
    padding:20px
  }

  .pagehead {
    padding-bottom:20px
  }

}

.module-status-strip {
  border-radius:12px!important;
  border:1px solid #c5a3f14d
}

.module-status-strip>div {
  background:#241e30d9!important;
  border-color:#c5a3f12e
}

.module-status-strip button {
  color:#d6b8ff!important
}

.module-status-strip small {
  color:#d1bfdc
}

.account button {
  border-radius:7px!important
}

.login {
  min-height:0;
  align-items:stretch;
  justify-content:flex-start;
  margin:7vh auto;
  padding:40px;
  text-align:left
}

.login .login-logo {
  align-self:flex-start;
  margin-bottom:22px
}

.login h1 {
  margin-bottom:18px
}

.login .eyebrow {
  margin-bottom:12px
}

.login-button {
  color:#21172f!important;
  font-weight:700
}

.login-button span {
  margin-left:18px
}

.login .badge {
  align-self:flex-start
}

.login-home {
  margin-top:22px
}

body {
  isolation:isolate;
  min-height:100vh
}

body:before {
  z-index:-1
}

.login-backdrop {
  position:fixed;
  inset:0;
  z-index:0;
  background:url('/assets/southside-sunset.png') center/cover no-repeat;
  pointer-events:none
}

.login-backdrop:after {
  content:'';
  position:absolute;
  inset:0;
  background:#17101f80
}

.login {
  position:relative;
  z-index:1
}

/* Component baseline: admin-liquid.css */
/* Administration uses the same translucent material as the public site. */
:root {
  --liquid-border:#f0e0ff38;
  --liquid-shadow:0 12px 42px #08041035,inset 0 1px #ffffff30;
  --line:var(--liquid-border);
  --muted:#e0d6e8
}

body:before {
  background:#17101f75
}

header {
  margin:16px 20px 0;
  border:1px solid var(--liquid-border);
  border-radius:24px;
  background:#20182c88;
  backdrop-filter:blur(24px) saturate(155%);
  -webkit-backdrop-filter:blur(24px) saturate(155%);
  box-shadow:var(--liquid-shadow);
  height:76px;
  top:16px
}

header .wordmark img {
  border-radius:14px!important
}

.layout {
  gap:20px;
  padding:20px
}

.layout aside {
  border:1px solid var(--liquid-border);
  border-radius:24px;
  background:#22192f7a;
  box-shadow:var(--liquid-shadow);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  padding:20px 16px
}

.layout aside button {
  border-radius:13px!important;
  margin-bottom:4px;
  padding:11px 13px
}

.layout aside button.active {
  box-shadow:inset 0 1px #ffffff20!important;
  background:#c8a3f224;
  border-color:#e0c5ff5e
}

.content {
  padding:12px 0 28px!important
}

.pagehead {
  padding:18px 8px 24px
}

.pagehead h1 {
  font-size:34px
}

.pagehead p {
  color:#e8deee
}

.pagehead .eyebrow {
  font-size:10px
}

.nav-search input,input,textarea,select {
  border-radius:14px!important;
  background:#21182d70;
  border:1px solid #ffffff2e;
  min-height:42px;
  padding:11px 13px;
  color:#faf4ff
}

select option {
  background:#282032;
  color:#faf4ff
}

button,a.primary,.primary,.login-button,.dashboard-menu {
  border-radius:14px!important;
  background:#ffffff10;
  border:1px solid #ffffff32;
  box-shadow:inset 0 1px #ffffff20!important
}

button.primary,a.primary {
  background:#b798eccc!important;
  color:#1f142c!important;
  border-color:#efe2ff6b!important;
  box-shadow:0 6px 22px #9670c32e,inset 0 1px #ffffff45!important
}

button:hover {
  background:#ffffff1d
}

button.primary:hover {
  background:#d0b5f6!important
}

.feature-grid {
  gap:18px
}

.feature-card,.module-toolbar,.card,.module-status-strip,dialog,.embed-preview,.ticket-editor {
  border-radius:24px!important;
  border:1px solid var(--liquid-border)!important;
  background:linear-gradient(135deg,#ffffff0b,#ffffff02),color-mix(in srgb,var(--panel) 60%,transparent)!important;
  box-shadow:var(--liquid-shadow)!important;
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%)
}

.feature-card {
  padding:26px;
  min-height:225px
}

.feature-card:hover {
  border-color:#e5caff70!important;
  background-color:#b999ea0d!important;
  box-shadow:var(--liquid-shadow)!important
}

.feature-actions button {
  border-radius:12px!important;
  background:#ffffff0c;
  padding:10px 13px
}

.feature-card p {
  color:#e5dce9;
  line-height:1.8
}

.feature-status,.badge {
  border-radius:10px!important;
  padding:6px 9px
}

.module-status-strip>div {
  background:transparent!important;
  border-color:#ffffff20;
  padding:24px
}

.module-status-strip strong {
  font-size:30px
}

.module-toolbar {
  padding:26px
}

.module-toolbar p {
  color:#e5dce9
}

.footerline {
  padding:24px 8px
}

.login {
  width:min(520px,calc(100% - 32px));
  margin:8vh auto!important;
  padding:38px!important;
  border-radius:28px!important;
  background:linear-gradient(135deg,#ffffff0c,#ffffff02),rgba(32,24,44,.54)!important;
  border:1px solid var(--liquid-border)!important;
  box-shadow:0 20px 75px #08041050,inset 0 1px #ffffff40!important;
  backdrop-filter:blur(26px) saturate(145%);
  -webkit-backdrop-filter:blur(26px) saturate(145%)
}

.login .login-logo {
  width:74px;
  height:74px;
  border-radius:20px!important
}

.login .eyebrow {
  font-size:10px;
  letter-spacing:2px
}

.login h1 {
  font-size:40px
}

.login-button {
  border-radius:16px!important;
  min-height:50px
}

.login-backdrop:after {
  background:#17101f75
}

.dashboard-menu {
  margin:16px 20px 0;
  background:#241b3288;
  backdrop-filter:blur(20px)
}

.wordmark small {
  letter-spacing:2px
}

.aside-foot {
  border-radius:14px;
  padding:14px;
  border:1px solid #ffffff1e;
  background:#ffffff05
}

@media(max-width:1000px) {
  .layout {
    gap:16px;
    padding:16px;
    grid-template-columns:210px minmax(0,1fr)
  }

  header {
    margin:14px 16px 0
  }

  .feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}

@media(max-width:700px) {
  header {
    top:10px;
    margin:10px 12px 0;
    border-radius:20px;
    padding:12px 15px;
    height:auto;
    min-height:68px
  }

  .layout {
    display:block;
    padding:14px 12px
  }

  .layout aside {
    margin-bottom:18px;
    border-radius:22px
  }

  .content {
    padding:0!important
  }

  .pagehead {
    padding:18px 5px 22px
  }

  .pagehead h1 {
    font-size:30px
  }

  .feature-grid {
    grid-template-columns:1fr;
    gap:14px
  }

  .module-toolbar {
    padding:23px
  }

  .feature-card {
    padding:24px;
    border-radius:22px!important;
    min-height:0
  }

  .module-status-strip {
    border-radius:22px!important
  }

  .module-status-strip>div {
    padding:21px 24px
  }

  .module-status-strip strong {
    font-size:28px
  }

  .login {
    margin:5vh auto!important;
    padding:28px 24px!important
  }

  .login h1 {
    font-size:34px
  }

  .dashboard-menu {
    margin:14px 12px 0;
    border-radius:15px!important
  }

  .feature-actions {
    flex-wrap:wrap
  }

  .account .visit-site {
    font-size:11px
  }

}

.dashboard-status {
  border:1px solid var(--liquid-border);
  border-radius:24px!important;
  overflow:hidden;
  background:linear-gradient(135deg,#ffffff0b,#ffffff02),rgba(30,24,42,.53)!important;
  box-shadow:var(--liquid-shadow)!important;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%)
}

.dashboard-status>div {
  background:transparent!important;
  border-color:#ffffff24!important;
  padding:24px
}

.dashboard-status button {
  color:#dfc5ff!important;
  border-radius:12px!important
}

.dashboard-status small {
  color:#ddc9f4
}

.dashboard-status strong {
  font-size:30px
}

.layout aside button:not(.active) {
  border-color:transparent!important;
  box-shadow:none!important;
  background:transparent
}

.layout aside button:not(.active):hover {
  border-color:#ffffff26!important;
  background:#ffffff0c
}

.feature-card .feature-actions button {
  box-shadow:inset 0 1px #fff2!important
}

@media(max-width:700px) {
  .dashboard-status {
    border-radius:22px!important
  }

  .dashboard-status>div {
    padding:21px 24px
  }

}

.editor-toolbar {
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:24px;
  flex-wrap:wrap
}

.editor-toolbar img {
  border-radius:16px;
  object-fit:cover
}

.editor-toolbar p {
  flex:1;
  min-width:180px
}

.editor-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px
}

.editor-grid .card {
  min-width:0;
  margin:0
}

.editor-grid form {
  display:grid;
  gap:16px
}

.editor-grid label {
  display:grid;
  gap:8px
}

.editor-record {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.13);
  flex-wrap:wrap
}

.editor-record p {
  font-size:14px;
  color:var(--muted)
}

.editor-preview {
  margin-top:24px;
  padding:22px;
  border:1px solid rgba(183,152,236,.5);
  border-radius:22px;
  background:rgba(15,12,25,.65);
  overflow-wrap:anywhere
}

.editor-preview img {
  border-radius:12px
}

@media(max-width:900px) {
  .editor-grid {
    grid-template-columns:1fr
  }

}

.editor-grid {
  align-items:start
}

.editor-grid input[type=checkbox] {
  width:18px;
  height:18px;
  min-height:18px;
  padding:0;
  margin-right:8px;
  vertical-align:middle;
  accent-color:#b798ec
}

.editor-grid label:has(input[type=checkbox]) span {
  display:flex;
  align-items:center;
  gap:8px
}

.editor-grid .card:has(.editor-record) {
  grid-column:1/-1
}

.overview-intro {
  padding:24px
}

.overview-intro h2 {
  font-size:26px;
  margin:8px 0
}

.overview-metrics {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px
}

.overview-task {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.12)
}

.overview-task:first-of-type {
  margin-top:20px
}

.overview-task p {
  margin:8px 0 0
}

.overview-task .badge {
  flex:0 0 auto;
  min-height:0;
  padding:7px 12px
}

.overview-tasks h2 {
  margin:6px 0
}

.overview-metrics .metric {
  font-size:30px
}

@media(max-width:1200px) {
  .overview-metrics {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}

@media(max-width:600px) {
  .overview-metrics {
    grid-template-columns:1fr
  }

  .overview-tasks .section-head {
    align-items:flex-start;
    flex-direction:column
  }

}

/* Consistent module sections with accessible controls. */
.module-status {
  border:1px solid #59d8a840;
  border-radius:16px;
  background:#59d8a80c;
  padding:20px 24px;
  margin:18px 0 24px
}

.module-status>span {
  font-weight:700;
  color:#79e3bb
}

.module-status p {
  margin:6px 0 0;
  color:var(--muted,#afb7c8)
}

.module-status.is-disabled {
  border-color:#f08fa740;
  background:#f08fa70c
}

.module-status.is-disabled>span {
  color:#f6a6ba
}

.module-settings-card {
  grid-column:1/-1
}

.module-section {
  border:1px solid #ffffff18;
  border-radius:14px;
  margin:0 0 24px;
  padding:24px;
  min-width:0
}

.module-section legend {
  padding:0 10px;
  font-size:1.1rem;
  font-weight:700
}

.module-setting-row {
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 0;
  border-bottom:1px solid #ffffff0e
}

.module-setting-row:last-child {
  border:0
}

.module-setting-row>input,.module-setting-row>select {
  width:min(45%,360px)
}

.module-switch {
  position:relative;
  flex:none;
  width:48px;
  height:28px
}

.module-switch input[type=checkbox] {
  position:absolute;
  inset:0;
  opacity:0;
  margin:0;
  width:48px;
  height:28px;
  cursor:pointer;
  z-index:1
}

.module-switch>span {
  display:block;
  width:48px;
  height:28px;
  background:#606676;
  border-radius:20px;
  transition:background .2s
}

.module-switch>span:after {
  content:'';
  display:block;
  position:absolute;
  top:4px;
  left:4px;
  width:20px;
  height:20px;
  background:#fff;
  border-radius:50%;
  transition:transform .2s
}

.module-switch input:checked+span {
  background:#a78bfa
}

.module-switch input:checked+span:after {
  transform:translateX(20px)
}

.module-switch input:focus-visible+span {
  outline:2px solid #e3d8ff;
  outline-offset:3px
}

.module-savebar {
  position:sticky;
  bottom:12px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  background:#19182af5;
  border:1px solid #ffffff28;
  border-radius:14px;
  padding:16px;
  z-index:2
}

.module-savebar>span {
  margin-right:auto;
  color:#bbb7ca;
  font-size:.85rem
}

.message-editor summary {
  cursor:pointer;
  font-weight:700;
  margin-bottom:20px
}

.message-editor .embed-preview {
  margin-top:18px
}

.message-editor .embed-preview p {
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

@media(max-width:650px) {
  .module-section {
    padding:16px
  }

  .module-setting-row {
    gap:14px
  }

  .module-setting-row>input,.module-setting-row>select {
    width:45%;
    min-width:0
  }

  .module-savebar>span {
    width:100%
  }

  .module-savebar button {
    flex:1
  }

  .module-settings-card {
    padding:14px!important
  }

}

.security-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px
}

.security-tabs button {
  min-height:44px
}

.security-hero {
  background:radial-gradient(ellipse at top right,#61449a40,transparent 65%)
}

#security-settings>fieldset {
  border:0;
  padding:0;
  margin:24px 0;
  min-width:0
}

.security-rule {
  display:grid;
  grid-template-columns:minmax(180px,1.3fr) repeat(3,minmax(100px,1fr));
  gap:18px;
  align-items:center;
  padding:24px 0;
  border-bottom:1px solid #ffffff12
}

.security-rule h3 {
  margin:0 0 12px
}

.security-rule label {
  margin:0
}

.security-incident {
  padding:16px 0;
  border-bottom:1px solid #ffffff12;
  overflow-wrap:anywhere
}

.security-incident p {
  margin:6px 0
}

#security-settings select[multiple] {
  min-height:220px
}

@media(max-width:760px) {
  .security-rule {
    grid-template-columns:1fr 1fr
  }

  .security-rule>div {
    grid-column:1/-1
  }

  .security-rule>label:last-child {
    grid-column:1/-1
  }

  .security-tabs {
    gap:6px
  }

  .security-tabs button {
    flex:1 0 40%
  }

}

.security-toggle {
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  gap:10px;
  margin:12px 0
}

.security-toggle input[type=checkbox] {
  appearance:none;
  flex:none;
  position:relative;
  width:44px!important;
  height:25px!important;
  min-height:25px!important;
  padding:0!important;
  border:1px solid #ffffff30;
  border-radius:30px;
  background:#272132;
  cursor:pointer
}

.security-toggle input[type=checkbox]:after {
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:17px;
  height:17px;
  background:#bbb5c5;
  border-radius:50%;
  transition:transform .15s
}

.security-toggle input[type=checkbox]:checked {
  background:#b798ec
}

.security-toggle input[type=checkbox]:checked:after {
  background:#fff;
  transform:translateX(18px)
}

/* Component baseline: admin-rebrand.css */
/* Bright SouthSide workspace: a consistent plum surface across every module. */
:root {
  --bg:#382446;
  --panel:#704b7d;
  --text:#fff8ff;
  --muted:#efdbf4;
  --line:#ffe4ff65;
  --liquid-border:#ffe4ff65;
  --liquid-shadow:0 14px 32px #24132e35,inset 0 1px #ffffff48
}

body {
  background:#342343 url('/assets/southside-sunset.png') center/cover fixed no-repeat!important;
  color:var(--text)
}

body:before {
  background:linear-gradient(120deg,#674671a8,#3c294dc9)!important
}

header {
  background:#513561d9!important;
  border:1px solid #ffe4ff85!important;
  box-shadow:0 12px 34px #25133338,inset 0 1px #ffffff45!important
}

.layout aside {
  background:#50365fdf!important;
  border:1px solid #ffe5ff79!important;
  box-shadow:0 16px 38px #25133336,inset 0 1px #ffffff38!important
}

.layout aside button {
  color:#ffefff!important;
  font-size:13px!important
}

.layout aside button.active {
  background:#e2baff43!important;
  border-color:#ffebff9a!important;
  color:#fff!important;
  box-shadow:inset 3px 0 #f9e2ff!important
}

.layout aside button:not(.active):hover {
  background:#f3d9ff26!important
}

.nav-label,.advanced-nav summary,.aside-links a,.wordmark small {
  color:#f0d8f7!important
}

.nav-search input {
  background:#3f2b4fbb!important;
  border-color:#ffe3ff69!important
}

main.content {
  max-width:1600px!important
}

.pagehead {
  border-bottom:1px solid #ffe0ff7a
}

.pagehead h1 {
  font-size:clamp(30px,3vw,40px);
  color:#fff
}

.pagehead p,.pagehead .eyebrow,.eyebrow {
  color:#f4d8ff!important
}

.card,.feature-card,.module-card,.module-overview,.module-toolbar,.module-status-strip,.dashboard-status,.command-card,.setup-card,.member-card,.edit-dialog,dialog,.ticket-editor,.embed-preview {
  background:linear-gradient(140deg,#80538dd9,#624173e6)!important;
  border:1px solid #ffe4ff75!important;
  box-shadow:0 15px 35px #24132d2f,inset 0 1px #ffffff42!important;
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px)
}

.card,.feature-card,.module-card,.module-overview,.module-toolbar,.dashboard-status,.command-card,.member-card,.setup-card {
  border-radius:21px!important
}

.card h2,.card h3,.feature-card h3,.module-card h3 {
  color:#fff
}

.card p,.feature-card p,.module-card p,.module-toolbar p,.muted,.footerline {
  color:#f3e3f6!important
}

.card-label,.feature-status,.badge {
  color:#f7e6ff
}

.metric,.online-text,.text-action {
  color:#ffe5ff!important
}

input,select,textarea,.nav-search input {
  background:#4a315bbb!important;
  border:1px solid #ffe4ff75!important;
  color:#fff8ff!important;
  border-radius:12px!important
}

input::placeholder,textarea::placeholder {
  color:#dec5e7
}

select option {
  background:#4b315a;
  color:#fff
}

button,.feature-actions button,.priority-item,.quick-card,.onboarding-step {
  background:#f6e4ff21!important;
  border-color:#ffe7ff66!important;
  color:#fff!important
}

button:hover,.feature-actions button:hover,.quick-card:hover,.onboarding-step:hover {
  background:#f6e4ff38!important;
  border-color:#fff0ffb3!important
}

button.primary,a.primary,.primary,.login-button {
  background:linear-gradient(115deg,#e3baff,#c797f2)!important;
  color:#321d40!important;
  border-color:#ffebff!important;
  box-shadow:0 8px 24px #351c5140!important
}

button.primary:hover,a.primary:hover {
  background:#edceff!important
}

.badge.good {
  background:#a7ecd640!important;
  color:#e4fff6!important
}

.notice {
  background:#e7c9ff29!important;
  border-color:#f5ddff7b!important;
  color:#fff2ff!important
}

.danger {
  background:#a54f7045!important;
  color:#fff2f6!important
}

.availability-row {
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 12px;
  padding:14px 18px!important;
  margin:14px 0 0;
  border:1px solid #ffe7ff65!important;
  border-radius:14px!important;
  background:#ead1f42b!important;
  box-shadow:inset 0 1px #ffffff3d!important
}

.availability-row strong {
  font-size:15px;
  color:#fff
}

.availability-row span,.availability-row small,.availability-row p {
  font-size:12px;
  color:#f3e0f8!important
}

.availability-row span:before {
  content:'·';
  margin-right:10px;
  color:#f5dbff
}

.availability-row p {
  width:100%
}

.overview-intro,.welcome-panel {
  background:linear-gradient(115deg,#8c5c99ed,#604477e0)!important;
  border-color:#ffe1ff92!important
}

.overview-task {
  border-color:#ffe7ff5c
}

.overview-task .badge {
  background:#eed5ff30
}

.quick-card,.onboarding-step {
  border-radius:18px
}

.quick-icon,.step-number {
  background:#f6e2ff29;
  color:#fff
}

.module-status-strip>div {
  background:#ffffff0b!important;
  border-color:#ffe4ff4f!important
}

.module-status-strip small,.module-status-strip strong {
  color:#fff
}

.tablewrap,table,.priority-item,.member-card,.editor-preview,.section .card {
  border-color:#ffe3ff65!important
}

th,td {
  border-color:#ffe3ff4a;
  color:#fff7ff
}

th {
  background:#f3d9ff26
}

.embed-preview,.editor-preview {
  background:#60406fd6!important
}

.login {
  background:linear-gradient(145deg,#805593e8,#563969e9)!important;
  border-color:#ffe6ff8a!important
}

.login-backdrop:after {
  background:#3f2b58a6
}

.login h1,.login p {
  color:#fff!important
}

.login-home {
  color:#f1def7!important
}

.dashboard-menu {
  background:#694777e3!important;
  border-color:#ffe4ff79!important
}

#toast {
  background:#674379!important;
  color:#fff;
  border-color:#ffe8ff
}

@media(max-width:800px) {
  body {
    background-attachment:scroll!important
  }

  .layout aside {
    background:#5b3b6de8!important
  }

  .availability-row {
    align-items:flex-start
  }

  .overview-metrics {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}

@media(max-width:520px) {
  .availability-row {
    display:block!important
  }

  .availability-row span {
    display:block;
    margin-top:5px
  }

  .availability-row span:before {
    display:none
  }

  .overview-metrics {
    grid-template-columns:1fr
  }

}

/* Distinct surfaces keep the workspace readable and avoid blurring every card while scrolling. */
body {
  background-attachment:scroll!important
}

.card,.feature-card,.module-card,.module-overview,.module-toolbar,.module-status-strip,.dashboard-status,.command-card,.setup-card,.member-card,.ticket-editor,.embed-preview {
  background:#694777f0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-color:#f9dfff8c!important
}

.overview-intro,.welcome-panel {
  background:linear-gradient(120deg,#875796f2,#64447bf2)!important
}

.overview-metrics>.card,.overview-metrics>article {
  background:#765084f4!important
}

.module-section,#module-settings>fieldset {
  padding:24px!important;
  margin:22px 0!important;
  background:#5b3d6bdb!important;
  border:1px solid #f4d9ff80!important;
  border-radius:20px!important
}

.module-settings-card {
  background:#694777f2!important
}

.module-savebar {
  background:#58386beb!important;
  border-color:#f3d8ff8a!important;
  backdrop-filter:none!important
}

.overview-task,.editor-record,.security-rule,.security-incident {
  border-color:#f9e4ff65!important
}

.quick-card,.onboarding-step {
  background:#754e87ec!important;
  border:1px solid #f4deff89!important
}

@media(max-width:650px) {
  .module-section,#module-settings>fieldset {
    padding:16px!important
  }

}

iframe.team-frame {
  display:block;
  width:100%;
  height:950px;
  min-height:500px;
  border:0;
  background:transparent
}

/* Darker plum dashboard and a continuous top navigation bar. */
:root {
  --bg:#241831;
  --panel:#392649;
  --muted:#d7c4e1;
  --line:#aa87c35e;
  --liquid-border:#aa87c35e
}

body {
  background-color:#21162d!important
}

body:before {
  background:linear-gradient(120deg,#201329da,#261734dc)!important
}

header {
  top:0!important;
  margin:0!important;
  border-radius:0!important;
  background:#291b39f2!important;
  border:0!important;
  border-bottom:1px solid #ae87c16b!important;
  box-shadow:0 10px 34px #120b1d66!important
}

.layout aside {
  background:#30203ff0!important;
  border-color:#a582bd73!important
}

.layout aside button.active {
  background:#8e62bb4a!important;
  border-color:#d5aeec95!important
}

.card,.feature-card,.module-card,.module-overview,.module-toolbar,.module-status-strip,.dashboard-status,.command-card,.setup-card,.member-card,.ticket-editor,.embed-preview {
  background:#3b294ef2!important;
  border-color:#b795cf74!important
}

.overview-intro,.welcome-panel {
  background:linear-gradient(120deg,#523566f2,#39284ef2)!important
}

.overview-metrics>.card,.overview-metrics>article {
  background:#483159f4!important
}

.module-section,#module-settings>fieldset,.module-settings-card {
  background:#39274aee!important
}

.module-savebar {
  background:#30203fef!important
}

.quick-card,.onboarding-step {
  background:#463058f2!important
}

.login {
  background:#2b1e3ff0!important
}

.nav-search input,input,select,textarea {
  background:#2a1d3af0!important
}

.team-frame-wrap {
  padding:18px;
  border:1px solid #b795cf75;
  border-radius:22px;
  background:#352445e9;
  box-shadow:0 16px 38px #10091a4d
}

.team-frame {
  border-radius:10px
}

#nav-function-results {
  padding:8px 0 14px;
  border-bottom:1px solid #bb9bd25c;
  margin-bottom:6px
}

#nav-function-results button {
  display:flex;
  flex-direction:column;
  align-items:start;
  width:100%;
  gap:3px
}

#nav-function-results button strong {
  font-size:12px
}

#nav-function-results button small,.nav-empty {
  font-size:11px;
  color:#d1bcdd
}

.nav-empty {
  padding:0 10px
}

.access-denied {
  max-width:650px!important
}

.denied-status {
  margin-top:18px;
  padding:7px 14px;
  border:1px solid #e391a4;
  border-radius:99px;
  background:#9b344967;
  color:#ffd4dc;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em
}

.denied-hint {
  padding:15px;
  border:1px solid #d49aaf;
  border-radius:12px;
  background:#a7415c2e;
  color:#ffe2e9!important;
  text-align:left
}

@media(max-width:700px) {
  header {
    margin:0!important;
    border-radius:0!important
  }

  .team-frame-wrap {
    padding:10px;
    border-radius:14px
  }

}

/* Component baseline: admin-cinematic.css */
/* Shared control-room finish for every administration module. */
:root {
  --bg:#120e1b;
  --panel:#21192e;
  --text:#faf6ff;
  --muted:#cec2da;
  --line:#a985d452;
  --gold:#bb94ec
}

body {
  background:#110d19!important;
  background-image:radial-gradient(circle at 90% 0%,#58377950,transparent 42rem),linear-gradient(#110d19,#171120)!important;
  color:#faf6ff!important
}

body:before {
  display:none!important
}

header {
  background:#171020eb!important;
  border-bottom:1px solid #b48dda61!important;
  backdrop-filter:blur(22px)!important;
  box-shadow:0 12px 42px #05020d7a!important
}

.layout aside {
  background:#1b1426f2!important;
  border:1px solid #916ebf52!important;
  box-shadow:12px 10px 42px #06030d75!important;
  backdrop-filter:blur(15px)!important
}

.layout aside button {
  border-radius:9px!important;
  transition:background .2s,color .2s,transform .2s!important
}

.layout aside button:hover {
  transform:translateX(3px);
  background:#a57cda22!important
}

.layout aside button.active {
  background:linear-gradient(90deg,#a16fdb40,#a16fdb12)!important;
  color:#f5eaff!important;
  border-color:#c7a2ed6b!important;
  box-shadow:inset 3px 0 #d0adff!important
}

.content {
  max-width:1680px!important;
  padding:40px clamp(20px,3vw,56px)!important
}

.pagehead {
  margin-bottom:32px!important;
  padding-bottom:26px!important
}

.pagehead h1 {
  font-size:clamp(32px,3.5vw,52px)!important;
  letter-spacing:-.055em!important;
  line-height:1.05!important
}

.pagehead p {
  font-size:14px!important
}

.card,.feature-card,.module-card,.module-overview,.module-toolbar,.module-status-strip,.dashboard-status,.command-card,.setup-card,.member-card,.ticket-editor,.embed-preview,.quick-card,.onboarding-step {
  background:linear-gradient(145deg,#2b203b,#1e182b)!important;
  border:1px solid #9f7bc45c!important;
  box-shadow:0 12px 38px #05020d5e,inset 0 1px #e8d5ff15!important;
  border-radius:15px!important
}

.feature-card,.quick-card,.onboarding-step {
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important
}

.feature-card:hover,.quick-card:hover,.onboarding-step:hover {
  transform:translateY(-4px)!important;
  border-color:#c8a0efb8!important;
  box-shadow:0 20px 40px #05020d8c!important
}

.overview-intro,.welcome-panel {
  background:linear-gradient(120deg,#4b3165,#241a34)!important;
  border-color:#c49bed81!important
}

.overview-metrics>.card,.overview-metrics>article,.module-status-strip>div {
  background:#261c35!important;
  border-color:#b68bdb4d!important
}

.module-section,#module-settings>fieldset,.module-settings-card,.team-frame-wrap {
  background:#1d162a!important;
  border:1px solid #9874c05c!important;
  border-radius:17px!important
}

.module-savebar {
  background:#241a33f5!important;
  border-color:#aa80d973!important
}

input,select,textarea,.nav-search input {
  background:#150f20!important;
  border:1px solid #a17bca72!important;
  color:#fff!important;
  border-radius:9px!important;
  transition:border-color .2s,box-shadow .2s!important
}

input:focus,select:focus,textarea:focus,.nav-search input:focus {
  border-color:#d1aaff!important;
  box-shadow:0 0 0 3px #ad79e32b!important;
  outline:0!important
}

button.primary,a.primary,.primary,.login-button {
  background:linear-gradient(110deg,#dfbcff,#a676e8)!important;
  color:#1c1128!important;
  border-color:#e9d1ff!important;
  border-radius:9px!important;
  transition:transform .2s,box-shadow .2s!important
}

button.primary:hover,a.primary:hover,.login-button:hover {
  transform:translateY(-2px)!important;
  box-shadow:0 12px 25px #8f54cf5e!important
}

.login {
  background:linear-gradient(145deg,#2b1e3c,#181120)!important;
  border:1px solid #ad85d87d!important;
  box-shadow:0 25px 80px #05020db8!important
}

.login .login-logo {
  box-shadow:0 0 30px #9868d353
}

.footerline {
  color:#b2a3c0!important
}

.badge,.notice {
  border-radius:8px!important
}

@media(max-width:850px) {
  .content {
    padding:24px 17px!important
  }

  .layout aside {
    margin:0 16px 16px!important
  }

  .pagehead h1 {
    font-size:36px!important
  }

}

@media(prefers-reduced-motion:reduce) {
  .layout aside button,.feature-card,.quick-card,.onboarding-step,button.primary,a.primary,.login-button {
    transition:none!important
  }

}

/* Component baseline: admin-central.css */
/* Central South Side control room. */
body {
  background:#110e15!important;
  background-image:none!important;
  color:#f3eef6!important
}

header {
  background:#15111beF!important;
  border-bottom:1px solid #74617f8a!important;
  box-shadow:none!important;
  backdrop-filter:blur(14px)!important
}

.layout aside {
  background:#18131e!important;
  border:0!important;
  border-right:1px solid #7160807a!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important
}

.layout aside button {
  border-radius:3px!important
}

.layout aside button:hover {
  transform:none!important;
  background:#aa88d41c!important
}

.layout aside button.active {
  background:#a387c124!important;
  border-color:transparent!important;
  box-shadow:inset 2px 0 #cfafea!important
}

.content {
  max-width:1600px!important
}

.pagehead {
  border-color:#7561837a!important
}

.pagehead h1 {
  letter-spacing:-.045em!important
}

.card,.feature-card,.module-card,.module-overview,.module-toolbar,.module-status-strip,.dashboard-status,.command-card,.setup-card,.member-card,.ticket-editor,.embed-preview,.quick-card,.onboarding-step,.module-section,#module-settings>fieldset,.module-settings-card,.team-frame-wrap {
  background:#1c1722!important;
  border:1px solid #6b5879!important;
  border-radius:5px!important;
  box-shadow:none!important;
  backdrop-filter:none!important
}

.feature-card:hover,.quick-card:hover,.onboarding-step:hover {
  transform:translateY(-2px)!important;
  border-color:#bd9fdb!important;
  box-shadow:0 12px 30px #0005!important
}

.overview-intro,.welcome-panel {
  background:#281e30!important;
  border-color:#a887c0!important
}

.overview-metrics>.card,.overview-metrics>article,.module-status-strip>div {
  background:#201926!important
}

.module-savebar {
  background:#1d1723f5!important;
  border-color:#846a94!important
}

input,select,textarea,.nav-search input {
  background:#141019!important;
  border:1px solid #756286!important;
  border-radius:3px!important;
  color:#f3eef6!important
}

input:focus,select:focus,textarea:focus,.nav-search input:focus {
  border-color:#d6b4f1!important;
  box-shadow:0 0 0 2px #a77dcc44!important
}

button.primary,a.primary,.primary,.login-button {
  background:#c4a0e8!important;
  color:#1b1222!important;
  border-color:#d6b3f2!important;
  border-radius:3px!important;
  box-shadow:none!important
}

button.primary:hover,a.primary:hover,.login-button:hover {
  transform:translateY(-2px)!important;
  box-shadow:0 10px 22px #0005!important
}

.login {
  background:#1c1621!important;
  border:1px solid #887098!important;
  border-radius:5px!important;
  box-shadow:0 22px 60px #0008!important
}

.login .login-logo {
  box-shadow:none!important;
  object-fit:contain!important
}

#page.view-enter {
  animation:css-panel-enter .34s cubic-bezier(.2,.7,.2,1) both!important
}

@keyframes css-panel-enter {
  from {
    opacity:0;
    transform:translateY(11px)
  }

  to {
    opacity:1;
    transform:translateY(0)
  }

}

@media(max-width:850px) {
  .layout aside {
    border-right:0!important;
    border-bottom:1px solid #7160807a!important
  }

}

@media(prefers-reduced-motion:reduce) {
  #page.view-enter {
    animation:none!important
  }

  .feature-card,.quick-card,.onboarding-step,.layout aside button {
    transition:none!important
  }

}

/* Component baseline: admin-next.css */
/* Central South Side ACP: compact navigation and working surfaces. */
body:has(.layout) {
  background:var(--custom-background,#111725)!important;
  color:#eef1f8!important;
  background-image:none!important
}

body:has(.layout):before {
  display:none!important
}

body:has(.layout) header {
  height:64px!important;
  min-height:64px!important;
  background:var(--custom-panel,#202b3b)!important;
  border-bottom:1px solid #374459!important;
  padding-inline:max(24px,calc((100vw - 1320px)/2))!important;
  box-shadow:none!important
}

body:has(.layout) .wordmark {
  font-size:15px!important;
  white-space:nowrap
}

body:has(.layout) .wordmark img {
  width:34px!important;
  height:34px!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important
}

body:has(.layout) .wordmark small {
  font-size:9px!important;
  color:#a9b5ca!important;
  letter-spacing:.11em!important
}

body:has(.layout) .account {
  gap:14px!important
}

body:has(.layout) .account span {
  color:#dbe2f0!important
}

body:has(.layout) .account button {
  padding:8px 12px!important
}

body:has(.layout) .layout {
  display:flex!important;
  flex-direction:column!important;
  min-height:calc(100vh - 64px)!important;
  grid-template-columns:none!important
}

body:has(.layout) .layout aside {
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:2px!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  min-height:49px!important;
  padding:6px max(20px,calc((100vw - 1320px)/2))!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  background:color-mix(in srgb,var(--custom-panel,#202b3b) 78%,var(--custom-background,#111725))!important;
  border:0!important;
  border-bottom:1px solid #344156!important;
  border-radius:0!important;
  box-shadow:none!important;
  white-space:nowrap!important;
  scrollbar-width:thin
}

body:has(.layout) .layout aside .nav-label,body:has(.layout) .aside-foot,body:has(.layout) .aside-links {
  display:none!important
}

body:has(.layout) .layout aside button {
  flex:none!important;
  width:auto!important;
  min-height:35px!important;
  padding:7px 10px!important;
  color:#c1cada!important;
  border:0!important;
  border-radius:4px!important;
  font-size:12px!important;
  line-height:1.3!important;
  white-space:nowrap!important;
  background:transparent!important;
  box-shadow:none!important
}

body:has(.layout) .layout aside button.active {
  color:#f4e9ff!important;
  background:color-mix(in srgb,var(--custom-accent,#a78bfa) 22%,transparent)!important;
  box-shadow:inset 0 -2px var(--custom-accent,#a78bfa)!important
}

body:has(.layout) .layout aside button:hover {
  color:white!important;
  background:#ffffff12!important
}

body:has(.layout) .layout aside .nav-search {
  flex:none!important;
  width:185px!important;
  margin:0 12px 0 0!important
}

body:has(.layout) .nav-search input {
  height:35px!important;
  padding:7px 10px!important;
  background:var(--custom-background,#111725)!important;
  border:1px solid #44536a!important;
  color:#e9edfa!important;
  font-size:12px!important
}

body:has(.layout) .advanced-nav {
  flex:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important
}

body:has(.layout) .advanced-nav summary {
  padding:7px 10px!important;
  color:#c6d1e2!important;
  font-size:12px!important
}

body:has(.layout) .advanced-nav[open] {
  display:flex!important;
  align-items:center!important
}

body:has(.layout) #nav-function-results:not([hidden]) {
  position:fixed!important;
  top:113px!important;
  left:max(20px,calc((100vw - 1320px)/2))!important;
  width:min(440px,calc(100vw - 40px))!important;
  z-index:50!important;
  padding:12px!important;
  background:color-mix(in srgb,var(--custom-panel,#202b3b) 90%,white)!important;
  border:1px solid #60718a!important;
  box-shadow:0 20px 40px #05091199!important;
  white-space:normal!important
}

body:has(.layout) #nav-function-results button {
  display:block!important;
  width:100%!important;
  text-align:left!important
}

body:has(.layout) .dashboard-menu {
  display:none!important
}

body:has(.layout) main.content {
  width:min(100%,1320px)!important;
  max-width:1320px!important;
  margin:0 auto!important;
  padding:34px 26px 72px!important;
  background:none!important
}

body:has(.layout) .pagehead {
  align-items:flex-end!important;
  padding-bottom:19px!important;
  margin-bottom:24px!important;
  border-bottom:1px solid #354257!important
}

body:has(.layout) .pagehead h1 {
  font-size:clamp(29px,3vw,39px)!important;
  letter-spacing:-.04em!important
}

body:has(.layout) .pagehead p {
  color:#aeb9cb!important
}

body:has(.layout) .eyebrow {
  color:var(--custom-accent,#a78bfa)!important
}

body:has(.layout) :is(.card,.feature-card,.module-card,.module-overview,.module-toolbar,.module-status-strip,.dashboard-status,.command-card,.setup-card,.member-card,.ticket-editor,.embed-preview,.quick-card,.onboarding-step,.module-section,#module-settings>fieldset,.module-settings-card,.team-frame-wrap) {
  background:var(--custom-panel,#202b3b)!important;
  border:1px solid #39485e!important;
  border-radius:var(--custom-radius,6px)!important;
  box-shadow:none!important;
  backdrop-filter:none!important
}

body:has(.layout) :is(.card,.feature-card,.module-card) p {
  color:#b4c1d1
}

body:has(.layout) .muted {
  color:#aeb9ca!important
}

body:has(.layout) .overview-intro {
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  padding:25px 28px!important;
  background:var(--custom-panel,#202b3b)!important
}

body:has(.layout) .overview-intro h2 {
  font-size:25px!important;
  margin-bottom:4px!important
}

body:has(.layout) .overview-intro .badge {
  align-self:flex-start!important;
  color:#d9b8f2!important;
  border-color:#a981ca!important
}

body:has(.layout) .overview-metrics {
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important
}

body:has(.layout) .overview-metrics>.card {
  min-height:145px!important;
  background:var(--custom-panel,#202b3b)!important;
  padding:20px!important
}

body:has(.layout) .overview-metrics .metric {
  font-size:29px!important;
  color:var(--custom-accent,#a78bfa)!important
}

body:has(.layout) .acp-quick {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px
}

body:has(.layout) .acp-quick button {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  text-align:left;
  min-height:90px;
  background:color-mix(in srgb,var(--custom-panel,#202b3b) 92%,white)!important;
  border:1px solid #40526b!important;
  border-radius:var(--custom-radius,6px)!important;
  color:#f4f4fa!important;
  padding:18px!important
}

body:has(.layout) .acp-quick strong {
  font-size:14px
}

body:has(.layout) .acp-quick small {
  color:#adbcd0;
  font-size:12px
}

body:has(.layout) .acp-quick button:hover {
  border-color:var(--custom-accent,#a78bfa)!important;
  transform:translateY(-2px)!important
}

body:has(.layout) input,body:has(.layout) select,body:has(.layout) textarea {
  background:color-mix(in srgb,var(--custom-panel,#202b3b) 82%,white)!important;
  border:1px solid #55657b!important;
  color:#f6f7fd!important;
  border-radius:4px!important
}

body:has(.layout) input:focus,body:has(.layout) select:focus,body:has(.layout) textarea:focus {
  border-color:var(--custom-accent,#a78bfa)!important;
  box-shadow:0 0 0 2px #c49ee938!important
}

body:has(.layout) button.primary,body:has(.layout) a.primary,body:has(.layout) .primary {
  background:var(--custom-accent,#a78bfa)!important;
  color:#1a1723!important;
  border:1px solid var(--custom-accent,#a78bfa)!important;
  border-radius:4px!important
}

body:has(.layout) button:not(.primary) {
  border-radius:4px!important
}

body:has(.layout) .acp-intro {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:25px
}

body:has(.layout) .acp-intro h2 {
  font-size:24px
}

body:has(.layout) .acp-intro p {
  max-width:720px
}

body:has(.layout) .tablewrap {
  border:1px solid #40516a;
  border-radius:4px;
  overflow:auto
}

body:has(.layout) th {
  background:color-mix(in srgb,var(--custom-panel,#202b3b) 93%,white)!important;
  color:#cbd5e7!important
}

body:has(.layout) td {
  border-color:#3e4f66!important
}

body:has(.layout) .footerline {
  border-color:#354257!important;
  color:#8191a5!important
}

@media(max-width:900px) {
  body:has(.layout) .overview-metrics,body:has(.layout) .acp-quick {
    grid-template-columns:repeat(2,minmax(0,1fr))!important
  }

  body:has(.layout) main.content {
    padding:25px 18px 60px!important
  }

}

@media(max-width:580px) {
  body:has(.layout) header {
    padding-inline:14px!important
  }

  body:has(.layout) .account span,body:has(.layout) .visit-site {
    display:none!important
  }

  body:has(.layout) .layout aside {
    padding-inline:12px!important
  }

  body:has(.layout) .layout aside .nav-search {
    width:150px!important
  }

  body:has(.layout) .overview-metrics,body:has(.layout) .acp-quick {
    grid-template-columns:1fr!important
  }

  body:has(.layout) .overview-intro,.acp-intro {
    display:block!important
  }

}

@media(prefers-reduced-motion:reduce) {
  body:has(.layout) .acp-quick button {
    transition:none!important;
    transform:none!important
  }

}

.acp-workspace {
  align-items:start
}

.acp-workspace>.card {
  min-width:0
}

.acp-workspace form label {
  display:block;
  margin:13px 0
}

.acp-workspace form label input,.acp-workspace form label textarea {
  display:block;
  width:100%;
  margin-top:6px
}

.acp-workspace form label.acp-check {
  display:flex;
  align-items:center;
  gap:9px
}

.acp-workspace form label.acp-check input {
  width:auto;
  margin:0
}

.acp-workspace .formgrid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.acp-record {
  padding:16px 0;
  border-top:1px solid #40516a
}

.acp-record h3 {
  margin:9px 0 4px;
  font-size:16px
}

.acp-record p {
  margin:0 0 6px
}

.acp-record small {
  color:#aeb9ca
}

.acp-record .actions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px
}

.acp-record .actions button {
  font-size:12px;
  padding:7px 10px
}

@media(max-width:850px) {
  .acp-workspace {
    grid-template-columns:1fr!important
  }

}

/* Keep the long list available without stretching the WaveCore-style bar. */
body:has(.layout) .layout aside {
  overflow:visible!important
}

body:has(.layout) .advanced-nav {
  position:relative!important;
  display:block!important
}

body:has(.layout) .advanced-nav[open] {
  display:block!important
}

body:has(.layout) .advanced-nav summary {
  cursor:pointer!important;
  border-radius:4px!important
}

body:has(.layout) .advanced-nav-menu {
  position:absolute!important;
  top:calc(100% + 10px)!important;
  left:0!important;
  width:min(430px,calc(100vw - 24px))!important;
  max-height:min(65vh,650px)!important;
  overflow:auto!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:4px!important;
  padding:12px!important;
  background:var(--custom-panel,#202b3b)!important;
  border:1px solid #4b5870!important;
  border-radius:var(--custom-radius,6px)!important;
  box-shadow:0 20px 45px #050911bb!important;
  white-space:normal!important
}

body:has(.layout) .advanced-nav-menu .nav-search {
  grid-column:1/-1!important;
  width:100%!important;
  margin:0 0 6px!important
}

body:has(.layout) .advanced-nav-menu button {
  text-align:left!important;
  white-space:normal!important
}

body:has(.layout) #nav-function-results:not([hidden]) {
  position:static!important;
  grid-column:1/-1!important;
  width:100%!important;
  box-shadow:none!important
}

body:has(.layout) :is(.card,.feature-card,.module-card,.module-overview,.module-toolbar,.module-status-strip,.dashboard-status,.command-card,.setup-card,.member-card,.ticket-editor,.embed-preview,.quick-card,.onboarding-step,.module-section,#module-settings>fieldset,.module-settings-card,.team-frame-wrap) {
  border-radius:var(--custom-radius,6px)!important
}

body:has(.layout) :is(input,select,textarea,button.primary,a.primary) {
  border-radius:var(--custom-radius,6px)!important
}

@media(max-width:850px) {
  body:has(.layout) .layout aside {
    overflow-x:auto!important
  }

  body:has(.layout) .advanced-nav-menu {
    position:fixed!important;
    left:12px!important;
    top:113px!important
  }

}

body:has(.layout) .bot-area {
  padding:23px 27px!important
}

body:has(.layout) .bot-area h2 {
  margin:2px 0 0!important;
  font-size:21px!important
}

body:has(.layout) .bot-area-links {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:19px
}

body:has(.layout) .bot-area-links button {
  text-align:left;
  background:color-mix(in srgb,var(--custom-panel,#202b3b) 82%,white)!important;
  border:1px solid #495773!important;
  padding:13px!important;
  min-height:45px!important;
  color:#e5eafa!important
}

body:has(.layout) .bot-area-links button:hover {
  border-color:var(--custom-accent,#a78bfa)!important
}

@media(max-width:850px) {
  body:has(.layout) .bot-area-links {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}

@media(max-width:520px) {
  body:has(.layout) .bot-area-links {
    grid-template-columns:1fr
  }

}

/* Component baseline: admin-polish.css */
:root {
  --css-admin-surface: #252032;
  --css-admin-accent: #d6acee;
}

body:has(.login):not(:has(.layout)) {
  background: #14101d url('/assets/southside-sunset.png') center/cover fixed no-repeat !important;
}

body:has(.login):not(:has(.layout)):before {
  background: linear-gradient(110deg,#130f1cf0,#1f142dc9) !important;
}

.login {
  width: min(570px,calc(100vw - 36px)) !important;
  padding: clamp(34px,5vw,66px) !important;
  background: #201927eb !important;
  border: 1px solid #ffffff19 !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 90px #09061188 !important;
  backdrop-filter: blur(24px);
}

.login .eyebrow {
  color: var(--css-admin-accent) !important;
  letter-spacing: .2em !important;
}

.login h1 {
  font-size: clamp(40px,5vw,60px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.055em !important;
}

.login p {
  color: #d4c7db !important;
  line-height: 1.6 !important;
}

.login .login-button {
  border: 0 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
}

.login .badge {
  border: 0 !important;
  background: #ffffff0d !important;
  border-radius: 8px !important;
}

.login .login-home {
  color: #d5b0ec !important;
}

body:has(.layout) .pagehead {
  border: 0 !important;
}

body:has(.layout) :is(.card,.feature-card,.module-card,.module-overview,.module-toolbar,.module-status-strip,.dashboard-status,.command-card,.setup-card,.member-card,.ticket-editor,.embed-preview,.quick-card,.onboarding-step,.module-section,#module-settings>fieldset,.module-settings-card,.team-frame-wrap) {
  border-color: #ffffff0d !important;
  border-radius: 13px !important;
  box-shadow: 0 10px 28px #080d1a1f !important;
}

body:has(.layout) .layout aside {
  border: 0 !important;
  box-shadow: 0 7px 25px #060a1428 !important;
}

body:has(.layout) .layout aside button.active {
  border-radius: 8px !important;
  box-shadow: none !important;
}

body:has(.layout) :is(.acp-quick button,.bot-area-links button) {
  border-color: #ffffff12 !important;
  border-radius: 11px !important;
  transition: transform .2s, box-shadow .2s !important;
}

body:has(.layout) :is(.acp-quick button,.bot-area-links button):hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px #080d1a55 !important;
}

@media(prefers-reduced-motion:reduce) {
  body:has(.layout) :is(.acp-quick button,.bot-area-links button) {
    transition: none !important;
  }

}

/* Keep every workspace visible in a compact, grouped sidebar. */
body:has(.layout) .layout {
  display:grid !important;
  grid-template-columns:244px minmax(0,1fr) !important;
  flex-direction:row !important;
}

body:has(.layout) .layout aside {
  position:sticky !important;
  top:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  width:244px !important;
  height:calc(100vh - 64px) !important;
  max-height:calc(100vh - 64px) !important;
  padding:20px 12px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  background:#17151f !important;
  border-right:1px solid #ffffff0c !important;
  white-space:normal !important;
}

body:has(.layout) .layout aside .nav-label {
  display:block !important;
  flex:none !important;
  margin:18px 12px 5px !important;
  color:#a594ad !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.16em !important;
}

body:has(.layout) .layout aside button[data-nav] {
  width:100% !important;
  min-height:35px !important;
  padding:8px 12px !important;
  text-align:left !important;
  white-space:normal !important;
  border-radius:9px !important;
}

body:has(.layout) .layout aside button[data-nav].active {
  box-shadow:none !important;
  background:#ad7fce2b !important;
  color:#f1d9ff !important;
}

body:has(.layout) .layout aside .nav-search {
  width:100% !important;
  margin:0 0 6px !important;
}

body:has(.layout) .layout aside .nav-search input {
  width:100% !important;
  height:38px !important;
  background:#ffffff0a !important;
  border:1px solid #ffffff17 !important;
  border-radius:10px !important;
}

body:has(.layout) .layout aside .aside-links {
  display:grid !important;
  gap:7px;
  margin:20px 12px;
  font-size:12px;
}

body:has(.layout) .layout aside .aside-foot {
  display:block !important;
  margin-top:auto;
  padding:16px 12px 0;
  border-top:1px solid #ffffff0c;
}

body:has(.layout) main.content {
  width:min(100%,1330px) !important;
  max-width:none !important;
  padding:38px clamp(22px,3vw,50px) 72px !important;
}

body:has(.layout) .pagehead {
  border:0 !important;
}

body:has(.layout) :is(.card,.feature-card,.module-card,.module-overview,.module-toolbar,.module-status-strip,.dashboard-status,.command-card,.setup-card,.member-card,.ticket-editor,.embed-preview,.quick-card,.onboarding-step,.module-section,#module-settings>fieldset,.module-settings-card,.team-frame-wrap) {
  border:1px solid #ffffff0a !important;
  background:#24202f !important;
  border-radius:16px !important;
}

body:has(.layout) :is(.card,.feature-card,.module-card,.quick-card,.acp-quick button) {
  transition:transform .2s ease,box-shadow .2s ease !important;
}

body:has(.layout) :is(.card,.feature-card,.module-card,.quick-card,.acp-quick button):hover {
  transform:translateY(-2px);
  box-shadow:0 16px 36px #0c081a45 !important;
}

body:has(.layout) #nav-function-results:not([hidden]) {
  position:relative !important;
  top:auto !important;
  left:auto !important;
  width:100% !important;
  padding:8px !important;
  border:1px solid #ffffff12 !important;
  border-radius:10px !important;
  background:#241d2d !important;
}

body:has(.layout) #nav-function-results button {
  width:100% !important;
  text-align:left !important;
}

@media(max-width:900px) {
  body:has(.layout) .layout {
    display:block !important;
  }

  body:has(.layout) .layout aside {
    display:none !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    max-height:55vh !important;
  }

  body:has(.layout) .layout aside.is-open {
    display:flex !important;
  }

  body:has(.layout) .dashboard-menu {
    display:block !important;
  }

}

@media(prefers-reduced-motion:reduce) {
  body:has(.layout) :is(.card,.feature-card,.module-card,.quick-card,.acp-quick button) {
    transition:none !important;
  }

}

.ticket-panel-workspace {
  margin-bottom:36px;
}

.ticket-panel-workspace .section-head {
  margin-bottom:18px;
}

.ticket-panel-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap:20px;
}

.ticket-panel-form {
  padding:22px;
}

.ticket-panel-form .formgrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}

.ticket-panel-form .formgrid .wide {
  grid-column:1/-1;
}

.ticket-panel-form input,.ticket-panel-form select,.ticket-panel-form textarea {
  display:block;
  width:100%;
  margin-top:6px;
}

.ticket-panel-form textarea {
  min-height:74px;
}

.ticket-panel-routes {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:18px 0;
  padding:15px;
  border:1px solid #ffffff15;
  border-radius:12px;
}

.ticket-panel-routes legend {
  padding:0 6px;
  color:#d6b6e7;
}

.ticket-panel-routes label,.ticket-panel-active {
  display:flex;
  align-items:center;
  gap:8px;
}

.ticket-panel-routes input,.ticket-panel-active input {
  width:auto !important;
  margin:0 !important;
}

.ticket-panel-form .actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:19px;
}

tr[data-ticket-status][hidden] {
  display:none;
}

.ticket-panel-fields {
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}

.ticket-panel-fields:disabled {
  opacity:.75;
}

.ticket-panel-preview {
  display:grid;
  gap:9px;
  margin-top:20px;
  padding:15px;
  border-radius:12px;
  background:#18171f;
}

.ticket-panel-preview .eyebrow {
  margin:0 0 4px;
  font-size:10px;
}

.ticket-preview-main,.ticket-preview-note {
  padding:14px 16px;
  border-left:4px solid #a78bfa;
  border-radius:6px;
  background:#292933;
}

.ticket-preview-title {
  font-weight:750;
}

.ticket-preview-description,.ticket-preview-note p {
  margin:7px 0;
  color:#dedce7;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.ticket-preview-footer {
  color:#aaa3b5;
}

.ticket-preview-banner {
  height:112px;
  margin:12px 0;
  border-radius:7px;
  background-position:center;
  background-size:cover;
}

.ticket-preview-selector {
  padding:10px 14px;
  border:1px solid #44424e;
  border-radius:7px;
  color:#d2cedc;
}

@media(max-width:600px) {
  .ticket-panel-form .formgrid,.ticket-panel-routes {
    grid-template-columns:1fr;
  }

}

.ticket-manage {
  margin-bottom:24px;
  padding:24px;
}

.ticket-manage .formgrid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:12px;
  align-items:end;
}

.ticket-manage label {
  min-width:0;
}

.ticket-manage select {
  width:100%;
  margin-top:6px;
}

.ticket-manage-submit button {
  white-space:nowrap;
}

@media(max-width:1050px) {
  .ticket-manage .formgrid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

@media(max-width:620px) {
  .ticket-manage .formgrid {
    grid-template-columns:1fr;
  }

}

.ticket-route-settings {
  margin-top:14px;
  padding:18px 22px;
}

.ticket-route-settings summary {
  cursor:pointer;
  color:#e4d5ef;
}

.ticket-route-settings form {
  margin-top:18px;
}

.ticket-route-settings fieldset {
  margin:18px 0;
  padding:18px;
  border:1px solid #ffffff13;
  border-radius:12px;
}

.ticket-route-settings legend {
  padding:0 8px;
  font-weight:700;
  color:#e5ccf6;
}

.ticket-route-settings .formgrid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.ticket-route-settings .wide {
  grid-column:1/-1;
}

.ticket-route-settings input,.ticket-route-settings select,.ticket-route-settings textarea {
  display:block;
  width:100%;
  margin-top:6px;
}

@media(max-width:620px) {
  .ticket-route-settings .formgrid {
    grid-template-columns:1fr;
  }

  .ticket-route-settings .wide {
    grid-column:auto;
  }

}

.ticket-metrics {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-bottom:22px;
}

.ticket-metrics .card {
  display:grid;
  gap:8px;
  padding:20px 22px;
}

.ticket-metrics span {
  color:#bdb0c9;
  font-size:12px;
}

.ticket-metrics strong {
  color:#f3e2ff;
  font-size:clamp(22px,2vw,31px);
  line-height:1;
  letter-spacing:-.04em;
}

@media(max-width:900px) {
  .ticket-metrics {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

.ticket-history {
  margin-top:10px;
  min-width:220px;
  max-width:420px;
}

.ticket-history summary {
  cursor:pointer;
  color:var(--muted,#c5bfd0);
  font-size:12px;
}

.ticket-history ol {
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}

.ticket-history li {
  padding:8px 12px;
  border-radius:10px;
  background:#a78bfa10;
}

.ticket-history small {
  display:block;
  margin-top:4px;
  font-size:11px;
  color:var(--muted,#c5bfd0);
}

.application-comment {
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* Component baseline: color-theme.css */
/* One shared palette for the public website, administration and team area. */
:root {
  --ss-background:#0c0a10;
  --ss-surface:#15121c;
  --ss-raised:#1d1827;
  --ss-accent:#a855f7;
  --ss-text:#f5f3f7;
  --ss-muted:#a5a1ac;
  --ss-border:#a855f726;
  --css-page:var(--ss-background);
  --css-panel:var(--ss-surface);
  --css-panel-raised:var(--ss-raised);
  --css-lilac:var(--ss-accent);
  --css-ink:var(--ss-text);
  --css-muted:var(--ss-muted);
  --bg:var(--ss-background);
  --panel:var(--ss-surface);
  --panel2:var(--ss-raised);
  --text:var(--ss-text);
  --muted:var(--ss-muted);
  --accent:var(--ss-accent);
  --gold:var(--ss-accent);
  --line:var(--ss-border);
  --css-admin-accent:var(--ss-accent);
  --css-admin-surface:var(--ss-surface);
  --custom-background:var(--ss-background)!important;
  --custom-panel:var(--ss-surface)!important;
  --custom-accent:var(--ss-accent)!important;
}

body {
  background:var(--ss-background)!important;
  color:var(--ss-text)!important;
}

.ss-site .ss-global-backdrop {
  background:var(--ss-background)!important;
}

.ss-site :is(.ss-page,.ss-footer,.live-strip,.support-panel),
.ss-site.home :is(#einstieg,.live-strip),
body:has(.layout) :is(header,aside,.card,.team-frame-wrap),
body:has(#team-app) :is(.card,.auth-card) {
  background:var(--ss-surface)!important;
  color:var(--ss-text)!important;
  border-color:var(--ss-border)!important;
}

.ss-site :is(.start-card,.system-card,.faction-card,.partner-tile,.help-detail,.launcher-card,.launcher-address,.ss-legal-content),
.ss-site.home #einstieg .start-card,
.ss-site.home .hero-community {
  background:var(--ss-raised)!important;
  color:var(--ss-text)!important;
  border-color:var(--ss-border)!important;
}

.ss-site.home .hero-community:hover {
  background:var(--ss-surface)!important;
}

.ss-site.home #einstieg :is(.section-heading h2,.start-card h3) {
  color:var(--ss-text)!important;
}

.ss-site.home #einstieg :is(.section-heading>p,.start-card p) {
  color:var(--ss-muted)!important;
}

.ss-site.home #einstieg :is(.eyebrow,.start-intro .eyebrow,.step-label,.text-link),
.ss-site .start-intro>p:last-child span,
.ss-site :is(.hero-kicker,.eyebrow,.text-link,.system-index,.ss-page em),
body:has(#team-app) :is(.eyebrow,a:not(.button)) {
  color:var(--ss-accent)!important;
}

.ss-site #site-hero-accent {
  color:var(--ss-accent)!important;
  -webkit-text-fill-color:var(--ss-accent)!important;
}

.ss-site :is(.ss-header,.ss-header.has-scrolled,.ss-nav.is-open,.account-menu-content) {
  background:#15121cf2!important;
  border-color:var(--ss-border)!important;
}

.ss-site :is(.community-orbit,.button.primary,.button-discord,.nav-admin),
body:has(.layout) .primary,
body:has(#team-app) .primary {
  background:var(--ss-accent)!important;
  color:var(--ss-background)!important;
  border-color:var(--ss-accent)!important;
}

.ss-site .button:not(.primary):not(.button-discord) {
  background:var(--ss-raised)!important;
  color:var(--ss-text)!important;
  border-color:var(--ss-border)!important;
}

.ss-site .live-link {
  background:var(--ss-raised)!important;
  color:var(--ss-accent)!important;
}

body:has(#team-app) {
  background:var(--ss-background)!important;
}

body:has(#team-app) :is(button:not(.primary):not(.danger),a.button:not(.primary),input,textarea,select) {
  background:var(--ss-raised)!important;
  color:var(--ss-text)!important;
  border-color:var(--ss-border)!important;
}

body:has(.layout) :is(input,textarea,select) {
  background:var(--ss-raised)!important;
  color:var(--ss-text)!important;
  border-color:var(--ss-border)!important;
}

.ss-site :is(.rule-intro-card,.rule-categories,.rule-content,.empty-state,.ss-placeholder-card,.ss-note,.rule-search) {
  background:var(--ss-raised)!important;
  color:var(--ss-text)!important;
  border-color:var(--ss-border)!important;
}

.ss-site :is(input,textarea,select,.rule-stats span) {
  background:var(--ss-surface)!important;
  color:var(--ss-text)!important;
  border-color:var(--ss-border)!important;
}

.ss-site input::placeholder,.ss-site textarea::placeholder {
  color:var(--ss-muted)!important;
  opacity:1;
}

.ss-site .ss-page :is(h1 em,h2 em) {
  color:var(--ss-accent)!important;
}

.login,.denied-card {
  background:var(--ss-surface)!important;
  color:var(--ss-text)!important;
  border-color:var(--ss-border)!important
}

.login-button,.denied-card .primary {
  background:var(--ss-accent)!important;
  color:white!important
}

/* Component baseline: studio-theme.css */
/* Central South Side: one visual language for administration and community. */
:root {
  --custom-background:#0b0810;
  --custom-panel:#15101e;
  --custom-accent:#ad3df1;
  --custom-radius:16px;
  --accent:#ad3df1
}

body {
  background:#0b0810!important;
  color:#f8f4ff
}

#app>header {
  background:#0b0810ec!important;
  border-bottom:1px solid #b154ef25!important;
  backdrop-filter:blur(20px)
}

#app .layout>aside {
  background:#0f0b16!important;
  border-color:#b154ef20!important
}

#app .content {
  background:radial-gradient(ellipse at 80% 0%,#7628ae16,transparent 55%)!important;
  max-width:1600px
}

#app .card,#app .member-card,#app .priority-item,#app .module-card {
  background:linear-gradient(145deg,#191221,#100d17)!important;
  border:1px solid #c079f323!important;
  border-radius:16px!important;
  box-shadow:0 12px 40px #0002
}

#app input:not([type=checkbox]),#app select,#app textarea {
  background:#0c0912!important;
  border:1px solid #a367c938!important;
  color:#f6f0ff!important;
  border-radius:10px!important
}

#app input:focus,#app textarea:focus,#app select:focus {
  outline:2px solid #bd5bff!important;
  outline-offset:2px
}

#app button.primary,#app a.primary {
  background:linear-gradient(120deg,#8132d9,#b02dcc)!important;
  color:white!important;
  border:0!important;
  box-shadow:0 8px 25px #7f27b32b
}

#app .wordmark img {
  object-fit:contain!important;
  width:78px!important;
  height:54px!important
}

#app .pagehead {
  position:relative;
  padding-top:35px;
  gap:20px;
  flex-wrap:wrap
}

.studio-back {
  position:absolute;
  top:0;
  color:#bf83ec;
  font-size:13px;
  text-decoration:none
}

.studio-columns {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:24px
}

.studio-preview {
  align-self:start;
  position:sticky;
  top:100px;
  min-height:300px
}

.studio-intro {
  position:relative;
  overflow:hidden;
  padding:30px!important
}

.studio-intro:after {
  content:'';
  position:absolute;
  inset:0 0 0 65%;
  background:url('/assets/css-logo-20261011.png') right center/contain no-repeat;
  opacity:.1;
  pointer-events:none
}

.studio-details {
  border-top:1px solid #b579e326;
  padding:18px 0
}

.studio-details summary {
  cursor:pointer;
  font-weight:700;
  margin-bottom:16px;
  color:#e4b5ff
}

.studio-topic-list article {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  border-bottom:1px solid #9d6dc526
}

.studio-topic-list small {
  display:block;
  margin-top:8px;
  color:#ada2ba
}

.studio-board-row {
  display:grid;
  grid-template-columns:1fr 1.2fr 2fr auto auto;
  align-items:end;
  gap:14px;
  margin-bottom:18px
}

.studio-board-row label {
  margin:0
}

.studio-columns textarea {
  min-height:300px
}

.login-backdrop {
  position:fixed;
  inset:0;
  background:linear-gradient(#0b0810b0,#0b0810f0),url('/assets/css-banner-20261011.png') center/cover!important
}

.login {
  position:relative;
  background:#130d1eea!important;
  border:1px solid #b158ed38!important;
  border-radius:24px!important;
  padding:48px!important;
  box-shadow:0 30px 100px #0008!important;
  max-width:560px!important;
  margin:12vh auto!important;
  animation:studio-in .6s both
}

.login h1 {
  font-size:clamp(28px,4vw,42px)!important;
  line-height:1.15
}

.login-logo {
  width:120px;
  height:85px;
  object-fit:contain
}

.login-home {
  display:block;
  margin-top:25px;
  color:#c7a5dd
}

.access-denied:before {
  content:'';
  display:block;
  height:6px;
  width:60px;
  background:#bd56f3;
  margin-bottom:24px
}

.forum-banner {
  background:linear-gradient(90deg,#0b081099,#0b081044),url('/assets/css-banner-20261011.png') center/cover!important;
  min-height:250px
}

.forum-banner img {
  width:190px!important;
  height:130px!important;
  object-fit:contain!important
}

.forum-header {
  background:#100b18ed!important;
  backdrop-filter:blur(20px)
}

.forum-site .forum-panel,.forum-site .post,.forum-site .sidebar-card {
  background:#15101e!important;
  border:1px solid #b77ae325;
  border-radius:16px;
  overflow:hidden
}

.forum-site .forum-panel>h3 {
  background:linear-gradient(110deg,#702ab1,#a533c5)!important
}

.forum-site .forum-panel .board-row {
  border-color:#bd85e625
}

.forum-site .post {
  margin-bottom:22px
}

.forum-site .content {
  white-space:normal!important;
  line-height:1.8
}

.formatted-post {
  line-height:1.8;
  color:#d5c9df
}

.formatted-post h2,.forum-site .content h2 {
  font-size:28px!important;
  margin:24px 0 14px
}

.formatted-post p,.forum-site .content p {
  margin:0 0 12px
}

.formatted-post blockquote,.forum-site .content blockquote {
  margin:18px 0;
  padding:14px 20px;
  border-left:3px solid #ad3df1;
  background:#ad3df112;
  border-radius:0 10px 10px 0
}

.post-spacer {
  height:12px
}

.forum-bullet {
  padding-left:8px
}

.formatted-post code,.forum-site .content code {
  background:#a33feb20;
  padding:3px 7px;
  border-radius:5px
}

.formatted-post hr,.forum-site .content hr {
  border:0;
  border-top:1px solid #aa66da30;
  margin:24px 0
}

@keyframes studio-in {
  from {
    opacity:0;
    transform:perspective(900px) translateY(24px) rotateX(6deg)
  }

  to {
    opacity:1;
    transform:none
  }

}

@media(max-width:850px) {
  .studio-columns {
    grid-template-columns:1fr
  }

  .studio-preview {
    position:static
  }

  .studio-board-row {
    grid-template-columns:1fr 1fr
  }

  .studio-topic-list article {
    align-items:start;
    flex-direction:column
  }

  .login {
    margin:10vh 20px!important;
    padding:30px!important
  }

  .forum-banner {
    min-height:220px
  }

  .forum-banner img {
    width:130px!important
  }

  .forum-banner h1 {
    font-size:26px!important
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }

}

.denied-card {
  background:linear-gradient(145deg,#1b1129,#100b18)!important;
  border:1px solid #af5de640!important;
  box-shadow:0 30px 100px #0008!important
}

.denied-card .mark img {
  object-fit:contain
}

.denied-card .primary {
  background:linear-gradient(120deg,#8132d9,#b02dcc)!important;
  color:#fff!important
}

#app input[type=checkbox] {
  appearance:auto!important;
  inline-size:18px!important;
  block-size:18px!important;
  min-height:18px!important;
  margin:0 8px 0 0!important;
  accent-color:#a73be6
}

#app .studio-columns .actions label {
  display:flex!important;
  align-items:center!important;
  flex-direction:row!important
}

body:has(.layout) #app .overview-intro {
  background:linear-gradient(90deg,#160d25ef,#160d2588),url('/assets/css-banner-20261011.png') center/cover!important;
  border:1px solid #b77ae335!important;
  min-height:210px
}

/* Component baseline: brand-refine.css */
:root {
  --accent:#A000F4;
  --gold:#A000F4;
  --custom-accent:#A000F4;
  --custom-background:#141018;
  --custom-panel:#141018;
  --text:#F5F5F5;
  --muted:#D9D9D9;
  --brand-hover:#D100FF;
  --brand-shadow:#6500A8;
  --brand-reflection:#B77AE8;
  color-scheme:dark
}

html {
  scrollbar-width:none
}

html::-webkit-scrollbar,body::-webkit-scrollbar,aside::-webkit-scrollbar {
  display:none
}

body {
  color:#F5F5F5;
  background:#141018
}

body,aside {
  scrollbar-width:none
}

.community-home .ss-header {
  position:absolute!important;
  inset:0 0 auto;
  z-index:20;
  background:linear-gradient(#0008,transparent)!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important
}

.community-home .reference-hero {
  min-height:740px!important
}

.community-home .reference-hero #home-intro {
  font-size:clamp(16px,1.3vw,19px)!important;
  line-height:1.8!important;
  max-width:710px!important;
  color:#D9D9D9
}

.community-home .reference-hero .reference-logo-title {
  font-size:clamp(48px,6.6vw,94px)!important;
  color:#F5F5F5!important;
  background:none!important
}

.community-home .reference-hero .eyebrow {
  color:#D100FF!important
}

.ss-nav a.active,.ss-nav a:hover {
  color:#D100FF!important;
  border-color:#A000F4!important
}

.primary,.btn-primary,.ss-discord,.login-button,.forum-site .button.primary {
  background:linear-gradient(135deg,#A000F4,#6500A8)!important;
  border-color:#A000F4!important;
  color:#F5F5F5!important;
  box-shadow:0 8px 30px #6500A830
}

.primary:hover,.btn-primary:hover,.ss-discord:hover,.login-button:hover {
  background:#D100FF!important;
  box-shadow:0 8px 34px #6500A850
}

.reference-icon {
  color:#A000F4!important
}

.feature-card:hover .reference-icon,.start-card:hover .reference-icon {
  color:#F5F5F5!important
}

.community-home .feature-card,.community-home .start-card {
  border-radius:16px!important;
  border:1px solid #B77AE817;
  background:#141018!important
}

.community-home .feature-card::before,.community-home .feature-card::after {
  display:none
}

.community-home .feature-card:hover,.community-home .start-card:hover {
  background:linear-gradient(135deg,#6500A8,#A000F4)!important
}

.community-home .reference-story {
  display:block!important;
  text-align:center;
  padding-block:80px!important
}

.community-home .reference-story>img {
  display:none!important
}

.community-home .reference-story>div {
  max-width:800px;
  margin:auto
}

.reference-story h2 {
  font-size:clamp(26px,3vw,38px)!important
}

.reference-story p {
  font-size:17px!important;
  line-height:1.9!important;
  color:#D9D9D9!important
}

.reference-story .story-rule {
  background:#A000F4
}

.partner-grid {
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
  gap:24px!important;
  max-width:1120px;
  margin:auto
}

.partner-tile {
  background:#141018!important;
  border:1px solid #B77AE81a;
  border-radius:24px;
  padding:24px!important;
  text-align:center;
  align-self:start
}

.partner-logo-link {
  height:190px;
  display:flex!important;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  transition:transform .3s,background .3s
}

.partner-logo-link:hover {
  background:#6500A822;
  transform:translateY(-4px)
}

.partner-logo-link img {
  width:100%!important;
  height:150px!important;
  object-fit:contain!important;
  margin:0!important
}

.partner-wordmark {
  font-size:27px;
  font-weight:800;
  color:#F5F5F5
}

.partner-tile details {
  margin-top:12px
}

.partner-tile summary {
  display:inline-block;
  cursor:pointer;
  font-size:12px;
  padding:9px 14px;
  border:1px solid #A000F450;
  border-radius:30px;
  color:#D9D9D9
}

.partner-tile details[open] summary {
  color:#D100FF
}

.partner-tile details p {
  font-size:14px;
  line-height:1.7;
  color:#D9D9D9
}

.forum-site {
  background:#141018!important
}

.forum-header {
  background:#141018!important;
  border:0!important
}

.forum-banner {
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:12px!important;
  padding:36px 24px!important;
  min-height:260px!important;
  border:0!important
}

.forum-banner img {
  width:120px!important;
  height:80px!important;
  object-fit:contain!important
}

.forum-banner h1 {
  font-size:38px!important;
  margin:0!important
}

.forum-banner p {
  color:#D9D9D9;
  font-size:15px
}

.forum-wrap {
  background:transparent!important;
  border:0!important;
  padding-top:35px!important
}

.forum-panel {
  background:#141018!important;
  border:1px solid #B77AE81b!important;
  border-radius:16px!important;
  overflow:hidden
}

.forum-panel>h3 {
  background:linear-gradient(100deg,#6500A8,#A000F4)!important;
  padding:17px 22px!important
}

.board-row,.topic-row {
  background:transparent!important;
  border-bottom:1px solid #B77AE813!important
}

.forum-toolbar h2 {
  font-size:24px
}

.forum-site .ss-footer {
  background:#141018!important
}

#app {
  --custom-accent:#A000F4!important;
  --gold:#A000F4!important;
  --custom-background:#141018!important;
  --custom-panel:#141018!important;
  color:#F5F5F5
}

#app>header {
  background:#141018e8!important;
  border-bottom:1px solid #B77AE81a!important
}

#dashboard-nav {
  background:#141018!important;
  border-right:1px solid #B77AE81a!important
}

.nav-group {
  margin:7px 0;
  border:0!important;
  background:transparent!important;
  padding:0!important
}

.nav-group summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 12px;
  color:#B77AE8;
  font-size:10px;
  font-weight:750;
  letter-spacing:.1em
}

.nav-group summary:after {
  content:'+';
  font-size:17px
}

.nav-group[open] summary:after {
  content:'−'
}

.nav-group summary::-webkit-details-marker {
  display:none
}

#dashboard-nav .nav-group button {
  padding:10px 13px!important;
  margin:3px 0!important;
  border-radius:10px!important;
  font-size:12px!important
}

#dashboard-nav .nav-group button.active {
  background:#A000F423!important;
  color:#D100FF!important;
  border-left:2px solid #A000F4!important
}

.card,.module-toolbar,.dashboard-status,.acp-quick button {
  border-color:#B77AE81b!important;
  background:linear-gradient(145deg,#1e1526,#141018)!important;
  border-radius:16px!important
}

.content .muted,.pagehead p {
  color:#D9D9D9!important
}

.module-sort {
  display:flex;
  align-items:center;
  gap:14px;
  margin:20px 0;
  font-size:13px
}

.module-sort select {
  max-width:220px
}

.all-modules {
  gap:18px!important
}

.login {
  background:linear-gradient(145deg,#21152cf5,#141018f5)!important;
  border:1px solid #B77AE828!important;
  box-shadow:0 30px 100px #6500A824!important;
  border-radius:26px!important;
  padding:38px!important;
  max-width:480px!important
}

.login h1 {
  font-size:40px!important;
  line-height:1.2!important
}

.login-logo {
  width:130px!important;
  height:86px!important;
  object-fit:contain
}

.login p {
  color:#D9D9D9!important
}

.login .eyebrow {
  color:#B77AE8!important
}

input:focus,textarea:focus,select:focus {
  outline-color:#A000F4!important;
  border-color:#A000F4!important
}

@media(max-width:760px) {
  .community-home .reference-hero {
    min-height:650px!important
  }

  .community-home .reference-hero .ss-hero-content {
    padding:125px 0 65px!important
  }

  .community-home .reference-hero #home-intro {
    font-size:16px!important;
    line-height:1.75!important
  }

  .partner-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important
  }

  .partner-tile {
    padding:12px!important
  }

  .partner-logo-link {
    height:130px
  }

  .partner-logo-link img {
    height:110px!important
  }

  .partner-wordmark {
    font-size:20px
  }

  .login {
    padding:28px!important
  }

  .reference-story p {
    font-size:16px!important
  }

  .forum-banner h1 {
    font-size:30px!important
  }

}

.module-category {
  margin:0 0 18px;
  padding:0!important;
  border:1px solid #B77AE81b!important;
  border-radius:16px!important;
  background:#141018!important;
  overflow:hidden
}

.module-category>summary {
  cursor:pointer;
  padding:19px 22px;
  color:#B77AE8;
  font-size:12px;
  letter-spacing:.1em;
  font-weight:750
}

.module-category>summary span {
  float:right;
  color:#D9D9D9
}

.module-category>.feature-grid {
  padding:0 20px 20px
}

.community-home .start-card:first-child {
  background:linear-gradient(135deg,#A000F4,#6500A8)!important
}

.community-home .start-card:first-child .reference-icon,.community-home .start-card:first-child p {
  color:#F5F5F5!important
}

#app .primary,#app .login-button,body .login .login-button {
  background:linear-gradient(135deg,#A000F4,#6500A8)!important;
  border-color:#A000F4!important;
  color:#F5F5F5!important
}

#app .primary:hover,body .login .login-button:hover {
  background:#D100FF!important
}

.community-home .ss-nav a.active,.community-home .ss-nav a:hover {
  color:#D100FF!important
}

.community-home .ss-nav a.active:after {
  background:#A000F4!important
}

body.forum-site .forum-panel>h3 {
  background:linear-gradient(100deg,#6500A8,#A000F4)!important;
  color:#F5F5F5!important
}

body.forum-site .forum-header nav a {
  background:transparent!important
}

#app .overview-metrics .card {
  background:linear-gradient(145deg,#21172a,#141018)!important
}

#app .metric {
  color:#A000F4!important
}

/* Shared brand framing: full logo, generous inset, matching public/admin/forum surfaces. */
.community-home .ss-header {
  padding-inline:clamp(24px,5vw,90px)!important;
  box-sizing:border-box;
  min-height:106px
}

.community-home .ss-brand {
  flex:0 0 160px!important;
  max-width:160px!important;
  overflow:visible!important
}

.community-home .ss-brand img.brand-logo {
  width:150px!important;
  height:88px!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block;
  transform:none!important
}

#app .wordmark img {
  width:100px!important;
  height:64px!important;
  object-fit:contain!important
}

.login {
  position:relative!important;
  overflow:visible!important;
  text-align:center!important;
  padding:42px!important;
  max-width:500px!important
}

.login .login-logo {
  width:220px!important;
  height:146px!important;
  object-fit:contain!important;
  display:block!important;
  margin:0 auto 24px!important;
  filter:drop-shadow(0 10px 26px #6500A85a)
}

.login h1 {
  font-size:34px!important;
  letter-spacing:-1px!important
}

.login .eyebrow {
  font-size:10px!important;
  letter-spacing:3px!important
}

.login .login-button {
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:100%;
  box-sizing:border-box;
  margin-top:26px!important
}

.login .badge {
  display:block;
  margin:18px 0;
  background:transparent!important
}

.login .login-home {
  display:block!important;
  text-align:center!important;
  margin-top:22px!important
}

.forum-header {
  padding:16px clamp(20px,5vw,90px)!important;
  gap:28px!important;
  min-height:88px!important;
  box-sizing:border-box;
  background:#141018f0!important
}

.forum-nav-logo {
  display:flex;
  flex:0 0 112px
}

.forum-header .forum-nav-logo img {
  width:112px;
  height:66px;
  object-fit:contain
}

.forum-header nav a {
  padding:15px!important;
  border-radius:10px;
  letter-spacing:.06em
}

.forum-header nav a:first-child {
  color:#D100FF!important
}

.forum-site .forum-banner {
  height:300px!important;
  border:0!important;
  gap:10px!important;
  background:linear-gradient(0deg,#141018,#14101860),url('/assets/css-banner-20261011.png') center/cover!important
}

.forum-site .forum-banner img {
  width:170px!important;
  height:108px!important;
  object-fit:contain!important
}

.forum-site .forum-banner h1 {
  font-size:clamp(28px,3vw,40px)!important;
  letter-spacing:-1px!important
}

.forum-site .forum-banner p {
  font-size:14px!important
}

.forum-site .forum-wrap {
  max-width:1440px;
  margin:auto
}

.forum-site .board-folder {
  color:#B77AE8;
  background:#A000F412
}

.forum-site .board-row {
  min-height:118px!important
}

.forum-site .forum-panel,.forum-site .forum-form,.forum-site .post-body,.forum-site .post-author {
  background:#141018!important
}

.forum-site .post-author {
  background:linear-gradient(155deg,#251230,#141018)!important
}

.forum-site .post-author img {
  object-fit:contain!important;
  background:#141018;
  border-radius:16px
}

.forum-site .post-meta {
  background:#A000F40b!important;
  color:#D9D9D9
}

.forum-site .topic-info {
  display:flex;
  gap:18px;
  align-items:center;
  min-width:0
}

.forum-site .topic-avatar {
  width:54px;
  height:54px;
  object-fit:contain;
  border-radius:12px;
  background:#A000F40a;
  flex-shrink:0
}

.forum-site .topic-row:hover {
  background:#A000F40b
}

.music-steps {
  padding-left:24px;
  max-width:850px
}

.music-steps li {
  padding:20px 0 22px 12px;
  border-bottom:1px solid #B77AE820
}

.music-steps li::marker {
  color:#B77AE8;
  font-weight:800
}

.music-steps p {
  color:#D9D9D9;
  line-height:1.8;
  font-size:14px
}

.music-steps code {
  background:#A000F416;
  border-radius:5px;
  padding:3px 7px
}

.music-setup>button {
  margin-top:24px
}

@media(max-width:800px) {
  .community-home .ss-header {
    min-height:84px!important;
    padding-inline:22px!important
  }

  .community-home .ss-brand {
    flex-basis:112px!important
  }

  .community-home .ss-brand img.brand-logo {
    width:110px!important;
    height:68px!important
  }

  .forum-header {
    flex-wrap:wrap!important;
    gap:12px!important
  }

  .forum-header nav {
    flex-wrap:wrap
  }

  .forum-header nav a {
    padding:10px!important;
    font-size:11px!important
  }

  .forum-nav-logo {
    flex-basis:86px
  }

  .forum-header .forum-nav-logo img {
    width:86px;
    height:56px
  }

  .forum-site .forum-banner {
    height:260px!important
  }

  .login {
    padding:30px 24px!important
  }

  .login .login-logo {
    width:180px!important;
    height:120px!important
  }

}

/* Compact partner gallery; expanded information gets the full reading width. */
.partner-grid {
  display:flex!important;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:32px!important;
  max-width:1180px
}

.partner-tile {
  flex:0 1 280px;
  width:100%;
  padding:22px!important;
  border-radius:26px;
  min-width:0;
  box-sizing:border-box
}

.partner-logo-link {
  height:210px;
  background:transparent!important;
  padding:20px
}

.partner-logo-link img {
  max-height:160px!important;
  max-width:190px;
  width:100%!important;
  object-fit:contain!important
}

.partner-wordmark {
  font-size:23px;
  line-height:1.3;
  overflow-wrap:anywhere
}

.partner-tile details {
  margin-top:18px
}

.partner-tile summary {
  font-size:13px;
  padding:11px 18px;
  color:#F5F5F5;
  transition:border-color .2s,background .2s
}

.partner-tile summary:hover {
  border-color:#D100FF;
  background:#6500A833
}

.partner-tile summary:focus-visible,.partner-logo-link:focus-visible {
  outline:2px solid #D100FF;
  outline-offset:5px
}

.partner-tile details[open] summary {
  margin-bottom:26px
}

.partner-expanded {
  flex:1 0 100%;
  grid-column:1/-1;
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:38px;
  padding:38px!important;
  text-align:left
}

.partner-expanded .partner-logo-link {
  position:sticky;
  top:110px;
  align-self:start
}

.partner-expanded details {
  margin-top:0;
  min-width:0
}

.partner-description {
  max-width:720px;
  text-align:left;
  overflow-wrap:anywhere
}

.partner-description h2,.partner-description h3,.partner-description h4 {
  color:#F5F5F5!important;
  font-size:20px!important;
  line-height:1.4!important;
  margin:28px 0 12px!important;
  text-transform:none!important;
  letter-spacing:normal!important
}

.partner-description h3:first-child {
  margin-top:0!important;
  font-size:25px!important
}

.partner-tile .partner-description p {
  font-size:15px!important;
  line-height:1.85!important;
  margin:0 0 14px!important;
  color:#D9D9D9!important
}

.partner-description .post-spacer {
  height:12px
}

.partner-description strong {
  color:#F5F5F5
}

.partner-description blockquote {
  border-left:3px solid #A000F4;
  padding-left:18px;
  margin:20px 0;
  color:#D9D9D9
}

.partner-visit {
  display:inline-flex;
  margin-top:20px;
  padding:12px 20px;
  border-radius:12px;
  background:#A000F4;
  color:#F5F5F5!important;
  font-size:14px
}

.partner-visit:hover {
  background:#D100FF
}

@media(max-width:700px) {
  .partner-grid {
    grid-template-columns:repeat(auto-fit,minmax(200px,260px))!important;
    gap:24px!important
  }

  .partner-expanded {
    display:block;
    padding:24px!important
  }

  .partner-expanded .partner-logo-link {
    position:static;
    height:150px;
    margin-bottom:22px
  }

  .partner-description h3:first-child {
    font-size:21px!important
  }

}

/* Full brand visibility and a clearer entry to administration. */
.login {
  max-width:560px!important;
  padding:40px 44px!important;
  background:linear-gradient(145deg,#21132de8,#141018f5)!important;
  border:1px solid #B77AE830!important;
  box-shadow:0 30px 90px #0008!important;
  backdrop-filter:blur(18px)
}

.login .login-logo {
  width:240px!important;
  height:160px!important;
  object-fit:contain!important;
  padding:8px;
  box-sizing:border-box
}

.login h1 {
  font-size:30px!important;
  line-height:1.3!important
}

.login p {
  font-size:14px;
  line-height:1.8
}

.login-button {
  min-height:54px
}

#app .wordmark {
  gap:18px!important;
  overflow:visible!important
}

#app .wordmark img {
  width:120px!important;
  height:80px!important;
  object-fit:contain!important;
  flex-shrink:0
}

.music-hero {
  margin:-24px -24px 26px
}

.music-hero>img {
  display:block;
  width:100%;
  aspect-ratio:3/1;
  object-fit:contain;
  background:#141018;
  border-radius:20px 20px 0 0
}

.music-hero>div {
  padding:28px 26px 0
}

.music-setup-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin:28px 0
}

.music-setup-grid article {
  padding:26px;
  background:#A000F408;
  border:1px solid #B77AE824;
  border-radius:18px
}

.music-setup-grid p {
  line-height:1.8;
  font-size:14px;
  color:#D9D9D9
}

.music-setup-grid h3 {
  margin-top:14px
}

.music-setup-grid a {
  display:inline-flex;
  padding:12px 16px;
  border-radius:10px;
  color:#F5F5F5
}

.music-setup-grid code {
  overflow-wrap:anywhere
}

.music-setup .badge {
  margin-top:14px
}

@media(max-width:700px) {
  .login {
    padding:30px 24px!important;
    max-width:calc(100% - 40px)!important;
    box-sizing:border-box
  }

  .login .login-logo {
    max-width:100%
  }

  .login h1 {
    font-size:26px!important
  }

  .music-setup-grid {
    grid-template-columns:1fr
  }

  .music-hero {
    margin:0 0 22px
  }

  .music-hero>div {
    padding:22px 0 0
  }

  #app .wordmark img {
    width:90px!important;
    height:62px!important
  }

}

/* Keep the complete brand mark inside the administration header. */
body:has(.layout) header {
  height:96px!important;
  min-height:96px!important;
  align-items:center!important
}

body:has(.layout) .layout {
  min-height:calc(100vh - 96px)!important
}

body:has(.layout) .layout aside {
  height:calc(100vh - 96px)!important;
  max-height:calc(100vh - 96px)!important
}

@media(max-width:700px) {
  body:has(.layout) header {
    height:auto!important;
    min-height:82px!important;
    padding-block:10px!important
  }

  body:has(.layout) .layout aside {
    height:auto!important;
    max-height:none!important
  }

}

/* Community navigation and readable legal chapters. */
.ss-header .header-discord {
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:2px solid #a000f4!important;
  border-radius:999px;
  padding:15px 24px!important;
  white-space:nowrap;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#f5f5f5!important;
  background:#100c18!important
}

.header-discord::before {
  content:'➤';
  font-size:19px;
  transform:rotate(-25deg)
}

.external-navigation::after {
  content:'';
  display:inline-block;
  width:14px;
  height:14px;
  margin-left:7px;
  vertical-align:middle;
  background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7M21 3l-11 11M11 5H5v14h14v-6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat
}

.community-home .ss-header {
  position:relative!important;
  background:#0c0911!important;
  display:flex;
  gap:26px;
  flex-wrap:wrap!important;
  min-height:112px!important
}

.community-home .ss-nav {
  flex:1;
  justify-content:center;
  gap:clamp(16px,2vw,36px)!important
}

.community-home .reference-hero {
  padding-top:80px!important
}

.legal-page {
  max-width:1160px!important;
  margin:65px auto!important;
  padding:clamp(26px,5vw,72px)!important;
  background:#130e1b!important;
  border-radius:24px;
  border:1px solid #ffffff0c
}

.legal-page h1 {
  font-size:clamp(32px,4vw,52px);
  margin-bottom:40px
}

.ss-legal-content {
  max-width:960px;
  font-size:17px;
  line-height:1.9;
  color:#c4bfd0
}

.ss-legal-content p {
  white-space:pre-line;
  margin:0 0 30px
}

.ss-legal-content h2 {
  margin:42px 0 16px;
  font-size:24px;
  color:#f5f5f5
}

.membership-card {
  min-height:680px
}

.membership-card h2 {
  font-size:clamp(24px,2vw,32px)!important
}

.membership-card ul {
  line-height:1.9
}

@media(max-width:1100px) {
  .ss-header .header-discord {
    font-size:10px;
    padding:12px 16px!important
  }

  .community-home .ss-header {
    gap:16px
  }

  .community-home .ss-nav {
    order:3;
    flex-basis:100%
  }

}

@media(max-width:800px) {
  .community-home .reference-hero {
    padding-top:40px!important
  }

  .community-home .ss-header .header-discord {
    margin-left:auto
  }

  .ss-footer {
    gap:24px!important;
    flex-wrap:wrap
  }

}

.store-brand img.brand-logo {
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important
}

/* Community refresh: fixed navigation, own moving city image, logo-only partners. */
.community-home .ss-header {
  position:sticky!important;
  top:0;
  z-index:50;
  background:#0b0910f5!important;
  border-bottom:1px solid #ffffff0b!important;
  backdrop-filter:blur(18px)!important
}

.community-home .reference-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-top:0!important;
  min-height:720px!important;
  background-size:cover;
  background-position:center
}

.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  opacity:.75
}

.hero-video[hidden],.hero-video-toggle[hidden],.reference-partners[hidden] {
  display:none!important
}

.reference-hero::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(0deg,#0a080e 0%,#0a080e22 65%),linear-gradient(90deg,#0a080ed9,#0a080e35)
}

.community-home .reference-hero .ss-hero-content {
  position:relative;
  max-width:1100px;
  padding:100px 24px 130px!important;
  margin:auto
}

.hero-discord {
  display:inline-flex;
  margin-top:32px;
  padding:18px 34px;
  border-radius:999px;
  background:linear-gradient(120deg,#9c23ec,#d2328c);
  color:white;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  box-shadow:0 12px 50px #a000f426
}

.hero-video-toggle {
  position:absolute;
  right:24px;
  bottom:24px;
  background:#0c0911cc;
  border:1px solid #ffffff30;
  border-radius:999px;
  padding:10px 16px;
  color:#ded9e7;
  font:inherit;
  font-size:12px;
  cursor:pointer
}

.partner-tile {
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:12px!important
}

.partner-logo-link {
  height:200px!important
}

.partner-logo-link img {
  max-width:190px!important;
  max-height:170px!important;
  filter:drop-shadow(0 12px 25px #0006)
}

.partner-admin-preview {
  width:160px;
  height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#100c18;
  border:1px solid #ffffff18;
  border-radius:18px
}

.partner-admin-preview img {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:12px;
  box-sizing:border-box
}

.partner-admin-status {
  font-size:13px;
  color:#c4adf0
}

@media(max-width:800px) {
  .community-home .reference-hero {
    min-height:620px!important
  }

  .community-home .reference-hero .ss-hero-content {
    padding:65px 20px 100px!important
  }

  .hero-discord {
    font-size:12px;
    padding:16px 24px
  }

  .hero-video-toggle {
    right:16px;
    bottom:20px
  }

  .community-home .ss-header {
    min-height:90px!important
  }

}

/* Rounded partner cards and centered community identity. */
.community-home .reference-hero .ss-hero-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:900px;
  padding:65px 24px 110px!important
}

.hero-brand-logo {
  width:clamp(200px,25vw,350px);
  height:220px;
  object-fit:contain;
  filter:drop-shadow(0 12px 35px #a000f430);
  margin-bottom:20px
}

.community-home .reference-hero .reference-logo-title {
  font-size:clamp(30px,4vw,54px)!important;
  margin:0 0 24px!important
}

.community-home .reference-hero #home-intro {
  margin-inline:auto!important
}

.partner-grid {
  justify-content:center!important;
  gap:28px!important
}

.partner-tile {
  padding:0!important;
  max-width:280px!important;
  flex:0 1 280px!important
}

.partner-logo-link {
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  width:100%;
  height:280px!important;
  border-radius:38px!important;
  padding:35px!important;
  background:linear-gradient(145deg,#191020,#120d18)!important;
  border:1px solid #ffffff08;
  transition:transform .3s,box-shadow .3s,border-color .3s!important
}

.partner-logo-link img {
  border-radius:24px;
  opacity:.72;
  filter:grayscale(.65);
  transition:opacity .3s,filter .3s,transform .3s;
  max-width:100%!important;
  height:190px!important;
  max-height:190px!important
}

.partner-logo-link::before {
  content:'';
  position:absolute;
  inset:-80%;
  background:linear-gradient(115deg,transparent 40%,#ffffff15 50%,transparent 60%);
  transform:translateX(-65%) rotate(15deg);
  transition:transform .65s;
  pointer-events:none
}

.partner-logo-link:hover,.partner-logo-link:focus-visible {
  transform:translateY(-6px);
  border-color:#a78bfa65;
  box-shadow:0 15px 50px #a000f42b,0 0 26px #a78bfa15;
  outline:2px solid transparent
}

.partner-logo-link:hover img,.partner-logo-link:focus-visible img {
  opacity:1;
  filter:grayscale(0) drop-shadow(0 0 14px #a78bfa45);
  transform:scale(1.035)
}

.partner-logo-link:hover::before,.partner-logo-link:focus-visible::before {
  transform:translateX(65%) rotate(15deg)
}

@media(max-width:800px) {
  .hero-brand-logo {
    height:150px;
    margin-bottom:15px
  }

  .partner-tile {
    flex-basis:220px!important
  }

  .partner-logo-link {
    height:220px!important;
    border-radius:30px!important;
    padding:25px!important
  }

  .partner-logo-link img {
    height:160px!important
  }

  .community-home .reference-hero .ss-hero-content {
    padding:45px 20px 90px!important
  }

}

@media(prefers-reduced-motion:reduce) {
  .partner-logo-link,.partner-logo-link img,.partner-logo-link::before {
    transition:none!important
  }

  .partner-logo-link:hover,.partner-logo-link:focus-visible,.partner-logo-link:hover img,.partner-logo-link:focus-visible img {
    transform:none
  }

}

.header-discord::before {
  display:none
}

.header-discord.external-navigation::after {
  margin-left:0
}

/* One shared violet accent and complete logos in the admin header. */
#app .wordmark img {
  object-fit:contain!important;
  object-position:center;
  background:transparent!important;
  max-width:100%;
  padding:6px;
  box-sizing:border-box
}

#app .primary,#app .metric,.ss-nav a.active,.ss-nav a:hover,.community-home .reference-hero .eyebrow {
  --custom-accent:#A78BFA!important;
  color:#A78BFA!important
}

#app .primary {
  background:#7860b6!important;
  color:white!important;
  border-color:#A78BFA!important
}

.community-home .ss-nav a.active:after {
  background:#A78BFA!important
}

#app>header,#dashboard-nav {
  background:#0b0910!important
}

#app .layout,#app .content {
  background:#100c16!important
}

.login-backdrop {
  background:linear-gradient(#0b091099,#0b0910e8),url('/assets/css-city-20261012.png') center/cover!important
}

.community-home .reference-hero {
  background-image:linear-gradient(#0b091060,#0b0910b0),url('/assets/css-city-20261012.png')
}

.community-home .reference-hero::before {
  background:linear-gradient(0deg,#0b0910,#0b091000 60%)!important
}

.ss-nav a.active,.ss-nav a:hover,.community-home .ss-nav a.active,.community-home .ss-nav a:hover {
  color:#A78BFA!important
}

.header-discord {
  border-color:#A78BFA!important
}

.reference-story .story-rule,.section-heading:after {
  background:#A78BFA!important
}

/* Sponsor marks without a frame; color appears on hover or keyboard focus. */
.partner-logo-link {
  background:transparent!important;
  border:0!important;
  box-shadow:none!important
}

.partner-logo-link img {
  filter:grayscale(1)!important;
  opacity:.65
}

.partner-logo-link:hover,.partner-logo-link:focus-visible {
  background:transparent!important;
  box-shadow:none!important;
  border:0!important
}

.partner-logo-link:hover img,.partner-logo-link:focus-visible img {
  filter:grayscale(0) drop-shadow(0 0 14px #a78bfa35)!important;
  opacity:1
}

.partner-logo-link::before {
  display:none
}

.forum-account-form {
  max-width:600px;
  margin:20px auto 60px;
  padding:32px;
  border:1px solid #a78bfa20;
  border-radius:20px;
  background:#141018
}

.forum-account-form h2 {
  text-align:center
}

.forum-account-form label {
  display:block;
  margin:22px 0 8px
}

.forum-account-form input:not([type=checkbox]) {
  width:100%;
  box-sizing:border-box;
  padding:13px;
  background:#211a2b;
  border:1px solid #a78bfa30;
  color:white;
  border-radius:8px
}

.forum-account-form .primary {
  width:100%;
  margin-top:20px
}

.forum-password {
  display:flex;
  gap:10px
}

.forum-password input {
  min-width:0
}

.forum-account-form .terms-check {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap
}

.forum-account-list article {
  display:grid;
  gap:5px;
  padding:15px;
  border-bottom:1px solid #a78bfa20
}

.forum-account-list small {
  color:#b7adca
}

/* Central South Side: compact navigation and asymmetric city layout. */
.ss-header {
  min-height:72px!important;
  padding:10px clamp(18px,4vw,70px)!important;
  gap:24px!important
}

.ss-header .brand-logo {
  max-height:48px!important;
  width:90px!important
}

.ss-nav a {
  font-size:13px!important;
  letter-spacing:1px!important
}

.header-discord {
  padding:11px 20px!important;
  font-size:12px!important;
  border-width:1px!important;
  gap:10px
}

.header-discord:before {
  content:"";
  width:18px;
  height:18px;
  background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 2 9 15l-7-4 20-9Zm0 0-7 20-4-7' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat
}

.header-discord:after {
  display:none!important
}

.community-home .ss-hero {
  min-height:650px!important;
  align-items:center!important;
  background-position:65% center!important
}

.community-home .ss-hero-content {
  align-items:flex-start!important;
  text-align:left!important;
  margin:0!important;
  width:min(760px,75%)!important;
  padding:90px clamp(24px,7vw,110px)!important;
  box-sizing:content-box
}

.community-home .hero-brand-logo {
  width:180px!important;
  margin:0 0 22px!important
}

.community-home .reference-logo-title {
  font-size:clamp(42px,5vw,76px)!important;
  line-height:1.04!important;
  max-width:580px
}

.community-home .reference-intro {
  max-width:560px!important
}

.community-home .feature-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important
}

.community-home .feature-card {
  text-align:left!important;
  padding:32px!important;
  border-radius:18px!important
}

.community-home .start-grid {
  gap:0!important;
  border-top:1px solid #30263e;
  border-bottom:1px solid #30263e
}

.community-home .start-card {
  border:0!important;
  border-right:1px solid #30263e!important;
  border-radius:0!important;
  background:transparent!important
}

.community-home .role-card {
  border-radius:20px!important
}

.legal-body main {
  max-width:1100px;
  margin:auto
}

.legal-body h2 {
  margin-top:36px
}

.media-tabs {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:20px 0
}

.media-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px
}

.media-item {
  padding:18px;
  border:1px solid #30263e;
  border-radius:16px
}

.media-item img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px
}

.media-item h3 {
  margin:12px 0
}

.media-item small {
  color:#aaa
}

.media-links {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

@media(max-width:760px) {
  .community-home .ss-hero-content {
    width:auto!important;
    padding:65px 24px!important
  }

  .community-home .feature-grid {
    grid-template-columns:1fr!important
  }

  .community-home .start-grid {
    grid-template-columns:1fr!important
  }

  .ss-header {
    min-height:64px!important
  }

  .header-discord {
    padding:9px 13px!important
  }

}

body.community-home .ss-header {
  min-height:72px!important;
  flex-wrap:nowrap!important;
  height:auto!important
}

.header-discord::before {
  display:inline-block!important;
  flex:none;
  transform:none!important
}

.community-home .reference-hero {
  justify-content:flex-start!important
}

.community-home .reference-hero .ss-hero-content {
  padding:80px clamp(24px,7vw,110px)!important;
  max-width:640px!important;
  width:auto!important;
  align-items:flex-start!important;
  text-align:left!important
}

.community-home .reference-hero .reference-logo-title {
  font-size:clamp(42px,5vw,76px)!important
}

.community-home .reference-hero .hero-brand-logo {
  height:auto!important;
  max-height:135px!important
}

.community-home .reference-hero .reference-intro {
  margin:0!important
}

@media(max-width:760px) {
  body.community-home .ss-header {
    min-height:64px!important;
    flex-wrap:wrap!important
  }

  .community-home .reference-hero .ss-hero-content {
    padding:65px 24px!important
  }

  .community-home .reference-hero .reference-logo-title {
    font-size:42px!important
  }

}

.forum-emoji {
  display:inline-block;
  vertical-align:middle;
  object-fit:contain
}

body.community-home .reference-hero {
  padding:0!important
}

body.community-home .reference-hero .ss-hero-content {
  margin:0!important;
  margin-inline:0!important;
  width:min(640px,calc(100vw - 100px))!important;
  box-sizing:content-box!important
}

@media(max-width:760px) {
  body.community-home .reference-hero .ss-hero-content {
    width:auto!important;
    box-sizing:border-box!important
  }

}

.creator-profile {
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding:26px 0;
  border-bottom:1px solid #ffffff15
}

.creator-avatar {
  width:72px!important;
  height:72px!important;
  object-fit:cover;
  border-radius:50%!important;
  flex-shrink:0
}

.editor-record .creator-avatar {
  display:block;
  margin-bottom:12px
}

.creator-description {
  white-space:pre-line;
  line-height:1.65;
  max-width:760px;
  color:#c9c3d5;
  font-size:14px
}

.creator-profile h3 {
  margin:0
}

.creator-profile p {
  margin:8px 0
}

.legal-body .ss-legal-content p {
  font-size:17px!important;
  font-weight:400!important;
  line-height:1.9!important
}

.legal-body .ss-legal-content h2 {
  font-size:24px!important;
  font-weight:650!important;
  line-height:1.4!important
}