@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Lora:ital,wght@0,600;1,400&display=swap');

/* ── Utility ───────────────────────────────────────────────── */
.hidden{display:none!important}
#tabbar{display:none}
#tabbar.visible{display:block}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;height:100%}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ── Tokens ─────────────────────────────────────────────── */
:root{
  --bg:       #f4f1ec;
  --bg2:      #ede9e2;
  --bg3:      #e6e1d8;
  --white:    #ffffff;
  --card:     #ffffff;
  --sage:     #7a9e7e;
  --sage-dk:  #4d7352;
  --sage-lt:  #e8f0e9;
  --sage-mid: #a8c5ab;
  --terr:     #c17f5a;
  --terr-lt:  #f5ede6;
  --rose:     #d4716a;
  --rose-lt:  #faeaea;
  --sky:      #6b9ebf;
  --sky-lt:   #e6f0f7;
  --t1:       #2c2416;
  --t2:       #6b5c47;
  --t3:       #a89580;
  --t4:       #c8b9a5;
  --bdr:      rgba(44,36,22,.09);
  --bdr2:     rgba(44,36,22,.15);
  --r1:       12px;
  --r2:       20px;
  --r3:       28px;
  --r4:       40px;
}

body{
  font-family:'Nunito',system-ui,sans-serif;
  background:var(--bg);color:var(--t1);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
.serif{font-family:'Lora',Georgia,serif}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:2px}

/* ═══════════════════════════════════════════════════════ */
/*  APP SHELL — tab-based navigation                       */
/* ═══════════════════════════════════════════════════════ */
.app-shell{
  display:flex;flex-direction:column;
  height:100dvh;max-width:480px;
  margin:0 auto;background:var(--bg);
  position:relative;overflow:hidden;
}

/* Each screen fills the shell */
.screen{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:0 0 80px;
  display:none;
  animation:fade-slide .25s ease both;
}
.screen.active{display:block}
@keyframes fade-slide{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* Auth screens sit outside the shell */
.auth-screen{
  min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:24px 20px;background:var(--bg);
}

/* ── Top bar ─────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 12px;
  background:var(--bg);position:sticky;top:0;z-index:50;
}
.topbar-title{font-family:'Lora',serif;font-size:20px;color:var(--t1);font-weight:600}
.topbar-action{
  width:38px;height:38px;border-radius:50%;background:var(--card);
  border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;transition:background .15s;
}
.topbar-action:hover{background:var(--bg2)}
.topbar-avatar{
  width:38px;height:38px;border-radius:50%;background:var(--sage-lt);
  border:2px solid var(--sage-mid);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;
}
.topbar-avatar img{width:100%;height:100%;object-fit:cover}
.family-pill{
  font-size:12px;font-weight:700;color:var(--sage-dk);
  background:var(--sage-lt);border:1px solid rgba(122,158,126,.25);
  border-radius:var(--r4);padding:5px 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;
}
.family-sel{
  font-size:12px;font-weight:700;color:var(--sage-dk);
  background:var(--sage-lt);border:1px solid rgba(122,158,126,.25);
  border-radius:var(--r4);padding:5px 10px;max-width:140px;
  cursor:pointer;outline:none;appearance:none;
}

/* ── Bottom tab bar ──────────────────────────────────────── */
.tabbar{
  position:sticky;bottom:0;left:0;right:0;z-index:100;
  background:rgba(244,241,236,.94);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--bdr);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar-inner{display:flex;justify-content:space-around;padding:6px 0}
.tab-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 20px;border-radius:var(--r2);
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--t3);transition:color .15s;min-width:64px;
}
.tab-btn.on{color:var(--sage-dk)}
.tab-icon{font-size:20px;line-height:1;display:block}
.tab-label{font-size:10px;font-weight:700;letter-spacing:.03em}

