/* Custom Pop Up Modal */
/* iOS 26 Alert — center popup with frosted glass */
/* ─── APPLE HIG ALERT ─────────────────────────────────
   Spec: UIAlertController style
   • background: systemMaterial (translucent white/dark)
   • cornerRadius: 13pt
   • title: 17pt semibold (SF Pro), centered
   • message: 13pt regular, secondaryLabel color
   • separator: 0.33px (we use 0.5px for screens)
   • action height: 44pt
   • animation: scale from 1.2→1.0 + fade (per HIG)
─────────────────────────────────────────────────── */
.custom-modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.52);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
.custom-modal-overlay.active{opacity:1;pointer-events:auto;}
.custom-modal-box{
  /* System material — exact Apple spec */
  background:rgba(242,242,247,0.88);
  border-radius:13px;            /* Apple exact: 13pt */
  width:270px;                   /* Apple exact: 270pt */
  overflow:hidden;
  /* Entry animation: scale 1.2→1 + fade */
  transform:scale(1.2);opacity:0;
  transition:transform .25s cubic-bezier(.4,0,.2,1),
             opacity .2s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.dark-mode .custom-modal-box{
  background:#383A3A;
}
.custom-modal-overlay.active .custom-modal-box{
  transform:scale(1);opacity:1;
}
/* Title: 17pt semibold per HIG */
.custom-modal-title{
  font-weight:600;
  font-size:1.0625rem;   /* 17pt */
  color:var(--text);
  text-align:center;
  padding:19px 16px 6px;
  font-family:-apple-system,sans-serif;
  letter-spacing:-.022em;
  line-height:1.3;
}
/* Message: 13pt regular, secondaryLabel */
.custom-modal-msg{
  font-size:.8125rem;   /* 13pt */
  color:var(--text2);
  text-align:center;
  padding:0 16px 18px;
  line-height:1.4;
  font-family:-apple-system,sans-serif;
}
/* Text input for prompt-style */
.custom-modal-input{
  width:calc(100% - 24px);margin:0 12px 14px;
  padding:11px 12px;border:none;border-radius:8px;
  background:rgba(120,120,128,.12);
  font-family:-apple-system,sans-serif;
  font-size:1rem;color:var(--text);outline:none;
  box-sizing:border-box;display:block;
}
.custom-modal-input:focus{
  background:rgba(120,120,128,.16);
  box-shadow:inset 0 0 0 1.5px var(--teal);
}
/* Action area: hairline top separator */
.custom-modal-actions{
  display:flex;
  border-top:0.5px solid rgba(60,60,67,.22);
}
.dark-mode .custom-modal-actions{
  border-top-color:rgba(84,84,88,.55);
}
/* Action buttons: 44pt height per HIG */
.custom-btn{
  flex:1;
  min-height:44px;   /* Apple minimum tap target */
  padding:11px 8px;
  font-size:1.0625rem;  /* 17pt = default control size */
  font-weight:400;
  border:none;cursor:pointer;
  background:transparent;
  font-family:-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
  transition:background .08s;
}
.custom-btn:active{background:rgba(120,120,128,.2);}
/* Cancel: system default color */
.custom-btn.cancel{color:var(--text);font-weight:600;}
/* Confirm/destructive: uses color to signal role */
.custom-btn.confirm{color:var(--red);}
/* Vertical separator between buttons */
.custom-btn+.custom-btn{
  border-left:0.5px solid rgba(60,60,67,.22);
}
.dark-mode .custom-btn+.custom-btn{
  border-left-color:rgba(84,84,88,.55);
}
:root{
  /* Brand */
  --teal:#1AAF6C; --teal-d:#128A51; --teal-l:#E8F8EF; --teal-m:#A8E4C0;
  --coral:#F27059; --coral-l:#FEF0ED;

  /* iOS 26 Light — systemGroupedBackground family */
  --bg:#f4f4f7;          /* primary grouped bg - matched to status bar */
  --bg2:#FFFFFF;         /* secondary grouped bg (cards) */
  --bg3:#f4f4f7;         /* tertiary */
  --white:#FFFFFF;
  --text:#000000;
  --text2:rgba(60,60,67,0.78);
  --text3:rgba(60,60,67,0.42);
  --border:rgba(60,60,67,0.15);
  --border-soft:rgba(60,60,67,0.08);
  --fill:rgba(120,120,128,0.07);
  --fill2:rgba(120,120,128,0.14);

  /* iOS 26 vivid palette — Shortcuts-inspired */
  --green:#28CD41; --red:#FF3B30; --amber:#FF9F0A; --purple:#BF5AF2;
  --blue:#007AFF;  --pink:#FF2D55; --cyan:#32ADE6; --indigo:#5E5CE6;
  --orange:#FF6B00; --mint:#00C7BE; --brown:#A2845E;

  /* Shadows */
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 14px rgba(0,0,0,0.04);
  --shadow-card:0 2px 10px rgba(0,0,0,0.06),0 0 1px rgba(0,0,0,0.04);
  --shadow2:0 10px 36px rgba(0,0,0,0.09);
  --shadow-teal:0 6px 22px rgba(26,175,108,0.38);
  --shadow-color:0 6px 20px;

  /* Radii — iOS 26 uses larger radii throughout */
  --r:16px; --r-sm:12px; --r-xs:10px; --r-pill:100px;

  /* Layout */
  --card:#FFFFFF; --nav:#FAFAFC;
  --margin:16px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
.dark-mode{
  --bg:#000101;
  --bg2:#1C1C1E;
  --bg3:#2C2C2E;
  --white:#1C1C1E;
  --card:#1C1C1E;
  --nav:#000101;
  --text:#FFFFFF;
  --text2:rgba(235,235,245,0.6);
  --text3:rgba(235,235,245,0.28);
  --border:rgba(84,84,88,0.6);
  --border-soft:rgba(84,84,88,0.35);
  --fill:rgba(120,120,128,0.16);
  --fill2:rgba(120,120,128,0.28);
  --shadow:0 1px 3px rgba(0,0,0,0.5),0 4px 14px rgba(0,0,0,0.38);
  --shadow-card:0 2px 10px rgba(0,0,0,0.42),0 0 1px rgba(0,0,0,0.3);
  --shadow2:0 10px 36px rgba(0,0,0,0.6);
  --shadow-teal:0 6px 22px rgba(26,175,108,0.2);
  --teal-l:#0D2B1E; --teal-m:#1A4D32; --coral-l:#2B1A18;
  --green:#30D158; --red:#FF453A; --amber:#FF9F0A; --purple:#BF5AF2;
  --blue:#0A84FF; --pink:#FF375F; --cyan:#5AC8FA; --indigo:#6E6EDB;
  --orange:#FF9500; --mint:#63E6E2; --brown:#C4A882;
}
/* no global transitions */
.no-trans,canvas,svg,img{transition:none!important;}
/* ─── SETTINGS MODAL ─── */
/* Apple Settings grouped table row style */
.stt-section{margin-bottom:28px;}
.stt-section:last-child{margin-bottom:0}
/* Apple section header: uppercase, 13px, inset */
.stt-label{
  font-size:.6875rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--text3);
  padding:0 4px 8px;
}
/* Grouped row card */
.stt-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 16px;
  background:var(--card);
  border-radius:var(--r);
  min-height:44px; /* Apple min tap target */
}
.stt-row-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
/* Apple-style square icon with colored bg */
.stt-ico{
  width:30px;height:30px;border-radius:7px;
  background:linear-gradient(135deg,var(--teal),var(--teal-d));
  display:flex;align-items:center;justify-content:center;
  font-size:0.95rem;flex-shrink:0;
}
.stt-row-title{font-size:.9375rem;font-weight:400;color:var(--text);letter-spacing:-0.01em}
.stt-row-sub{font-size:.8125rem;color:var(--text2);margin-top:1px}
/* Toggle switch */
/* iOS 26 Toggle Switch — 51×31, smooth spring animation */
.toggle-switch{
  position:relative;display:inline-block;
  width:51px;height:31px;flex-shrink:0;
  padding:6px 0;margin:-6px 0;
  vertical-align:middle;cursor:pointer;
}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute;pointer-events:none}
.toggle-track{
  position:absolute;top:6px;left:0;
  width:51px;height:31px;border-radius:100px;
  background:#E5E5EA;
  transition:background .22s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.dark-mode .toggle-track{background:#3A3A3C;}
.toggle-track::before{
  content:'';position:absolute;
  width:27px;height:27px;left:2px;top:2px;
  border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.18),0 1px 3px rgba(0,0,0,0.1),
             0 0 0 0.5px rgba(0,0,0,0.04);
  transition:transform .22s cubic-bezier(.4,0,.2,1),width .1s ease;
}
/* iOS 26: thumb widens slightly during drag — we simulate on active */
.toggle-switch:active .toggle-track::before{width:30px;}
.toggle-switch input:checked+.toggle-track{background:var(--teal);}
.toggle-switch input:checked+.toggle-track::before{transform:translateX(20px);}
.toggle-switch input:checked:active+.toggle-track::before{transform:translateX(18px);}
/* ─── THEME PILLS ─── */
.theme-pills{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%;
}
.theme-pill{
  width:36px;height:36px;border-radius:50%;border:3px solid transparent;
  cursor:pointer;transition:transform .2s, border-color .2s;
  padding:0;outline:none;
}
.theme-pill:hover{transform:scale(1.1);}
.theme-pill.active{
  border-color:var(--text);
  transform:scale(1.15);
  box-shadow:0 0 0 2px var(--bg2);
}


*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;transition:background 0s !important;}
body{font-family:-apple-system,'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;-webkit-font-smoothing:auto;transition:background 0s !important;}
#appBody{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-bottom:calc(72px + env(safe-area-inset-bottom));scroll-behavior:smooth;background:var(--bg);transition:background 0s !important;}
::-webkit-scrollbar{width:0}


/* ── Pre-render dark: cover html AND body BEFORE JS runs ── */
html[data-dark='1'],
html.dark-mode { background:#000101 !important; }
html[data-dark='1'] body,
html.dark-mode body { background:#000101 !important; }

/* ── BASE ── */
html{
  min-height:100%;
  background:var(--bg);
  transition:background 0s !important;
}
html,body{
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
  color:var(--text);
  overscroll-behavior-y:none;
}
body{
  min-height:100%;
  background:var(--bg);
  padding-bottom:calc(24px + var(--safe-bottom));
  overflow-x:hidden;
  overscroll-behavior-y:none;
}

/* Anti-blink: hide until auth state resolves */
#profileBody{
  max-width:600px;margin:0 auto;min-height:100vh;padding-bottom:40px;
  opacity:0;
}
#profileBody.ready{opacity:1;}