:root {
  color-scheme: dark;
  --bg: #0b0f14;
  --panel: #121820;
  --panel-2: #171f29;
  --panel-3: #1d2733;
  --line: #263241;
  --line-soft: #1f2a37;
  --text: #eef4f8;
  --muted: #8ea0ad;
  --muted-2: #647684;
  --gold: #f6c453;
  --mint: #55d6be;
  --red: #ff667a;
  --blue: #65a8ff;
  --shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.marketing-page,
.downloads-page {
  background: #080d12;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 76px;
  padding: 16px clamp(18px, 5vw, 64px);
  border-bottom: 1px solid rgba(38, 50, 65, .78);
  background: rgba(8, 13, 18, .92);
  backdrop-filter: blur(14px);
}

.site-brand,
.site-nav,
.site-footer {
  display: flex;
  align-items: center;
}

.site-brand {
  gap: 12px;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}

.site-brand .brand-mark {
  width: 38px;
  height: 38px;
}

.site-nav {
  gap: 20px;
  margin-left: auto;
}

.site-nav a,
.site-footer a {
  color: #b8c7d1;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.site-nav a:hover,
.site-footer a:hover {
  color: var(--text);
}

.site-download-button {
  flex: 0 0 auto;
}

.hero-section,
.feature-strip,
.downloads-section,
.site-footer {
  width: calc(100% - 36px);
  max-width: 1180px;
  margin: 0 auto;
}

.hero-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  align-items: center;
  gap: 46px;
  min-height: 620px;
  padding: 52px 0 72px;
  isolation: isolate;
}

.marketing-page .hero-section::before,
.marketing-page .hero-section::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: -2;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}

.marketing-page .hero-section::before {
  top: -76px;
  bottom: 0;
  background:
    linear-gradient(90deg, rgba(8, 13, 18, .98) 0%, rgba(8, 13, 18, .86) 38%, rgba(8, 13, 18, .58) 68%, rgba(8, 13, 18, .9) 100%),
    url("https://assets.badlion.net/blog/minecraft-backgrounds/minecraft-mods-back.webp") center top / cover no-repeat;
}

.marketing-page .hero-section::after {
  bottom: 0;
  height: 220px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 13, 18, 0) 0%, #080d12 92%);
}

.hero-copy h1 {
  margin-bottom: 16px;
  font-size: 78px;
  line-height: .9;
}