/* ═══════════════════════════════════════════════════════ */
/*  AUTH                                                   */
/* ═══════════════════════════════════════════════════════ */
.auth-logo{
  width:80px;height:80px;border-radius:var(--r3);
  background:var(--sage-lt);border:2px solid rgba(122,158,126,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:40px;margin:0 auto 20px;
}
.auth-h1{font-family:'Lora',serif;font-size:28px;color:var(--t1);text-align:center;margin-bottom:6px}
.auth-sub{font-size:15px;color:var(--t3);text-align:center;margin-bottom:30px}
.auth-card{
  background:var(--card);border-radius:var(--r3);
  border:1px solid var(--bdr);padding:28px 24px;
  width:100%;max-width:400px;box-shadow:0 8px 40px rgba(44,36,22,.08);
}
.auth-link{text-align:center;margin-top:18px;font-size:14px;color:var(--t3)}
.auth-link a{color:var(--sage-dk);font-weight:700;text-decoration:none}

/* ── Forms ───────────────────────────────────────────────── */
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fl{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.fi{
  padding:14px 16px;background:var(--bg);
  border:1.5px solid var(--bdr2);border-radius:var(--r2);
  font-size:15px;color:var(--t1);width:100%;
  font-family:'Nunito',sans-serif;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.fi:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(122,158,126,.15)}
.fi::placeholder{color:var(--t4)}
.fi-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a89580' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;background-color:var(--bg);
}
.ferr{
  font-size:13px;font-weight:600;padding:11px 14px;
  background:var(--rose-lt);border:1px solid rgba(212,113,106,.2);
  border-radius:var(--r1);color:var(--rose);margin-bottom:8px;
}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.seg-btn{
  padding:11px 8px;background:var(--bg);
  border:1.5px solid var(--bdr2);border-radius:var(--r2);
  font-size:14px;font-weight:700;color:var(--t3);
  cursor:pointer;text-align:center;transition:all .15s;font-family:inherit;
}
.seg-btn:hover{border-color:var(--sage-mid);color:var(--sage-dk)}
.seg-btn.on{background:var(--sage-lt);border-color:rgba(122,158,126,.4);color:var(--sage-dk)}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r2);padding:15px 24px;
  font-size:16px;font-weight:800;font-family:'Nunito',sans-serif;
  cursor:pointer;border:none;transition:all .18s;
  -webkit-tap-highlight-color:transparent;
}
.btn.full{width:100%}
.btn-sage{background:var(--sage);color:#fff;box-shadow:0 4px 16px rgba(122,158,126,.4)}
.btn-sage:hover{background:var(--sage-dk);box-shadow:0 6px 20px rgba(122,158,126,.5)}
.btn-sage:active{transform:scale(.97)}
.btn-sage:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-outline{background:var(--card);color:var(--t2);border:1.5px solid var(--bdr2)}
.btn-outline:hover{background:var(--bg2);color:var(--t1)}
.btn-ghost{background:transparent;color:var(--t3);font-size:14px;font-weight:600;padding:10px 16px}
.btn-ghost:hover{color:var(--t1)}
.btn-pill{
  font-size:12px;font-weight:700;padding:6px 14px;
  background:var(--card);color:var(--t2);
  border:1px solid var(--bdr2);border-radius:var(--r4);
  cursor:pointer;transition:all .15s;
}
.btn-pill:hover{background:var(--bg2)}
.btn-sm{padding:9px 16px;font-size:13px}
.btn-tag{font-size:11px;font-weight:700;background:var(--bg2);border:none;
  border-radius:8px;padding:3px 8px;color:var(--t2);cursor:pointer}

/* ═══════════════════════════════════════════════════════ */
/*  HOME SCREEN                                            */
/* ═══════════════════════════════════════════════════════ */
.home-hero{
  background:linear-gradient(160deg,var(--sage-lt) 0%,var(--bg) 60%);
  padding:20px 20px 24px;border-bottom:1px solid var(--bdr);
}
.home-date{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t3);margin-bottom:6px}
.home-greeting{font-family:'Lora',serif;font-size:26px;color:var(--t1);
  line-height:1.25;margin-bottom:14px}
.home-quote{
  background:rgba(255,255,255,.7);border-radius:var(--r2);
  padding:14px 16px;border:1px solid var(--bdr);
}
.home-quote-text{font-family:'Lora',serif;font-style:italic;font-size:14px;
  color:var(--t2);line-height:1.65}
