/*
 * HTNS v217 — final global website-style polish
 * Warm cream, muted gold, navy, and a subtle blue wash applied consistently
 * across member, admin, guest, view-only, light, and dark modes.
 */

:root {
  --navy: #153b63;
  --navy-2: #245983;
  --gold: #d3ac3f;
  --gold-2: #e6cd80;
  --gold-soft: #f7edc0;
  --media: #153b63;
  --worship: #d3ac3f;
  --ok: #4c8063;
  --wait: #c99624;
  --no: #b84f5a;
  --bg: #f4efe6;
  --card: #fffdf7;
  --ink: #17385d;
  --muted: #718091;
  --line: #ded5c2;
  --chip: #eee6d8;
  --soft: #faf6ee;
  --shadow: 0 10px 24px rgba(26, 52, 78, .075);

  --site-page: #f5f0e7;
  --site-page-top: #fbf8f1;
  --site-surface: #fffdf8;
  --site-surface-warm: #fbf5e7;
  --site-blue-wash: #eaf4f6;
  --site-gold: #d3ac3f;
  --site-gold-deep: #9b7412;
  --site-navy: #153b63;
  --site-muted: #718091;
  --site-line: #ded5c2;
  --site-danger: #b84f5a;
  --site-radius-xl: 24px;
  --site-radius-lg: 18px;
  --site-radius-md: 14px;
  --site-shadow: 0 12px 28px rgba(26, 52, 78, .08);
  --site-shadow-soft: 0 6px 16px rgba(26, 52, 78, .055);

  --sb-navy: #153b63;
  --sb-navy-2: #245983;
  --sb-gold: #d3ac3f;
  --sb-gold-soft: #f7edc0;
  --sb-cream: #fffdf8;
  --sb-page: #f5f0e7;
  --sb-line: #ded5c2;
  --sb-muted: #718091;
  --sb-green: #3f7858;
  --sb-red: #b84f5a;
  --sb-shadow: 0 12px 28px rgba(26, 52, 78, .08);
}

html,
body {
  background:
    radial-gradient(720px 380px at 100% 10%, rgba(197, 224, 229, .38), transparent 63%),
    linear-gradient(180deg, var(--site-page-top) 0%, var(--site-page) 100%) !important;
  color: var(--site-navy) !important;
}

body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app,
#app,
#mainApp {
  background:
    radial-gradient(620px 320px at 100% 14%, rgba(197, 224, 229, .34), transparent 62%),
    linear-gradient(180deg, var(--site-page-top) 0%, var(--site-page) 100%) !important;
  color: var(--site-navy) !important;
}

#mainApp main,
body.guest-mode #mainApp main,
body.view-only-mode #mainApp main,
body[data-user-role="guest"] #mainApp main,
body[data-mode="guest"] #mainApp main {
  background: transparent !important;
}

a {
  color: var(--site-gold-deep) !important;
}

/* --------------------------------------------------------------------------
   Global surfaces
   -------------------------------------------------------------------------- */
.panel,
.card,
.sheet,
.drive-wrap,
.album-card,
.album-slider,
.photo-card,
.profile-card,
.schedule-card,
.event-card,
.feedback-sheet,
#mainApp .card,
#mainApp .home-team-card,
#mainApp .my-schedule-sheet,
#mainApp .my-schedule-row,
#view-schedule .schedule-team-panel,
#view-schedule .schedule-team-body,
#view-profile .me-section-card,
#view-profile .me-admin-reference,
#view-profile .me-admin-manager-stack,
#view-profile .me-super-album-card,
#view-albums .resource-list-group,
#view-albums .resource-preach-card,
#view-albums .resource-team-group,
#view-albums .resource-announcement-card,
#view-albums .media-resource-panel,
#view-albums .htns-songbook-shell,
#view-events .event-page-card,
#view-events .events-date-box,
#view-events .events-nav-btn {
  background: linear-gradient(94deg, var(--site-surface) 0%, var(--site-surface-warm) 70%, var(--site-blue-wash) 100%) !important;
  color: var(--site-navy) !important;
  border-color: rgba(207, 190, 132, .72) !important;
  box-shadow: var(--site-shadow) !important;
}