.hero-lede {
  max-width: 680px;
  margin-bottom: 26px;
  color: #c6d2da;
  font-size: 20px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions a,
.site-download-button,
.latest-release .primary-button {
  text-decoration: none;
}

.hero-product {
  position: relative;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.hero-copy,
.plugin-card,
.chat-lines,
.chat-lines p,
.editor-mini {
  min-width: 0;
  max-width: 100%;
}

.hero-section > *,
.hero-lede {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.plugin-card,
.editor-mini,
.feature-strip article,
.release-card,
.release-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.plugin-card {
  display: grid;
  gap: 22px;
  padding: 24px;
  overflow: hidden;
}

.plugin-card-head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.plugin-card-head strong,
.plugin-card-head span {
  display: block;
}

.plugin-card-head span {
  color: var(--muted);
  font-size: 13px;
}

.chat-lines {
  display: grid;
  gap: 10px;
}

.chat-lines p {
  margin: 0;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #0d1218;
  color: #d9e4ea;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-lines span {
  color: var(--gold);
  font-weight: 800;
}

.rank {
  display: inline-flex;
  margin-right: 7px;
  padding: 3px 7px;
  border-radius: 6px;
  color: #080d12;
  font-size: 12px;
}

.rank.owner {
  background: var(--gold);
}

.rank.vip {
  background: var(--mint);
}

.rank.mvp {
  background: var(--blue);
}

.editor-mini {
  display: grid;
  gap: 14px;
  width: min(92%, 460px);
  margin-left: auto;
  padding: 18px;
  background: #0d1218;
}

.editor-mini strong {
  font-size: 20px;
}

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

.mini-stat-grid span {
  display: grid;
  gap: 6px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.mini-stat-grid b {
  color: var(--text);
  font-size: 14px;
  text-transform: none;
}

.feature-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 42px 0 22px;
  background: #080d12;
}

.feature-strip article {
  padding: 20px;
}

.feature-strip [data-icon] {
  margin-bottom: 16px;
  color: var(--gold);
}

.feature-strip h2 {
  font-size: 18px;
}

.feature-strip p {
  margin-bottom: 0;
  line-height: 1.5;
}

.ai-disclosure {
  width: calc(100% - 36px);
  max-width: 760px;
  margin: 0 auto 72px;
  padding: 16px 18px;
  border: 1px solid rgba(246, 196, 83, .26);
  border-radius: 8px;
  background: rgba(18, 24, 32, .84);
}

.ai-disclosure strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 14px;
}

.ai-disclosure p {
  margin-bottom: 0;
  color: #aebdc8;
  font-size: 13px;
  line-height: 1.55;
}

.downloads-section {
  padding: 64px 0 76px;
  border-top: 1px solid var(--line-soft);
}

.download-hero {
  padding: 56px max(24px, calc((100vw - 1180px) / 2)) 54px;
  background:
    linear-gradient(90deg, rgba(246, 196, 83, .96), rgba(222, 155, 43, .94)),
    url("https://assets.badlion.net/blog/minecraft-backgrounds/minecraft-mods-back.webp") center / cover no-repeat;
  color: #160f04;
}

.download-hero div {
  max-width: 820px;
}

.download-hero .eyebrow,
.download-hero p {
  color: #2f2108;
}

.download-hero h1 {
  margin-bottom: 10px;
  color: #100b03;
  font-size: 44px;
}

.download-hero p {
  margin-bottom: 0;
  font-size: 17px;
  line-height: 1.55;
}

.download-hero h1,
.download-hero p,
.download-alert p,
.release-intro,
.download-package h3,
.download-package p,
.download-sidebar li {
  overflow-wrap: anywhere;
}

.download-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  gap: 18px;
  width: calc(100% - 36px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 0 76px;
}

.download-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.download-alert {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 18px;
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  background: rgba(104, 36, 17, .74);
}

.download-alert p {
  margin: 6px 0 0;
  color: #f1d8c8;
  line-height: 1.5;
}

.download-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 38px;
  padding: 4px;
  border-radius: 4px;
  background: #12161b;
}

.download-tabs button {
  min-height: 30px;
  border-radius: 3px;
  background: transparent;
  color: #aeb9c3;
  font-weight: 800;
  cursor: pointer;
}

.download-tabs button.active {
  background: #2a2e34;
  color: var(--text);
}

.download-tabs button:disabled {
  color: #59636e;
  cursor: not-allowed;
}

.release-intro {
  margin: 0;
  color: #c5d0d8;
  line-height: 1.55;
}

.release-intro strong {
  color: var(--text);
}

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

.download-section-head h2 {
  margin: 0;
  font-size: 28px;
}

.download-section-head a {
  text-decoration: none;
}

.download-package {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 20px 14px;
  border-radius: 8px;
  background: #050607;
  box-shadow: var(--shadow);
}

#releasePackages {
  display: grid;
  gap: 14px;
}

.download-package.coming-soon {
  border: 1px solid var(--line-soft);
  background: rgba(5, 6, 7, .58);
}

.download-package.coming-soon h3,
.download-package.coming-soon p,
.download-package.coming-soon .package-version {
  opacity: .72;
}

.package-select input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.package-select span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #3a424c;
  border-radius: 5px;
  background: #252a32;
}

.package-select input:checked + span::before {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg) translateY(-1px);
}

.download-package h3 {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 18px;
}