.home-quote-author{font-size:11px;font-weight:700;color:var(--t3);
  margin-top:7px;letter-spacing:.04em}
.home-body{padding:0 20px}

/* Checked-in banner */
.done-card{
  background:var(--card);border-radius:var(--r2);
  border:1.5px solid rgba(122,158,126,.25);
  padding:16px;margin:16px 0;
  display:flex;align-items:center;gap:14px;
}
.done-ring{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:var(--sage-lt);border:2px solid rgba(122,158,126,.3);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.done-title{font-weight:800;color:var(--sage-dk);font-size:15px}
.done-sub{font-size:12px;color:var(--t3);margin-top:2px}

/* I'm Good CTA */
.imgood-cta{
  background:var(--card);border-radius:var(--r3);
  border:1px solid var(--bdr);padding:28px 20px;
  margin:16px 0;text-align:center;
}
.imgood-cta-label{font-size:15px;color:var(--t2);margin-bottom:20px;line-height:1.5}
.imgood-btn-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.imgood-btn{
  width:148px;height:148px;border-radius:50%;border:none;cursor:pointer;
  background:var(--sage);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 8px 32px rgba(122,158,126,.45),0 0 0 8px rgba(122,158,126,.12),0 0 0 16px rgba(122,158,126,.06);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
  animation:breathe 4s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
.imgood-btn:hover{transform:scale(1.06);box-shadow:0 12px 40px rgba(122,158,126,.55),0 0 0 10px rgba(122,158,126,.15),0 0 0 20px rgba(122,158,126,.07)}
.imgood-btn:active{transform:scale(.95)}
@keyframes breathe{
  0%,100%{box-shadow:0 8px 32px rgba(122,158,126,.45),0 0 0 8px rgba(122,158,126,.12),0 0 0 16px rgba(122,158,126,.06)}
  50%{box-shadow:0 12px 40px rgba(122,158,126,.5),0 0 0 14px rgba(122,158,126,.15),0 0 0 28px rgba(122,158,126,.07)}
}
.imgood-sun{font-size:44px;line-height:1;display:block;animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.imgood-label{font-family:'Lora',serif;font-size:17px;font-weight:600;color:#fff}
.imgood-hint{font-size:13px;color:var(--t3)}

/* Section heading */
.sec-h{font-family:'Lora',serif;font-size:17px;color:var(--t1);
  padding:20px 20px 10px;font-weight:600}

/* Check-in cards list */
.cards-wrap{padding:0 20px}

/* Invite box */
.invite-box{
  margin:4px 20px 16px;background:var(--card);border-radius:var(--r2);
  border:1px solid var(--bdr);padding:14px 16px;
}
.invite-lbl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t3);margin-bottom:8px}
.invite-row{display:flex;align-items:center;gap:10px}
.invite-code{font-family:'Courier New',monospace;font-size:22px;font-weight:700;
  color:var(--sage-dk);letter-spacing:.1em;flex:1}
.invite-hint{font-size:11px;color:var(--t3);margin-top:6px}

/* Family members horizontal scroll */
.members-scroll{display:flex;gap:10px;overflow-x:auto;padding:0 20px 4px;
  scrollbar-width:none;-ms-overflow-style:none}
.members-scroll::-webkit-scrollbar{display:none}
.mem-card{
  flex-shrink:0;width:80px;background:var(--card);
  border:1px solid var(--bdr);border-radius:var(--r2);
  padding:12px 8px 10px;display:flex;flex-direction:column;
  align-items:center;gap:6px;text-align:center;
}
.mem-card.on{border-color:rgba(122,158,126,.35);background:var(--sage-lt)}
.mem-av{
  width:44px;height:44px;border-radius:50%;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  overflow:hidden;position:relative;
}
.mem-av img{width:100%;height:100%;object-fit:cover}
.mem-dot{position:absolute;bottom:1px;right:1px;width:11px;height:11px;
  border-radius:50%;background:var(--sage);border:2px solid var(--card)}
.mem-name{font-size:11px;font-weight:700;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;padding:0 3px}
.mem-status{font-size:10px;color:var(--t3);font-weight:600}

/* ═══════════════════════════════════════════════════════ */
/*  CHECK-IN CARD                                          */
/* ═══════════════════════════════════════════════════════ */
.cc{
  background:var(--card);border-radius:var(--r2);
  border:1px solid var(--bdr);overflow:hidden;
  margin-bottom:14px;
  animation:slide-up .3s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes slide-up{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
.cc-hdr{
  display:flex;align-items:center;gap:12px;padding:14px 16px 12px;
  background:var(--sage-lt);border-bottom:1px solid rgba(122,158,126,.15);
}
.cc-av{
  width:44px;height:44px;border-radius:50%;background:rgba(122,158,126,.2);
  display:flex;align-items:center;justify-content:center;font-size:21px;
  overflow:hidden;flex-shrink:0;
}
.cc-av img{width:100%;height:100%;object-fit:cover}
.cc-name{font-weight:800;color:var(--sage-dk);font-size:15px}
.cc-time{font-size:11px;color:rgba(77,115,82,.6);margin-top:1px;font-weight:600}
.cc-badge{
  margin-left:auto;background:var(--sage);color:#fff;
  font-size:11px;font-weight:800;padding:5px 12px;border-radius:var(--r4);
  white-space:nowrap;flex-shrink:0;letter-spacing:.03em;
}
.cc-photo{width:100%;background:var(--bg2)}
.cc-photo img{width:100%;max-height:300px;object-fit:cover;display:block}
.cc-msg{padding:12px 16px;font-style:italic;font-size:14px;color:var(--t2);
  border-bottom:1px solid var(--bdr);line-height:1.6;font-family:'Lora',serif;
  background:rgba(244,241,236,.5)}
.cc-acks{padding:12px 16px;border-bottom:1px solid var(--bdr)}
.cc-acks-lbl{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--t3);margin-bottom:10px}
.acks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.ack-tile{border-radius:var(--r1);overflow:hidden;aspect-ratio:1;
  background:var(--bg2);position:relative;border:1px solid var(--bdr)}
.ack-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ack-overlay{position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(44,36,22,.65));
  padding:14px 7px 6px;font-size:11px;font-weight:700;
  color:rgba(255,255,255,.95)}
.ack-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:10px;aspect-ratio:1;background:var(--bg);
  border:1px solid var(--bdr);border-radius:var(--r1)}
.ack-chip-av{width:28px;height:28px;border-radius:50%;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;font-size:14px;overflow:hidden}
.ack-chip-av img{width:100%;height:100%;object-fit:cover}
.ack-chip-name{font-size:10px;font-weight:700;color:var(--t2);text-align:center}
.cc-action{padding:12px 16px}
.acked-row{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;
  color:var(--sage-dk)}
.acked-thumb{width:40px;height:40px;border-radius:var(--r1);object-fit:cover;
  margin-left:auto;border:2px solid rgba(122,158,126,.25)}
.btn-see{
  width:100%;padding:15px;border-radius:var(--r2);border:none;cursor:pointer;
  background:var(--sage-lt);color:var(--sage-dk);
  font-size:15px;font-weight:800;font-family:'Nunito',sans-serif;
  border:1.5px solid rgba(122,158,126,.3);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .15s;
}
.btn-see:hover{background:rgba(122,158,126,.2)}
.btn-see:active{transform:scale(.97)}

/* ═══════════════════════════════════════════════════════ */
/*  CHECKIN SCREEN (dedicated)                             */
/* ═══════════════════════════════════════════════════════ */
.checkin-screen{background:var(--bg)}
.checkin-camera-area{
  width:100%;background:#1a1a1a;position:relative;
  aspect-ratio:3/4;max-height:55vh;overflow:hidden;
}
.checkin-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.checkin-canvas{display:none}
.cam-corners{position:absolute;inset:16px;pointer-events:none}
.cc2{position:absolute;width:26px;height:26px;border-color:rgba(255,255,255,.6);border-style:solid}
.cc2-tl{top:0;left:0;border-width:3px 0 0 3px;border-radius:6px 0 0 0}
.cc2-tr{top:0;right:0;border-width:3px 3px 0 0;border-radius:0 6px 0 0}
.cc2-bl{bottom:0;left:0;border-width:0 0 3px 3px;border-radius:0 0 0 6px}
.cc2-br{bottom:0;right:0;border-width:0 3px 3px 0;border-radius:0 0 6px 0}
.cd-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Lora',serif;font-size:100px;font-weight:600;
  color:#fff;background:rgba(0,0,0,.35);
  animation:num-pop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes num-pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.checkin-controls{padding:20px;display:flex;gap:12px;align-items:center}
.btn-snap2{
  flex:1;padding:17px;background:var(--sage);color:#fff;border:none;cursor:pointer;
  border-radius:var(--r2);font-size:16px;font-weight:800;font-family:'Nunito',sans-serif;
  box-shadow:0 4px 16px rgba(122,158,126,.4);transition:all .15s;
}
.btn-snap2:active{transform:scale(.97)}
.checkin-preview-area{width:100%;position:relative;background:#1a1a1a}
.checkin-preview-area img{width:100%;max-height:55vh;object-fit:cover;transform:scaleX(-1)}
.preview-lbl{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
  padding:20px 16px 12px;font-size:14px;font-weight:700;color:rgba(255,255,255,.9);
  text-align:center;
}
.checkin-msg-area{padding:16px 20px}
.checkin-msg-area textarea{
  width:100%;background:var(--card);border:1.5px solid var(--bdr2);
  border-radius:var(--r2);padding:13px 15px;font-size:15px;font-family:'Nunito',sans-serif;
  color:var(--t1);resize:none;outline:none;min-height:80px;line-height:1.5;
}
.checkin-msg-area textarea:focus{border-color:var(--sage)}
.checkin-msg-area textarea::placeholder{color:var(--t4)}
.checkin-submit{padding:0 20px 24px;display:flex;gap:10px}

/* ═══════════════════════════════════════════════════════ */
/*  REPLY SCREEN                                           */
/* ═══════════════════════════════════════════════════════ */
.reply-parent{
  display:flex;align-items:center;gap:12px;padding:16px 20px;
  background:var(--card);border-bottom:1px solid var(--bdr);
}
.reply-parent-av{width:44px;height:44px;border-radius:50%;background:var(--sage-lt);
  display:flex;align-items:center;justify-content:center;font-size:21px;overflow:hidden;flex-shrink:0}
.reply-parent-av img{width:100%;height:100%;object-fit:cover}
.reply-parent-name{font-weight:800;color:var(--t1);font-size:15px}
.reply-parent-sub{font-size:12px;color:var(--t3);margin-top:2px}

/* ═══════════════════════════════════════════════════════ */
/*  HISTORY SCREEN                                         */
/* ═══════════════════════════════════════════════════════ */
.hist-body{padding:0 20px 20px}
.hist-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.hist-stat{background:var(--card);border-radius:var(--r2);border:1px solid var(--bdr);
  padding:14px 10px;text-align:center}
.hist-val{font-family:'Lora',serif;font-size:28px;font-weight:600;color:var(--sage-dk)}
.hist-lbl{font-size:11px;font-weight:700;color:var(--t3);margin-top:4px;letter-spacing:.03em}

.cal-card{background:var(--card);border-radius:var(--r2);border:1px solid var(--bdr);overflow:hidden}
.cal-nav{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--bdr)}
.cal-month{font-family:'Lora',serif;font-size:17px;color:var(--t1);font-weight:600}
.cal-nav-btn{width:34px;height:34px;background:var(--bg);border:1px solid var(--bdr2);
  border-radius:var(--r1);font-size:18px;color:var(--t2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.cal-nav-btn:hover{background:var(--bg2)}
.cal-nav-btn:disabled{opacity:.3;cursor:not-allowed}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--bg);border-bottom:1px solid var(--bdr)}
.cal-dow>div{text-align:center;padding:7px 0;font-size:11px;font-weight:700;color:var(--t3)}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);padding:6px 4px}
.cal-d{
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;position:relative;border-radius:var(--r1);
  margin:2px;cursor:default;
}
.cal-d.has{cursor:pointer;background:var(--sage-lt)}
.cal-d.has:hover{background:rgba(122,158,126,.25)}
.cal-d.today{border:2px solid var(--sage);border-radius:var(--r1)}
.cal-d.missed{opacity:.35}
.cal-d-n{font-size:13px;font-weight:700;color:var(--t2)}
.cal-d.has .cal-d-n{color:var(--sage-dk)}
.cal-d.today .cal-d-n{color:var(--sage-dk)}
.cal-d.missed .cal-d-n{color:var(--t3)}
.cal-d-dot{position:absolute;top:3px;right:3px;width:6px;height:6px;
  border-radius:50%;background:var(--terr)}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px;
  border-top:1px solid var(--bdr);background:var(--bg)}