.card,
.panel,
.sheet,
.album-card,
.album-slider,
.profile-card,
.schedule-card,
.event-card,
#mainApp .home-team-card,
#view-schedule .schedule-team-panel,
#view-profile .me-section-card,
#view-profile .me-admin-reference,
#view-profile .me-admin-manager-stack,
#view-profile .me-super-album-card,
#view-albums .resource-list-group,
#view-albums .resource-preach-card,
#view-albums .resource-team-group,
#view-albums .resource-announcement-card,
#view-albums .htns-songbook-shell {
  border-radius: var(--site-radius-xl) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card h4,
.sheet h3,
.album-card h4,
#mainApp .home-section-title,
#mainApp .home-team-title,
#view-schedule .schedule-team-title,
#view-events .events-month-title,
#view-events .events-section-title,
#view-profile .me-section-title,
#view-albums .resource-page-title,
#view-albums .resource-preach-copy h3,
#view-albums .resource-team-group-title,
#view-albums .resource-announcement-copy b {
  color: var(--site-navy) !important;
}

.muted,
.empty,
.album-hero p,
.album-slider-count,
.pwr-meta,
#mainApp .home-team-count,
#mainApp .home-team-date,
#mainApp .home-team-role,
#view-schedule .schedule-team-sub,
#view-events .event-page-time,
#view-profile .me-pref-sub,
#view-profile .me-power-sub,
#view-albums .resource-preach-copy p,
#view-albums .resource-team-group-sub,
#view-albums .resource-announcement-copy small {
  color: var(--site-muted) !important;
}

/* Preserve the exact compact Home-card geometry; change only the treatment. */
#mainApp #view-home .hero.assignment-hero,
#mainApp #view-home .home-sermon-card,
#mainApp #view-home .home-worship-card,
#mainApp #view-home .home-next-event-ref {
  background: linear-gradient(94deg, #fff9e5 0%, #fcf7e8 68%, #edf6f7 100%) !important;
  border-color: rgba(211, 172, 63, .88) !important;
  box-shadow: 0 12px 26px rgba(26, 52, 78, .085), inset 0 1px 0 rgba(255,255,255,.94) !important;
}

#mainApp #view-home .hero.assignment-hero::before,
#mainApp #view-home .home-sermon-card::before,
#mainApp #view-home .home-worship-card::before,
#mainApp #view-home .home-next-event-ref::before {
  background: linear-gradient(180deg, #e7c451 0%, #c99a18 100%) !important;
}

#mainApp #view-home .assignment-hero-icon,
#mainApp #view-home .home-sermon-date,
#mainApp #view-home .home-worship-date,
#mainApp #view-home .home-event-date {
  background: linear-gradient(145deg, #fffbea 0%, #f5e39b 100%) !important;
  border-color: rgba(202, 162, 45, .72) !important;
  color: var(--site-navy) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.78), 0 4px 12px rgba(94, 74, 22, .08) !important;
}

#mainApp #view-home .home-card-kicker,
#mainApp #view-home .assignment-hero .kicker,
#mainApp #view-home .home-sermon-kicker,
#mainApp #view-home .home-worship-kicker,
#mainApp #view-home .home-event-kicker {
  color: #9b7412 !important;
}

/* --------------------------------------------------------------------------
   Header and navigation — applies to signed-in, guest, and view-only modes
   -------------------------------------------------------------------------- */
#mainApp .top,
body.guest-mode #mainApp .top,
body.view-only-mode #mainApp .top,
body[data-user-role="guest"] #mainApp .top,
body[data-mode="guest"] #mainApp .top {
  background: linear-gradient(180deg, rgba(255,253,248,.98) 0%, rgba(248,241,226,.98) 100%) !important;
  color: var(--site-navy) !important;
  border-color: rgba(207, 190, 132, .72) !important;
  box-shadow: 0 8px 22px rgba(26, 52, 78, .075) !important;
}

#mainApp .who,
body.guest-mode #mainApp .who,
body.view-only-mode #mainApp .who {
  color: var(--site-muted) !important;
}

#mainApp #whoName,
#mainApp .who b,
body.guest-mode #mainApp #whoName,
body.view-only-mode #mainApp #whoName {
  color: var(--site-navy) !important;
  text-shadow: none !important;
}

#mainApp #whoHi,
body.guest-mode #mainApp #whoHi,
body.view-only-mode #mainApp #whoHi {
  color: #a27713 !important;
  text-shadow: none !important;
}

