/* ===========================
   Garden Dawn — lively, cozy
   Shared theme for ALL pages
   =========================== */

:root{
  /* Palette */
  --leaf-ink:#2f3e34;             /* deep sage text */
  --panel:#fffaf3;                /* warm paper */
  --line:#e6eedf;                 /* pale leaf line */
  --accentG1:#6aa977;             /* fresh green */
  --accentG2:#4aa76a;             /* garden green */
  --accentP1:#c78aa6;             /* dusty petal */
  --accentP2:#e0a9c0;             /* soft blossom */
  --rad:18px;

  /* Shadows */
  --shadow:0 18px 44px rgba(46,74,58,.14), 0 10px 28px rgba(199,138,166,.10);
  --shadow-soft:0 10px 26px rgba(46,74,58,.10);

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box }
img{ max-width:100%; height:auto; display:block }

html, body { height:100%; }
body{
  margin:0;
  overflow-x:hidden;          /* prevents accidental horizontal scroll */
  min-width:320px;
  min-height:100svh;
  color:var(--leaf-ink);
  position:relative;

  /* Base garden wash + tiny pattern */
  background:
    radial-gradient(1200px 800px at -10% -20%, rgba(106,169,119,.26), transparent 58%),
    radial-gradient(1100px 700px at 110% 0%, rgba(199,138,166,.20), transparent 55%),
    linear-gradient(180deg, #f7f3ea 0%, #fff7fb 100%),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'>\
 <g fill='none' stroke='%23bfdac3' stroke-opacity='.45' stroke-width='1'>\
  <path d='M12 8c6 8 6 16 0 24c-6-8-6-16 0-24z'/>\
  <path d='M8 56c8-6 16-6 24 0c-8 6-16 6-24 0z'/>\
 </g>\
 <g fill='%23d8c1ce' fill-opacity='.35'>\
  <circle cx='50' cy='20' r='3'/>\
  <circle cx='22' cy='46' r='2.6'/>\
 </g>\
 <g fill='%23f2dc98' fill-opacity='.28'>\
  <circle cx='12' cy='12' r='2'/>\
  <circle cx='58' cy='58' r='2'/>\
 </g>\
 <g>\
  <path d='M38 36c8-6 14-5 20 2c-8 6-14 5-20-2z' fill='%237fb08a' fill-opacity='.22'/>\
  <path d='M30 18c6-5 11-4 16 1c-6 5-11 4-16-1z' fill='%23c79bb1' fill-opacity='.24'/>\
 </g>\
</svg>") repeat;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, 72px 72px;
}

/* ===== Animated leaf/petal corner motifs (BIG & soft) ===== */
@keyframes drift1 { from{transform:translate3d(-2%, -1%,0) rotate(0deg)} to{transform:translate3d(1%,1%,0) rotate(2deg)} }
@keyframes drift2 { from{transform:translate3d(1%, 2%,0) rotate(0deg)}  to{transform:translate3d(-1%,-1%,0) rotate(-2deg)} }

body::before,
body::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:0;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.06));
  opacity:.42;
  background:
    radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.55), transparent 72%),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'>\
 <defs>\
  <linearGradient id='gStem' x1='0' y1='0' x2='1' y2='0'>\
   <stop offset='0' stop-color='%2386efac'/><stop offset='1' stop-color='%234ed28d'/>\
  </linearGradient>\
  <linearGradient id='gLeaf' x1='0' y1='0' x2='1' y2='1'>\
   <stop offset='0' stop-color='%236aa977'/><stop offset='1' stop-color='%234aa76a'/>\
  </linearGradient>\
 </defs>\
 <path d='M5,190 C80,120 140,110 210,90 C290,65 350,40 400,10' fill='none' stroke='url(%23gStem)' stroke-width='2.2' stroke-linecap='round'/>\
 <g fill='url(%23gLeaf)'>\
  <path d='M58,152c18-8 28-1 34,12c-18 8-28 1-34-12z'/>\
  <path d='M138,120c14-10 26-8 36,4c-14 10-26 8-36-4z'/>\
  <path d='M220,96c14-10 26-8 36,4c-14 10-26 8-36-4z'/>\
  <path d='M300,66c14-10 26-8 36,4c-14 10-26 8-36-4z'/>\
 </g>\
 <g fill='%23e0a9c0' fill-opacity='.55'>\
  <circle cx='95' cy='140' r='4'/>\
  <circle cx='175' cy='110' r='3.5'/>\
  <circle cx='255' cy='88'  r='3.5'/>\
 </g>\
</svg>") no-repeat center/contain;
}

