:root{
  --bg: #eee3cf;
  --bg-3: #e7dac3;
  --bg-glow: rgba(255,255,255,.52);
  --frame: #2f2016;
  --frame-2: #3c2a1f;
  --surface: rgba(255,255,255,.42);
  --surface-strong: rgba(255,255,255,.56);
  --card: #3a271d;
  --card-2: #4a3324;
  --text: #4a3528;
  --muted: #9d8569;
  --muted-2: #c2b199;
  --line: rgba(74, 53, 40, .12);
  --accent: #de9340;
  --accent-2: #f0bc63;
  --shadow: 0 24px 64px rgba(56, 38, 26, .26);
}

html[data-theme="dark"]{
  --bg: #0d1217;
  --bg-3: #141c23;
  --bg-glow: rgba(99,145,177,.18);
  --frame: #1f1611;
  --frame-2: #2b2019;
  --surface: rgba(18, 26, 33, .72);
  --surface-strong: rgba(24, 34, 43, .84);
  --card: #21160f;
  --card-2: #2a1d14;
  --text: #f1e8db;
  --muted: #b49d85;
  --muted-2: #cdbca8;
  --line: rgba(255,255,255,.08);
  --accent: #f0b15d;
  --accent-2: #ffd98d;
  --shadow: 0 28px 72px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
html{
  --app-height:100dvh;
}
body{
  font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:
    radial-gradient(circle at 50% 0%, var(--bg-glow), transparent 26%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 100%);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
img,svg{max-width:100%}

.page-shell{
  min-height:var(--app-height, 100dvh);
  display:grid;
  place-items:center;
  padding:8px;
  overflow:hidden;
}

.page-shell--radio{
  align-content:center;
}

.radio-phone{
  width:min(430px, 100%);
  height:calc(var(--app-height, 100dvh) - 16px);
  max-height:760px;
  min-height:0;
  background:linear-gradient(180deg, var(--surface-strong) 0%, var(--surface) 100%);
  border:8px solid var(--frame);
  border-radius:30px;
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.26);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
}

.radio-header{
  padding:18px 14px 8px;
}

.radio-header__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.radio-header__icon{
  width:28px;
  height:28px;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:var(--accent);
  border:1px solid rgba(222,147,64,.25);
  background:rgba(255,255,255,.18);
  flex:0 0 auto;
}

.radio-header__icon svg,
.radio-control svg,
.radio-bottom-nav__item svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.radio-header__icon svg{
  width:17px;
  height:17px;
}

.radio-header__icon--muted{
  color:#ad9579;
  border-color:rgba(74,53,40,.18);
}

.radio-header__message-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(222,147,64,.34);
  background:rgba(222,147,64,.14);
  color:var(--text);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  flex:0 0 auto;
  box-shadow:0 8px 18px rgba(222,147,64,.12);
}

.radio-header__message-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(222,147,64,.14);
}

.radio-header__title{
  min-width:0;
  text-align:left;
  flex:1;
}

.radio-header__title strong{
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-size:23px;
  line-height:1;
  font-weight:600;
  color:var(--text);
}

.radio-header__title small{
  display:block;
  margin-top:4px;
  font-size:11px;
  line-height:1.4;
  color:var(--muted);
}

.radio-tuning{
  margin:12px auto 6px;
  width:min(100%, 440px);
  position:relative;
  padding:12px 0 8px;
}

.radio-tuning__bar{
  display:block;
  width:100%;
  height:1px;
  background:rgba(141,118,92,.45);
  position:relative;
}

.radio-tuning__bar::before{
  content:"";
  position:absolute;
  inset:-10px 0 auto;
  height:20px;
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(141,118,92,.42) 4% 4.4%, transparent 4.4% 11.5%, rgba(141,118,92,.42) 11.5% 11.9%, transparent 11.9% 20.5%, rgba(141,118,92,.42) 20.5% 20.9%, transparent 20.9% 30.5%, rgba(141,118,92,.42) 30.5% 30.9%, transparent 30.9% 39.5%, rgba(141,118,92,.42) 39.5% 39.9%, transparent 39.9% 49.5%, rgba(141,118,92,.42) 49.5% 49.9%, transparent 49.9% 60.5%, rgba(141,118,92,.42) 60.5% 60.9%, transparent 60.9% 70.5%, rgba(141,118,92,.42) 70.5% 70.9%, transparent 70.9% 79.5%, rgba(141,118,92,.42) 79.5% 79.9%, transparent 79.9% 89.5%, rgba(141,118,92,.42) 89.5% 89.9%, transparent 89.9%);
  opacity:.85;
}