#mainApp .top .icon-btn,
#mainApp #btnLang,
body.guest-mode #mainApp .top .icon-btn,
body.view-only-mode #mainApp .top .icon-btn {
  background: rgba(255,255,255,.76) !important;
  color: var(--site-navy) !important;
  border-color: rgba(207, 190, 132, .64) !important;
  box-shadow: var(--site-shadow-soft) !important;
}

#mainApp .top .icon-btn:active,
#mainApp #btnLang button.on,
#mainApp #btnLang button[aria-pressed="true"] {
  background: #f3e9cf !important;
  color: var(--site-navy) !important;
}

#mainApp #btnBell.has-notif {
  background: linear-gradient(180deg, #f2d97f 0%, #d3ac3f 100%) !important;
  color: var(--site-navy) !important;
  box-shadow: 0 0 0 2px rgba(211,172,63,.22), var(--site-shadow-soft) !important;
}

#mainApp .tabs,
body.guest-mode #mainApp .tabs,
body.view-only-mode #mainApp .tabs,
body[data-user-role="guest"] #mainApp .tabs,
body[data-mode="guest"] #mainApp .tabs {
  background: rgba(255,253,248,.97) !important;
  border-color: rgba(207, 190, 132, .64) !important;
  box-shadow: 0 -8px 24px rgba(26, 52, 78, .075) !important;
}

#mainApp .tabs button,
body.guest-mode #mainApp .tabs button,
body.view-only-mode #mainApp .tabs button {
  color: #788696 !important;
}

#mainApp .tabs button.on,
body.guest-mode #mainApp .tabs button.on,
body.view-only-mode #mainApp .tabs button.on {
  color: var(--site-navy) !important;
  background: rgba(211,172,63,.14) !important;
  border-radius: 14px !important;
}

#mainApp .tabs .tab-active-line,
body.guest-mode #mainApp .tabs .tab-active-line,
body.view-only-mode #mainApp .tabs .tab-active-line {
  background: var(--site-gold) !important;
}

/* --------------------------------------------------------------------------
   Buttons, icon controls, fields, focus, and feedback
   -------------------------------------------------------------------------- */
.btn,
.btn-navy,
.btn-gold,
.btn-soft,
.btn-ok,
.btn-no,
.btn-guest,
.btn-save-all,
.btn-navy-gold,
.schedule-edit-hero-btn,
.pwr-btn,
.pwr-list-btn,
#mainApp .assignment-hero .actions .btn,
#view-events .events-add-btn,
#view-albums .resource-preach-save,
#view-albums .resource-preach-cancel,
#view-albums .resource-announcement-btn,
#view-albums .resource-note-action,
#view-albums .media-resource-editor-btn {
  border-radius: 15px !important;
  font-weight: 850 !important;
  letter-spacing: .015em !important;
}

.btn-navy,
.btn-guest,
.btn-save-all,
.btn-navy-gold,
.schedule-edit-hero-btn,
.pwr-btn,
#mainApp .assignment-hero .actions .btn {
  background: linear-gradient(180deg, #245983 0%, #153b63 100%) !important;
  color: #fff !important;
  border-color: #153b63 !important;
  box-shadow: 0 8px 18px rgba(21,59,99,.16) !important;
}

.btn-gold,
.btn-ok,
.pwr-btn.off,
.power-check-actions .power-check-power,
#view-albums .resource-preach-save {
  background: linear-gradient(180deg, #f2da83 0%, #d3ac3f 100%) !important;
  color: var(--site-navy) !important;
  border-color: #c49823 !important;
  box-shadow: 0 8px 18px rgba(211,172,63,.16) !important;
}

.btn-soft,
.pwr-list-btn,
.sheet-back,
#view-albums .resource-preach-cancel {
  background: linear-gradient(180deg, #fffdf8 0%, #eee6d8 100%) !important;
  color: var(--site-navy) !important;
  border-color: rgba(207,190,132,.72) !important;
}

.btn-no,
#view-albums .resource-preach-remove {
  background: #fbefef !important;
  color: var(--site-danger) !important;
  border-color: #eccbd0 !important;
}

