:root{
  --bg:#f2f2f7; --card:#ffffff; --text:#111; --muted:#4b5563; --line:#e5e7eb; --accent:#0a84ff; --radius:16px;

  /* helpers for translucent backgrounds & hairlines */
  --bg-rgb: 242,242,247;
  --hairline: rgba(0,0,0,0.06);

  /* app bar base height (excluding safe area) */
  --bar-h: 48px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c10; --card:#1c1c1f; --text:#f9fafb; --muted:#d1d5db; --line:#2f323a;
    --bg-rgb: 11,12,16;
    --hairline: rgba(255,255,255,0.08);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;

  /* Push content below fixed navbar (includes safe area) */
  padding-top: calc(var(--bar-h) + env(safe-area-inset-top));
}

/* === NAV BAR (fixed + safe-area + blur-at-top, solid-after-scroll) === */
.navbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  padding-top: env(safe-area-inset-top);
  min-height: calc(var(--bar-h) + env(safe-area-inset-top));

  background: rgba(var(--bg-rgb), 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 0 solid transparent;
  transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.navbar.scrolled{
  background: rgb(var(--bg-rgb));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 0 var(--hairline);
}

/* Inner container matches your “screen” width and centers content */
.nav-inner{
  position: relative;
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0 max(12px, env(safe-area-inset-left)) 0 max(12px, env(safe-area-inset-right));
  width: clamp(320px, 96vw, 820px);
  margin: 0 auto;
}
/* Title centered */
.nav-title{
  position: absolute; left: 50%; transform: translateX(-50%); font-weight: 600;
}
/* Back button (visible by default; JS toggles [hidden]) */
.back-btn{
  position: absolute;
  left: max(8px, env(safe-area-inset-left));
  top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 10px;
  color: var(--accent); text-decoration: none; font-weight: 600; font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}
.back-btn:active{ background: color-mix(in srgb, var(--accent) 14%, transparent) }
.back-btn[hidden]{ display:none !important; } /* <- guarantees hide on #home */

/* Links default */
a{ text-decoration: none; color: inherit }

/* Screen wrapper — responsive width */
.screen{
  width: clamp(320px, 96vw, 820px);
  margin: 12px auto 32px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: 0 20px 60px -24px rgba(0,0,0,.35);
}
.section{background:var(--card)}

/* Welcome header */
.hero{padding:18px 16px; text-align:center}
.hero h4{margin:4px 0 12px; color:var(--muted); letter-spacing:.4px}
.hero img{
  width: clamp(72px, 18vw, 128px);
  height: auto;
  border-radius: 24px;
  display: block;
  margin: 0 auto 12px;
}
.hero p{margin:0; color:var(--text)}
.hero a{color:var(--accent); text-decoration:none}

/* Group title */
.group-title{
  padding:10px 14px; font-size:.8rem; color:var(--muted);
  background:color-mix(in srgb, var(--bg) 95%, transparent);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)
}

/* List */
.list{list-style:none; margin:0; padding:0}
.item{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--text)
}
.item:last-child{border-bottom:0}
.icon{width:28px; height:28px; border-radius:7px; display:grid; place-items:center; font-size:18px; background:color-mix(in srgb, var(--accent) 18%, transparent)}
.title{flex:1}
.chev{opacity:.45}
.tap{cursor:pointer}

/* Groups with rounded corners like iOS */
.group{margin:0; padding:0; background:var(--card)}
.group-wrap{padding:0 0 12px; background:var(--bg)}
.group .item:first-child{border-top-left-radius:var(--radius); border-top-right-radius:var(--radius)}
.group .item:last-child{border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius)}

@media (min-width: 600px){
  .item{ padding:16px 18px }
  .icon{ width:32px; height:32px; font-size:20px }
  .group-title{ font-size:.9rem }
}
footer{height:28px}

/* Manual theme override (wins over prefers-color-scheme) */
:root[data-theme="light"]{
  --bg:#f2f2f7; --card:#ffffff; --text:#111; --muted:#4b5563; --line:#e5e7eb; --accent:#0a84ff;
  --bg-rgb: 242,242,247;
  --hairline: rgba(0,0,0,0.06);
}
:root[data-theme="dark"]{
  --bg:#0b0c10; --card:#1c1c1f; --text:#f9fafb; --muted:#d1d5db; --line:#2f323a; --accent:#0a84ff;
  --bg-rgb: 11,12,16;
  --hairline: rgba(255,255,255,0.08);
}

/* Theme toggle button */
.theme-toggle{
  position:absolute; right:max(8px, env(safe-area-inset-right));
  top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px; border-radius:10px;
  border:1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background:color-mix(in srgb, var(--bg) 35%, transparent);
  color:var(--text); cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.theme-toggle:active{ background:color-mix(in srgb, var(--accent) 10%, transparent) }

/* In-app overlay */
#inapp{position:fixed; inset:0; z-index:9999; display:none; background:rgba(0,0,0,.35); backdrop-filter:blur(8px)}
#inapp.show{display:block}
#inapp .bar{height:50px; display:flex; align-items:center; gap:10px; padding:0 12px; background:var(--card); border-bottom:1px solid var(--line)}
#inapp .btn{border:1px solid var(--line); border-radius:8px; padding:6px 10px; background:var(--card); cursor:pointer}
#inapp .url{font-size:13px; color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:60vw}
#inapp iframe{position:absolute; top:50px; left:0; right:0; bottom:0; width:100%; height:calc(100% - 50px); border:0; background:#fff}
#inapp .fallback{position:absolute; top:50px; left:0; right:0; bottom:0; display:none; align-items:center; justify-content:center; gap:12px; background:var(--card); color:var(--muted)}

/* Fallback for browsers without env() support */
@supports not (padding-top: env(safe-area-inset-top)){
  .navbar{ padding-top: 0; min-height: var(--bar-h); }
  body{ padding-top: var(--bar-h); }
}

/* Lock scroll when overlay is open */
body.no-scroll{ overflow:hidden; touch-action:none; overscroll-behavior:contain }


  /* simple separators instead of <hr> */
  .group.list > li { border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 6px; margin-bottom: 10px; }
  .group.list > li:last-child { border-bottom: 0; margin-bottom: 0; }
  .group .sub { margin: 6px 0 0; font-size: 13px; opacity: .75; }