.cal-li{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--t3)}

.expand-card{background:var(--card);border-radius:var(--r2);border:1.5px solid rgba(122,158,126,.25);
  overflow:hidden;margin-top:16px;animation:slide-up .2s ease}
.expand-hdr{display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--bdr);background:var(--sage-lt)}
.expand-date{font-family:'Lora',serif;font-size:15px;color:var(--sage-dk);font-weight:600}
.expand-close{background:none;border:none;font-size:22px;color:var(--t3);cursor:pointer}
.expand-entry{padding:14px 16px;border-bottom:1px solid var(--bdr)}
.expand-entry:last-child{border-bottom:none}
.expand-who{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.expand-av{width:38px;height:38px;border-radius:50%;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;font-size:19px;overflow:hidden;flex-shrink:0}
.expand-av img{width:100%;height:100%;object-fit:cover}
.expand-name{font-weight:800;color:var(--t1);font-size:14px}
.expand-time{font-size:11px;color:var(--t3)}
.expand-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r1);margin-bottom:10px}
.expand-msg{font-family:'Lora',serif;font-style:italic;font-size:13px;color:var(--t2);margin-bottom:10px}
.expand-acks-lbl{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--t3);margin-bottom:8px}
.expand-acks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
.ex-ack{display:flex;flex-direction:column;align-items:center;gap:4px}
.ex-ack img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r1)}
.ex-ack-none{width:100%;aspect-ratio:1;background:var(--bg2);border-radius:var(--r1);
  display:flex;align-items:center;justify-content:center;font-size:24px}
