:root {
  color-scheme: dark;
  --orange: #ff4bd8;
  --cyan: #35d9f5;
  --violet: #9b63ff;
  --bg: #080a12;
  --panel: #111521;
  --muted: #9ca8bd;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  background:
    radial-gradient(ellipse at 12% 8rem, rgb(255 58 207 / 9%), transparent 34rem),
    radial-gradient(ellipse at 92% 18rem, rgb(35 203 255 / 8%), transparent 38rem),
    var(--bg);
  color: #edf2fb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}

header {
  background: rgb(8 10 18 / 88%);
  border-bottom-color: rgb(53 217 245 / 14%);
  backdrop-filter: blur(18px);
}

.nav {
  max-width: 1320px;
  gap: 18px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  color: #ff70df;
  font-size: 21px;
  letter-spacing: -.04em;
  text-shadow: 0 0 18px rgb(255 75 216 / 35%);
}

.menu > button,
.plain {
  border-radius: 9px;
  color: #d3d2db;
  font-size: 12px;
  letter-spacing: .025em;
  padding: 11px 10px;
  transition: background-color .18s ease, color .18s ease;
}

.menu > button:hover,
.plain:hover {
  background: rgb(53 217 245 / 9%);
  color: #78eaff;
}

.dropdown {
  background: #101520;
  border-color: rgb(53 217 245 / 24%);
  border-radius: 13px;
  box-shadow: 0 16px 38px rgb(0 0 0 / 42%), 0 0 20px rgb(53 217 245 / 6%);
}

.dropdown button {
  border-radius: 8px;
  transition: background-color .18s ease, color .18s ease;
}

.dropdown button:hover {
  background: rgb(255 75 216 / 10%);
  color: #ff86e4;
}

.primary,
.secondary {
  border-radius: 10px;
  font-weight: 650;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.primary {
  background: linear-gradient(110deg, #ff4bd8, #a15cff 56%, #35d9f5);
  box-shadow: 0 6px 22px rgb(255 75 216 / 24%), 0 0 16px rgb(53 217 245 / 12%);
  color: #100d18;
}

.primary:hover {
  background: linear-gradient(110deg, #ff75e2, #b578ff 56%, #6ce8fb);
  box-shadow: 0 8px 26px rgb(255 75 216 / 32%), 0 0 20px rgb(53 217 245 / 20%);
  filter: none;
  transform: translateY(-1px);
}

.secondary {
  background: #141a27;
  border: 1px solid rgb(53 217 245 / 20%);
  color: #d8e6f4;
}

.secondary:hover {
  background: #182332;
  border-color: rgb(53 217 245 / 58%);
  box-shadow: 0 0 18px rgb(53 217 245 / 10%);
  transform: translateY(-1px);
}

.hero {
  isolation: isolate;
  min-height: 650px;
  background:
    radial-gradient(ellipse at 78% 42%, rgb(116 45 169 / 24%), transparent 36rem),
    radial-gradient(ellipse at 12% 95%, rgb(0 172 214 / 9%), transparent 34rem),
    linear-gradient(180deg, #10131d, #080a12 88%);
  overflow: hidden;
  position: relative;
}

.hero::before {
  background-image:
    linear-gradient(rgb(53 217 245 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(53 217 245 / 7%) 1px, transparent 1px);
  background-size: 52px 52px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(110deg, transparent 7%, #000 45%, transparent 100%);
  opacity: .42;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.hero-background-media {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: -2;
}

.hero-background-media video,
.hero-background-media iframe {
  border: 0;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.hero-background-media iframe {
  height: max(100vh, 56.25vw);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, 177.78vh);
}

.hero-background-media > span {
  background: linear-gradient(90deg, rgb(8 10 18 / 80%), rgb(8 10 18 / 48%) 58%, rgb(8 10 18 / 58%));
  inset: 0;
  position: absolute;
}

.hero-inner {
  max-width: 1320px;
  gap: clamp(32px, 6vw, 82px);
  padding-top: 88px;
  padding-bottom: 88px;
  position: relative;
}

.eyebrow {
  background: rgb(10 15 24 / 78%);
  border: 1px solid rgb(53 217 245 / 26%);
  box-shadow: 0 0 22px rgb(53 217 245 / 8%);
  color: #d4e5f1;
}

h1 {
  font-size: clamp(42px, 5.2vw, 72px);
  font-weight: 780;
  letter-spacing: -.055em;
  line-height: 1.06;
  text-wrap: balance;
}

h1 span {
  background: linear-gradient(90deg, #ff69dc, #b277ff 55%, #55e5fb);
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 28px rgb(255 75 216 / 15%);
}

p {
  color: #aeb8c9;
}

.feature,
.panel {
  background: linear-gradient(145deg, rgb(20 25 37 / 96%), rgb(13 17 27 / 98%));
  border: 1px solid rgb(121 103 179 / 20%);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgb(0 0 0 / 26%);
}

.feature h3 {
  color: #ff73df;
}

.video {
  background:
    linear-gradient(135deg, rgb(255 75 216 / 12%), transparent 50%),
    radial-gradient(ellipse at 70% 20%, rgb(53 217 245 / 17%), transparent 60%),
    #111a28;
}

.mini > div {
  background: #151c2a;
}

.wrap {
  max-width: 1320px;
  padding-top: 76px;
  padding-bottom: 76px;
}

.section-title {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 720;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.grid {
  gap: 20px;
}

.field {
  color: #d7d6df;
}

.field:has(input:required, textarea:required, select:required)::before {
  color: #ff70df;
  content: "* ";
  font-weight: 800;
}

.required-hint {
  color: var(--muted);
  font-size: 13px;
  margin: 8px 0 14px;
}

.required-hint span {
  color: #ff70df;
  font-weight: 800;
}

.field input,
.field textarea,
.field select {
  background: #0c111b;
  border: 1px solid #303a4d;
  border-radius: 10px;
  color: #eff5ff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #35d9f5;
  box-shadow: 0 0 0 3px rgb(53 217 245 / 13%), 0 0 18px rgb(53 217 245 / 8%);
  outline: none;
}

.field select {
  display: block;
  margin-top: 7px;
  padding: 12px;
  width: 100%;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #57e6fb;
  outline-offset: 3px;
}

.cms-nav button {
  background: #151b28;
  border-color: rgb(53 217 245 / 20%);
  border-radius: 9px;
  min-height: 40px;
  transition: background-color .18s ease, border-color .18s ease;
}

.cms-nav button:hover {
  background: #202034;
  border-color: rgb(255 75 216 / 48%);
}

.cms-nav button:focus {
  background: linear-gradient(110deg, rgb(255 75 216 / 17%), rgb(53 217 245 / 12%));
  border-color: rgb(255 75 216 / 58%);
  box-shadow: 0 0 16px rgb(255 75 216 / 10%);
}

.ddt-dashboard {
  box-shadow: 0 18px 45px rgb(0 0 0 / 28%), 0 0 30px rgb(255 75 216 / 5%);
}

.ddt-dashboard h3 {
  color: #fff3fc;
  letter-spacing: -.025em;
}

.ddt-dashboard p {
  max-width: 65ch;
}

.ddt-stats div {
  border: 1px solid rgb(53 217 245 / 10%);
  border-radius: 12px;
}

.ddt-stats strong {
  text-shadow: 0 0 14px rgb(53 217 245 / 24%);
}

#cmsArea > .panel {
  margin-bottom: 16px;
}

#cmsArea .cms-list {
  gap: 8px;
  margin-top: 18px;
}

#cmsArea .cms-actions {
  align-items: center;
  background: rgb(7 11 19 / 55%);
  border: 1px solid rgb(53 217 245 / 10%);
  border-radius: 11px;
  margin: 0;
  padding: 10px 12px;
}

#cmsArea .cms-actions strong {
  color: #e4e9f4;
  flex: 1 1 220px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

#cmsArea .cms-actions button {
  margin-top: 0;
  min-height: 38px;
}

#cmsArea .cms-editor {
  border-color: rgb(53 217 245 / 17%);
}

#cmsArea .ddt-preview {
  background: rgb(7 11 19 / 55%);
}

#cmsArea .ddt-preview strong {
  color: #67e4f8;
}

.page-intro {
  border-left: 3px solid var(--cyan);
  margin-bottom: 20px;
}

.page-intro p,
.content-card p,
.member-card p,
.birthday-card p {
  margin-bottom: 0;
}

.content-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.content-card h3,
.member-card h3,
.birthday-card h3,
.law-category h3 {
  color: #f3edff;
  letter-spacing: -.02em;
}

.member-grid,
.birthday-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.member-card,
.birthday-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

.member-mark,
.birthday-date {
  color: var(--cyan);
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 8px;
  text-shadow: 0 0 14px rgb(53 217 245 / 22%);
}

.empty-state {
  border-color: rgb(53 217 245 / 15%);
}

.empty-state h3 {
  color: #f3edff;
}

.birthday-settings {
  margin-top: 20px;
  max-width: 760px;
}

.birthday-fields {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 320px;
}

.birthday-share {
  align-items: center;
  color: #d7ddea;
  display: flex;
  gap: 10px;
  margin: 16px 0;
}

.birthday-share input {
  accent-color: var(--orange);
  height: 18px;
  width: 18px;
}

.law-groups,
.law-admin-groups {
  display: grid;
  gap: 16px;
}

.law-category {
  border-color: rgb(53 217 245 / 15%);
}

.law-list {
  display: grid;
  gap: 10px;
}

.law-entry,
.law-admin-entry {
  background: rgb(7 11 19 / 55%);
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: 11px;
  padding: 14px 16px;
}

.law-entry h4,
.law-admin-entry h4 {
  color: #f0e9ff;
  margin: 0 0 6px;
}

.law-entry p,
.law-admin-entry p {
  margin: 0;
  white-space: pre-line;
}

.law-penalty {
  color: #b9c9d9;
  margin-top: 10px !important;
}

.law-empty {
  color: var(--muted);
  margin: 0;
}

.law-admin {
  border-color: rgb(255 75 216 / 24%);
}

.law-admin-heading p {
  margin-top: 0;
}

.law-category-create {
  align-items: end;
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  max-width: 700px;
}

.law-category-create .field {
  flex: 1;
  margin-bottom: 0;
}

.law-admin-category {
  background: rgb(7 11 19 / 42%);
  border: 1px solid rgb(53 217 245 / 12%);
  border-radius: 14px;
  padding: 16px;
}

.law-admin-category-heading {
  align-items: end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.law-category-rename {
  align-items: end;
  display: flex;
  flex: 1;
  gap: 10px;
  max-width: 640px;
}

.law-category-rename .field {
  flex: 1;
  margin-bottom: 0;
}

.law-admin-entries {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.law-admin-entry {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-width: 0;
}

.law-admin-entry > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.law-admin-entry small {
  color: var(--cyan);
  display: inline-block;
  margin-top: 8px;
}

.law-entry-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.law-entry-actions button {
  margin-top: 0;
}

.law-add-entry {
  border-top: 1px solid rgb(255 255 255 / 7%);
  padding-top: 12px;
}

.law-add-entry summary {
  color: var(--cyan);
  cursor: pointer;
  font-weight: 650;
  padding: 8px 0;
  width: fit-content;
}

.law-entry-form {
  margin-top: 12px;
  max-width: 680px;
}

.law-entry-form .secondary {
  margin-left: 8px;
}

.page-admin-action {
  margin-top: 18px;
}

.rich-content > p {
  margin: 0 0 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.media-frame {
  aspect-ratio: 16 / 9;
  background: #070a10;
  border: 1px solid rgb(53 217 245 / 16%);
  border-radius: 12px;
  margin: 14px 0;
  overflow: hidden;
  width: min(100%, 900px);
}

.media-frame img,
.media-frame video,
.media-frame iframe {
  border: 0;
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.media-frame iframe {
  background: #000;
}

.feature .video > .media-frame {
  aspect-ratio: auto;
  border: 0;
  height: 100%;
  margin: 0;
  width: 100%;
}

.feature .video > p {
  padding: 18px;
}

.news-card {
  margin-bottom: 16px;
}

.news-card h3 {
  color: #f3edff;
}

.community-upload {
  margin-bottom: 20px;
}

.community-gallery {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.community-clip {
  min-width: 0;
  overflow-wrap: anywhere;
}

.community-preview {
  aspect-ratio: 16 / 9;
  background: #070a10;
  border: 1px solid rgb(53 217 245 / 16%);
  border-radius: 10px;
  display: block;
  object-fit: contain;
  width: 100%;
}

.community-clip > p {
  margin: 12px 0 0;
}

.community-clip > p strong {
  color: #f3edff;
}

.community-clip .field {
  margin: 10px 0;
}

.media-upload-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 24px;
}

.media-upload-form .field {
  flex: 1 1 300px;
  margin: 0;
}

.media-upload-form button {
  margin: 0;
}

.media-library {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.media-item {
  min-width: 0;
  padding: 14px;
}

.media-thumbnail {
  aspect-ratio: 16 / 9;
  background: #070a10;
  border: 1px solid rgb(53 217 245 / 16%);
  border-radius: 10px;
  display: block;
  object-fit: contain;
  width: 100%;
}

.media-item .field {
  margin: 12px 0 8px;
}

.media-item .field input {
  font-size: 12px;
}

.media-actions {
  display: flex;
  gap: 8px;
}

.media-actions button {
  margin: 0;
}

.role-badge {
  border: 1px solid rgb(53 217 245 / 30%);
  border-radius: 999px;
  color: var(--cyan);
  display: inline-block;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  margin-top: 12px;
  padding: 5px 10px;
}

.access-admin > p {
  max-width: 70ch;
}

.access-users {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  margin-top: 18px;
}

.access-user {
  min-width: 0;
  overflow-wrap: anywhere;
}

.access-user h4 {
  align-items: center;
  color: #f3edff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.access-user > p {
  font-size: 13px;
}

.access-user .role-badge {
  margin: 0;
}

.access-user .field {
  margin-bottom: 10px;
}

.access-feedback {
  min-height: 1.5em;
  margin-bottom: 0;
}

.discord-coming-soon {
  border-top: 1px solid rgb(255 255 255 / 8%);
  margin-top: 22px;
  padding-top: 18px;
}

.discord-coming-soon button {
  align-items: center;
  background: #222631;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 10px;
  color: #b7bdca;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  opacity: .8;
  padding: 12px 14px;
  width: 100%;
}

.discord-coming-soon button span {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.discord-coming-soon p {
  font-size: 13px;
  margin-bottom: 0;
}

.ddt-dashboard {
  background: linear-gradient(135deg, #21152b, #121a27 72%);
  border-color: rgb(255 75 216 / 32%);
}

.ddt-stats div {
  background: rgb(53 217 245 / 5%);
}

.ddt-stats strong {
  color: #5ae6fb;
  font-variant-numeric: tabular-nums;
}

.notice {
  color: #69e2f5;
}

footer {
  border-top-color: rgb(53 217 245 / 12%);
  color: #90919d;
}

a {
  color: #ff73df;
}

a:hover {
  color: #62e5f7;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .nav {
    gap: 10px;
  }

  .brand {
    font-size: 18px;
  }

  .links {
    gap: 0;
  }

  .menu > button,
  .plain {
    padding-right: 7px;
    padding-left: 7px;
    white-space: nowrap;
  }

  .nav > button {
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  .nav {
    gap: 8px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .links {
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-color: #3b3155 transparent;
    scrollbar-width: thin;
  }

  .links .menu > button,
  .links > .plain {
    white-space: nowrap;
  }

  .hero-inner {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

@media (max-width: 550px) {
  .nav {
    gap: 8px;
  }

  .ddt-dashboard {
    padding: 18px;
  }

  .cms-nav {
    gap: 7px;
  }

  .cms-nav button {
    flex: 1 1 auto;
  }

  #cmsArea .cms-actions {
    align-items: stretch;
  }

  #cmsArea .cms-actions strong {
    flex-basis: 100%;
  }

  .law-category-create,
  .law-admin-category-heading,
  .law-category-rename {
    align-items: stretch;
    flex-direction: column;
  }

  .law-admin-entry {
    align-items: stretch;
    flex-direction: column;
  }

  .media-upload-form {
    align-items: stretch;
    flex-direction: column;
  }

  .law-entry-actions {
    justify-content: flex-start;
  }

  .brand {
    font-size: 18px;
  }

  .hero-inner {
    padding: 50px 20px;
  }

  .feature,
  .panel {
    border-radius: 15px;
    padding: 20px;
  }

  .wrap {
    padding-top: 54px;
    padding-bottom: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

}

/* Danish Town staff and recruitment */
.staff-hero{text-align:center;padding:38px 12px 18px}.staff-kicker{color:#02e5fd;letter-spacing:3px;font-size:12px;font-weight:800}.staff-hero h2{font-size:clamp(32px,5vw,64px);margin:14px 0;font-weight:900}.staff-hero h2 span{background:linear-gradient(90deg,#fb19fc,#02e5fd);-webkit-background-clip:text;background-clip:text;color:transparent}.staff-hero p,.staff-recruit p{color:#b9b6c4}.staff-recruit{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(110deg,#2b1938,#1c1e27);padding:32px;border-radius:20px;margin:20px 0 44px;border:1px solid #53305f}.staff-recruit small{color:#02e5fd;font-weight:800;letter-spacing:2px}.staff-recruit h3{font-size:clamp(22px,3vw,32px);margin:12px 0}.staff-recruit .primary{white-space:nowrap}.staff-group{margin:30px 0}.staff-group h3{border-left:4px solid #fb19fc;padding-left:12px}.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.staff-person{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 12px;border-radius:20px;background:linear-gradient(160deg,#252634,#17171e);border:1px solid #383045;text-align:center}.staff-person span{color:#02e5fd;font-size:13px}.staff-avatar{width:104px;height:104px;border-radius:50%;border:3px solid #fb19fc;display:grid;place-items:center;font-size:44px;overflow:hidden;background:#101017}.staff-avatar img{width:100%;height:100%;object-fit:cover}.staff-admin-line{display:flex;justify-content:space-between;align-items:center;gap:15px}.staff-admin-line p{margin:5px 0}@media(max-width:650px){.staff-recruit,.staff-admin-line{flex-direction:column;align-items:stretch}.staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.staff-editor {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.staff-editor .field {
  margin: 0;
}

.staff-editor .required-hint,
.staff-editor .staff-form-actions,
.staff-editor > [aria-live] {
  grid-column: 1 / -1;
}

.staff-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.staff-admin-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.staff-application-card > p {
  overflow-wrap: anywhere;
}

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

.portal-profile,
.portal-admin-layout {
  animation: portal-fade-in .2s ease both;
}

.portal-profile {
  display: grid;
  gap: 22px;
}

.portal-profile-header,
.portal-admin-summary {
  align-items: center;
  background:
    radial-gradient(ellipse at 85% 20%, rgb(91 145 255 / 13%), transparent 36rem),
    linear-gradient(140deg, #121827, #111521 72%);
  border: 1px solid rgb(156 104 245 / 25%);
  border-radius: 20px;
  display: flex;
  gap: 22px;
  padding: clamp(20px, 4vw, 36px);
}

.portal-profile-avatar {
  align-items: center;
  background: linear-gradient(145deg, #f04bd8, #5b91ff);
  border: 3px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  box-shadow: 0 0 30px rgb(156 104 245 / 18%);
  color: #fff;
  display: flex;
  flex: 0 0 76px;
  font-size: 30px;
  font-weight: 800;
  height: 76px;
  justify-content: center;
}

.portal-profile-identity {
  flex: 1;
  min-width: 0;
}

.portal-eyebrow {
  color: #83aaff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  margin: 0 0 5px;
}

.portal-profile-identity h1,
.portal-panel-heading h2 {
  margin: 0;
}

.portal-profile-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 10px 18px;
  margin-top: 10px;
}

.portal-status {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 7px;
  white-space: nowrap;
}

.portal-status i,
.portal-online-indicator {
  background: #6b7280;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.portal-status.is-online,
.portal-online-indicator.is-online {
  color: #79e1ad;
}

.portal-status.is-online i,
.portal-online-indicator.is-online {
  background: #35cf87;
  box-shadow: 0 0 10px rgb(53 207 135 / 38%);
}

.portal-stat-grid,
.portal-admin-stats,
.portal-detail-stats,
.portal-playtime-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.portal-stat-card {
  align-items: flex-start;
  background: linear-gradient(145deg, rgb(29 35 52 / 96%), rgb(17 21 33 / 98%));
  border: 1px solid rgb(156 104 245 / 21%);
  border-radius: 15px;
  display: flex;
  gap: 13px;
  min-height: 108px;
  padding: 18px;
  transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}

.portal-stat-card:hover {
  border-color: rgb(131 170 255 / 55%);
  transform: translateY(-2px);
}

.portal-stat-card > div {
  min-width: 0;
}

.portal-stat-card p {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 3px;
}

.portal-stat-card strong {
  color: #f5f7ff;
  display: block;
  font-size: clamp(16px, 2vw, 21px);
  overflow-wrap: anywhere;
}

.portal-stat-card small {
  color: #8792a8;
  display: block;
  font-size: 11px;
  margin-top: 3px;
}

.portal-stat-icon {
  align-items: center;
  background: rgb(91 145 255 / 12%);
  border: 1px solid rgb(91 145 255 / 24%);
  border-radius: 10px;
  color: #83aaff;
  display: inline-flex;
  flex: 0 0 36px;
  font-size: 18px;
  height: 36px;
  justify-content: center;
}

.portal-profile-tabs {
  border-bottom: 1px solid rgb(156 104 245 / 23%);
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.portal-profile-tabs button {
  background: transparent;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 13px;
  padding: 12px 15px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.portal-profile-tabs button:hover,
.portal-profile-tabs button.is-active {
  background: rgb(91 145 255 / 8%);
  border-bottom-color: #83aaff;
  color: #fff;
}

.portal-profile-panel {
  animation: portal-fade-in .18s ease both;
  min-width: 0;
}

.portal-profile-panel[hidden] {
  display: none;
}

.portal-panel-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin: 10px 0 18px;
}

.portal-panel-heading h2 {
  font-size: 23px;
}

.portal-overview-grid,
.portal-server-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.portal-inner-panel,
.portal-server-card {
  background: rgb(18 23 37 / 80%);
  border: 1px solid rgb(156 104 245 / 20%);
  border-radius: 15px;
  padding: 20px;
}

.portal-inner-panel h3,
.portal-server-card h3 {
  margin: 0 0 8px;
}

.portal-inner-panel p:last-child {
  margin-bottom: 0;
}

.portal-existing-account {
  border-top: 1px solid rgb(156 104 245 / 20%);
  margin-top: 20px;
  padding-top: 14px;
}

.portal-existing-account > h2 {
  color: #cbd4e4;
  font-size: 16px;
}

.portal-original-profile {
  display: grid;
  gap: 12px;
}

.portal-original-profile .panel {
  margin: 0;
}

.portal-character-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
}

.portal-character-card {
  align-items: flex-start;
  background: linear-gradient(145deg, #1d2334, #141a29);
  border: 1px solid rgb(156 104 245 / 26%);
  border-radius: 15px;
  color: #f3f6fc;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 172px;
  padding: 17px;
  text-align: left;
  transition: border-color .18s ease, transform .18s ease;
  width: 100%;
}

.portal-character-card:hover,
.portal-character-card[aria-expanded="true"] {
  border-color: rgb(131 170 255 / 68%);
  transform: translateY(-2px);
}

.portal-character-topline {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.portal-character-avatar {
  align-items: center;
  background: linear-gradient(135deg, #6d47b7, #377ac0);
  border-radius: 11px;
  color: #fff;
  display: flex;
  font-size: 17px;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.portal-character-card > span:not(.portal-character-topline) {
  color: var(--muted);
  font-size: 12px;
}

.portal-character-card .portal-character-time {
  color: #d7dded !important;
  font-weight: 700;
}

.portal-character-card small {
  color: #8994a9;
}

.portal-character-details {
  border-top: 1px solid rgb(156 104 245 / 20%);
  padding-top: 8px;
  width: 100%;
}

.portal-empty-state {
  background: rgb(18 23 37 / 70%);
  border: 1px dashed rgb(131 170 255 / 30%);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
}

.portal-empty-state > span {
  color: #83aaff;
  font-size: 26px;
}

.portal-empty-state h3 {
  margin: 6px 0;
}

.portal-muted {
  color: var(--muted);
  font-size: 13px;
}

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

.portal-edit-form .field input,
.portal-server-edit .field input,
.portal-server-create .field input,
.portal-table-tools input,
.portal-table-tools select {
  background: #0e1320;
  border: 1px solid rgb(131 170 255 / 22%);
  border-radius: 9px;
  color: #f4f6fb;
  min-height: 42px;
  padding: 10px 12px;
  width: 100%;
}

.portal-link-code-result {
  overflow-wrap: anywhere;
}

.portal-link-code-result code,
.portal-secret-reveal code {
  background: #0a101d;
  border: 1px solid rgb(131 170 255 / 30%);
  border-radius: 7px;
  color: #a9c5ff;
  display: inline-block;
  padding: 6px 9px;
}

.portal-linked-server {
  align-items: center;
  border-top: 1px solid rgb(156 104 245 / 20%);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
}

.portal-form-feedback,
.portal-inline-error {
  color: #ff9aab;
  margin: 8px 0 0;
}

.portal-form-feedback.is-success {
  color: #79e1ad;
}

.portal-form-feedback.is-error,
.portal-inline-error {
  color: #ff9aab;
}

.portal-admin-root .section-title {
  margin-bottom: 16px;
}

.portal-admin-summary {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.portal-admin-summary > h3 {
  font-size: 23px;
  margin: 0;
}

.portal-admin-summary > p {
  margin: 0;
}

.portal-admin-summary .ddt-stats {
  width: 100%;
}

.portal-admin-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
}

.portal-admin-sidebar {
  align-content: start;
  background: linear-gradient(160deg, #151b2a, #101522);
  border: 1px solid rgb(156 104 245 / 21%);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  position: sticky;
  top: 90px;
}

.portal-admin-sidebar button {
  background: transparent;
  border-radius: 9px;
  color: #aab4c7;
  padding: 11px 12px;
  text-align: left;
  transition: background-color .18s ease, color .18s ease;
}

.portal-admin-sidebar button:hover,
.portal-admin-sidebar button.is-active {
  background: linear-gradient(110deg, rgb(240 75 216 / 13%), rgb(91 145 255 / 12%));
  color: #f5f7fb;
}

.portal-admin-sidebar button.is-active {
  box-shadow: inset 2px 0 #83aaff;
}

.portal-admin-content {
  min-width: 0;
}

.portal-admin-panel {
  animation: portal-fade-in .18s ease both;
  background: rgb(17 21 33 / 65%);
  border: 1px solid rgb(156 104 245 / 18%);
  border-radius: 16px;
  min-width: 0;
  padding: clamp(16px, 3vw, 24px);
}

.portal-admin-stats {
  margin-bottom: 24px;
}

.portal-server-card {
  min-width: 0;
}

.portal-server-card > div:first-child {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.portal-server-card p,
.portal-server-card small {
  color: var(--muted);
  font-size: 12px;
  margin: 7px 0 0;
  overflow-wrap: anywhere;
}

.portal-server-create {
  margin-bottom: 18px;
}

.portal-server-edit {
  border-top: 1px solid rgb(156 104 245 / 19%);
  margin-top: 14px;
  padding-top: 10px;
}

.portal-button-row,
.portal-pagination,
.portal-table-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.portal-button-row button,
.portal-pagination button,
.portal-secret-reveal button {
  padding: 10px 13px;
}

.portal-secret-reveal {
  background: rgb(36 57 43 / 42%);
  border: 1px solid rgb(53 207 135 / 36%);
  border-radius: 13px;
  margin: 14px 0;
  overflow-wrap: anywhere;
  padding: 16px;
}

.portal-secret-reveal textarea {
  background: #0d1420;
  border: 1px solid rgb(131 170 255 / 24%);
  border-radius: 8px;
  color: #b7ceff;
  display: block;
  margin-top: 7px;
  padding: 10px;
  resize: vertical;
  width: 100%;
}

.portal-table-tools {
  align-items: end;
  margin: 12px 0;
}

.portal-table-tools label {
  color: var(--muted);
  flex: 1 1 160px;
  font-size: 12px;
}

.portal-table-wrap {
  border: 1px solid rgb(156 104 245 / 18%);
  border-radius: 12px;
  overflow-x: auto;
}

.portal-table {
  border-collapse: collapse;
  min-width: 790px;
  width: 100%;
}

.portal-table th,
.portal-table td {
  border-bottom: 1px solid rgb(156 104 245 / 14%);
  padding: 12px;
  text-align: left;
  vertical-align: middle;
}

.portal-table th {
  background: rgb(91 145 255 / 7%);
  color: #cdd7ea;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.portal-table td {
  color: #cbd2e0;
  font-size: 12px;
}

.portal-table td strong,
.portal-table td small {
  display: block;
}

.portal-table td small {
  color: var(--muted);
  margin-top: 3px;
}

.portal-table tbody tr:hover {
  background: rgb(91 145 255 / 5%);
}

.portal-pagination {
  justify-content: flex-end;
  margin-top: 14px;
}

.portal-event-list {
  display: grid;
}

.portal-event-list > div {
  align-items: center;
  border-bottom: 1px solid rgb(156 104 245 / 15%);
  color: #ccd4e4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  padding: 11px 0;
}

.portal-event-list time {
  color: var(--muted);
  font-size: 12px;
}

.portal-loading-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.portal-profile-loading {
  display: grid;
  gap: 14px;
}

.portal-profile-loading .portal-profile-header {
  min-height: 150px;
}

.portal-skeleton {
  animation: portal-shimmer 1.4s linear infinite;
  background: linear-gradient(100deg, #171d2a 30%, #252d3e 48%, #171d2a 66%);
  background-size: 220% 100%;
  border-color: rgb(156 104 245 / 12%);
  min-height: 94px;
}

.portal-toast-region {
  bottom: 20px;
  display: grid;
  gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
  position: fixed;
  right: 16px;
  z-index: 1000;
}

.portal-toast {
  animation: portal-toast-in .18s ease both;
  background: #151d2b;
  border: 1px solid rgb(131 170 255 / 38%);
  border-radius: 11px;
  box-shadow: 0 12px 28px rgb(0 0 0 / 28%);
  color: #f3f6fc;
  padding: 12px 15px;
}

.portal-toast-error {
  border-color: rgb(255 120 145 / 55%);
}

@keyframes portal-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes portal-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes portal-shimmer {
  to { background-position: -220% 0; }
}

@media (max-width: 850px) {
  .portal-admin-layout {
    grid-template-columns: 1fr;
  }

  .portal-admin-sidebar {
    flex-direction: row;
    overflow-x: auto;
    position: static;
    white-space: nowrap;
  }

  .portal-admin-sidebar button {
    flex: 0 0 auto;
  }
}

@media (max-width: 620px) {
  .portal-profile-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .portal-edit-profile {
    align-self: stretch;
  }

  .portal-form-grid {
    grid-template-columns: 1fr;
  }

  .portal-button-row > button {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-profile,
  .portal-admin-layout,
  .portal-profile-panel,
  .portal-admin-panel,
  .portal-toast,
  .portal-skeleton {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .portal-stat-card:hover,
  .portal-character-card:hover {
    transform: none;
  }
}

:root {
  --orange: #f04bd8;
  --violet: #9c68f5;
  --cyan: #5b91ff;
  --bg: #090a12;
  --panel: #111421;
}

body {
  background:
    radial-gradient(ellipse at 12% 8rem, rgb(240 75 216 / 9%), transparent 34rem),
    radial-gradient(ellipse at 92% 18rem, rgb(91 145 255 / 10%), transparent 38rem),
    var(--bg);
}

header {
  background: rgb(9 10 18 / 93%);
  border-bottom-color: rgb(91 145 255 / 22%);
}

.brand {
  background: linear-gradient(90deg, #f04bd8 0%, #9c68f5 54%, #5b91ff 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.menu > button:hover,
.plain:hover {
  background: rgb(91 145 255 / 9%);
  color: #8eb3ff;
}

.dropdown {
  border-color: rgb(91 145 255 / 28%);
  box-shadow: 0 16px 38px rgb(0 0 0 / 42%), 0 0 20px rgb(91 145 255 / 8%);
}

.dropdown button:hover {
  background: rgb(240 75 216 / 10%);
  color: #ff8be7;
}

.primary {
  background: linear-gradient(110deg, #f04bd8 0%, #9c68f5 54%, #5b91ff 100%);
  box-shadow: 0 6px 22px rgb(240 75 216 / 22%), 0 0 18px rgb(91 145 255 / 12%);
}

.primary:hover {
  background: linear-gradient(110deg, #ff73e5 0%, #b184ff 54%, #83adff 100%);
  box-shadow: 0 8px 26px rgb(240 75 216 / 28%), 0 0 22px rgb(91 145 255 / 20%);
}

.secondary,
.cms-nav button {
  border-color: rgb(91 145 255 / 25%);
}

.secondary:hover {
  border-color: rgb(91 145 255 / 62%);
  box-shadow: 0 0 18px rgb(91 145 255 / 12%);
}

.hero {
  background:
    radial-gradient(ellipse at 78% 42%, rgb(156 104 245 / 22%), transparent 36rem),
    radial-gradient(ellipse at 12% 95%, rgb(91 145 255 / 11%), transparent 34rem),
    linear-gradient(180deg, #111321, #090a12 88%);
}

.hero::before {
  background-image:
    linear-gradient(rgb(91 145 255 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(91 145 255 / 8%) 1px, transparent 1px);
}

.hero-background-media > span {
  background: linear-gradient(90deg, rgb(9 10 18 / 82%), rgb(9 10 18 / 48%) 58%, rgb(9 10 18 / 62%));
}

h1 span,
.staff-hero h2 span {
  background: linear-gradient(90deg, #f04bd8 0%, #9c68f5 54%, #5b91ff 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero h1 {
  background: linear-gradient(90deg, #f04bd8 0%, #a66af5 48%, #5b91ff 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 28px rgb(156 104 245 / 16%);
}

::selection {
  background: rgb(91 145 255 / 60%);
  color: #fff;
}

.feature,
.panel {
  background: linear-gradient(145deg, rgb(20 23 38 / 97%), rgb(13 16 28 / 99%));
  border-color: rgb(91 145 255 / 20%);
}

.feature h3,
.staff-kicker,
.staff-recruit small,
.member-mark,
.birthday-date,
.law-admin-entry small,
.law-add-entry summary {
  color: #83aaff;
}

.video {
  background:
    linear-gradient(135deg, rgb(240 75 216 / 13%), transparent 50%),
    radial-gradient(ellipse at 70% 20%, rgb(91 145 255 / 20%), transparent 60%),
    #111522;
}

.stat {
  border-left-color: #9c68f5;
}

.field:has(input:required, textarea:required, select:required)::before,
.required-hint span {
  color: #ff73e5;
}

.field input,
.field textarea,
.field select {
  border-color: #30394f;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #6b9bff;
  box-shadow: 0 0 0 3px rgb(91 145 255 / 14%), 0 0 18px rgb(91 145 255 / 9%);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: #79a4ff;
}

.cms-nav button:hover,
.cms-nav button:focus {
  background: linear-gradient(110deg, rgb(240 75 216 / 15%), rgb(91 145 255 / 14%));
  border-color: rgb(156 104 245 / 58%);
}

.ddt-dashboard,
.staff-recruit {
  background: linear-gradient(120deg, rgb(39 24 53 / 96%), rgb(17 24 41 / 98%));
  border-color: rgb(156 104 245 / 32%);
}

.ddt-stats div {
  background: rgb(91 145 255 / 7%);
  border-color: rgb(91 145 255 / 17%);
}

.ddt-stats strong {
  color: #83aaff;
  text-shadow: 0 0 14px rgb(91 145 255 / 26%);
}

#cmsArea .cms-actions,
#cmsArea .cms-editor {
  border-color: rgb(91 145 255 / 20%);
}

#cmsArea .ddt-preview {
  border-color: rgb(91 145 255 / 55%);
}

#cmsArea .ddt-preview strong,
.notice,
.empty-state h3 {
  color: #83aaff;
}

.page-intro {
  border-left-color: #9c68f5;
}

.law-category {
  border-color: rgb(91 145 255 / 22%);
}

.empty-state {
  border-color: rgb(91 145 255 / 20%);
}

.law-admin {
  border-color: rgb(240 75 216 / 26%);
}

.media-frame,
.community-preview,
.media-thumbnail {
  border-color: rgb(91 145 255 / 24%);
}

.role-badge {
  border-color: rgb(91 145 255 / 36%);
  color: #83aaff;
}

.discord-coming-soon button span {
  color: #83aaff;
}

.staff-recruit {
  border-color: rgb(156 104 245 / 38%);
}

.staff-group h3 {
  border-left-color: #f04bd8;
}

.staff-person {
  background: linear-gradient(150deg, rgb(32 28 48 / 98%), rgb(17 20 33 / 99%));
  border-color: rgb(156 104 245 / 30%);
}

.staff-person span {
  color: #83aaff;
}

.staff-avatar {
  border-color: #9c68f5;
  background: #101321;
}

footer {
  border-top-color: rgb(91 145 255 / 18%);
}

a {
  color: #ff73e5;
}

a:hover {
  color: #83aaff;
}

.vehicle-grid,
.job-grid,
.social-page-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin: 22px 0;
}

.vehicle-card,
.job-card {
  overflow: hidden;
  padding: 0;
}

.vehicle-image,
.job-image {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgb(240 75 216 / 18%), rgb(91 145 255 / 22%));
  display: block;
  object-fit: cover;
  width: 100%;
}

.vehicle-image-empty {
  align-items: center;
  display: flex;
  font-size: 64px;
  justify-content: center;
}

.vehicle-info,
.job-card {
  padding: 20px;
}

.vehicle-category {
  color: #83aaff;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vehicle-price {
  background: linear-gradient(100deg, #ff73e5, #83aaff);
  background-clip: text;
  color: transparent;
  font-size: 20px;
}

.job-card > .primary {
  margin-top: 12px;
}

.social-link {
  align-items: center;
  background: linear-gradient(135deg, rgb(240 75 216 / 12%), rgb(91 145 255 / 13%));
  border: 1px solid rgb(156 104 245 / 38%);
  border-radius: 14px;
  color: #fff;
  display: inline-flex;
  font-weight: 750;
  gap: 12px;
  min-height: 52px;
  padding: 12px 18px;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}

.social-link:hover {
  border-color: #83aaff;
  color: #fff;
  transform: translateY(-2px);
}

.social-link > span:last-child {
  display: grid;
}

.social-link small {
  color: #aeb8c9;
  font-size: 11px;
  font-weight: 500;
}

.social-link-disabled {
  border-style: dashed;
  color: #aeb8c9;
  cursor: default;
}

.social-icon {
  align-items: center;
  background: linear-gradient(135deg, #f04bd8, #5b91ff);
  border-radius: 10px;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.home-social-links,
.discord-coming-soon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-social-links {
  margin-top: 18px;
}

.social-page-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.home-social-section {
  align-items: center;
  background:
    radial-gradient(ellipse at 92% 18%, rgb(53 217 245 / 10%), transparent 25rem),
    linear-gradient(135deg, rgb(255 75 216 / 8%), rgb(17 21 33 / 95%) 55%);
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 24px;
  padding: clamp(22px, 4vw, 36px);
}

.home-social-copy {
  grid-column: 1 / -1;
}

.home-social-copy .eyebrow,
.social-page-intro .eyebrow {
  color: #83aaff;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
}

.home-social-copy h2,
.social-page-intro h3 {
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -.035em;
  margin: 8px 0 0;
}

.home-social-copy p,
.social-page-intro p {
  margin: 6px 0 0;
  max-width: 650px;
}

.home-social-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-social-more {
  justify-self: end;
}

.home-social-empty {
  margin: 0;
}

.social-page-intro {
  margin-bottom: 20px;
}

.social-page-note {
  color: #aeb8c9;
  font-size: 13px;
  margin: 4px 0 0;
}

.hero {
  min-height: min(760px, calc(100svh - 68px));
  overflow: hidden;
  position: relative;
}

.hero-inner {
  gap: clamp(32px, 5vw, 72px);
  max-width: 1400px;
  padding-bottom: clamp(58px, 8vw, 100px);
  padding-top: clamp(58px, 8vw, 100px);
}

.hero-inner > div:first-child {
  max-width: 720px;
}

.hero .eyebrow {
  border: 1px solid rgb(131 170 255 / 28%);
  box-shadow: 0 8px 26px rgb(0 0 0 / 22%);
}

.hero .feature {
  align-self: center;
  backdrop-filter: blur(16px);
  background: linear-gradient(145deg, rgb(20 23 38 / 86%), rgb(13 16 28 / 94%));
  border-color: rgb(131 170 255 / 32%);
  border-radius: 26px;
  box-shadow: 0 28px 80px rgb(0 0 0 / 38%), 0 0 36px rgb(156 104 245 / 10%);
}

.hero .video {
  border: 1px solid rgb(131 170 255 / 20%);
  box-shadow: inset 0 0 45px rgb(91 145 255 / 8%);
  overflow: hidden;
}

.hero .stats {
  gap: 12px;
  margin-top: 36px;
}

.hero .stat {
  background: rgb(14 18 29 / 72%);
  border: 1px solid rgb(131 170 255 / 18%);
  border-left: 2px solid #9c68f5;
  border-radius: 12px;
  min-width: 130px;
  padding: 11px 15px;
}

.hero .stat strong {
  font-size: 22px;
}

#content > .grid > .panel {
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
  #content > .grid > .panel:hover {
    border-color: rgb(131 170 255 / 46%);
    box-shadow: 0 22px 48px rgb(0 0 0 / 34%), 0 0 24px rgb(91 145 255 / 8%);
    transform: translateY(-4px);
  }
}

.page-category-admin {
  margin: 20px 0;
}

@media (max-width: 700px) {
  .home-social-section {
    grid-template-columns: 1fr;
  }

  .home-social-copy {
    grid-column: auto;
  }

  .home-social-more {
    justify-self: start;
  }
}

.page-category-heading,
.page-category-rename,
.page-category-create,
.page-manager-row,
.job-application-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-category-heading {
  border-bottom: 1px solid rgb(156 104 245 / 28%);
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
}

.page-category-heading h4 {
  margin: 0;
}

.page-category-rename input {
  max-width: 220px;
}

.page-category-create {
  align-items: end;
}

.page-category-create .field {
  flex: 1 1 260px;
}

.page-manager-list {
  display: grid;
  gap: 8px;
}

.page-manager-row {
  background: rgb(255 255 255 / 3%);
  border: 1px solid rgb(156 104 245 / 18%);
  border-radius: 10px;
  justify-content: space-between;
  padding: 12px;
}

.page-manager-row > div:first-child {
  display: grid;
  gap: 4px;
}

.page-manager-row small,
.page-manager-empty {
  color: var(--muted);
}

.job-profile-applications {
  margin-top: 18px;
}

.job-application-row {
  border-top: 1px solid rgb(156 104 245 / 20%);
  justify-content: space-between;
  padding: 12px 0;
}

.discord-coming-soon {
  border-top: 1px solid rgb(255 255 255 / 8%);
  margin-top: 22px;
  padding-top: 18px;
}

.discord-coming-soon button {
  align-items: center;
  background: #222631;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 10px;
  color: #fff;
  cursor: not-allowed;
  display: inline-flex;
  gap: 9px;
  opacity: .8;
  padding: 10px 14px;
}

.discord-coming-soon button svg {
  fill: #aeb8cc;
  height: 20px;
  width: 20px;
}

.provider-icon {
  align-items: center;
  border-radius: 5px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  width: 30px;
}

.cfx-icon {
  background: #f04b38;
  color: white;
}

.discord-coming-soon button span:last-child {
  color: #83aaff;
  font-size: 11px;
  font-weight: 750;
}

@media (max-width: 650px) {
  .page-category-heading {
    align-items: stretch;
  }

  .page-category-rename {
    width: 100%;
  }

  .page-category-rename input {
    flex: 1 1 100%;
    max-width: none;
  }
}