/* make them MUCH bigger */
body::before{
  width: clamp(520px, 48vmax, 1200px);
  height: clamp(320px, 34vmax, 800px);
  top:-2vmax; left:-2vmax;
  transform-origin: 20% 20%;
  animation: drift1 10s ease-in-out infinite alternate;
}
body::after{
  width: clamp(520px, 48vmax, 1200px);
  height: clamp(320px, 34vmax, 800px);
  bottom:-2vmax; right:-2vmax;
  transform: scaleX(-1) rotate(-1deg);
  transform-origin: 80% 70%;
  animation: drift2 12s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none; }
}

/* ===== Layout wrappers & grid ===== */
.container{ max-width:1100px; margin-inline:auto; padding-inline:16px; }
.page{
  max-width:1100px;
  margin:16px auto 72px;
  padding:0 16px;
  position:relative;
  z-index:1;              /* sits above the motifs */
  overflow:visible;       /* let card shadows breathe */
}
.cards{ overflow:visible; }

/* Two-column helper (watch page) */
.grid{ display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap:16px; }
@media (max-width:980px){ .grid{ grid-template-columns:1fr; } }
.grid > * { min-width:0; }

/* ===== Top bar (LEFT brand + RIGHT menu, always) ===== */
.nav{
  position:sticky; top:0; z-index:10;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(600px 260px at 15% -40%, rgba(106,169,119,.18), transparent 70%),
    radial-gradient(540px 260px at 85% -30%, rgba(199,138,166,.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  backdrop-filter:saturate(118%) blur(6px);

  /* default: nav itself is the flex row */
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px 16px;
}

/* if your HTML wraps with .container inside .nav, make THAT the flex row */
.nav > .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-inline:16px;
  width:100%;
}

/* brand (left) */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:.3px;
  font-size:18px;
}

/* BIGGER mark (flower) and clickable */
.mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;         /* ⬅ bigger */
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #ffe9f1, #f6dbe6);
  color:#2f5a45;
  font-size:24px;                  /* ⬅ bigger glyph */
  border:1px solid #f0d5e0;
  box-shadow:0 2px 10px rgba(199,138,166,.18), inset 0 0 6px rgba(255,255,255,.85);
  text-decoration:none; outline:none; cursor:pointer;
}

/* menu (right) */
.menu{
  display:flex; align-items:center; gap:8px;
  margin-left:auto;              /* pushes to the right */
}
.nav .btn{ white-space:nowrap; } /* keep “Logout” on one line */

/* ===== Cards & type ===== */
.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--rad);
  padding:16px;
  box-shadow: var(--shadow);
}
h1{ margin:0 0 10px; font-size:20px; display:flex; align-items:center; gap:8px; }
.page-title{ margin:10px 0 16px; }
.muted{ opacity:.85; }

.pill{
  display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:999px;
  background:linear-gradient(180deg, #fffdf7, #fff7ee);
  border:1px solid var(--line); font-size:12px;
}

/* ===== Buttons — modernized ===== */
.btn,
.btn:link,
.btn:visited{
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background-image:linear-gradient(135deg, var(--accentG1), var(--accentP1));
  color:#fff;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow: 0 8px 18px rgba(46,74,58,.14), 0 6px 16px rgba(199,138,166,.12);
  cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, filter .15s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ box-shadow: 0 12px 24px rgba(46,74,58,.18), 0 10px 22px rgba(199,138,166,.16); filter: brightness(1.02); }
.btn:active{ transform: translateY(1px) scale(.99); filter: brightness(.98); }
.btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(46,74,58,.25),
    0 8px 18px rgba(46,74,58,.14),
    0 6px 16px rgba(199,138,166,.12);
}