.ex-ack-name{font-size:10px;font-weight:700;color:var(--t2);text-align:center}

/* ═══════════════════════════════════════════════════════ */
/*  SETTINGS SCREEN                                        */
/* ═══════════════════════════════════════════════════════ */
.set-body{padding:0 20px 20px}
.set-section{background:var(--card);border-radius:var(--r2);border:1px solid var(--bdr);
  padding:18px;margin-bottom:14px}
.set-section-h{font-family:'Lora',serif;font-size:16px;color:var(--t1);
  margin-bottom:16px;font-weight:600}
.av-row{display:flex;align-items:center;gap:16px}
.set-av{width:68px;height:68px;border-radius:50%;object-fit:cover;
  background:var(--bg2);border:2px solid var(--bdr2)}
.set-av-ph{width:68px;height:68px;border-radius:50%;background:var(--sage-lt);
  border:2px dashed rgba(122,158,126,.4);
  display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--sage)}
.acct-row{display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--bdr);font-size:14px}
.acct-row:last-child{border-bottom:none}
.acct-lbl{color:var(--t3);font-weight:600}
.acct-val{font-weight:800;color:var(--t1)}
.fam-row{display:flex;justify-content:space-between;align-items:flex-start;
  padding:12px 0;border-bottom:1px solid var(--bdr);gap:10px}