.radio-tuning__marker{
  position:absolute;
  left:50%;
  top:4px;
  width:18px;
  height:28px;
  transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(180deg, #d98d3f, #efb04d);
  border-radius:2px;
  box-shadow:0 0 0 4px rgba(222,147,64,.12);
}

.radio-frequency{
  text-align:center;
  margin-top:2px;
  font-family:'Cormorant Garamond',serif;
  font-size:16px;
  letter-spacing:.02em;
  color:#8d6f53;
}

.radio-contact-cta{
  margin:10px 12px 0;
  padding:12px 12px 10px;
  border-radius:18px;
  background:rgba(222,147,64,.11);
  border:1px solid rgba(222,147,64,.22);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.radio-contact-cta--inline{
  position:sticky;
  top:8px;
  z-index:3;
  backdrop-filter:blur(10px);
}

.radio-contact-cta__copy{
  min-width:0;
}

.radio-contact-cta__eyebrow{
  display:inline-block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:4px;
}

.radio-contact-cta strong{
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-size:20px;
  line-height:1.1;
  color:var(--text);
}

.radio-contact-cta p{
  margin:4px 0 0;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.radio-contact-cta__actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:0 0 auto;
}

.radio-live-card{
  margin:10px 12px 0;
  padding:14px 12px 12px;
  background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
  border-radius:22px;
  color:#f6ebdc;
  box-shadow:0 14px 30px rgba(49,33,24,.22);
}

.radio-live-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.badge--live{
  color:var(--accent-2);
  background:rgba(222,147,64,.10);
  border:1px solid rgba(222,147,64,.18);
}

.radio-live-card__listeners{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#cfbb9e;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(222,147,64,.5);
  animation:pulse 1.6s infinite;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(222,147,64,.48)}
  70%{box-shadow:0 0 0 9px rgba(222,147,64,0)}
  100%{box-shadow:0 0 0 0 rgba(222,147,64,0)}
}

.radio-live-card__title{
  margin:10px 0 5px;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(22px, 3.8vw, 30px);
  line-height:1.1;
  font-weight:600;
  color:#f8efe4;
}

.radio-live-card__subtitle{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:#cdb599;
}

.radio-live-card__body{
  margin-top:10px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.radio-live-card__vu{
  flex:1;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:4px;
  min-height:36px;
  padding-bottom:6px;
}

.radio-live-card__vu span{
  width:6px;
  border-radius:4px;
  background:#7f6550;
  opacity:.9;
  animation:bounce .95s ease-in-out infinite;
}

.radio-live-card__vu span:nth-child(odd){
  background:#d58b3a;
}

@keyframes bounce{
  0%,100%{height:22%}
  50%{height:100%}
}

.radio-progress{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:4px;
  color:#9d8468;
  font-family:'Cormorant Garamond',serif;
  font-size:16px;
}

.radio-progress__bar{
  position:relative;
  flex:1;
  height:5px;
  border-radius:999px;
  background:rgba(203,175,141,.28);
  overflow:hidden;
}

.radio-progress__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:100%;
  transform-origin:left center;
  transform:scaleX(.42);
  background:linear-gradient(90deg, #d98d3f, #f0bc63);
}

.radio-progress__fill::after{
  content:"";
  position:absolute;
  right:-2px;
  top:50%;
  width:9px;
  height:9px;
  transform:translateY(-50%) rotate(45deg);
  background:#de9340;
  border-radius:2px;
  box-shadow:0 0 0 2px rgba(222,147,64,.10);
}

.radio-controls{
  padding:10px 8px 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  flex-wrap:wrap;
}

.radio-control{
  border:0;
  background:transparent;
  color:#a78968;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:50px;
  min-width:50px;
  cursor:pointer;
  padding:1px 0 3px;
}

.radio-control span{
  font-family:'Cormorant Garamond',serif;
  font-size:17px;
  line-height:1;
}

.radio-control small{
  font-size:10px;
  text-transform:lowercase;
  line-height:1;
}

.radio-play{
  width:58px;
  height:58px;
  border:0;
  border-radius:50%;
  background:linear-gradient(180deg, #de9340, #e7a351);
  box-shadow:0 10px 20px rgba(222,147,64,.24);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.radio-play svg{
  width:20px;
  height:20px;
  fill:#fff7eb;
}

.radio-control svg{
  width:18px;
  height:18px;
  color:#9e7f61;
}

.radio-control:hover,
.radio-bottom-nav__item:hover,
.hero-btn:hover,
.btn:hover{
  transform:translateY(-1px);
}

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

.section-head--stacked{
  justify-content:flex-start;
}

.section-head h2{
  margin:0;
  font-family:'Cormorant Garamond',serif;
  font-size:24px;
  font-weight:600;
  color:#8c6d52;
  text-transform:none;
}

.radio-schedule{
  margin:2px 12px 0;
  padding:2px 0 0;
}

.radio-schedule__list{
  margin-top:8px;
  border-top:1px solid rgba(130,104,79,.14);
}

.radio-schedule__row{
  display:grid;
  grid-template-columns:50px 8px minmax(0,1fr);
  gap:6px;
  align-items:center;
  padding:10px 2px;
  border-bottom:1px solid rgba(130,104,79,.14);
}

.radio-schedule__row.is-active .radio-schedule__time,
.radio-schedule__row.is-active .radio-schedule__text strong{
  color:#7e5f44;
}

.radio-schedule__time{
  font-family:'Cormorant Garamond',serif;
  font-size:15px;
  color:#9a8167;
}

.radio-schedule__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#e7d4b2;
}

.radio-schedule__row.is-active .radio-schedule__dot{
  background:var(--accent);
}

.radio-schedule__text strong{
  display:block;
  font-size:14px;
  font-family:'Cormorant Garamond',serif;
  color:#6d5641;
  line-height:1.2;
}

.radio-schedule__text span{
  display:block;
  margin-top:2px;
  font-size:10px;
  color:var(--muted);
}

.radio-bottom-nav{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(130,104,79,.16);
  padding:6px 4px 7px;
  background:var(--surface);
}

.radio-bottom-nav__item{
  display:grid;
  justify-items:center;
  gap:3px;
  padding:4px 2px 3px;
  color:#a8896f;
}

.radio-bottom-nav__item span{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
}

.radio-bottom-nav__item small{
  font-size:9px;
  line-height:1;
}

.radio-bottom-nav__item.is-active{
  color:#d56d3c;
}

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

/* Keep the rest of the app readable on secondary pages */
.btn,.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:10px 16px;
  border:1px solid rgba(74,53,40,.14);
  background:rgba(255,255,255,.16);
  color:var(--text);
  cursor:pointer;
}

.btn-primary{
  background:linear-gradient(180deg, #de9340, #e6a34d);
  border-color:transparent;
  color:#fff7eb;
}

.btn-ghost{
  background:transparent;
}

.btn-small{
  padding:8px 12px;
  font-size:12px;
}

.hero,.card,.hero-card,.stats-card,.detail-card,.share-card{
  border-radius:24px;
  background:var(--surface);
  border:1px solid rgba(74,53,40,.12);
  box-shadow:0 10px 24px rgba(79,54,37,.08);
}

.stats-page{
  min-height:100vh;
  padding:18px;
  display:grid;
  place-items:center;
}

.stats-card{
  width:min(960px, 100%);
  background:linear-gradient(180deg, var(--surface-strong), var(--surface));
  border:14px solid var(--frame);
  border-radius:42px;
  padding:26px 22px 20px;
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.22);
}

.stats-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.stats-head h1{
  margin:8px 0 6px;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(30px, 5vw, 48px);
  line-height:1;
  color:var(--text);
}

.stats-head p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
}

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

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.stat-tile{
  padding:16px 14px;
  border-radius:20px;
  background:var(--surface-strong);
  border:1px solid rgba(74,53,40,.10);
  display:grid;
  gap:6px;
}

.stat-tile span{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.stat-tile strong{
  font-family:'Cormorant Garamond',serif;
  font-size:28px;
  line-height:1.1;
  color:var(--text);
}

.stats-list{
  margin-top:18px;
  background:var(--surface);
  border:1px solid rgba(74,53,40,.10);
  border-radius:24px;
  padding:16px;
}

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

.form-grid label{
  display:grid;
  gap:8px;
  font-size:14px;
  color:var(--muted);
}

.form-grid input,
.form-grid textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.20);
  color:var(--text);
  outline:none;
}

