:root {
  color-scheme: light;
  --page: #f5fbf3;
  --ink: #071611;
  --muted: #416257;
  --teal: #073b32;
  --teal-2: #0b5546;
  --neon: #48ff74;
  --glass: rgba(255, 255, 255, 0.54);
  --line: rgba(7, 59, 50, 0.16);
}

* { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 8% 8%, rgba(72, 255, 116, 0.22), transparent 28rem), linear-gradient(135deg, #fbfff8 0%, var(--page) 58%, #e9f9ed 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.25rem 0;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.brand-logo {
  display: block;
  width: auto;
  height: 2rem;
}

.site-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.site-menu a {
  border: 1px solid transparent;
  border-radius: 0.8rem;
  padding: 0.65rem 0.9rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 850;
}

.site-menu a:hover, .site-menu a[aria-current="page"] {
  border-color: rgba(7, 59, 50, 0.16);
  background: rgba(255, 255, 255, 0.58);
  color: var(--teal);
}

main { flex: 1; width: min(1120px, calc(100% - 2rem)); margin: 0 auto 4rem; }

.hero {
  position: relative;
  display: flex;
  align-items: center;
  width: 100vw;
  min-height: 32rem;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), rgba(72, 255, 116, 0.08) 48%, transparent 72%);
}

.hero-blob {
  position: absolute;
  top: 50%;
  right: max(-8rem, calc((100vw - 1120px) / 2 - 10rem));
  width: min(78vw, 48rem);
  height: min(56vw, 35rem);
  border-radius: 36% 64% 60% 40% / 44% 38% 62% 56%;
  background: radial-gradient(circle at 26% 30%, #48ff74 0 12%, transparent 34%), radial-gradient(circle at 68% 38%, #b7ff2f 0 18%, transparent 36%), radial-gradient(circle at 44% 72%, #00d9a3 0 14%, transparent 35%), linear-gradient(130deg, #48ff74, #caff3d 42%, #083d33);
  filter: saturate(1.18);
  opacity: 0.94;
  animation: heroBlob 7s ease-in-out infinite alternate;
}

.hero-glass {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 32rem;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.52) 20%, rgba(255, 255, 255, 0) 30%);
  backdrop-filter: blur(22px);
  mask-image: linear-gradient(90deg, #000 0%, #000 68%, transparent 100%);
}

.hero-content {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(5rem, 12vw, 12rem) clamp(2rem, 5vw, 4.5rem) 0;
  text-align: left;
}