.fam-row:last-child{border-bottom:none}
.fam-name{font-weight:800;color:var(--t1);font-size:14px}
.fam-code{font-family:monospace;font-size:12px;color:var(--sage-dk);
  background:var(--sage-lt);padding:2px 7px;border-radius:6px}
.tag{font-size:10px;font-weight:800;padding:3px 8px;border-radius:var(--r4)}
.tag-sage{background:var(--sage-lt);color:var(--sage-dk)}
.tag-dim{background:var(--bg2);color:var(--t3)}
.signout-area{text-align:center;padding:24px 0 8px}
.signout-btn{background:none;border:none;color:var(--t3);font-size:14px;font-weight:600;
  text-decoration:underline;cursor:pointer;font-family:inherit;transition:color .15s}
.signout-btn:hover{color:var(--rose)}

/* ═══════════════════════════════════════════════════════ */
/*  ALERTS                                                 */
/* ═══════════════════════════════════════════════════════ */
.missed-alert{
  background:var(--rose-lt);border:1px solid rgba(212,113,106,.2);
  border-radius:var(--r2);padding:15px 16px;margin:12px 20px 4px;
  display:flex;gap:12px;align-items:flex-start;
}
.missed-icon{font-size:20px;flex-shrink:0;margin-top:1px}
.missed-title{font-weight:800;color:var(--rose);font-size:14px;margin-bottom:5px}
.missed-chip{display:inline-block;background:rgba(212,113,106,.12);border:1px solid rgba(212,113,106,.2);
  color:var(--rose);font-weight:700;font-size:12px;padding:2px 9px;border-radius:var(--r4);margin:2px 3px 2px 0}