.form-grid textarea{
  resize:vertical;
  min-height:140px;
}

.form-grid .full-width{
  grid-column:1 / -1;
}

.message-card{
  padding:16px;
  border-radius:20px;
  background:var(--surface-strong);
  border:1px solid rgba(74,53,40,.10);
  display:grid;
  gap:10px;
}

.message-card.is-unread{
  border-color:rgba(222,147,64,.38);
  box-shadow:0 0 0 1px rgba(222,147,64,.10);
}

.message-card p{
  margin:0;
  color:var(--text);
  line-height:1.5;
}

.contact-card,
.admin-messages-card{
  width:min(980px, 100%);
  padding:22px;
  border-radius:32px;
}

.contact-card h1,
.admin-messages-card h1{
  margin:6px 0 6px;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(30px, 4vw, 44px);
  line-height:1;
}

.flash{
  padding:12px 14px;
  border-radius:16px;
  margin-top:14px;
  border:1px solid var(--line);
}

.flash-success{
  background:rgba(114,212,139,.12);
  border-color:rgba(114,212,139,.22);
}

.flash-error{
  background:rgba(255,125,125,.12);
  border-color:rgba(255,125,125,.22);
}

.theme-toggle{
  position:fixed;
  top:14px;
  right:14px;
  z-index:40;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background:var(--surface-strong);
  color:var(--text);
  border-radius:999px;
  padding:9px 12px;
  box-shadow:var(--shadow);
  cursor:pointer;
  backdrop-filter:blur(14px);
}