.icon-btn,
#mainApp .icon-btn,
#view-schedule .schedule-team-chevron,
#mainApp .my-schedule-close,
#mainApp .schedule-role-grid .slot-actions button,
#view-albums .resource-preach-edit,
#view-albums .resource-preach-remove,
#view-albums .htns-songbook-icon-action,
#view-albums .resource-note-action,
#view-albums .resource-library-remove,
#view-albums .resource-announcement-action {
  background: rgba(255,255,255,.76) !important;
  color: var(--site-navy) !important;
  border-color: #d5e0e6 !important;
  box-shadow: 0 4px 12px rgba(26,52,78,.05) !important;
}

input,
select,
textarea,
.field,
.name-search,
.date-box,
.name-card,
.quick-person-select,
.quick-person-static,
#view-albums .htns-songbook-search,
#view-albums .htns-songbook-sort,
#view-albums .htns-songbook-field input,
#view-albums .htns-songbook-field textarea,
#view-albums .htns-songbook-field select {
  background: rgba(255,255,255,.8) !important;
  color: var(--site-navy) !important;
  border-color: #d6e0e6 !important;
}

input:focus,
select:focus,
textarea:focus,
.field:focus,
.name-search:focus,
.date-box:focus-within,
.quick-person-select:focus,
#view-albums .htns-songbook-search:focus-within {
  border-color: var(--site-gold) !important;
  box-shadow: 0 0 0 3px rgba(211,172,63,.18) !important;
  outline: none !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(36,89,131,.78) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   Home dashboard, quick actions, and team cards
   -------------------------------------------------------------------------- */
#mainApp #view-home .home-team-card,
#mainApp #view-home .home-quick-ref,
#mainApp #view-home .mini-tile {
  background: linear-gradient(94deg, #fffdf8 0%, #faf4e6 70%, #eaf4f6 100%) !important;
  border-color: rgba(207,190,132,.62) !important;
  box-shadow: var(--site-shadow) !important;
}

#mainApp #view-home .home-team-member,
#mainApp #view-home .home-team-person-chip,
#mainApp #view-home .home-quick-ref .qi {
  background: rgba(255,255,255,.78) !important;
  color: var(--site-navy) !important;
  border-color: #d7e2e8 !important;
}

#mainApp #view-home .home-team-member.mine {
  background: #faf0c4 !important;
  border-color: var(--site-gold) !important;
}

#mainApp #view-home .home-team-view,
#mainApp #view-home .home-team-live,
#mainApp #view-home .home-team-date {
  background: rgba(211,172,63,.14) !important;
  color: var(--site-navy) !important;
  border-color: rgba(211,172,63,.34) !important;
}

#mainApp #view-home .home-team-icon,
#mainApp #view-home .home-team-icon.team-worship {
  background: linear-gradient(145deg, #fffaf0 0%, #f0e1a1 100%) !important;
  color: var(--site-navy) !important;
  border-color: rgba(202,162,45,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--site-shadow-soft) !important;
}

#mainApp #view-home .home-team-icon .media-silver,
#mainApp #view-home .home-team-icon .media-blue,
#mainApp #view-home .home-team-icon .media-dark,
#mainApp #view-home .home-team-icon .worship-gold,
#mainApp #view-home .home-team-icon .worship-glow {
  stroke: var(--site-navy) !important;
}

/* --------------------------------------------------------------------------
   Schedule page
   -------------------------------------------------------------------------- */
#view-schedule .schedule-team-panel.media-panel,
#view-schedule .schedule-team-panel.worship-panel {
  border-top-color: var(--site-gold) !important;
}

#view-schedule .schedule-team-toggle,
#view-schedule .schedule-team-body,
#view-schedule .schedule-role-grid .slot.quick-slot,
#mainApp .schedule-role-grid .slot.quick-slot,
#mainApp .schedule-role-grid .slot,
#mainApp .my-schedule-row {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(207,190,132,.5) !important;
}

#view-schedule .schedule-team-status,
#mainApp .my-schedule-team,
.b-media {
  background: #e6eef3 !important;
  color: var(--site-navy) !important;
  border-color: #d1dee6 !important;
}

#view-schedule .schedule-team-status.needs-fill,
#mainApp .my-schedule-time,
.b-worship {
  background: #f7edc0 !important;
  color: #72540a !important;
  border-color: #e3c65d !important;
}