/* Secondary */
.btn.secondary{
  background-image:none;
  background:#fff;
  color:var(--leaf-ink);
  border:1px solid var(--line);
  box-shadow:0 6px 14px rgba(164,211,164,.22);
}
.btn.secondary:hover{ box-shadow:0 8px 18px rgba(164,211,164,.28); }
.btn.secondary:active{ transform: translateY(1px) scale(.99); }

/* Disabled */
.btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }

/* ===== Inputs ===== */
label{ font-size:13px; opacity:.95; display:flex; align-items:center; gap:6px; }
.select{
  appearance:none; background:#fff; color:var(--leaf-ink);
  border:1px solid var(--line); border-radius:999px; padding:10px 14px;
  min-width:160px; max-width:100%; font-size:14px; box-shadow:0 2px 8px rgba(106,169,119,.12);
}
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.select, .row > * { min-width:0; }

/* ===== Select page: cards grid ===== */
.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
}
.card-item{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow: var(--shadow-soft);
  transition: transform .08s ease, box-shadow .2s ease;
}
.card-item:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(46,74,58,.16); }
.card-top{ display:flex; align-items:center; gap:12px; }
.card-top img{ width:64px; height:64px; border-radius:12px; object-fit:cover; }
.card-top .name{ font-weight:800; }
.card-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.status-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:middle; }
.dot-online{ background:#22c55e; }
.dot-off{ background:#9ca3af; }

/* ===== Watch page — video & overlay ===== */
.video-wrap{ position:relative; touch-action:manipulation; min-width:0; }
video{
  display:block; width:100%; max-height:70svh; background:#000; border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  -webkit-user-select:none; user-select:none;
}
.overlay-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12));
  border-radius:14px; z-index:10; transition:opacity .15s ease;
}
.overlay-play.hidden{ opacity:0; pointer-events:none }
.overlay-play .pill-btn{
  padding:12px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.65);
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
  color:#2f5a45; font-weight:700; letter-spacing:.2px; cursor:pointer;
  backdrop-filter:blur(4px); box-shadow:0 4px 12px rgba(106,169,119,.30);
}
.fs-btn{
  position:absolute; right:10px; bottom:10px; z-index:11;
  padding:8px 10px; border-radius:10px;
  background:linear-gradient(135deg, rgba(106,169,119,.96), rgba(199,138,166,.96));
  color:#fff; border:1px solid rgba(255,255,255,.65);
  cursor:pointer; font-weight:800; backdrop-filter:blur(4px);
  user-select:none; -webkit-user-select:none;
  box-shadow:0 6px 16px rgba(106,169,119,.28), 0 6px 16px rgba(199,138,166,.26);
}
.fs-btn:active{ transform:scale(.98) }
.hint{ opacity:.9; font-size:12px; margin:10px 2px 0 }

/* Verses box */
.verses{
  margin-top:12px; padding:14px; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(180deg, #ffffffee, #ffffffd9);
  box-shadow:0 8px 22px rgba(106,169,119,.10);
}
.verse-ref{ font-weight:900; letter-spacing:.2px; margin-bottom:6px }
.verse-text{ margin:0; line-height:1.55 }

/* ===== Pledge modal (shared) ===== */
.modal{
  position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
  padding:20px;
  background: rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}
.modal.show{ display:flex }
.modal-card{
  max-width:720px; width:100%; background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); padding:18px;
}
.modal-title{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:18px; margin:0 0 6px }
.modal-sub{ margin:0 0 14px; opacity:.9 }
.pledge-list{ margin:10px 0 14px; padding-left:18px }
.pledge-list li{ margin:6px 0 }
.pledge-verse{
  margin:12px 0 10px;
  padding:12px; border:1px solid var(--line); border-radius:12px; background:#fffdf8;
}
.pledge-verse .ref{ font-weight:900; margin-bottom:4px; }
.pledge-verse .text{ line-height:1.55; }
.checkline{
  display:flex; align-items:flex-start; gap:10px; background:#f8fff6;
  border:1px solid var(--line); padding:10px 12px; border-radius:12px; margin-top:12px;
}
.btn-row{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px }
.pledge-reset-note{ font-size:12px; opacity:.8; margin-top:10px }