.eyebrow, .card-kicker {
  margin: 0 0 0.8rem;
  color: var(--teal-2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2 { margin: 0; letter-spacing: -0.08em; line-height: 0.92; }
h1 { max-width: 12ch; color: #020403; font-size: clamp(4rem, 14vw, 9.6rem); font-weight: 950; }
h2 { max-width: 14ch; font-size: clamp(2.5rem, 8vw, 5.4rem); font-weight: 900; }

.reference {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
  background: #16362d;
  color: white;
  border-radius: 0.3rem;
}

.hero-copy { font-style: italic; max-width: 38rem; margin: 1.3rem 0 0; color: #16362d; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6; }
  
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.7rem; }

.button { border: 1px solid var(--teal); border-radius: 0.8rem; padding: 0.9rem 1.1rem; font-weight: 800; transition: transform 260ms ease, background 260ms ease, color 260ms ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--ink); color: var(--neon); }
.button.secondary { background: rgba(255, 255, 255, 0.35); color: var(--ink); }
.button.danger { background: rgba(135, 16, 16, 0.08); border-color: rgba(135, 16, 16, 0.35); color: #871010; }

.section-intro { margin: 5rem 0 1.5rem; }
.concept-section {
  margin-top: 5rem;
  border-top: 1px solid var(--line);
  padding-top: 3rem;
}
.concept-section h2 { max-width: 11ch; }
.concept-section p { max-width: 30rem; margin: 1rem 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.concept-section-mission { margin-top: 5rem; border-top: 0; padding-top: 0; }
.concept-section-covenant { border-color: rgba(7, 59, 50, 0.26); }
.concept-section-scripture + .sermon-feeds { padding-top: 2.5rem; }
.visit-section { padding-top: 5rem; }
.visit-grid { display: grid; grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr); gap: 1rem; }
.visit-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(18px);
}
.visit-card h3 { margin: 0; color: var(--teal); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }
.schedule-card { display: grid; align-content: space-between; border-color: rgba(72, 255, 116, 0.22); padding: 1.25rem; background: rgba(7, 59, 50, 0.94); color: #f5fff2; }
.schedule-card .eyebrow { color: rgba(245, 255, 242, 0.72); }
.schedule-list { display: grid; gap: 0.85rem; margin: 0; }
.schedule-list div { border-top: 1px solid rgba(245, 255, 242, 0.18); padding-top: 0.85rem; }
.schedule-list div:first-child { border-top: 0; padding-top: 0; }
.schedule-list dt { color: rgba(245, 255, 242, 0.72); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.schedule-list dd { margin: 0.45rem 0 0; }
.schedule-list dd, .schedule-table { color: #f5fff2; font-size: clamp(1.15rem, 3vw, 1.55rem); font-weight: 850; letter-spacing: -0.045em; line-height: 1.05; }
.schedule-table { width: 100%; border-collapse: collapse; }
.schedule-table td { padding: 0.1rem 0; }
.schedule-time { width: 4.45rem; color: rgba(245, 255, 242, 0.72); }
.location-card { min-height: 20rem; }
.map-frame { min-height: 20rem; border-radius: 0; background: #e3eadf; }
.map-frame iframe { height: 100%; min-height: 20rem; }
.cards { padding-top: 5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

.feature-card {
  position: relative;
  min-height: 15rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(18px);
}

.feature-card.dark { border-color: rgba(72, 255, 116, 0.22); background: rgba(7, 59, 50, 0.94); color: #f5fff2; }
.feature-card strong { position: relative; display: block; max-width: 8ch; font-size: 2.3rem; letter-spacing: -0.06em; line-height: 0.95; }
.feature-card span:last-child { position: absolute; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; color: var(--muted); line-height: 1.45; }
.feature-card.dark span:last-child, .feature-card.dark .card-kicker { color: rgba(245, 255, 242, 0.72); }

.card-blob {
  position: absolute;
  inset: auto -3rem -4rem auto;
  width: 12rem;
  height: 12rem;
  border-radius: 58% 42% 44% 56% / 35% 48% 52% 65%;
  background: linear-gradient(135deg, rgba(72, 255, 116, 0.76), rgba(183, 255, 47, 0.24), rgba(0, 217, 163, 0.46));
  transition: transform 800ms ease, border-radius 800ms ease, filter 800ms ease;
}

.feature-card:hover .card-blob { border-radius: 38% 62% 64% 36% / 55% 35% 65% 45%; filter: hue-rotate(24deg) saturate(1.2); transform: translate(-1.4rem, -1rem) scale(1.14) rotate(10deg); }

.music-home-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.25rem;
  border-radius: 1.8rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: radial-gradient(circle at 118% 50%, rgba(7, 59, 50, 0.72) 0%, rgba(7, 59, 50, 0.34) 24%, transparent 52%), linear-gradient(135deg, #03100c, #073b32);
  color: #f5fff2;
}
.music-home-cta .eyebrow { color: rgba(245, 255, 242, 0.72); }
.music-home-cta h2 { max-width: 11ch; }
.music-home-cta p:not(.eyebrow) { max-width: 38rem; color: rgba(245, 255, 242, 0.78); line-height: 1.6; }
.music-home-cta .button.secondary {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  margin-bottom: 1em;
  border-color: var(--neon);
  background: transparent;
  color: var(--neon);
}
.music-home-cta .button.secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(245, 255, 242, 0.12);
  opacity: 0;
  transition: opacity 260ms ease;
}
.music-home-cta .button.secondary::after { content: " ↗"; }
.music-home-cta .button.secondary:hover { transform: none; }
.music-home-cta .button.secondary:hover::before { opacity: 1; }

.sermon-feeds { padding-top: 5rem; }
.sermon-feeds .section-intro p:not(.eyebrow) { max-width: 32rem; color: var(--muted); line-height: 1.55; }
.feed-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); align-items: stretch; gap: 1rem; }
.feed-card {
  display: flex;
  flex-direction: column;
}
.embed-frame { overflow: hidden; border-radius: 1rem; background: #03100c; }
.embed-frame iframe { display: block; width: 100%; border: 0; }
.video-frame { aspect-ratio: 16 / 9; }
.video-frame iframe { height: 100%; }
.spotify-frame { flex: 1; min-height: 0; }
.spotify-frame iframe { height: 100%; }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 0.85rem max(1rem, calc((100% - 1120px) / 2));
  background: #03100c;
  color: rgba(245, 255, 242, 0.72);
  font-size: 0.82rem;
}

.site-footer a { color: var(--neon); font-weight: 800; }

.page-shell { padding-top: 3rem; }
.admin-shell { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.admin-sidebar {
  position: sticky;
  top: 1rem;
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(18px);
}
.admin-sidebar .eyebrow { margin-bottom: 0.75rem; }
.admin-nav { display: grid; gap: 0.35rem; }
.admin-nav a {
  border-radius: 0.75rem;
  padding: 0.75rem 0.85rem;
  color: var(--muted);
  font-weight: 850;
}
.admin-nav a:hover, .admin-nav a[aria-current="page"] { background: rgba(72, 255, 116, 0.2); color: var(--teal); }
.page-hero { margin: 2rem 0 2.5rem; }
.page-hero h1 { max-width: 9ch; }
.page-copy { max-width: 42rem; color: var(--muted); font-size: 1.1rem; line-height: 1.65; }

.panel {
  margin: 1.25rem 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(18px);
}

.panel h2 { max-width: none; margin-bottom: 1rem; font-size: clamp(1.8rem, 4vw, 3rem); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field.full { grid-column: 1 / -1; }
label { color: var(--teal); font-weight: 850; }
.checkbox-field { display: flex; align-items: center; gap: 0.55rem; }
.checkbox-field input { width: auto; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 0.85rem 0.95rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  font: inherit;
}

.combo-field { position: relative; }
.song-options {
  display: grid;
  gap: 0.45rem;
  max-height: 18rem;
  margin-top: 0.25rem;
  padding: 0.45rem 0.75rem 0.3rem;
  overflow: auto;
}
.song-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 0.8rem 0.9rem;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.song-option[hidden] { display: none; }
.song-option.is-active {
  border-color: var(--teal);
  background: rgba(72, 255, 116, 0.18);
  transform: translateY(-1px);
  animation: activeCard 240ms ease-out;
}
.song-option strong { display: block; }
.song-option .song-summary strong { display: inline; color: var(--ink); }
.song-option span, .song-row span, .selected-song small { color: var(--muted); }
.song-option.add-new { border-color: var(--teal); background: rgba(72, 255, 116, 0.2); font-weight: 850; }
.empty-options { margin: 0; color: var(--muted); }

.form-actions { display: flex; justify-content: flex-start; margin: 1.25rem 0; }
.form-actions[hidden] { display: none; }
.selected-box, .new-song-fields { margin: 1.25rem 0; }
.selected-box:not([hidden]), .new-song-fields:not([hidden]) { animation: appearUp 180ms ease-out; }
.selected-list { display: grid; gap: 0.6rem; }
.selected-song {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.85rem;
  background: rgba(245, 255, 242, 0.68);
}
.selected-song { animation: suggestionAdded 240ms ease-out; }
.selected-song.is-removing { animation: disappearDown 180ms ease-in forwards; }
.selected-song button, .song-row button {
  border: 0;
  border-radius: 0.75rem;
  padding: 0.65rem 0.8rem;
  background: var(--teal);
  color: white;
  font-weight: 800;
  cursor: pointer;
}

.song-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(245, 255, 242, 0.58);
}
.repertoire-list { overflow: visible; }
.song-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--line);
}
.song-row:last-child { border-bottom: 0; }
.song-line { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; }
.song-link { width: 100%; }
.song-link:hover strong { text-decoration: underline; }
.song-line strong, .song-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-line span::before { content: "- "; }
.song-line small, .suggestion-count { flex: 0 0 auto; color: var(--teal); font-size: 0.82rem; font-weight: 850; }
.song-row form { display: flex; align-items: center; gap: 0.5rem; }
.song-edit-artist { margin: -0.4rem 0 1rem; color: var(--muted); font-weight: 850; }
.duplicate-list { display: grid; gap: 1rem; }
.duplicate-card {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1rem;
  background: rgba(245, 255, 242, 0.58);
}
.duplicate-card[hidden] { display: none; }
.duplicate-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.duplicate-option {
  display: grid;
  gap: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.64);
}
.duplicate-option strong { font-size: 1.15rem; }
.duplicate-option span:last-child { color: var(--muted); }
.merge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.merge-actions.full { grid-column: 1 / -1; }
.merge-actions form { display: flex; }
.notice { margin: 1rem 0; border-radius: 1rem; padding: 1rem; font-weight: 850; }
.notice.success { background: rgba(72, 255, 116, 0.22); color: var(--teal); }
.notice.error { background: rgba(255, 228, 228, 0.9); color: #7a1720; }
.page-editor-list { display: grid; gap: 1.25rem; }
.page-editor-panel h2 { max-width: none; }
.page-editor-form { display: grid; gap: 1rem; }
.delete-page-form { margin-top: 0.75rem; }
.wysiwyg-editor {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: white;
}
.editor-source-hidden { display: none; }
.toastui-editor-defaultUI { border: 0 !important; font-family: inherit !important; }

.article-shell { width: min(1120px, calc(100% - 2rem)); }
.article-hero {
  position: relative;
  width: min(760px, 100%);
  margin: clamp(2.5rem, 8vw, 6rem) auto clamp(2rem, 5vw, 4rem);
  text-align: center;
}
.article-hero h1 { position: relative; z-index: 1; max-width: none; font-size: clamp(3.6rem, 11vw, 8rem); }
.title-blob {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(-3rem, -7vw, -1rem);
  width: min(48vw, 24rem);
  height: 90%;
  min-height: 10rem;
  border-radius: 56% 44% 62% 38% / 44% 58% 42% 56%;
  background: radial-gradient(circle at 26% 30%, rgba(72, 255, 116, 0.95) 0 16%, transparent 36%), linear-gradient(135deg, rgba(183, 255, 47, 0.9), rgba(0, 217, 163, 0.62));
  opacity: 0.86;
  animation: heroBlob 8s ease-in-out infinite alternate;
}
.article-frame { position: relative; margin: 0 auto; }
.article-body {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(7, 59, 50, 0.1);
  border-radius: 1.6rem;
  padding: clamp(1.5rem, 5vw, 3.25rem);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
  color: #10231d;
  font-size: clamp(1.08rem, 2vw, 1.22rem);
  line-height: 1.85;
  text-align: justify;
}
.article-body > *:first-child { margin-top: 0; }
.article-body > *:last-child { margin-bottom: 0; }
.article-body h2, .article-body h3 {
  max-width: none;
  margin: 2.2rem 0 0.8rem;
  color: var(--ink);
  letter-spacing: -0.055em;
  line-height: 1;
}
.article-body h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.article-body h3 { font-size: clamp(1.55rem, 4vw, 2.2rem); }
.article-body p, .article-body ul, .article-body ol, .article-body blockquote { margin: 1rem 0; }
.article-body p { text-indent: 2rem; }
.article-body li p, .article-body blockquote p { text-indent: 0; }
.article-body a { color: var(--teal); font-weight: 850; text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.18em; }
.article-body blockquote { border-left: 0.3rem solid var(--neon); padding-left: 1rem; color: var(--muted); font-style: italic; }
.article-body ol li::marker { color: var(--teal); font-size: 0.82em; font-weight: 850; }
.article-body li + li { margin-top: 0.35rem; }
.decorative-dots {
  position: absolute;
  z-index: 0;
  top: 7rem;
  width: 7.5rem;
  height: 12rem;
  opacity: 0.42;
  background-image: radial-gradient(circle, var(--teal) 1.6px, transparent 1.8px);
  background-size: 1rem 1rem;
}
.decorative-dots.left { left: 0; top: 33%; transform: translateX(-35%); }
.decorative-dots.right { right: 0; top: 66%; transform: translateX(35%); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

@keyframes heroBlob {
  0% { border-radius: 36% 64% 60% 40% / 44% 38% 62% 56%; transform: translate3d(-1.2rem, -49%, 0) rotate(-3deg) scale(1); }
  100% { border-radius: 62% 38% 42% 58% / 52% 58% 42% 48%; transform: translate3d(1.3rem, -53%, 0) rotate(4deg) scale(1.03); }
}

@keyframes appearUp {
  from { opacity: 0; transform: translateY(0.45rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes disappearDown {
  to { opacity: 0; transform: translateY(0.45rem); }
}

@keyframes activeCard {
  0% { transform: translateY(0) scale(1); }
  55% { transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(-1px) scale(1); }
}

@keyframes suggestionAdded {
  0% { opacity: 0; transform: translateY(0.6rem) scale(0.98); }
  65% { opacity: 1; transform: translateY(-1px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 820px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .site-menu { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-menu a { text-align: center; }
  .hero { min-height: 34rem; }
  .hero-blob { right: -12rem; width: 42rem; height: 30rem; opacity: 0.72; }
  .hero-glass { mask-image: linear-gradient(90deg, #000 0%, #000 78%, transparent 100%); }
  .hero-content { padding-right: 4rem; }
  .concept-section { margin-top: 2rem; }
  .concept-section-scripture + .sermon-feeds { padding-top: 1.25rem; }
  .visit-section { padding-top: 2rem; }
  .visit-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; padding-top: 2rem; }
  .sermon-feeds { padding-top: 2rem; }
  .music-home-cta { align-items: stretch; flex-direction: column; }
  .music-home-cta .button.secondary { text-align: center; }
  .feed-grid { grid-template-columns: 1fr; }
  .spotify-frame { min-height: 352px; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; margin-top: 0; }
  .admin-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-nav a { text-align: center; }
  .form-grid { grid-template-columns: 1fr; }
  .selected-song, .song-row, .song-row form { align-items: stretch; flex-direction: column; }
  .song-line { align-items: flex-start; flex-direction: column; gap: 0.1rem; }
  .song-line span::before { content: none; }
  .duplicate-options { grid-template-columns: 1fr; }
  .decorative-dots { display: none; }
  .article-body { border-radius: 1.2rem; }
}

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