#mainApp .schedule-role-grid .slot.quick-slot::before,
#view-schedule .schedule-role-grid .slot.quick-slot::before {
  background: linear-gradient(180deg, var(--site-gold), rgba(211,172,63,0)) !important;
}

/* --------------------------------------------------------------------------
   Events
   -------------------------------------------------------------------------- */
#view-events .events-page {
  background: transparent !important;
}

#view-events .events-nav-btn,
#view-events .events-date-box,
#view-events .event-page-card,
#view-events .events-add-btn {
  background: linear-gradient(94deg, #fffdf8 0%, #faf4e6 72%, #eaf4f6 100%) !important;
  border-color: rgba(207,190,132,.65) !important;
  color: var(--site-navy) !important;
  box-shadow: var(--site-shadow) !important;
}

#view-events .event-page-chip {
  background: linear-gradient(145deg, #fff9e5 0%, #f1dc80 100%) !important;
  color: var(--site-navy) !important;
  border-color: rgba(202,162,45,.62) !important;
}

#view-events .event-page-arrow,
#view-events .events-add-btn .plus {
  color: var(--site-gold-deep) !important;
}

#view-events .event-church-only-badge,
#mainApp .home-event-church-only-badge {
  background: #fff7d9 !important;
  color: #76570a !important;
  border-color: #ddc467 !important;
}

/* --------------------------------------------------------------------------
   Resources and Songbook
   -------------------------------------------------------------------------- */
#view-albums .resource-list-group,
#view-albums .resource-preach-card,
#view-albums .resource-team-group,
#view-albums .resource-announcement-card,
#view-albums .htns-songbook-shell {
  overflow: hidden !important;
}

#view-albums .resource-preach-head,
#view-albums .resource-team-group > summary,
#view-albums .resource-announcement-head,
#view-albums .htns-songbook-head {
  background: linear-gradient(94deg, #fffdf8 0%, #faf4e6 72%, #eaf4f6 100%) !important;
  border-color: rgba(207,190,132,.5) !important;
}

#view-albums .resource-preach-body,
#view-albums .resource-team-group-body,
#view-albums .resource-announcement-body,
#view-albums .htns-songbook-panel,
#view-albums .htns-songbook-list {
  background: rgba(255,255,255,.66) !important;
}

#view-albums .resource-preach-roster,
#view-albums .resource-preach-editor,
#view-albums .resource-library-row,
#view-albums .resource-note-row,
#view-albums .resource-announcement-row,
#view-albums .htns-songbook-row,
#view-albums .htns-songbook-card,
#view-albums .htns-songbook-set-card,
#view-albums .htns-songbook-form-card {
  background: rgba(255,255,255,.78) !important;
  border-color: #dbe4e8 !important;
}

#view-albums .htns-songbook-tabs,
#view-albums .htns-songbook-filterbar,
#view-albums .htns-songbook-summary,
#view-albums .htns-songbook-toolbar {
  background: rgba(250,246,238,.9) !important;
  border-color: #e2ddd1 !important;
}

#view-albums .htns-songbook-tab.on,
#view-albums .htns-songbook-chip.on,
#view-albums .htns-songbook-icon-action.primary,
#view-albums .htns-songbook-icon-action.on {
  background: #f7edc0 !important;
  color: var(--site-navy) !important;
  border-color: #ddc25d !important;
}

#view-albums .htns-songbook-primary-btn,
#view-albums .htns-songbook-live-btn {
  background: linear-gradient(180deg, #245983 0%, #153b63 100%) !important;
  color: #fff !important;
  border-color: #153b63 !important;
}

/* --------------------------------------------------------------------------
   Profile, settings, and checklist editor
   -------------------------------------------------------------------------- */
#view-profile .me-pref-item,
#view-profile .me-power-row,
#view-profile .availability-item,
#view-profile .member-compact,
#view-profile .roster-manager,
#view-profile .me-date-field,
#view-profile .me-availability-add {
  background: rgba(255,255,255,.72) !important;
  border-color: #d9e2e7 !important;
}

#view-profile .me-pref-icon,
#view-profile .me-power-icon,
#view-profile .me-date-icon,
#view-profile .me-icon-btn,
#view-profile .me-power-btn {
  background: #fff9e9 !important;
  color: var(--site-navy) !important;
  border-color: rgba(211,172,63,.52) !important;
}