.download-package small {
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(246, 196, 83, .18);
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.download-package p {
  margin-bottom: 10px;
  color: #c7d1d9;
  line-height: 1.45;
}

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

.download-icon-button {
  display: grid;
  place-items: center;
  width: 70px;
  height: 42px;
  border-radius: 6px;
  background: var(--gold);
  color: #1b1404;
}

.download-icon-button.disabled {
  background: #2a2e34;
  color: #687481;
  cursor: not-allowed;
}

.download-details {
  margin-top: 28px;
}

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

.details-grid div {
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
}

.details-grid span {
  color: var(--muted);
  line-height: 1.45;
}

.download-sidebar {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.download-sidebar section {
  padding: 18px;
  border-left: 4px solid var(--gold);
  background: #24282e;
}

.download-sidebar h2 {
  font-size: 16px;
}

.download-sidebar ul {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.download-sidebar li {
  display: grid;
  gap: 5px;
  line-height: 1.5;
}

.download-sidebar strong {
  color: var(--text);
}

.download-sidebar span {
  color: #c4ced6;
}

.section-heading {
  max-width: 720px;
  margin-bottom: 24px;
}

.section-heading h2 {
  font-size: 34px;
}

.section-heading p {
  line-height: 1.55;
}

.download-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
}

.release-card {
  padding: 24px;
}

.release-badge {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 10px;
  border: 1px solid rgba(85, 214, 190, .4);
  border-radius: 999px;
  background: rgba(85, 214, 190, .11);
  color: var(--mint);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.release-card h3 {
  font-size: 28px;
}

.release-card p {
  max-width: 640px;
  line-height: 1.55;
}

.release-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}

.release-meta div {
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-2);
}

.release-meta dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.release-meta dd {
  margin: 6px 0 0;
  color: var(--text);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.release-list {
  align-self: start;
  overflow: hidden;
}

.release-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.release-row:last-child {
  border-bottom: 0;
}

.release-row strong,
.release-row span {
  display: block;
}

.release-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.release-row a {
  flex: 0 0 auto;
  color: var(--gold);
  font-weight: 800;
  text-decoration: none;
}

.muted-release {
  align-items: flex-start;
}

.site-footer {
  justify-content: flex-end;
  gap: 18px;
  padding: 22px 0 34px;
  border-top: 1px solid var(--line-soft);
}

.site-footer span {
  margin-right: auto;
  color: var(--text);
  font-weight: 800;
}

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

button {
  border: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 26px;
  height: 100vh;
  min-height: 0;
  padding: 24px;
  border-right: 1px solid var(--line-soft);
  background: #0e141b;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(246, 196, 83, .42);
  border-radius: 8px;
  background: #0d1218;
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand strong,
.brand span,
.session-card strong,
.session-card span {
  display: block;
}

.brand strong {
  font-size: 16px;
}

.brand span,
.session-card span {
  color: var(--muted);
  font-size: 12px;
}

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

.nav-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.nav-item:hover,
.nav-item.active {
  background: var(--panel-2);
  color: var(--text);
}

.nav-item.active {
  box-shadow: inset 3px 0 0 var(--gold);
}

.nav-item b {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--panel-3);
  color: var(--gold);
  text-align: center;
  font-size: 12px;
}

.session-card {
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 18px rgba(85, 214, 190, .8);
}

.status-dot.outdated {
  background: var(--red);
  box-shadow: 0 0 18px rgba(255, 102, 122, .75);
}

.workspace {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  padding: 28px;
  overflow-x: hidden;
  overflow-y: auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 30px;
  line-height: 1.12;
}

h2 {
  margin-bottom: 8px;
  font-size: 22px;
}

h3 {
  margin-bottom: 12px;
  font-size: 16px;
}

p {
  color: var(--muted);
}

.topbar-actions,
.toolbar,
.table-actions,
.color-row,
.requirement-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.icon-button,
.ghost-button,
.secondary-button,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
}

.icon-button {
  width: 40px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}

.ghost-button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}

.secondary-button {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
}