body.is-ios .theme-toggle,
body.is-safari .theme-toggle{
  backdrop-filter:none;
}

body.is-ios .radio-phone,
body.is-safari .radio-phone{
  box-shadow:0 18px 46px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.20);
}

body.is-ios .radio-phone,
body.is-safari .radio-phone,
body.is-ios .radio-live-card,
body.is-safari .radio-live-card{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

.theme-toggle__icon{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(222,147,64,.16);
  color:var(--accent);
  font-size:15px;
  line-height:1;
}

.theme-toggle__label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}

html[data-theme="dark"] .theme-toggle__icon{
  background:rgba(255,217,141,.14);
}

.stats-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid rgba(74,53,40,.10);
}

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

.stats-row__count{
  color:#7d6048;
  font-weight:700;
  white-space:nowrap;
}

.stats-row__meta .sermon-name{
  font-family:'Cormorant Garamond',serif;
  font-size:22px;
  line-height:1.2;
}

.stats-row__meta .sermon-date{
  margin-top:3px;
  color:var(--muted);
  font-size:13px;
}

.list-item--unread{
  border-color:rgba(222,147,64,.28);
  background:rgba(222,147,64,.06);
}

@media (max-width: 640px){
  .page-shell{
    padding:4px;
  }

  .radio-phone{
    height:calc(var(--app-height, 100dvh) - 8px);
    max-height:none;
    border-width:7px;
    border-radius:26px;
  }

  .theme-toggle{
    top:8px;
    right:8px;
    padding:8px 10px;
  }

  .theme-toggle__label{
    font-size:11px;
  }

  .radio-header{
    padding:14px 10px 6px;
  }

  .radio-header__title strong{
    font-size:20px;
  }

  .radio-header__title small{
    font-size:11px;
  }

  .radio-header__message-pill{
    padding:7px 9px;
    font-size:10px;
    gap:6px;
  }

  .radio-live-card{
    margin:8px 8px 0;
    padding:12px 10px 10px;
  }

  .radio-contact-cta{
    margin:8px 8px 0;
    padding:10px;
    gap:10px;
  }

  .radio-contact-cta strong{
    font-size:18px;
  }

  .radio-contact-cta p{
    font-size:11px;
  }

  .radio-contact-cta__actions{
    gap:6px;
  }

  .radio-live-card__title{
    font-size:clamp(20px, 5.8vw, 26px);
  }

  .radio-live-card__subtitle{
    font-size:12px;
  }

  .radio-controls{
    padding:8px 4px 1px;
  }

  .radio-control{
    min-width:38px;
  }

  .radio-control span{
    font-size:15px;
  }

  .radio-play{
    width:52px;
    height:52px;
  }

  .radio-schedule{
    margin:2px 8px 0;
  }

  .radio-schedule__row{
    grid-template-columns:44px 8px minmax(0,1fr);
    gap:5px;
  }

  .radio-schedule__time,
  .radio-schedule__text strong{
    font-size:13px;
  }

  .radio-bottom-nav{
    padding:4px 2px 5px;
  }

  .stats-page{
    padding:8px;
  }

  .stats-card{
    padding:18px 14px 16px;
    border-width:12px;
    border-radius:34px;
  }

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

  .stats-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .stats-row__count{
    font-size:13px;
  }

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

  .contact-card,
  .admin-messages-card{
    padding:16px 12px;
    border-radius:24px;
  }
}