#view-profile .me-super-badge,
#view-profile .roster-access-badge,
.vm-readonly-pill {
  background: #f7edc0 !important;
  color: #72540a !important;
  border-color: #dfc45d !important;
}

.power-check-sheet,
.power-editor-sheet,
.power-checklist-editor-sheet,
#modal .power-check-sheet,
#modal .power-editor-sheet,
#modal .power-checklist-editor-sheet {
  background: linear-gradient(180deg, #fffdf8 0%, #f8f1e3 100%) !important;
  color: var(--site-navy) !important;
  border-color: rgba(207,190,132,.7) !important;
  box-shadow: 0 22px 50px rgba(26,52,78,.18) !important;
}

.power-check-item,
.power-editor-step,
.power-checklist-editor-step {
  background: rgba(255,255,255,.76) !important;
  border-color: #d9e2e7 !important;
}

.check-n,
.power-editor-step-number,
.power-checklist-editor-step-number {
  background: linear-gradient(180deg, #f2da83 0%, #d3ac3f 100%) !important;
  color: var(--site-navy) !important;
}

.simple-song-readonly,
.resource-library-readonly,
.resource-date-readonly-note,
.resource-preach-readonly,
.alert-warn {
  background: rgba(255,255,255,.68) !important;
  color: var(--site-muted) !important;
  border-color: rgba(211,172,63,.55) !important;
}

/* --------------------------------------------------------------------------
   Login, Guest Mode, and View Only Mode
   -------------------------------------------------------------------------- */
#gate.gate {
  background:
    radial-gradient(720px 360px at 100% 12%, rgba(197,224,229,.4), transparent 64%),
    linear-gradient(180deg, #fbf8f1 0%, #f3ede2 100%) !important;
  color: var(--site-navy) !important;
}

#gate .mark {
  background: linear-gradient(145deg, #fffdf8 0%, #f5e8b2 100%) !important;
  border-color: var(--site-gold) !important;
  box-shadow: 0 14px 30px rgba(26,52,78,.12) !important;
}

#gate #gTitle,
#gate #lblName,
#gate .name-box #nameBoxLabel {
  color: var(--site-navy) !important;
  text-shadow: none !important;
}

#gate #gSub,
#gate #gHint,
#gate .hint,
#gate p {
  color: var(--site-muted) !important;
}

#gate .panel,
#gate .name-drop,
#gate .name-card {
  background: linear-gradient(94deg, #fffdf8 0%, #faf4e6 74%, #eaf4f6 100%) !important;
  color: var(--site-navy) !important;
  border-color: rgba(207,190,132,.7) !important;
  box-shadow: var(--site-shadow) !important;
}

#gate .name-box {
  background: rgba(255,255,255,.78) !important;
  color: var(--site-navy) !important;
  border-color: #d6e0e6 !important;
}

#gate .guest-language-row #btnGuest,
#gate #btnGuest,
#gate .login-offline-songbook-btn,
#gate #btnOpenOfflineSongbook {
  background: linear-gradient(180deg, #245983 0%, #153b63 100%) !important;
  color: #fff !important;
  border-color: #153b63 !important;
  box-shadow: 0 10px 22px rgba(21,59,99,.16) !important;
}

#gate .guest-language-row #btnVI,
#gate .guest-language-row #btnEN,
#gate .langs button,
#gate .langs span.lang-btn {
  background: rgba(255,255,255,.76) !important;
  color: var(--site-navy) !important;
  border-color: rgba(207,190,132,.65) !important;
}

#gate .langs button.on,
#gate .langs span.lang-btn.on {
  background: #f7edc0 !important;
  color: var(--site-navy) !important;
}

#gate #btnInstallApp {
  background: linear-gradient(180deg, #f2da83 0%, #d3ac3f 100%) !important;
  color: var(--site-navy) !important;
  border-color: #c49823 !important;
  box-shadow: 0 10px 22px rgba(211,172,63,.16) !important;
}

body.guest-mode #mainApp,
body.view-only-mode #mainApp,
body[data-user-role="guest"] #mainApp,
body[data-mode="guest"] #mainApp {
  background:
    radial-gradient(620px 320px at 100% 14%, rgba(197,224,229,.34), transparent 62%),
    linear-gradient(180deg, var(--site-page-top) 0%, var(--site-page) 100%) !important;
}