.primary-button {
  background: var(--gold);
  color: #1b1404;
  font-weight: 700;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.toolbar {
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar > select {
  flex: 1 1 180px;
  max-width: 260px;
}

.toolbar > .secondary-button {
  flex: 0 0 auto;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 300px;
  min-width: 220px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.search-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

select,
input,
textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f151d;
  color: var(--text);
  outline: 0;
}

select,
input {
  min-height: 42px;
  padding: 0 12px;
}

textarea {
  resize: vertical;
  padding: 11px 12px;
  line-height: 1.45;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.editor-grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
}

.tag-list-panel,
.details-panel,
.bulk-panel,
.bulk-layout > section,
.bulk-preview,
.color-lab > section,
.output-panel,
.session-layout,
.plugin-status-panel,
.plugin-details-panel {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.bulk-panel {
  display: none;
  margin-bottom: 16px;
  padding: 16px;
}

.bulk-panel.active {
  display: block;
}

.bulk-head,
.bulk-actions-row,
.mini-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bulk-head {
  margin-bottom: 14px;
}

.bulk-head strong,
.mini-card-head strong {
  display: block;
}

.bulk-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

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

.bulk-actions-row {
  align-items: end;
  margin-top: 14px;
}

.bulk-actions-row .primary-button {
  flex: 0 0 auto;
}

.tag-list-panel {
  min-height: 0;
  max-height: calc(100vh - 174px);
  overflow: hidden;
}

.panel-title {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.panel-title span {
  color: var(--muted);
  font-size: 13px;
}

.tag-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 228px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
}

.tag-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.tag-row:hover,
.tag-row.active {
  border-color: rgba(246, 196, 83, .55);
}

.tag-row strong,
.tag-row span {
  display: block;
}

.tag-row span {
  color: var(--muted);
  font-size: 12px;
}

.rarity-badge {
  align-self: start;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(85, 214, 190, .12);
  color: var(--mint);
  font-size: 11px;
  font-weight: 700;
}

.details-panel {
  min-width: 0;
  overflow: hidden;
}

.details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--line-soft);
}

.details-header h2 {
  margin-bottom: 0;
}

.preview-pill {
  min-width: 160px;
  max-width: 360px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d1218;
  text-align: center;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.tab-strip {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.tab-button {
  padding: 11px 12px;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.tab-button.active {
  background: var(--panel-2);
  color: var(--text);
}

.tab-panel {
  display: none;
  padding: 18px;
}

.tab-panel.active {
  display: block;
}

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

.form-grid.active {
  display: grid;
}

.full-span {
  grid-column: 1 / -1;
}

.switch-row {
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 42px;
}

.switch-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-row span {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #293442;
}

.switch-row span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #a9b6c0;
  transition: transform .16s ease, background .16s ease;
}

.switch-row input:checked + span {
  background: rgba(85, 214, 190, .42);
}

.switch-row input:checked + span::after {
  transform: translateX(18px);
  background: var(--mint);
}

.preview-box {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d1218;
}

.preview-box span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.preview-box strong {
  min-height: 28px;
  overflow-wrap: anywhere;
  font-size: 24px;
}

.preview-box.tall {
  min-height: 160px;
  align-content: center;
}

.mini-table {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.mini-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-2);
}

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

.mini-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.2fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-2);
}

.mini-row button {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 102, 122, .16);
  color: var(--red);
  cursor: pointer;
}

.danger-button {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 102, 122, .16);
  color: var(--red);
  cursor: pointer;
  font-size: 20px;
}

.requirement-head {
  align-items: end;
  margin-bottom: 16px;
}

.bulk-layout,
.color-lab,
.plugin-layout,
.command-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 16px;
  min-width: 0;
}

.bulk-layout > section,
.bulk-preview,
.color-lab > section,
.output-panel,
.session-layout,
.command-layout > section,
.plugin-status-panel,
.plugin-details-panel {
  padding: 20px;
}