.missed-sub{font-size:12px;color:rgba(212,113,106,.7);margin-top:5px}

.empty-state{text-align:center;padding:60px 20px 30px}
.empty-icon{font-size:56px;display:block;margin-bottom:14px;animation:bob 4s ease-in-out infinite}
.empty-title{font-family:'Lora',serif;font-size:22px;color:var(--t2)}
.empty-sub{font-size:14px;color:var(--t3);margin-top:8px;line-height:1.65;max-width:260px;margin-left:auto;margin-right:auto}

/* ═══════════════════════════════════════════════════════ */
/*  TOAST & SPINNER                                        */
/* ═══════════════════════════════════════════════════════ */
.toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(10px);
  padding:12px 22px;border-radius:var(--r4);font-size:14px;font-weight:700;
  opacity:0;transition:opacity .25s,transform .25s;z-index:9999;
  white-space:nowrap;pointer-events:none;font-family:'Nunito',sans-serif;
  box-shadow:0 4px 20px rgba(44,36,22,.15);
}
.toast.ok{background:var(--sage);color:#fff}
.toast.err{background:var(--rose);color:#fff}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.spinner-bg{position:fixed;inset:0;background:rgba(244,241,236,.75);
  display:flex;align-items:center;justify-content:center;z-index:9000;
  backdrop-filter:blur(4px)}
.spinner-box{text-align:center}
.spinner-ring{
  width:44px;height:44px;margin:0 auto 12px;border-radius:50%;
  border:3px solid var(--bg3);border-top-color:var(--sage);
  animation:spin .65s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-box p{font-size:14px;color:var(--t2);font-weight:600}

/* ═══════════════════════════════════════════════════════ */
/*  PWA INSTALL                                            */
/* ═══════════════════════════════════════════════════════ */
.install-bar{
  position:fixed;bottom:84px;left:16px;right:16px;max-width:460px;margin:0 auto;
  background:var(--card);border:1px solid var(--bdr2);border-radius:var(--r3);
  box-shadow:0 8px 40px rgba(44,36,22,.12);
  padding:13px 16px;display:flex;align-items:center;gap:12px;z-index:500;
  animation:slide-up .3s ease;
}
.install-icon{width:44px;height:44px;background:var(--sage-lt);
  border-radius:var(--r1);display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0}
.install-title{font-weight:800;color:var(--t1);font-size:14px}
.install-sub{font-size:12px;color:var(--t3);margin-top:1px}
.install-x{background:none;border:none;font-size:20px;color:var(--t3);cursor:pointer;padding:0 4px}