/* --------------------------------------------------------------------------
   Dark mode — same design language, genuinely dark and consistent
   -------------------------------------------------------------------------- */
html[data-theme="dark"],
body[data-theme="dark"],
[data-theme="dark"] {
  --navy: #edf5fb;
  --navy-2: #b8d3e7;
  --gold: #dfbd58;
  --gold-2: #efd887;
  --gold-soft: #5a4820;
  --bg: #0b1d2d;
  --card: #132b3d;
  --ink: #edf5fb;
  --muted: #aebdca;
  --line: #42566a;
  --chip: #1c374a;
  --soft: #102638;

  --site-page: #0b1d2d;
  --site-page-top: #10283a;
  --site-surface: #132c3e;
  --site-surface-warm: #183245;
  --site-blue-wash: #18384a;
  --site-gold: #dfbd58;
  --site-gold-deep: #efd887;
  --site-navy: #edf5fb;
  --site-muted: #aebdca;
  --site-line: #42566a;
  --site-danger: #ef929b;

  --sb-navy: #edf5fb;
  --sb-navy-2: #b8d3e7;
  --sb-gold: #dfbd58;
  --sb-gold-soft: #5a4820;
  --sb-cream: #132c3e;
  --sb-page: #0b1d2d;
  --sb-line: #42566a;
  --sb-muted: #aebdca;
  --sb-green: #8bc5a1;
  --sb-red: #ef929b;
}

html[data-theme="dark"],
body[data-theme="dark"] {
  background:
    radial-gradient(720px 380px at 100% 10%, rgba(50,104,129,.25), transparent 63%),
    linear-gradient(180deg, #10283a 0%, #0b1d2d 100%) !important;
  color: #edf5fb !important;
}

[data-theme="dark"] .app,
[data-theme="dark"] #app,
[data-theme="dark"] #mainApp,
body[data-theme="dark"] .app,
body[data-theme="dark"] #mainApp {
  background:
    radial-gradient(620px 320px at 100% 14%, rgba(50,104,129,.22), transparent 62%),
    linear-gradient(180deg, #10283a 0%, #0b1d2d 100%) !important;
  color: #edf5fb !important;
}

[data-theme="dark"] .panel,
[data-theme="dark"] .card,
[data-theme="dark"] .sheet,
[data-theme="dark"] .drive-wrap,
[data-theme="dark"] .album-card,
[data-theme="dark"] .album-slider,
[data-theme="dark"] #mainApp .home-team-card,
[data-theme="dark"] #mainApp .my-schedule-sheet,
[data-theme="dark"] #mainApp .my-schedule-row,
[data-theme="dark"] #view-schedule .schedule-team-panel,
[data-theme="dark"] #view-schedule .schedule-team-body,
[data-theme="dark"] #view-profile .me-section-card,
[data-theme="dark"] #view-profile .me-admin-reference,
[data-theme="dark"] #view-profile .me-admin-manager-stack,
[data-theme="dark"] #view-albums .resource-list-group,
[data-theme="dark"] #view-albums .resource-preach-card,
[data-theme="dark"] #view-albums .resource-team-group,
[data-theme="dark"] #view-albums .resource-announcement-card,
[data-theme="dark"] #view-albums .htns-songbook-shell,
[data-theme="dark"] #view-events .event-page-card,
[data-theme="dark"] #view-events .events-date-box,
[data-theme="dark"] #view-events .events-nav-btn {
  background: linear-gradient(94deg, #132c3e 0%, #183245 72%, #18384a 100%) !important;
  color: #edf5fb !important;
  border-color: #42566a !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}

[data-theme="dark"] #mainApp .top,
body[data-theme="dark"].guest-mode #mainApp .top,
body[data-theme="dark"].view-only-mode #mainApp .top {
  background: linear-gradient(180deg, #183245 0%, #132c3e 100%) !important;
  border-color: #5d5535 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.2) !important;
}

[data-theme="dark"] #mainApp .tabs {
  background: rgba(15,36,52,.97) !important;
  border-color: #5d5535 !important;
  box-shadow: 0 -8px 24px rgba(0,0,0,.2) !important;
}

[data-theme="dark"] #mainApp .tabs button { color: #aebdca !important; }
[data-theme="dark"] #mainApp .tabs button.on {
  color: #efd887 !important;
  background: rgba(223,189,88,.14) !important;
}