.command-layout > section {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.command-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.plugin-status-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.version-state {
  padding: 7px 10px;
  border: 1px solid rgba(85, 214, 190, .4);
  border-radius: 999px;
  background: rgba(85, 214, 190, .12);
  color: var(--mint);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.version-state.outdated {
  border-color: rgba(255, 102, 122, .42);
  background: rgba(255, 102, 122, .12);
  color: var(--red);
}

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

.version-grid div,
.info-list div {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.version-grid span,
.info-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.version-grid strong,
.info-list strong {
  font-size: 18px;
}

.version-grid a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

.update-callout {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(85, 214, 190, .32);
  border-radius: 8px;
  background: rgba(85, 214, 190, .08);
}

.update-callout.outdated {
  border-color: rgba(255, 102, 122, .34);
  background: rgba(255, 102, 122, .08);
}

.update-callout p {
  margin-bottom: 0;
}

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

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

.bulk-controls .primary-button {
  align-self: end;
}

.bulk-preview {
  min-height: 340px;
}

#bulkMatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#bulkMatches span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
}

.color-lab label {
  margin-top: 14px;
}

.format-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}

.format-tools button {
  min-width: 40px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}

.color-row {
  align-items: end;
  margin: 4px 0 16px;
}

.session-layout {
  max-width: 980px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.steps div {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.steps b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: #1b1404;
}

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

[data-icon] {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

[data-icon] svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.invalid-session {
  position: relative;
  display: none;
  min-height: 100vh;
  padding: 24px;
  place-items: center;
  background: var(--bg);
}

.home-top-actions {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.download-menu {
  position: relative;
}

.download-menu summary,
.support-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.download-menu summary {
  list-style: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
}

.download-menu summary::-webkit-details-marker {
  display: none;
}

.download-menu summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.download-menu[open] summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.support-button {
  background: var(--gold);
  color: #1b1404;
}

.download-options {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 180px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.download-options a {
  padding: 10px 11px;
  border-radius: 7px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.download-options a:hover {
  background: var(--panel-2);
}

.invalid-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: 28px;
  width: min(100%, 1120px);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.invalid-panel .brand-mark {
  margin-bottom: 18px;
}

.invalid-panel h1 {
  margin-bottom: 12px;
  font-size: 42px;
}

.home-copy {
  display: grid;
  align-content: center;
}

.home-lede {
  max-width: 660px;
  margin-bottom: 22px;
  color: #b8c7d1;
  font-size: 17px;
  line-height: 1.55;
}

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

.home-actions div {
  display: grid;
  gap: 9px;
}

.home-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.help-commands {
  display: grid;
  gap: 8px;
  margin: 22px 0;
}

.help-commands span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

code {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0f151d;
  color: var(--gold);
}

.help-commands code {
  display: block;
  padding: 12px;
  overflow-x: auto;
}

.small-note {
  margin-bottom: 0;
  font-size: 13px;
}

.session-notice {
  padding: 14px;
  border: 1px solid rgba(85, 214, 190, .28);
  border-radius: 8px;
  background: rgba(85, 214, 190, .08);
  color: #c8d7df;
  font-size: 13px;
  line-height: 1.45;
}

.session-notice.warning {
  border-color: rgba(255, 102, 122, .36);
  background: rgba(255, 102, 122, .09);
}

.home-preview {
  display: grid;
  align-content: center;
  min-width: 0;
}

.preview-window {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d1218;
}

.preview-window-bar {
  display: flex;
  gap: 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.preview-window-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.preview-tag-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-2);
}

.preview-tag-card small,
.preview-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.preview-tag-card strong {
  font-size: 32px;
  overflow-wrap: anywhere;
}

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

.preview-grid div {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-2);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(3, 6, 10, .72);
}

.modal-backdrop.active {
  display: grid;
}

.modal-panel {
  width: min(100%, 560px);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.modal-panel code {
  display: block;
  margin: 16px 0;
  padding: 13px;
  overflow-x: auto;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

body.invalid-session-active {
  overflow: hidden;
}

body.invalid-session-active .invalid-session {
  display: grid;
}

body.invalid-session-active .app-shell {
  display: none;
}

.mc-black { color: #000; }
.mc-dark-blue { color: #0000aa; }
.mc-dark-green { color: #00aa00; }
.mc-dark-aqua { color: #00aaaa; }
.mc-dark-red { color: #aa0000; }
.mc-dark-purple { color: #aa00aa; }
.mc-gold { color: #ffaa00; }
.mc-gray { color: #aaaaaa; }
.mc-dark-gray { color: #555; }
.mc-blue { color: #5555ff; }
.mc-green { color: #55ff55; }
.mc-aqua { color: #55ffff; }
.mc-red { color: #ff5555; }
.mc-light-purple { color: #ff55ff; }
.mc-yellow { color: #ffff55; }
.mc-white { color: #fff; }

@media (max-width: 1120px) {
  .site-header {
    flex-wrap: wrap;
  }

  .site-nav {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .hero-section,
  .download-layout,
  .download-page-layout,
  .details-grid {
    grid-template-columns: 1fr;
  }

  .hero-section {
    min-height: auto;
    padding-top: 54px;
  }

  .hero-copy h1 {
    font-size: 66px;
  }

  .editor-mini {
    width: 100%;
  }

  .app-shell {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .sidebar {
    padding: 18px 12px;
  }

  .brand div:not(.brand-mark),
  .nav-item span:last-of-type,
  .session-card div {
    display: none;
  }

  .nav-item {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .nav-item b {
    display: none;
  }

  .session-card {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .editor-grid,
  .bulk-grid,
  .bulk-layout,
  .color-lab,
  .command-layout,
  .plugin-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-header {
    align-items: stretch;
    gap: 14px;
    min-height: 0;
  }

  .site-brand {
    justify-content: space-between;
  }

  .site-nav {
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .site-download-button {
    width: 100%;
  }

  .hero-section,
  .feature-strip,
  .downloads-section,
  .site-footer {
    width: calc(100% - 28px);
    max-width: 1180px;
  }

  .hero-section {
    gap: 28px;
    padding: 38px 0 44px;
  }

  .hero-copy h1 {
    font-size: 48px;
    line-height: 1;
  }

  .hero-lede {
    font-size: 17px;
    max-width: 31ch;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions a {
    width: 100%;
  }

  .mini-stat-grid,
  .feature-strip,
  .release-meta,
  .download-tabs {
    grid-template-columns: 1fr;
  }

  .download-hero {
    padding: 38px 14px 40px;
  }

  .download-hero h1 {
    max-width: 10ch;
    font-size: 36px;
    line-height: 1.05;
  }

  .download-hero p,
  .download-alert p,
  .release-intro,
  .download-package p {
    max-width: 31ch;
  }

  .download-page-layout {
    width: calc(100% - 28px);
    padding-bottom: 52px;
  }

  .download-section-head,
  .download-package {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .download-section-head {
    flex-direction: column;
  }

  .download-section-head .primary-button,
  .download-icon-button {
    width: 100%;
  }

  .download-icon-button {
    height: 44px;
  }

  .download-package small {
    display: inline-flex;
    width: max-content;
    margin: 7px 0 0;
  }

  .release-row {
    align-items: stretch;
    flex-direction: column;
  }

  .release-row a {
    width: max-content;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer span {
    margin-right: 0;
  }

  .app-shell {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .nav-list {
    display: flex;
    min-width: max-content;
  }

  .session-card {
    display: none;
  }

  .workspace {
    height: auto;
    padding: 18px;
    overflow: visible;
  }

  .topbar,
  .toolbar,
  .details-header,
  .topbar-actions,
  .color-row,
  .requirement-head {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar > select,
  .toolbar > .secondary-button {
    width: 100%;
    max-width: none;
  }

  .form-grid,
  .bulk-controls,
  .bulk-grid,
  .mini-card-grid,
  .invalid-panel,
  .home-actions,
  .preview-grid,
  .steps,
  .version-grid,
  .mini-row {
    grid-template-columns: 1fr;
  }

  .invalid-panel {
    padding: 22px;
  }

  .invalid-panel h1 {
    font-size: 34px;
  }

  .home-top-actions {
    position: static;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 14px;
  }

  .download-options {
    right: auto;
    left: 0;
  }

  .bulk-actions-row {
    align-items: stretch;
    flex-direction: column;
  }

  .tag-list {
    max-height: 360px;
  }
}