[data-theme="dark"] #mainApp #view-home .hero.assignment-hero,
[data-theme="dark"] #mainApp #view-home .home-sermon-card,
[data-theme="dark"] #mainApp #view-home .home-worship-card,
[data-theme="dark"] #mainApp #view-home .home-next-event-ref {
  background: linear-gradient(94deg, #27351f 0%, #1b3340 72%, #173a49 100%) !important;
  border-color: #8c7530 !important;
  color: #edf5fb !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .field,
[data-theme="dark"] .name-search,
[data-theme="dark"] .date-box,
[data-theme="dark"] .name-card,
[data-theme="dark"] .quick-person-select,
[data-theme="dark"] .quick-person-static,
[data-theme="dark"] #view-albums .htns-songbook-search,
[data-theme="dark"] #view-albums .htns-songbook-sort {
  background: #102638 !important;
  color: #edf5fb !important;
  border-color: #42566a !important;
}

[data-theme="dark"] .icon-btn,
[data-theme="dark"] #mainApp .icon-btn,
[data-theme="dark"] #view-schedule .schedule-team-chevron,
[data-theme="dark"] #mainApp .my-schedule-close,
[data-theme="dark"] #mainApp .schedule-role-grid .slot-actions button,
[data-theme="dark"] #view-albums .htns-songbook-icon-action {
  background: #173548 !important;
  color: #edf5fb !important;
  border-color: #42566a !important;
}

[data-theme="dark"] .muted,
[data-theme="dark"] .empty,
[data-theme="dark"] .album-hero p,
[data-theme="dark"] .pwr-meta,
[data-theme="dark"] #mainApp .home-team-count,
[data-theme="dark"] #mainApp .home-team-date,
[data-theme="dark"] #mainApp .home-team-role,
[data-theme="dark"] #view-schedule .schedule-team-sub,
[data-theme="dark"] #view-events .event-page-time {
  color: #aebdca !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .card h4,
[data-theme="dark"] .sheet h3,
[data-theme="dark"] #mainApp #whoName,
[data-theme="dark"] #mainApp .who b,
[data-theme="dark"] #mainApp .home-team-title,
[data-theme="dark"] #view-schedule .schedule-team-title,
[data-theme="dark"] #view-events .events-month-title,
[data-theme="dark"] #view-profile .me-section-title {
  color: #edf5fb !important;
}

/* --------------------------------------------------------------------------
   Mobile spacing consistency
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  #mainApp main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .card,
  .panel,
  .sheet,
  .album-card,
  .album-slider,
  .profile-card,
  .schedule-card,
  .event-card,
  #mainApp .home-team-card,
  #view-schedule .schedule-team-panel,
  #view-profile .me-section-card,
  #view-profile .me-admin-reference,
  #view-profile .me-admin-manager-stack,
  #view-albums .resource-list-group,
  #view-albums .resource-preach-card,
  #view-albums .resource-team-group,
  #view-albums .resource-announcement-card,
  #view-albums .htns-songbook-shell {
    border-radius: 18px !important;
  }

  #mainApp .top {
    border-radius: 18px !important;
    box-shadow: 0 6px 16px rgba(26,52,78,.065) !important;
  }

  #mainApp .tabs {
    border-radius: 22px 22px 0 0 !important;
  }

  #mainApp .top .icon-btn,
  #mainApp #btnLang,
  .icon-btn,
  #view-schedule .schedule-team-chevron,
  #mainApp .my-schedule-close {
    border-radius: 12px !important;
  }

  #view-schedule .schedule-team-panel,
  #view-events .event-page-card,
  #view-profile .me-section-card,
  #view-albums .resource-preach-card,
  #view-albums .resource-team-group,
  #view-albums .resource-announcement-card {
    box-shadow: 0 8px 18px rgba(26,52,78,.065) !important;
  }

  [data-theme="dark"] #view-schedule .schedule-team-panel,
  [data-theme="dark"] #view-events .event-page-card,
  [data-theme="dark"] #view-profile .me-section-card,
  [data-theme="dark"] #view-albums .resource-preach-card,
  [data-theme="dark"] #view-albums .resource-team-group,
  [data-theme="dark"] #view-albums .resource-announcement-card {
    box-shadow: 0 8px 18px rgba(0,0,0,.2) !important;
  }
}