/* Findmykids Android (dark). 1 CSS px = 1 dp; the stage is 384 x 854 dp (1200 x 2670 px at density 500). */
@font-face { font-family: 'Google Sans'; font-weight: 400; src: url('../assets/fonts/google_sans_regular.ttf'); }
@font-face { font-family: 'Google Sans'; font-weight: 500; src: url('../assets/fonts/google_sans_medium.ttf'); }
@font-face { font-family: 'Google Sans'; font-weight: 700; src: url('../assets/fonts/google_sans_bold.ttf'); }

:root {
  /* palette from resources.arsc (night values) */
  --bg: #000000;
  --surface: #1a1a1a;
  --surface-2: #262626;
  --line: #2e2e2e;
  --ink: #ffffff;
  --ink-2: #e0e0e0;
  --mute: #9a9a9a;
  --blue: #0085ff;          /* saturate_b 500 */
  --blue-deep: #002147;     /* saturate_b 100 night */
  --blue-mid: #004494;      /* saturate_b 300 night */
  --blue-light: #d6edff;    /* saturate_b 100 day */
  --blue-soft: #70baff;     /* saturate_b 300 day */
  --red: #f23f54;           /* saturate_r 500 */
  --red-deep: #480911;      /* saturate_r 100 night */
  --green: #06a747;         /* saturate_g 500 */
  --green-deep: #072c16;
  --green-ink: #43d07c;
  --orange: #fa7500;        /* saturate_o 500 */
  --orange-deep: #452000;
  --map-bg: #242f3e;
  /* neutrals measured on the device */
  --btn: #000000;           /* floating map buttons, pin rims and labels */
  --ink-3: #c0c0c0;
  --chip: #3a3a3a;
  --grip: #3d3d3d;
  --track: #333333;
  --track-2: #444444;
  --sw-off: #4a4a4a;
  --toast: #2c2c2c;
  --btn-grey: #3a3d44;
  --btn-grey-ink: #c9ccd2;
  --pin-ink: #000000;
  --shadow: none;
}
/* light theme: day values of the same resources (palette.json), set by setTheme() in app.js */
:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f6f6f6;       /* deep 10 */
  --surface-2: #ecedee;     /* deep 50 */
  --line: #ecedee;
  --ink: #000000;
  --ink-2: #3f4145;         /* deep 800 */
  --ink-3: #62666d;         /* deep 600 */
  --mute: #7a7d84;          /* deep 500 */
  --blue-deep: #d6edff;     /* saturate_b 100 day */
  --blue-mid: #70baff;      /* saturate_b 300 day */
  --blue-soft: #026be8;     /* saturate_b 600 day */
  --red-deep: #ffe0e4;      /* saturate_r 100 day */
  --green-deep: #d2f4e0;    /* saturate_g 100 day */
  --green-ink: #0e8b40;     /* saturate_g 600 day */
  --orange-deep: #ffe5ce;   /* saturate_o 100 day */
  --map-bg: #f5f5f5;
  --btn: #ffffff;
  --chip: #ecedee;
  --grip: #c8c9cc;
  --track: #e3e4e5;
  --track-2: #c8c9cc;
  --sw-off: #c8c9cc;
  --toast: #2c2c2c;
  --btn-grey: #e3e4e5;
  --btn-grey-ink: #7a7d84;
  --pin-ink: #ffffff;
  --shadow: 0 1px 6px rgba(0, 0, 0, .14);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0b0c0f; color: #e9ecf1; font-family: 'Google Sans', 'Roboto', system-ui, sans-serif; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
input { font: inherit; }

/* ------------------------------------------------------------ desktop layout */
.layout { min-height: 100%; display: flex; align-items: center; justify-content: center; gap: 48px; padding: 24px 16px; }
.panel { width: 280px; }
.panel h1 { margin: 0 0 4px; color: var(--blue); font-size: 28px; }
.panel .muted { color: #8a93a3; margin: 0 0 20px; font-size: 14px; }
.panel .jumps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.panel .jumps button { background: #1c2028; border: 1px solid #2a303b; border-radius: 10px; padding: 9px 10px; font-size: 13px; text-align: left; }
.panel .jumps button:hover { border-color: #3d4656; }
.panel .toggle { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #c7cdd8; margin-bottom: 14px; }
.panel .hints { margin: 0; padding-left: 18px; color: #aab2c0; font-size: 13px; line-height: 1.6; }
.phone { --w: min(384px, calc((100vh - 64px) * 384 / 854)); width: calc(var(--w) + 22px); height: calc(var(--w) * 854 / 384 + 22px); padding: 11px;
  border-radius: 46px; background: #15171b; box-shadow: inset 0 0 0 2px #34373e, 0 30px 80px rgba(0, 0, 0, .55); flex: none; }
.screen { position: relative; width: var(--w); height: calc(var(--w) * 854 / 384); overflow: hidden; border-radius: 36px; background: #000; }
#stage { --H: 854px; --st: 32px; --sbb: 0px; position: absolute; left: 0; top: 0; width: 384px; height: 854px; transform-origin: 0 0; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: 'Google Sans', sans-serif; user-select: none; -webkit-user-select: none; }
/* phone: the screen fills the whole viewport, the stage height adapts (see fit() in app.js) */
@media (max-width: 760px) {
  html, body { background: var(--bg); overflow: hidden; overscroll-behavior: none; position: fixed; inset: 0; }
  .layout { padding: 0; gap: 0; min-height: 0; height: 100%; }
  .panel { display: none; }
  /* the phone frame is pinned to the screen edges: on iPhone Home Screen apps 100vh / 100dvh can stop short of the Home indicator */
  .phone { padding: 0; border-radius: 0; background: none; box-shadow: none; position: fixed; inset: 0; width: auto; height: auto; }
  .screen { border-radius: 0; width: 100%; height: 100%; }
}

/* ------------------------------------------------------------ primitives */
.ic { display: inline-block; width: 24px; height: 24px; flex: none; }
.ic svg { width: 100%; height: 100%; display: block; }
.statusbar { position: absolute; left: 0; right: 0; top: 0; height: 32px; padding: 0 24px 0 21px; display: flex; align-items: center; justify-content: space-between;
  font: 500 14.5px 'Google Sans'; letter-spacing: .2px; z-index: 50; pointer-events: none; }
.statusbar .r { display: flex; gap: 6px; align-items: center; }
.statusbar .r i { display: block; background: currentColor; }
.screen-layer { position: absolute; inset: 0; }
.page { position: absolute; inset: 0; background: var(--bg); transform: translateX(100%); transition: transform .32s cubic-bezier(.2, 0, 0, 1); z-index: 20; overflow: hidden; }
.page.on { transform: none; }
.page.under { transform: translateX(-24%); }
.page .content { position: absolute; left: 0; right: 0; top: calc(var(--st) + 57px); bottom: 0; overflow-y: auto; scrollbar-width: none; }
.page .content::-webkit-scrollbar { display: none; }
.topbar { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--st) + 57px); padding-top: calc(var(--st) + 8px); display: flex; align-items: center; justify-content: center; background: var(--surface);
  font: 500 15.6px 'Google Sans'; z-index: 2; }
.topbar .l, .topbar .rbtn { position: absolute; top: calc(var(--st) + 8px); width: 40px; height: 40px; border-radius: 14px; background: var(--btn); display: grid; place-items: center; }
.topbar .l { left: 16px; }
.topbar .rbtn { right: 16px; }
.round { width: 40px; height: 40px; border-radius: 14px; background: var(--btn); display: grid; place-items: center; color: var(--ink); box-shadow: var(--shadow); }
#b-family, #b-sos, #b-rt, .pin .label, .statuspill, .pin .badge { box-shadow: var(--shadow); }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 16px; background: var(--blue); color: #fff; font: 500 16px 'Google Sans';
  width: 100%; transition: transform .15s, filter .15s; }
.btn:active { transform: scale(.97); filter: brightness(1.1); }
.btn.secondary { background: var(--blue-deep); color: var(--blue); }
.btn.red { background: var(--red); color: #fff; }
.btn.grey { background: var(--btn-grey); color: var(--btn-grey-ink); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.light { background: #c0e1ff; color: #002147; }
.card { background: var(--surface); border-radius: 20px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px 0 6px; border-radius: 7px; font: 400 12.5px 'Google Sans'; }
.chip.batt { background: var(--green-deep); color: var(--ink); }
.chip.batt .ic { color: var(--green-ink); width: 18px; height: 18px; }
.chip.silent { background: var(--orange-deep); color: var(--ink); }
.chip.silent .ic { color: var(--orange); width: 16px; height: 16px; }
.avatar { width: 46px; height: 46px; border-radius: 15px; background: var(--blue); color: #fff; display: grid; place-items: center; font: 700 26px 'Google Sans'; flex: none; }
.avatar.ring { box-shadow: 0 0 0 3px var(--chip); }
.avatar.pink { background: #c858da; }
.avatar.green { background: #06a747; }
.avatar.orange { background: #fa7500; }
.dim { color: var(--mute); }
.toast { position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 20px); background: var(--toast); color: #fff; font: 400 14px 'Google Sans'; padding: 12px 16px;
  border-radius: 14px; opacity: 0; transition: .25s; z-index: 100; white-space: nowrap; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ main (Location) */
#map { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--map-bg); }
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { display: none; }
.mapbtns { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.mapbtns > * { pointer-events: auto; position: absolute; }
#b-menu { left: 16px; top: calc(var(--st) + 8px); }
#b-family { left: 50%; top: calc(var(--st) + 8px); transform: translateX(-50%); height: 40px; padding: 0 14px 0 13px; border-radius: 14px; background: var(--btn); display: flex; align-items: center; gap: 4px;
  font: 500 15.5px 'Google Sans'; }
#b-family .ic { width: 20px; height: 20px; }
#b-bell { right: 16px; top: calc(var(--st) + 8px); }
#b-bell.dot::after { content: ''; position: absolute; right: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--btn); }
#b-layers { right: 16px; top: calc(var(--st) + 56px); }
#b-locate { right: 16px; }
#b-sos { left: 16px; height: 40px; padding: 0 13px 0 8px; border-radius: 14px; background: var(--btn); display: flex; align-items: center; gap: 7px; font: 500 13.6px 'Google Sans'; }
#b-sos .sq { width: 24px; height: 24px; border-radius: 7px; background: var(--red-deep); display: grid; place-items: center; color: var(--red); }
#b-sos .sq .ic { width: 18px; height: 18px; }
#b-rt { height: 40px; border-radius: 14px; background: var(--btn); display: flex; align-items: center; gap: 8px; padding: 0 8px 0 8px; font: 500 13px 'Google Sans'; white-space: nowrap; }
#b-rt .sq { width: 24px; height: 24px; border-radius: 7px; background: var(--blue-deep); display: grid; place-items: center; color: var(--blue); }
.sw { position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--sw-off); transition: background .2s; flex: none; }
.sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.2, 0, 0, 1); }
.sw.on { background: var(--blue); }
.sw.on::after { transform: translateX(16px); }

/* map pins (measured: body 57 dp incl. 3 dp black rim, squircle, wide tail, ringed dot) */
.pin { position: relative; width: 57px; height: 82px; cursor: pointer; }
.pin .body { position: absolute; left: 0; top: 0; width: 57px; height: 57px; border-radius: 22px; background: var(--btn); padding: 3px; }
.pin .body .face { width: 100%; height: 100%; border-radius: 19px; background: var(--blue); display: grid; place-items: center; font: 700 30px 'Google Sans'; color: var(--pin-ink); }
.pin .tail { position: absolute; left: 20.5px; top: 54px; width: 16px; height: 11px; background: var(--btn); clip-path: polygon(0 0, 100% 0, 58% 92%, 50% 100%, 42% 92%); }
.pin .dot { position: absolute; left: 22.5px; top: 70px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); border: 3.5px solid var(--btn); }
.pin .badge { position: absolute; right: -11px; top: 37px; width: 26px; height: 26px; border-radius: 8px; background: var(--btn); display: grid; place-items: center; color: var(--orange); }
.pin .badge .ic { width: 18px; height: 18px; }
.pin .label { position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%); height: 26px; padding: 0 10px 0 7px; border-radius: 9px; background: var(--btn);
  display: flex; align-items: center; gap: 5px; white-space: nowrap; font: 400 15px 'Google Sans'; color: var(--ink); }
.pin .label .ic { width: 16px; height: 16px; color: var(--blue); }
.pin.kid .body .face { background: #c858da; }
.pin.kid .dot { background: #c858da; }
.pin.pulse .body::before { content: ''; position: absolute; inset: -10px; border-radius: 28px; border: 2px solid var(--red); animation: ring 1.4s infinite; }
@keyframes ring { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.4); } }

/* bottom sheet */
.sheet { position: absolute; left: 0; right: 0; top: 0; height: var(--H); background: var(--bg); border-radius: 26px 26px 0 0; z-index: 8; touch-action: pan-y;
  transition: transform .38s cubic-bezier(.2, 0, 0, 1); will-change: transform; }
.sheet.drag { transition: none; }
.sheet .grab { position: absolute; left: 0; right: 0; top: 0; height: 24px; }
.sheet .grab::after { content: ''; position: absolute; left: 50%; top: 6px; width: 34px; height: 4px; margin-left: -17px; border-radius: 2px; background: var(--grip); }
.sheet .inner { position: absolute; left: 0; right: 0; top: 16px; bottom: 66px; overflow-y: auto; padding: 0 16px 24px; scrollbar-width: none; }
.sheet .inner::-webkit-scrollbar { display: none; }
.members { margin-top: 8px; }
.member { display: flex; gap: 14px; padding: 16px; align-items: center; cursor: pointer; }
.member + .member, .member + .addp { border-top: 1px solid var(--line); }
.member .avatar { width: 58px; height: 58px; border-radius: 19px; font-size: 32px; box-shadow: 0 0 0 3px var(--line); }
.member .nm { display: flex; align-items: center; gap: 8px; font: 700 20px 'Google Sans'; flex-wrap: wrap; }
.member .addr { font: 400 15px 'Google Sans'; margin-top: 2px; color: var(--ink); }
.member .ago { font: 400 13px 'Google Sans'; color: var(--mute); margin-top: 1px; }
.addp { display: flex; gap: 14px; align-items: center; padding: 16px; color: var(--blue); font: 500 16px 'Google Sans'; cursor: pointer; }
.addp .dash { width: 58px; height: 58px; border-radius: 19px; border: 2px dashed var(--blue); display: grid; place-items: center; }
.kchips { display: flex; gap: 8px; margin: 16px 0 12px; }
.kchip { height: 36px; border-radius: 12px; border: 1.5px solid var(--track); display: flex; align-items: center; gap: 7px; padding: 0 12px 0 4px; font: 500 15px 'Google Sans'; cursor: pointer; }
.kchip .avatar { width: 28px; height: 28px; border-radius: 9px; font-size: 15px; box-shadow: none; }
.kchip.on { border-color: var(--blue); background: var(--blue-deep); color: var(--blue); }
.h { font: 500 14px 'Google Sans'; color: var(--ink); margin: 4px 0 10px; }
.feed-row { display: flex; gap: 8px; }
.fcard { background: var(--surface); border-radius: 18px; padding: 14px; }
.fcard .big { font: 700 21px 'Google Sans'; }
.fcard .line { display: flex; align-items: center; gap: 8px; font: 400 12.5px 'Google Sans'; margin-top: 10px; color: var(--ink-2); }
.fcard .tag { width: 22px; height: 22px; border-radius: 7px; background: var(--chip); display: grid; place-items: center; }
.fcard .tag .ic { width: 15px; height: 15px; }
.now { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.now .tag { width: 38px; height: 38px; border-radius: 12px; }
.now b { font: 700 16px 'Google Sans'; display: block; }
.now small { color: var(--mute); font-size: 13px; }
.route-card { margin-top: 8px; border-radius: 18px; overflow: hidden; background: var(--surface); }
.route-card .anim { width: 100%; aspect-ratio: 704 / 568; }
.endfeed { text-align: center; color: var(--ink); font: 400 14px 'Google Sans'; padding: 22px 0 8px; }
.endfeed .star { font-size: 30px; color: var(--blue); }

/* bottom navigation */
.navbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(66px + var(--sbb, 0px)); padding-bottom: var(--sbb, 0px); background: var(--surface); display: flex; z-index: 12; }
.navbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--mute); font: 700 12.3px 'Google Sans'; }
.navbar button .ic { width: 26px; height: 26px; }
.navbar button.on { color: var(--ink-2); }
.navbar button.on .ic { color: var(--ink); }
.static-page { position: absolute; left: 0; right: 0; top: calc(var(--st) + 3px); bottom: 66px; background-size: 100% auto; background-repeat: no-repeat; background-position: top; z-index: 11; display: none; }

/* sheets / dialogs */
.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .25s; z-index: 30; pointer-events: none; }
.scrim.on { opacity: 1; pointer-events: auto; }
.bs { position: absolute; left: 0; right: 0; bottom: 0; contain: layout paint; background: var(--bg); border-radius: 26px 26px 0 0; z-index: 31; transform: translateY(105%);
  transition: transform .34s cubic-bezier(.2, 0, 0, 1); padding: 24px 16px calc(20px + var(--sbb, 0px)); max-height: calc(100% - var(--st) - 10px); overflow-y: auto; scrollbar-width: none; }
.bs.surface { background: var(--surface); }
.bs.on { transform: none; }
.bs .grip { position: absolute; left: 50%; top: 8px; width: 34px; height: 4px; margin-left: -17px; border-radius: 2px; background: var(--grip); }
.bs .close { position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; z-index: 2; }
.bs h2 { font: 700 22px/27px 'Google Sans'; margin: 8px 0 6px; }
.bs h2.c { text-align: center; }
.bs p { font: 400 14.5px/19px 'Google Sans'; margin: 0 0 18px; color: var(--ink-2); }
.bs p.c { text-align: center; }

/* family / circles dropdown */
.drop { position: absolute; left: 0; right: 0; top: 0; background: var(--bg); border-radius: 0 0 22px 22px; z-index: 31; transform: translateY(-105%);
  transition: transform .32s cubic-bezier(.2, 0, 0, 1); padding: calc(var(--st) + 8px) 16px 16px; }
.drop.on { transform: none; }
.drop .hdr { display: flex; justify-content: center; position: relative; margin-bottom: 22px; }
.drop .hdr .pill { height: 40px; padding: 0 12px; border-radius: 14px; background: var(--surface); display: flex; align-items: center; gap: 3px; font: 500 13.8px 'Google Sans'; }
.drop .hdr .pill .ic { width: 18px; height: 18px; }
.drop .hdr .gear { position: absolute; right: 0; top: 0; width: 40px; height: 40px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; }
.circle-item { display: flex; align-items: center; gap: 10px; height: 49px; padding: 0 9px 0 12px; border-radius: 15px; border: 1.3px solid transparent; background: var(--surface); margin-bottom: 8px; cursor: pointer; }
.circle-item.on { border-color: var(--blue); background: var(--blue-deep); }
.circle-item .ck { width: 18px; color: var(--ink); }
.circle-item .ck .ic { width: 18px; height: 18px; }
.circle-item b { font: 500 14.5px/17px 'Google Sans'; display: block; }
.circle-item small { font: 400 11.5px/14px 'Google Sans'; color: var(--ink-3); }
.circle-item .grow { flex: 1; }
.circle-item .avs { display: flex; }
.circle-item .avs .avatar { width: 30px; height: 30px; border-radius: 10px; font-size: 16px; margin-left: -6px; box-shadow: 0 0 0 2px var(--blue-deep); }
.row2 { display: flex; gap: 8px; margin: 16px 0 16px; }
.row2 .btn { height: 40px; font-size: 14px; border-radius: 14px; }
.share-row { display: flex; align-items: center; justify-content: space-between; height: 57px; padding: 0 14px 0 12px; border-radius: 16px; background: var(--surface); cursor: pointer; }
.share-row b { font: 500 14.5px/17px 'Google Sans'; display: block; }
.share-row small { font: 400 11.5px/14px 'Google Sans'; color: var(--ink-3); }

/* inputs */
.field { position: relative; background: var(--surface); border-radius: 16px; height: 60px; border: 1.5px solid transparent; transition: border-color .2s; }
.field.focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 133, 255, .25); }
.field.err { border-color: var(--red); }
.field label { position: absolute; left: 14px; top: 19px; font: 400 15px 'Google Sans'; color: var(--mute); transition: .18s; pointer-events: none; }
.field.filled label, .field.focus label { top: 9px; font-size: 11.5px; }
.field input { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; padding: 24px 46px 6px 14px; background: none; border: 0; outline: none; color: var(--ink); font: 400 16px 'Google Sans'; }
.field .aux { position: absolute; right: 12px; top: 18px; width: 24px; height: 24px; color: var(--blue); }
.hint { font: 400 12px 'Google Sans'; color: var(--mute); margin: 6px 0 0 10px; }
.errmsg { font: 400 12px 'Google Sans'; color: var(--red); margin: 6px 0 0 10px; display: none; }
.err + .errmsg { display: block; }
.code { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 24px 0 18px; }
.code .cell { width: 44px; height: 54px; border-radius: 13px; background: var(--surface); border: 2px solid var(--blue-mid); display: grid; place-items: center; font: 500 24px 'Google Sans';
  box-shadow: 0 0 0 3px rgba(0, 133, 255, .18); }
.code .cell.cur { border-color: var(--blue); }
.code .cell.cur::after { content: ''; width: 2px; height: 24px; background: var(--blue); animation: blink 1s steps(1) infinite; }
.code .dash { width: 12px; height: 2px; background: var(--track-2); }
.code.err .cell { border-color: var(--red); box-shadow: 0 0 0 3px rgba(242, 63, 84, .2); animation: shake .35s; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.codebox { height: 64px; border-radius: 18px; background: var(--surface); display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 28px 'Google Sans'; color: var(--mute); letter-spacing: 1px; cursor: pointer; }
.codebox .ic { color: var(--mute); }
.or { display: flex; align-items: center; gap: 12px; color: var(--mute); font: 400 12.5px 'Google Sans'; margin: 22px 0 16px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--track-2); }
.link { color: var(--blue); font: 500 14.5px 'Google Sans'; text-align: center; display: block; width: 100%; padding: 16px 0 4px; }
.opt { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 14px 0 16px; background: var(--surface); border-radius: 16px; margin-top: 14px; font: 400 15px 'Google Sans'; }
.opt .val { height: 28px; padding: 0 9px; border-radius: 8px; background: var(--blue-deep); color: var(--blue); display: grid; place-items: center; font: 500 14px 'Google Sans'; cursor: pointer; }
.durs { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.durs button { height: 34px; padding: 0 12px; border-radius: 10px; background: var(--surface); font: 500 13.5px 'Google Sans'; }
.durs button.on { background: var(--blue-deep); color: var(--blue); }

/* kid profile */
.kid-top { position: absolute; left: 0; right: 0; top: calc(var(--st) + 8px); display: flex; justify-content: space-between; padding: 0 16px; z-index: 6; pointer-events: none; }
.kid-top > * { pointer-events: auto; }
.statuspill { height: 40px; border-radius: 14px; background: var(--btn); display: flex; align-items: center; gap: 6px; padding: 0 12px; font: 400 12.5px 'Google Sans'; }
.statuspill .sep { width: 1px; height: 14px; background: var(--track-2); }
.statuspill .ic { width: 16px; height: 16px; }
.statuspill.big { flex-direction: column; height: 46px; gap: 1px; justify-content: center; }
.actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 2px 0 18px; }
.act { height: 78px; border-radius: 18px; background: var(--blue-deep); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .15s; }
.act:active { transform: scale(.96); }
.act .ic { width: 28px; height: 28px; color: var(--blue); margin-bottom: 3px; }
.act b { font: 500 14px 'Google Sans'; color: var(--ink); }
.act small { font: 400 11px 'Google Sans'; color: var(--blue-soft); }
.act.redish { background: var(--red-deep); }
.act.redish .ic { color: var(--red); }
.act.redish small { color: #f9aeb7; }
.floatbar { position: absolute; left: 16px; bottom: calc(16px + var(--sbb, 0px)); display: flex; gap: 8px; z-index: 9; }
.floatbar button { height: 44px; min-width: 44px; border-radius: 15px; background: var(--btn); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  font: 500 15px 'Google Sans'; box-shadow: 0 0 0 1px var(--line), var(--shadow); }

/* feature pages (sound around, loud signal, SOS) */
.feature { position: absolute; left: 0; right: 0; top: calc(var(--st) + 57px); bottom: 0; display: flex; flex-direction: column; align-items: center; padding: 0 16px calc(28px + var(--sbb, 0px)); }
.feature .grow { flex: 1; }
.feature h3 { font: 700 22px/27px 'Google Sans'; text-align: center; margin: 18px 0 6px; }
.feature p { font: 400 14.5px/19px 'Google Sans'; text-align: center; margin: 0; color: var(--ink-2); }
.feature .note { font: 400 12.5px/16px 'Google Sans'; color: var(--mute); text-align: center; margin-top: 12px; }
.orb { position: relative; width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; margin-top: 48px; }
.orb .core { position: relative; z-index: 2; width: 96px; height: 96px; border-radius: 32px; display: grid; place-items: center; font: 700 46px 'Google Sans'; }
.orb .w { position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.orb.live .w { animation: wave 2.2s infinite cubic-bezier(.2, 0, 0, 1); }
.orb.live .w:nth-child(2) { animation-delay: .73s; }
.orb.live .w:nth-child(3) { animation-delay: 1.46s; }
@keyframes wave { from { transform: scale(.7); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }
.wavebox { width: 100%; height: 108px; margin-top: 26px; position: relative; }
.wavebox .lot { position: absolute; inset: 0; }
.wavebox .flat { position: absolute; left: 10%; right: 10%; top: 50%; height: 3px; border-radius: 2px; background: var(--track); }
.timer { font: 500 34px 'Google Sans'; font-variant-numeric: tabular-nums; margin-top: 18px; letter-spacing: .5px; }
.statusline { display: flex; align-items: center; gap: 8px; font: 400 14px 'Google Sans'; color: var(--ink-3); margin-top: 8px; }
.statusline .dotlive { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; }
.ctrls { display: flex; gap: 40px; justify-content: center; margin-top: 10px; }
.ctrl { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 400 13px 'Google Sans'; color: var(--ink-3); }
.ctrl .c { width: 64px; height: 64px; border-radius: 22px; background: var(--surface); display: grid; place-items: center; transition: .2s; }
.ctrl .c.on { background: var(--blue); }
.ctrl .c.stop { background: var(--red); }
.ctrl .c .ic { width: 28px; height: 28px; }
.ctrl .c.stop .ic { color: #fff; }
.counter { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }
.counter i { width: 26px; height: 6px; border-radius: 3px; background: var(--blue); }
.counter i.used { background: var(--track); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sos-orb .core { background: var(--surface); color: var(--red); width: 80px; height: 80px; border-radius: 50%; }
.sosbig { width: 100%; height: 56px; border-radius: 28px; background: var(--red); color: #000; font: 700 15px 'Google Sans'; box-shadow: 0 0 0 0 rgba(242, 63, 84, .5); }
.sosbig.armed { animation: arm 1s infinite; }
@keyframes arm { 0% { box-shadow: 0 0 0 0 rgba(242, 63, 84, .6); } 100% { box-shadow: 0 0 0 18px rgba(242, 63, 84, 0); } }
.art { width: 100%; display: block; }
.ob { position: absolute; left: 0; right: 0; top: calc(var(--st) + 57px); bottom: 0; }
.ob .txt { padding: 0 16px; text-align: center; }
.ob .txt { padding: 0 36px; }
.ob .txt h3 { font: 700 21.5px/25px 'Google Sans'; margin: 20px 0 6px; }
.ob .txt p { font: 400 14px/18px 'Google Sans'; margin: 0; color: var(--ink-2); }
.ob .txt ul { text-align: left; display: inline-block; margin: 8px 0 0; padding-left: 18px; font: 400 14.5px/22px 'Google Sans'; }
.ob .foot { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.sos-live { position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, #5f0c16 0, #1d0306 55%, #000 100%); z-index: 40; display: none; flex-direction: column; align-items: center; padding: calc(var(--st) + 58px) 20px calc(28px + var(--sbb)); }
.sos-live.on { display: flex; }
.sos-live .ring { width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center; position: relative; margin-top: 30px; }
.sos-live .ring .core { width: 120px; height: 120px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font: 700 44px 'Google Sans'; color: #fff; z-index: 2; }
.sos-live .ring .w { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--red); animation: wave 1.6s infinite; }
.sos-live .ring .w:nth-child(2) { animation-delay: .53s; }
.sos-live .ring .w:nth-child(3) { animation-delay: 1.06s; }
.sos-live h3 { font: 700 24px/29px 'Google Sans'; margin: 34px 0 8px; text-align: center; }
.sos-live p { font: 400 14.5px/19px 'Google Sans'; margin: 0; text-align: center; color: #f2d2d6; }
.sos-live .who { display: flex; gap: 8px; margin-top: 22px; }
.sos-live .who .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: 18px; }
.sos-live .grow { flex: 1; }
.accordion { margin-top: 8px; }
.acc { background: var(--surface); border-radius: 16px; margin-bottom: 8px; overflow: hidden; }

/* capture mode (?bare): the stage fills the window, used for pixel comparison with device screenshots */
body.bare .layout { padding: 0; gap: 0; }
body.bare .panel { display: none; }
body.bare .phone { --w: 100vw; padding: 0; border-radius: 0; background: none; box-shadow: none; width: 100vw; height: calc(100vw * 854 / 384); }
body.bare .screen { border-radius: 0; }

/* full-height sheet (Share location) */
.bs.full { top: calc(var(--st) + 6px); max-height: none; display: flex; flex-direction: column; padding-bottom: 16px; }
.bs.full .grow { flex: 1; }
/* SOS main, measured on the device: orb 96 dp centred at 332 dp, button 288 x 71 dp at 632 dp (151 dp above the bottom) */
.sosmain .orb { width: 96px; height: 96px; margin-top: 195px; }
.sosmain .orb .core { width: 96px; height: 96px; }
.sosmain h3 { margin-top: 45px; }
.sosmain .sosbig { position: absolute; left: 48px; right: 48px; width: auto; bottom: 151px; height: 71px; border-radius: 36px; font-size: 15px; }
.sosmain .contacts { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 400 13.5px 'Google Sans'; color: var(--ink); }
.bs.full h2 { font: 700 19.5px/24px 'Google Sans'; margin-top: 34px !important; }
.bs.full p { font-size: 14px; }
.panel .fullbtn { display: block; width: 100%; margin-bottom: 14px; background: #1c2028; border: 1px solid #2a303b; border-radius: 10px; padding: 9px 10px; font-size: 13px; }

/* theme picker (menu button), same list as the app's Settings → Theme */
.themes .opt-row { display: flex; align-items: center; justify-content: space-between; height: 60px; font: 400 17px 'Google Sans'; border-bottom: 1px solid var(--track); cursor: pointer; }
.themes .opt-row:last-child { border-bottom: 0; }
.themes .opt-row .ic { color: var(--blue); width: 26px; height: 26px; }
.panel .themesw { display: flex; gap: 6px; margin-bottom: 14px; }
.panel .themesw button { flex: 1; background: #1c2028; border: 1px solid #2a303b; border-radius: 10px; padding: 8px 6px; font-size: 13px; }
.panel .themesw button.on { border-color: var(--blue); color: #fff; background: #0b2a4a; }

/* photo avatars */
.avatar.photo, .pin .body .face.photo { background-size: cover !important; background-position: center !important; background-color: var(--surface-2) !important; }
/* settings sheet */
.set-h { font: 500 13px 'Google Sans'; color: var(--mute); text-transform: uppercase; letter-spacing: .6px; margin: 18px 0 2px; }
.themes .fam { display: flex; align-items: center; gap: 12px; }
.themes .fam .avs { display: flex; }
.themes .fam .avatar { width: 30px; height: 30px; border-radius: 10px; font-size: 15px; margin-left: -6px; box-shadow: 0 0 0 2px var(--bg); }
.themes .fam .avatar:first-child { margin-left: 0; }

/* ------------------------------------------------------------ gestures and touch feedback */
.screen { background: var(--bg) !important; }
.sheet[data-st="half"] .inner { overflow: hidden; }
.sheet .inner, .bs, .page .content, .chat { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.bs { touch-action: pan-y; will-change: transform; }
.bs.drag, .drop.drag { transition: none; }
.sheet .grab { height: 30px; cursor: grab; }
.bs .grip { width: 40px; margin-left: -20px; }
.drop::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--grip); }
button, .member, .circle-item, .share-row, .opt-row, .fcard, .addp, .notif, .place-row, .member-row, .act, .codebox, .kchip, .maptype {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.round, #b-family, #b-sos, #b-rt, .floatbar button, .kchip, .topbar .l, .topbar .rbtn, .bs .close, .ctrl .c, .act, .opt .val, .durs button, .seg button, .chips button, .more, .send, .quick button, .maptype {
  transition: scale .16s cubic-bezier(.2, 0, 0, 1), opacity .16s, background-color .2s; }
.round:active, #b-family:active, #b-sos:active, #b-rt:active, .floatbar button:active, .kchip:active, .topbar .l:active, .topbar .rbtn:active, .bs .close:active, .ctrl .c:active,
.opt .val:active, .durs button:active, .seg button:active, .chips button:active, .more:active, .send:active, .quick button:active, .maptype:active { scale: .93; }
.act:active { transform: none; scale: .96; }
.member, .circle-item, .share-row, .opt-row, .fcard, .addp, .notif, .place-row, .member-row, .codebox { transition: opacity .15s; }
.member:active, .circle-item:active, .share-row:active, .opt-row:active, .fcard:active, .addp:active, .notif:active, .place-row:active, .member-row:active, .codebox:active { opacity: .6; }
.navbar button:active { opacity: .6; }

/* ------------------------------------------------------------ new screens */
.list-pad { padding: 12px 16px calc(24px + var(--sbb)); }
.card.list { padding: 0 14px; }
.notif, .place-row, .member-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--track); cursor: pointer; }
.list > :last-child { border-bottom: 0; }
.notif .grow, .place-row .grow, .member-row .grow, .prof .grow { flex: 1; min-width: 0; }
.notif b, .place-row b, .member-row b { font: 500 15px/19px 'Google Sans'; display: block; }
.notif small, .place-row small, .member-row small, .prof small { font: 400 12.5px 'Google Sans'; color: var(--mute); }
.notif .avatar, .member-row .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: 18px; }
.nic, .pic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--blue-deep); color: var(--blue); }
.nic .ic, .pic .ic { width: 22px; height: 22px; }
.nic.green { background: var(--green-deep); color: var(--green); }
.nic.red { background: var(--red-deep); color: var(--red); }
.nic.orange { background: var(--orange-deep); color: var(--orange); }
.note-s { font: 400 13px/17px 'Google Sans'; color: var(--mute); margin: 10px 4px 0; }
.empty { padding: 22px 0; text-align: center; color: var(--mute); font: 400 14px 'Google Sans'; }
.more { width: 36px; height: 36px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.more .ic { width: 20px; height: 20px; }
.opt-row.pad { padding: 0; }
.opt-row .dim { display: flex; align-items: center; gap: 2px; font-size: 14px; }
.opt-row .dim .ic { width: 18px; height: 18px; }
.timeline { padding: 6px 14px; }
.tl { display: flex; align-items: center; gap: 12px; padding: 11px 0; position: relative; }
.tl b { font: 500 15px 'Google Sans'; display: block; }
.tl small { font: 400 12.5px 'Google Sans'; color: var(--mute); }
.tl .grow { flex: 1; }
.tl .dim { font-size: 13px; }
.tdot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--blue); background: var(--bg); flex: none; z-index: 1; }
.tdot.walk { border-style: dotted; border-color: var(--mute); }
.tl + .tl::before { content: ''; position: absolute; left: 6px; top: -12px; height: 24px; width: 2px; background: var(--track); }
.tl.now .tdot { background: var(--blue); }
.mini-map { position: relative; height: 230px; background: var(--map-bg); overflow: hidden; }
.prof { display: flex; gap: 14px; align-items: center; padding: 16px; margin-top: -34px; position: relative; z-index: 2; box-shadow: var(--shadow); }
.prof b { font: 700 21px 'Google Sans'; display: block; }
.avatar.big { width: 64px; height: 64px; border-radius: 21px; font-size: 32px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { height: 36px; padding: 0 12px 0 8px; border-radius: 12px; background: var(--surface); display: flex; align-items: center; gap: 6px; font: 500 13.5px 'Google Sans'; border: 1.5px solid transparent; }
.chips button .ic { width: 18px; height: 18px; color: var(--blue); }
.chips button.on { border-color: var(--blue); background: var(--blue-deep); color: var(--blue); }
.seg { display: flex; gap: 4px; background: var(--surface); border-radius: 14px; padding: 4px; }
.seg button { flex: 1; height: 36px; border-radius: 11px; font: 500 13.5px 'Google Sans'; color: var(--ink-2); }
.seg button.on { background: var(--btn); color: var(--blue); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
:root:not([data-theme="light"]) .seg button.on { background: var(--blue-deep); }
.set-h + .themes .opt-row, .themes .opt-row { gap: 10px; }
.maptypes { display: flex; gap: 10px; margin-top: 8px; }
.maptype { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: center; font: 500 14px 'Google Sans'; }
.maptype .thumb { width: 100%; height: 86px; border-radius: 16px; border: 2px solid transparent; display: grid; place-items: center; color: var(--blue);
  background: linear-gradient(135deg, var(--map-bg) 0 45%, var(--surface-2) 45% 55%, var(--map-bg) 55%); }
.maptype .thumb.3d { background: linear-gradient(160deg, var(--surface-2), var(--map-bg)); }
.maptype .thumb .ic { width: 30px; height: 30px; }
.maptype.on .thumb { border-color: var(--blue); }
.maptype.on { color: var(--blue); }
.rt-art { position: relative; height: 120px; display: grid; place-items: center; margin-top: 6px; }
.rt-art .ring { position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--blue); animation: wave 2s infinite; }
.rt-art .ring.r2 { animation-delay: 1s; }
.rt-av { width: 64px !important; height: 64px !important; border-radius: 21px !important; z-index: 1; }
.pin.live .body::before { content: ''; position: absolute; inset: -10px; border-radius: 28px; border: 2px solid var(--blue); animation: ring 1.4s infinite; }
#stage.nolabels .pin .label { display: none; }
/* chat */
.chat-h { display: flex; align-items: center; gap: 10px; text-align: left; }
.chat-h .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: 17px; }
.chat-h b { font: 500 15.5px 'Google Sans'; display: block; }
.chat-h small { font: 400 12px 'Google Sans'; color: var(--green); }
.chat { position: absolute; left: 0; right: 0; top: calc(var(--st) + 57px); bottom: calc(118px + var(--sbb)); overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: none; }
.chat .day { align-self: center; font: 500 12px 'Google Sans'; color: var(--mute); background: var(--surface); padding: 4px 10px; border-radius: 10px; margin-bottom: 6px; }
.bub { max-width: 76%; align-self: flex-start; background: var(--surface); padding: 9px 12px 6px; border-radius: 18px 18px 18px 6px; font: 400 15px/19px 'Google Sans'; animation: pop .22s cubic-bezier(.2, 0, 0, 1); }
.bub.me { align-self: flex-end; background: var(--blue); color: #fff; border-radius: 18px 18px 6px 18px; }
.bub small { display: block; text-align: right; font: 400 10.5px 'Google Sans'; opacity: .65; margin-top: 2px; }
.bub.typing { display: flex; gap: 4px; padding: 13px 14px; }
.bub.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); animation: blink 1s infinite; }
.bub.typing i:nth-child(2) { animation-delay: .2s; }
.bub.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.composer { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px calc(10px + var(--sbb)); background: var(--bg); border-top: 1px solid var(--line); }
.composer .quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
.composer .quick button { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--blue-deep); color: var(--blue); font: 500 13px 'Google Sans'; }
.composer .row { display: flex; gap: 8px; align-items: center; }
.composer input { flex: 1; height: 44px; border-radius: 22px; border: 0; background: var(--surface); color: var(--ink); padding: 0 16px; font: 400 16px 'Google Sans'; outline: none; }
.send { width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; }
.send[disabled] { opacity: .4; }
/* confirm dialog */
.dlg-wrap { position: absolute; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .2s; }
.dlg-wrap.on { opacity: 1; }
.dlg { width: 100%; background: var(--bg); border-radius: 26px; padding: 22px 18px 16px; transform: scale(.94); transition: transform .22s cubic-bezier(.2, 0, 0, 1); }
.dlg-wrap.on .dlg { transform: none; }
.dlg h3 { font: 700 20px 'Google Sans'; margin: 0 0 6px; text-align: center; }
.dlg p { font: 400 14.5px/19px 'Google Sans'; color: var(--ink-2); text-align: center; margin: 0 0 18px; }
.dlg-b { display: flex; gap: 8px; }
.dlg-b .btn { height: 46px; }

/* ------------------------------------------------------------ app blocking */
.atile { display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; line-height: 1; }
.app-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--track); cursor: pointer; transition: opacity .15s; }
.app-row:active { opacity: .6; }
.app-row .grow { flex: 1; min-width: 0; }
.app-row b { font: 500 15px/19px 'Google Sans'; display: block; }
.app-row small { font: 400 12.5px 'Google Sans'; color: var(--mute); }
.app-row > .ic { width: 20px; height: 20px; color: var(--mute); }
.app-row.blocked .atile { filter: grayscale(1); opacity: .45; }
.app-row.blocked b { color: var(--mute); }
.chip.blk { background: var(--red-deep); color: var(--red); font-weight: 500; }
.chip.blk .ic { width: 14px; height: 14px; }
.lim { display: block; height: 4px; border-radius: 2px; background: var(--track); margin-top: 6px; overflow: hidden; }
.lim i { display: block; height: 100%; border-radius: 2px; background: var(--blue); }
.lim.big { height: 8px; border-radius: 4px; margin: 12px 0 10px; }
.st-card { padding: 16px; }
.st-top { display: flex; justify-content: space-between; align-items: flex-end; }
.st-top small { font: 400 13px 'Google Sans'; color: var(--mute); display: block; }
.st-top b { font: 700 28px 'Google Sans'; }
.st-lim { text-align: right; cursor: pointer; }
.st-lim span { display: inline-flex; align-items: center; gap: 4px; font: 500 15px 'Google Sans'; color: var(--blue); }
.st-lim .ic { width: 16px; height: 16px; }
.stbar { display: flex; gap: 3px; height: 10px; border-radius: 5px; overflow: hidden; }
.stbar i { display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.legend span { display: flex; align-items: center; gap: 6px; font: 400 12.5px 'Google Sans'; color: var(--ink-2); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: block; }
.pause-banner { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--red-deep); color: var(--red); margin-bottom: 12px; }
.pause-banner .grow { flex: 1; }
.pause-banner b { font: 500 15px 'Google Sans'; color: var(--ink); display: block; }
.pause-banner small { font: 400 12.5px 'Google Sans'; color: var(--ink-2); }
.pause-banner button { height: 36px; padding: 0 14px; border-radius: 12px; background: var(--red); color: #fff; font: 500 14px 'Google Sans'; }
.app-hd { display: flex; gap: 14px; align-items: center; margin: 4px 0 10px; padding-right: 44px; }
.lock-b { position: absolute; left: calc(50% + 18px); top: calc(50% + 14px); width: 30px; height: 30px; border-radius: 10px; background: var(--red); color: #fff; display: grid; place-items: center; z-index: 2; box-shadow: 0 0 0 3px var(--bg); }
.lock-b .ic { width: 18px; height: 18px; }
.actions .act small { white-space: nowrap; }

/* ------------------------------------------------------------ iPhone: lighter compositing and taps */
.page, .drop, .sheet { contain: layout paint; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
button, .member, .circle-item, .opt-row, .app-row, .place-row, .notif, .member-row, .act, .fcard, .live-card, .article, .plan-row { touch-action: manipulation; }
.drop-list { max-height: calc(var(--H) - var(--st) - 260px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
.drop-list::-webkit-scrollbar { display: none; }
/* app icons */
.atile.img { overflow: hidden; display: block; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); }
.atile.img svg { width: 100%; height: 100%; display: block; }
/* tab pages */
.tabpage { position: absolute; left: 0; right: 0; top: 0; bottom: calc(66px + var(--sbb)); background: var(--bg); z-index: 11; display: none; }
.tabpage.on { display: block; }
.tp-scroll { position: absolute; inset: 0; overflow-y: auto; padding: calc(var(--st) + 14px) 16px 24px; scrollbar-width: none; overscroll-behavior: contain; }
.tp-scroll::-webkit-scrollbar { display: none; }
.tp-h { font: 700 30px 'Google Sans'; margin: 4px 0 14px; }
.hero-card { position: relative; border-radius: 24px; overflow: hidden; background: #071a3a; }
.hero-card img { width: 100%; display: block; aspect-ratio: 600 / 660; object-fit: cover; object-position: center 30%; }
.hero-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 16px 16px; background: linear-gradient(transparent, #061430 55%); color: #fff; }
.hero-t b { display: block; font: 700 22px/26px 'Google Sans'; margin: 6px 0 12px; }
.excl { font: 500 12px 'Google Sans'; color: #70baff; text-transform: uppercase; letter-spacing: .6px; }
.chips.scroll-x { flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px; scrollbar-width: none; }
.chips.scroll-x button { flex: none; padding: 0 14px; }
.article { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border-radius: 18px; margin-bottom: 8px; cursor: pointer; transition: opacity .15s; }
.article:active { opacity: .6; }
.article .grow { flex: 1; }
.article b { font: 500 15px/19px 'Google Sans'; display: block; }
.article small { font: 400 12.5px 'Google Sans'; color: var(--mute); }
.article > .ic { color: var(--mute); width: 20px; height: 20px; }
.a-thumb { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; flex: none; }
.a-thumb .ic { width: 26px; height: 26px; }
.plan-hd { text-align: center; padding: 18px 0 20px; }
.plan-hd b { font: 700 40px 'Google Sans'; display: block; }
.plan-hd small { font: 400 14px 'Google Sans'; color: var(--mute); }
.plan-c { padding: 4px 14px; }
.plan-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--track); }
.plan-row:last-child { border-bottom: 0; }
.plan-row.h2 { justify-content: space-between; font: 500 16px 'Google Sans'; border: 0; padding-bottom: 6px; }
.plan-row .grow { flex: 1; }
.plan-row b { font: 500 15px 'Google Sans'; display: block; }
.plan-row small { font: 400 12.5px 'Google Sans'; color: var(--mute); }
.plan-row > .ic { color: var(--mute); width: 20px; height: 20px; }
.pic.plus { background: var(--orange-deep); color: var(--orange); }
.adults { display: flex; gap: 10px; padding: 4px 0 12px; }
.adults .slot { width: 64px; height: 64px; border-radius: 21px; border: 2px dashed var(--track-2); display: grid; place-items: center; color: var(--mute); }
.plans { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.plan { border: 2px solid var(--track); border-radius: 18px; padding: 14px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.plan b { font: 700 18px 'Google Sans'; }
.plan .pr { font: 700 18px 'Google Sans'; text-align: right; }
.plan .pr small { font: 400 12px 'Google Sans'; color: var(--mute); }
.plan > small { grid-column: 1 / -1; font: 400 13px 'Google Sans'; color: var(--mute); }
.plan.on { border-color: var(--blue); background: var(--blue-deep); }
/* walks */
.live-b { display: inline-flex; align-items: center; gap: 2px; color: var(--green); font-weight: 500; margin-right: 6px; }
.live-b .ic { width: 13px; height: 13px; }
.live-card { background: var(--surface); border-radius: 20px; padding: 14px; margin-bottom: 8px; cursor: pointer; }
.live-card + .live-card { margin-top: 0; }
.lc-top { display: flex; gap: 12px; align-items: center; }
.lc-top .avatar { width: 44px; height: 44px; border-radius: 15px; font-size: 22px; }
.lc-top .grow { flex: 1; min-width: 0; }
.lc-top b { font: 700 16px 'Google Sans'; display: block; }
.lc-top small { font: 400 13px 'Google Sans'; color: var(--mute); }
.live-dot { font: 700 11px 'Google Sans'; letter-spacing: .6px; color: #fff; background: var(--red); padding: 4px 7px; border-radius: 8px; animation: blink 1.6s infinite; }
.live-card.done .live-dot { background: var(--green); animation: none; }
.lc-bar { position: relative; height: 8px; border-radius: 4px; background: var(--track); margin: 16px 4px 8px; }
.lc-bar i { position: absolute; left: 0; top: 0; bottom: 0; right: 0; border-radius: 4px; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.live-card.done .lc-bar i { background: var(--green); }
.lc-w { position: absolute; top: -10px; left: -14px; will-change: transform; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--surface); }
.live-card.done .lc-w { background: var(--green); }
.lc-w .ic { width: 17px; height: 17px; }
.lc-ends { display: flex; justify-content: space-between; font: 400 12px 'Google Sans'; color: var(--mute); margin-top: 6px; }
.lc-ends span { display: flex; align-items: center; gap: 4px; }
.lc-ends .ic { width: 14px; height: 14px; }
.lc-ctl { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.lc-ctl .dim { font: 500 12px 'Google Sans'; text-transform: uppercase; letter-spacing: .5px; }
.seg.sm { flex: 1; padding: 3px; }
.seg.sm button { height: 30px; font-size: 12.5px; }
.school-pin { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 6px; border-radius: 10px; background: var(--btn); box-shadow: var(--shadow); font: 500 13px 'Google Sans'; color: var(--ink); white-space: nowrap; }
.school-pin .ic { width: 20px; height: 20px; color: var(--green); }
/* Dynamic Island push */
/* Dynamic Island push (iOS reference video, frame by frame): one continuous morph from the hardware island to the card
   (slightly underdamped spring, ~0.4 s, motion-blurred at the start, text fades in at the end) and back (critically damped,
   ~0.3 s: the text fades first, then the shape shrinks into the island). The card sits under the status bar. */
#island { position: absolute; left: 50%; top: var(--di-top, 11px); width: 126px; height: 37px; margin-left: -63px; border-radius: 19px;
  background: #000; z-index: 95; opacity: 0; pointer-events: none; overflow: hidden; color: #fff; transform: translateY(0); filter: blur(0); will-change: width, height, transform; }
#island.show { opacity: 1; }
#island.open { width: calc(100% - 22px); margin-left: calc(-50% + 11px); height: 84px; border-radius: 36px; transform: translateY(var(--di-drop, calc(var(--st) - var(--di-top, 11px) - 2px)));
  pointer-events: auto; cursor: pointer; filter: blur(0);
  transition: width 0.64s linear(0.0, 0.0276, 0.0964, 0.1891, 0.2931, 0.3993, 0.5013, 0.5954, 0.6793, 0.7519, 0.8134, 0.8642, 0.9051, 0.9375, 0.9623, 0.9809, 0.9943, 1.0036, 1.0096, 1.0131, 1.0148, 1.0152, 1.0146, 1.0135, 1.012, 1.0105, 1.0088, 1.0073, 1.0059, 1.0047, 1.0036, 1.0027, 1.0019, 1.0013, 1.0009, 1.0005, 1.0003, 1.0001, 0.9999, 0.9998, 1), height 0.64s linear(0.0, 0.0276, 0.0964, 0.1891, 0.2931, 0.3993, 0.5013, 0.5954, 0.6793, 0.7519, 0.8134, 0.8642, 0.9051, 0.9375, 0.9623, 0.9809, 0.9943, 1.0036, 1.0096, 1.0131, 1.0148, 1.0152, 1.0146, 1.0135, 1.012, 1.0105, 1.0088, 1.0073, 1.0059, 1.0047, 1.0036, 1.0027, 1.0019, 1.0013, 1.0009, 1.0005, 1.0003, 1.0001, 0.9999, 0.9998, 1), margin-left 0.64s linear(0.0, 0.0276, 0.0964, 0.1891, 0.2931, 0.3993, 0.5013, 0.5954, 0.6793, 0.7519, 0.8134, 0.8642, 0.9051, 0.9375, 0.9623, 0.9809, 0.9943, 1.0036, 1.0096, 1.0131, 1.0148, 1.0152, 1.0146, 1.0135, 1.012, 1.0105, 1.0088, 1.0073, 1.0059, 1.0047, 1.0036, 1.0027, 1.0019, 1.0013, 1.0009, 1.0005, 1.0003, 1.0001, 0.9999, 0.9998, 1), border-radius 0.64s linear(0.0, 0.0276, 0.0964, 0.1891, 0.2931, 0.3993, 0.5013, 0.5954, 0.6793, 0.7519, 0.8134, 0.8642, 0.9051, 0.9375, 0.9623, 0.9809, 0.9943, 1.0036, 1.0096, 1.0131, 1.0148, 1.0152, 1.0146, 1.0135, 1.012, 1.0105, 1.0088, 1.0073, 1.0059, 1.0047, 1.0036, 1.0027, 1.0019, 1.0013, 1.0009, 1.0005, 1.0003, 1.0001, 0.9999, 0.9998, 1), transform 0.64s linear(0.0, 0.0276, 0.0964, 0.1891, 0.2931, 0.3993, 0.5013, 0.5954, 0.6793, 0.7519, 0.8134, 0.8642, 0.9051, 0.9375, 0.9623, 0.9809, 0.9943, 1.0036, 1.0096, 1.0131, 1.0148, 1.0152, 1.0146, 1.0135, 1.012, 1.0105, 1.0088, 1.0073, 1.0059, 1.0047, 1.0036, 1.0027, 1.0019, 1.0013, 1.0009, 1.0005, 1.0003, 1.0001, 0.9999, 0.9998, 1), filter .26s ease-out; }
#island.show:not(.open) { transition: width 0.48s linear(0.0, 0.0268, 0.091, 0.1748, 0.2662, 0.3577, 0.4448, 0.5249, 0.5969, 0.6603, 0.7154, 0.7628, 0.8032, 0.8374, 0.8661, 0.89, 0.91, 0.9265, 0.9401, 0.9513, 0.9605, 0.968, 0.9741, 0.9791, 0.9831, 0.9864, 0.9891, 0.9912, 0.9929, 0.9943, 0.9955, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 0.9991, 0.9992, 0.9994, 1), height 0.48s linear(0.0, 0.0268, 0.091, 0.1748, 0.2662, 0.3577, 0.4448, 0.5249, 0.5969, 0.6603, 0.7154, 0.7628, 0.8032, 0.8374, 0.8661, 0.89, 0.91, 0.9265, 0.9401, 0.9513, 0.9605, 0.968, 0.9741, 0.9791, 0.9831, 0.9864, 0.9891, 0.9912, 0.9929, 0.9943, 0.9955, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 0.9991, 0.9992, 0.9994, 1), margin-left 0.48s linear(0.0, 0.0268, 0.091, 0.1748, 0.2662, 0.3577, 0.4448, 0.5249, 0.5969, 0.6603, 0.7154, 0.7628, 0.8032, 0.8374, 0.8661, 0.89, 0.91, 0.9265, 0.9401, 0.9513, 0.9605, 0.968, 0.9741, 0.9791, 0.9831, 0.9864, 0.9891, 0.9912, 0.9929, 0.9943, 0.9955, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 0.9991, 0.9992, 0.9994, 1), border-radius 0.48s linear(0.0, 0.0268, 0.091, 0.1748, 0.2662, 0.3577, 0.4448, 0.5249, 0.5969, 0.6603, 0.7154, 0.7628, 0.8032, 0.8374, 0.8661, 0.89, 0.91, 0.9265, 0.9401, 0.9513, 0.9605, 0.968, 0.9741, 0.9791, 0.9831, 0.9864, 0.9891, 0.9912, 0.9929, 0.9943, 0.9955, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 0.9991, 0.9992, 0.9994, 1), transform 0.48s linear(0.0, 0.0268, 0.091, 0.1748, 0.2662, 0.3577, 0.4448, 0.5249, 0.5969, 0.6603, 0.7154, 0.7628, 0.8032, 0.8374, 0.8661, 0.89, 0.91, 0.9265, 0.9401, 0.9513, 0.9605, 0.968, 0.9741, 0.9791, 0.9831, 0.9864, 0.9891, 0.9912, 0.9929, 0.9943, 0.9955, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 0.9991, 0.9992, 0.9994, 1), filter .2s ease-in, opacity .12s ease .3s; }
#island.blur { filter: blur(6px); }
#island.closing { filter: blur(5px); }
#island.closing .isl-in { opacity: 0; transition: opacity .09s; }
.isl-in { opacity: 0; transition: opacity .12s; }
.isl-in { display: flex; align-items: center; gap: 12px; height: 84px; padding: 0 18px 0 16px; opacity: 0; transition: opacity .2s; width: 100%; min-width: 320px; }
#island.open .isl-in { opacity: 1; transition: opacity .2s ease .2s; }
.isl-av { width: 48px !important; height: 48px !important; border-radius: 50% !important; font-size: 22px !important; flex: none; }
.isl-t { flex: 1; min-width: 0; }
.isl-t b { display: block; font: 600 15.5px/19px 'Google Sans'; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl-t small { display: block; font: 400 13px 'Google Sans'; color: #a9a9ae; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isl-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #0a84ff; color: #fff; flex: none; }
.isl-ic.green { background: #30d158; }
.isl-ic .ic { width: 22px; height: 22px; }

/* ------------------------------------------------------------ SOS countdown (device screenshot): red circle 100 dp centred
   at 329 dp, title at 442 dp, slider 290 x 72 dp at the button's place, knob 64 dp */
.sosmain.counting > .orb, .sosmain.counting > h3, .sosmain.counting > p, .sosmain.counting > .sosbig { visibility: hidden; }
.sos-cd { position: absolute; inset: 0; text-align: center; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }
.cd-orb { position: absolute; left: 50%; top: 190px; width: 100px; height: 100px; margin-left: -50px; border-radius: 50%; background: var(--red); display: grid; place-items: center;
  box-shadow: 0 0 50px 18px rgba(242, 63, 84, .28); }
.cd-orb span { font: 700 40px 'Google Sans'; color: #fff; font-variant-numeric: tabular-nums; }
.cd-orb.beat { animation: beat .5s cubic-bezier(.2, 0, 0, 1); }
@keyframes beat { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
.sos-cd h3 { position: absolute; left: 0; right: 0; top: 338px; margin: 0; font: 700 22px/27px 'Google Sans'; }
.sos-cd p { position: absolute; left: 0; right: 0; top: 371px; margin: 0; font: 400 15.5px 'Google Sans'; color: var(--ink-2); }
.slide { position: absolute; left: 47px; right: 47px; bottom: 151px; height: 72px; border-radius: 36px; background: #fff; display: flex; align-items: center; }
:root[data-theme="light"] .slide { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sl-t { flex: 1; padding-right: 68px; font: 700 16px 'Google Sans'; color: #000; transition: opacity .2s; }
.sl-k { position: absolute; right: 4px; top: 4px; width: 64px; height: 64px; border-radius: 50%; background: var(--red); color: #000; display: grid; place-items: center; touch-action: none;
  transition: transform .3s cubic-bezier(.2, 0, 0, 1); cursor: grab; }
.sl-k.drag { transition: none; }
.sl-k .ic { width: 26px; height: 26px; }
/* active SOS (Figma "SOS signal active state") */
#stage .sos-live { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between; padding: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(242, 63, 84, .97) 0, rgba(242, 63, 84, .62) 17%, rgba(242, 63, 84, 0) 33%, rgba(242, 63, 84, 0) 64%, rgba(242, 63, 84, .65) 82%, rgba(242, 63, 84, .97) 100%);
  animation: fadein .35s; }
.sl-top { padding: calc(var(--st) + 14px) 20px 0; text-align: center; color: #fff; }
.sl-top b { display: block; font: 700 20px 'Google Sans'; }
.sl-top small { display: block; font: 400 13.5px/17px 'Google Sans'; opacity: .9; margin-top: 3px; }
.sl-time { display: inline-block; margin-top: 8px; font: 500 13px 'Google Sans'; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .18); padding: 3px 9px; border-radius: 9px; }
.sl-bot { padding: 0 16px calc(22px + var(--sbb)); }
.sl-bot .who { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 12px; color: #fff; font: 500 13px 'Google Sans'; }
.sl-bot .who .avatar { width: 28px; height: 28px; border-radius: 10px; font-size: 14px; box-shadow: 0 0 0 2px #fff; }
.sl-bot .who span { margin-left: 4px; }
#sl-safe { height: 52px; border-radius: 18px; }
#stage.sos-on .mapbtns { opacity: 0; pointer-events: none; }
.pin.sos .label { background: var(--red); color: #fff; font-weight: 500; }
.pin.sos .label .ic { color: #fff; }
.pin.sos .body { background: var(--red); }
.sos-off { position: absolute; left: 12px; right: 12px; bottom: calc(78px + var(--sbb)); z-index: 45; background: var(--bg); border-radius: 22px; padding: 16px 44px; text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .18); animation: pop .3s cubic-bezier(.2, 0, 0, 1); transition: opacity .35s, transform .35s; }
.sos-off.out { opacity: 0; transform: translateY(12px); }
.sos-off b { display: block; font: 700 18px 'Google Sans'; }
.sos-off small { font: 400 13px 'Google Sans'; color: var(--ink-2); }
.sos-off .x { position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; }
.sos-off .x .ic { width: 14px; height: 14px; }

/* Android heads-up notification (Material 3) */
#headsup { position: absolute; left: 8px; right: 8px; top: calc(var(--st) + 6px); z-index: 95; border-radius: 26px; padding: 12px 16px 14px;
  background: #fff; color: #1b1b1f; box-shadow: 0 6px 24px rgba(0, 0, 0, .22); opacity: 0; transform: translateY(-130%); pointer-events: none;
  transition: transform .42s cubic-bezier(.2, 0, 0, 1), opacity .25s; touch-action: none; }
:root:not([data-theme="light"]) #headsup { background: #2b2c30; color: #e4e2e6; }
#headsup.show { opacity: 1; }
#headsup.open { transform: none; pointer-events: auto; cursor: pointer; }
#headsup.drag { transition: none; }
.hu-hd { display: flex; align-items: center; gap: 6px; font: 400 12.5px 'Google Sans'; color: var(--mute); }
.hu-hd img { width: 18px; height: 18px; border-radius: 50%; }
.hu-hd span:first-of-type { color: var(--blue); font-weight: 500; }
.hu-hd .ic { width: 16px; height: 16px; margin-left: 2px; }
.hu-body { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.hu-t { flex: 1; min-width: 0; }
.hu-t b { display: block; font: 500 15.5px/20px 'Google Sans'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hu-t small { display: block; font: 400 14px/18px 'Google Sans'; color: inherit; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hu-av { width: 42px !important; height: 42px !important; border-radius: 50% !important; font-size: 19px !important; flex: none; }

/* ------------------------------------------------------------ person screens over the main map */
.page.over-map { background: transparent; pointer-events: none; transform: none; opacity: 0; transition: opacity .25s; }
.page.over-map.on { opacity: 1; }
.page.over-map.under { transform: none; opacity: 0; }
.page.over-map > * { pointer-events: auto; }
.page.over-map > .kid-top { pointer-events: none; }
.page.over-map .content { pointer-events: none; }
.page.over-map .content > .list-pad { pointer-events: auto; background: var(--bg); min-height: calc(var(--H) - var(--st) - 287px); border-radius: 26px 26px 0 0; }
.page.over-map .mini-map { background: transparent; }
.page.over-map .sheet { animation: sheetIn .4s cubic-bezier(.2, 0, 0, 1); }
@keyframes sheetIn { from { transform: translateY(var(--H)); } }
#stage .mapbtns, #stage #sheet, #stage .navbar { transition: opacity .25s, transform .38s cubic-bezier(.2, 0, 0, 1); }
#stage.focus .mapbtns, #stage.focus #sheet, #stage.focus .navbar { opacity: 0; pointer-events: none; }
#stage #sheet.drag { transition: opacity .25s; }
.maplibregl-marker { transition: opacity .25s; }
.maplibregl-marker.faded { opacity: 0 !important; pointer-events: none; }
/* My profile rows (they live in a card, not in a settings list) */
.card.list .opt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; font: 400 16px 'Google Sans';
  border-bottom: 1px solid var(--track); cursor: pointer; }
.card.list .opt-row:last-child { border-bottom: 0; }
/* ------------------------------------------------------------ active SOS (device screenshot) */
#stage .sos-live { position: absolute; inset: 0; z-index: 29; pointer-events: none; display: block; padding: 0; background: none;
  box-shadow: inset 0 0 46px 10px rgba(242, 63, 84, .5); animation: sosGlow 1.6s ease-in-out infinite alternate; }
@keyframes sosGlow { from { box-shadow: inset 0 0 38px 6px rgba(242, 63, 84, .42); } to { box-shadow: inset 0 0 56px 14px rgba(242, 63, 84, .58); } }
:root[data-theme="light"] #stage .sos-live { animation-name: sosGlowL; }
@keyframes sosGlowL { from { box-shadow: inset 0 0 30px 4px rgba(242, 63, 84, .38); } to { box-shadow: inset 0 0 44px 9px rgba(242, 63, 84, .5); } }
#b-sos.active { background: #3a0710; color: #ff8593; box-shadow: 0 0 0 2px var(--red); }
:root[data-theme="light"] #b-sos.active { background: #ffe0e4; color: var(--red); }
#b-sos.active .sq { background: transparent; }
#stage.sos-on .mapbtns { opacity: 1; pointer-events: auto; }
.pin.sos .body { box-shadow: 0 0 0 3px var(--red); }
.pin.sos .dot { box-shadow: 0 0 0 16px rgba(242, 63, 84, .35); animation: sosDot 1.6s infinite; }
@keyframes sosDot { 50% { box-shadow: 0 0 0 22px rgba(242, 63, 84, .18); } }
.pin.sos .label .ic { color: var(--red); }
.pin.sos .label { background: var(--btn); color: var(--ink); }
.sos-act-hd { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.sos-act-hd .sq { width: 44px; height: 44px; border-radius: 14px; background: var(--red-deep); color: var(--red); display: grid; place-items: center; }
.sos-act-hd b { display: block; font: 700 20px 'Google Sans'; }
.sos-act-hd small { font: 500 14px 'Google Sans'; color: var(--red); font-variant-numeric: tabular-nums; }
.who-row { display: flex; gap: 8px; margin: 0 0 18px; }
.who-row .avatar { width: 40px; height: 40px; border-radius: 13px; font-size: 18px; }
.ttoast { position: absolute; left: 16px; right: 16px; top: calc(var(--st) + 8px); z-index: 96; height: 50px; border-radius: 25px; background: #3b3c40; color: #fff;
  box-shadow: inset 0 0 0 1.5px #6b6c72, 0 6px 20px rgba(0, 0, 0, .25); display: flex; align-items: center; gap: 12px; padding: 0 16px; font: 400 16px 'Google Sans';
  transform: translateY(-140%); transition: transform .4s cubic-bezier(.2, 0, 0, 1); }
.ttoast.on { transform: none; }
.ttoast .ck { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #3b3c40; display: grid; place-items: center; flex: none; }
.ttoast .ck .ic { width: 14px; height: 14px; }

/* ------------------------------------------------------------ family member editor */
.pe-top { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; }
.pe-av { width: 84px !important; height: 84px !important; border-radius: 28px !important; font-size: 40px !important; }
.pe-btns { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.pe-pick { height: 42px; width: auto; padding: 0 16px; font-size: 15px; cursor: pointer; }
.pe-pick .ic { width: 20px; height: 20px; }
#pe-rm { width: auto; padding: 10px 2px 0; color: var(--red); font-size: 14px; }
.pe-row { display: flex; gap: 10px; }
.pe-ph, .pe-c { width: 52px; height: 52px; border-radius: 17px; background-size: cover; background-position: center; box-shadow: 0 0 0 2px transparent; transition: box-shadow .15s, scale .15s;
  color: #fff; font: 700 24px 'Google Sans'; display: grid; place-items: center; }
.pe-ph.on, .pe-c.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--blue); }
.pe-ph:active, .pe-c:active { scale: .93; }
#m-list .fam > span:last-child { display: flex; flex-direction: column; }
.themes .fam .role { font: 400 12px 'Google Sans'; color: var(--mute); }
#m-list .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: 17px; margin-left: 0; box-shadow: none; }
#m-list .opt-row > .ic { width: 20px; height: 20px; color: var(--mute); }
/* letter avatars keep their colour on map pins */
.pin .body .face.c-pink { background: #c858da; }
.pin .body .face.c-green { background: #06a747; }
.pin .body .face.c-orange { background: #fa7500; }

/* ------------------------------------------------------------ parental control (Figma "In app") */
.pc-seg { position: absolute; left: 0; right: 0; top: calc(var(--st) + 57px); padding: 8px 16px 10px; background: var(--surface); z-index: 2; }
.pw-page .pc-seg { display: none; }
.page[data-tab="block"] .pc-seg { display: none; }
.pc-content { top: calc(var(--st) + 113px) !important; background: var(--surface); }
.page[data-tab="block"] .pc-content { top: calc(var(--st) + 57px) !important; background: var(--bg); }
.page[data-tab="stats"] #ap-body, .page[data-tab="block"] #pc-stats { display: none; }
.pc-pad { padding-bottom: calc(96px + var(--sbb)); }
.pc-tabs { position: absolute; left: 50%; bottom: calc(14px + var(--sbb)); transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 22px; background: var(--surface-2); box-shadow: var(--shadow); z-index: 5; }
.pc-tabs button { height: 40px; padding: 0 18px; border-radius: 18px; display: flex; align-items: center; gap: 8px; font: 500 14px 'Google Sans'; color: var(--ink-2); }
.pc-tabs button .ic { width: 18px; height: 18px; }
.pc-tabs button.on { background: var(--btn); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.pc-card { background: var(--bg); border-radius: 22px; padding: 16px 14px 14px; margin-bottom: 12px; }
.pc-h { display: flex; align-items: flex-start; justify-content: space-between; }
.pc-h.center > div { flex: 1; text-align: center; padding-left: 24px; }
.pc-h b { font: 500 18px 'Google Sans'; display: block; }
.pc-h small { font: 400 13.5px 'Google Sans'; color: var(--mute); }
.pc-h > .ic { width: 22px; height: 22px; }
.ring { position: relative; width: 318px; height: 232px; margin: 4px auto 6px; }
.ring svg { position: absolute; left: 0; top: 0; }
.ring-c { position: absolute; left: 0; right: 0; text-align: center; }
.ring-c b { font: 700 22px 'Google Sans'; display: block; }
.ring-c small { font: 400 12.5px 'Google Sans'; color: var(--mute); }
.bub-v { position: absolute; width: 108px; padding: 7px 8px; border-radius: 16px; background: var(--btn); box-shadow: 0 2px 12px rgba(0, 0, 0, .1); text-align: center; }
.bub-v b { display: block; font: 700 14px 'Google Sans'; }
.bub-v small { font: 400 12px 'Google Sans'; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pc-note { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #eaf8ef; color: #1b1b1f; font: 400 13.5px/17px 'Google Sans'; cursor: pointer; }
:root:not([data-theme="light"]) .pc-note { background: #0f2a1a; color: #e4e2e6; }
.pc-note .ok { width: 32px; height: 32px; border-radius: 10px; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; font: 700 16px 'Google Sans'; }
.pc-note .ok .ic { width: 18px; height: 18px; }
.pc-note > .ic { width: 18px; height: 18px; color: var(--mute); flex: none; }
.pc-note.info { background: var(--surface); }
.wa-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg); border-radius: 22px; margin-bottom: 12px; cursor: pointer; }
.wa-card .grow, .top-row .grow, .new-row .grow { flex: 1; min-width: 0; }
.wa-card b, .new-row b { font: 500 16px 'Google Sans'; display: block; }
.tags { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.tag-c { font: 500 11.5px 'Google Sans'; padding: 3px 7px; border-radius: 7px; background: var(--surface); color: var(--ink-2); }
.tag-c.on { background: var(--blue); color: #fff; }
.tag-c.g { background: var(--blue-deep); color: var(--blue); }
.tag-c.s { background: var(--orange-deep); color: #b35300; }
:root:not([data-theme="light"]) .tag-c.s { color: var(--orange); }
.tag-c.r { background: var(--red-deep); color: var(--red); }
.go { width: 40px; height: 40px; border-radius: 14px; background: var(--blue-deep); color: var(--blue); display: grid; place-items: center; flex: none; }
.go .ic { width: 20px; height: 20px; }
.sec-h { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 10px; }
.sec-h b { font: 700 19px 'Google Sans'; }
.sec-h b span { font-weight: 500; }
.sec-h button { display: flex; align-items: center; gap: 2px; color: var(--mute); font: 400 15px 'Google Sans'; }
.sec-h button .ic { width: 18px; height: 18px; }
.pc-list > div { background: var(--bg); border-radius: 20px; margin-bottom: 8px; }
.top-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; overflow: hidden; cursor: pointer; }
.top-row .rank { position: absolute; left: 0; top: 0; width: 34px; height: 34px; background: linear-gradient(135deg, var(--track) 50%, transparent 50%); font: 500 9px 'Google Sans'; color: var(--mute); padding: 3px 0 0 4px; }
.top-row b { font: 500 16px 'Google Sans'; display: flex; align-items: center; gap: 6px; }
.top-row .cat { font: 400 12.5px 'Google Sans'; color: var(--mute); display: inline-flex; align-items: center; gap: 4px; }
.top-row .cat i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.tbar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.tbar span { flex: 1; max-width: 140px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.tbar span i { display: block; height: 100%; border-radius: 2px; }
.tbar small { font: 500 13px 'Google Sans'; }
.lockb { width: 44px; height: 44px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; flex: none; color: var(--ink); }
.lockb.on { background: var(--red-deep); color: var(--red); }
.new-row { display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer; }
.new-row .nt { position: relative; flex: none; }
.new-row .nt i { position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--bg); }
.night { display: flex; justify-content: space-between; align-items: flex-end; height: 200px; padding: 10px 6px 0; margin-bottom: 12px; }
.nb { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; height: 100%; justify-content: flex-end; }
.nb small { font: 700 12.5px 'Google Sans'; }
.nb span { height: 120px; width: 10px; display: flex; align-items: flex-end; justify-content: center; }
.nb span i { width: 10px; border-radius: 5px; background: #f97384; display: block; box-shadow: inset 0 3px 0 0 #fff; }
.nb span em { width: 9px; height: 9px; border-radius: 50%; background: var(--green); display: block; }
.nb time { font: 400 12px 'Google Sans'; color: var(--mute); }
.avg-box { background: var(--surface); border-radius: 16px; padding: 12px 14px; margin: 12px 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.avg-box small { width: 100%; font: 400 12.5px 'Google Sans'; color: var(--mute); }
.avg-box b { font: 700 24px 'Google Sans'; }
.avg-box .up { font: 400 12px 'Google Sans'; color: var(--orange); }
.wk { display: flex; gap: 8px; height: 170px; margin-bottom: 12px; }
.wk-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.wk-bar small { font: 400 10.5px 'Google Sans'; color: var(--mute); white-space: nowrap; }
.wk-bar span { flex: 1; width: 28px; border-radius: 10px; background: repeating-linear-gradient(135deg, var(--surface) 0 4px, var(--track) 4px 6px); display: flex; align-items: flex-end; overflow: hidden; }
.wk-bar span i { width: 100%; background: #ff9a3c; border-radius: 10px; display: block; }
.wk-bar.on span i { background: var(--orange); }
.wk-bar.on small { color: var(--ink); font-weight: 700; }
.wk-bar em { font: 400 11px 'Google Sans'; color: var(--mute); font-style: normal; }
.opt-row b.ok { color: var(--green); } .opt-row b.warn { color: var(--orange); }
/* screen time card in the feed */
.st-feed { margin-top: 8px; cursor: pointer; }
.sf-top { display: flex; align-items: baseline; gap: 6px; }
.sf-top b { font: 700 22px 'Google Sans'; }
.sf-top b small { font: 500 14px 'Google Sans'; margin: 0 2px; }
.sf-top .sf-l { font: 500 14px 'Google Sans'; }
.sf-ic { align-self: center; }
.sf-ic .ic { width: 26px; height: 26px; }
.sf-top .round { align-self: center; }
.sf-apps { display: flex; align-items: center; gap: 4px; margin-top: 8px; font: 400 12.5px 'Google Sans'; color: var(--mute); }
.sf-apps span { margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* block chip over the kid's map */
.block-chip { position: absolute; left: 16px; top: calc(var(--H) - 399px - 52px); z-index: 7; height: 40px; padding: 0 14px 0 10px; border-radius: 14px; background: var(--btn); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 8px; font: 500 13.5px 'Google Sans'; }
.block-chip .ic { width: 22px; height: 22px; color: #fff; background: var(--red); border-radius: 7px; padding: 3px; }
/* pause wheel (Figma blocking) */
.wheels { position: relative; display: flex; justify-content: center; align-items: center; gap: 6px; height: 190px; background: var(--surface); border-radius: 20px; margin-top: 8px; }
.wsel { position: absolute; left: 12px; right: 12px; top: 76px; height: 38px; border-radius: 10px; background: var(--blue-deep); }
.wheel { position: relative; height: 190px; width: 64px; overflow-y: scroll; scroll-snap-type: y mandatory; padding: 76px 0; scrollbar-width: none; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); touch-action: pan-y; }
.wheel::-webkit-scrollbar { display: none; }
.wi { height: 38px; line-height: 38px; text-align: center; scroll-snap-align: start; font: 500 20px 'Google Sans'; font-variant-numeric: tabular-nums; }
.wu { position: relative; font: 400 14px 'Google Sans'; color: var(--mute); width: 30px; }
/* SOS widget pictures (from the app) */
.widget-card { background: var(--surface-2); border-radius: 20px; padding: 14px 10px 10px; cursor: pointer; }
.widget-card .share-row { background: var(--surface); margin-top: -26px; position: relative; }
.wphone { width: 112px; height: 104px; margin: 0 auto; border-radius: 16px 16px 0 0; background: #5f7bb0; border: 4px solid #2c3550; border-bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px; overflow: hidden; }
.wphone b { background: rgba(255, 255, 255, .28); border-radius: 6px; height: 22px; }
.wsos { grid-column: span 2; grid-row: span 2; background: #fff; border-radius: 8px; padding: 4px; display: flex; flex-direction: column; justify-content: space-between; }
.wsos span { color: var(--red); } .wsos span .ic { width: 14px; height: 14px; }
.wsos i { background: var(--red); color: #fff; border-radius: 5px; font: 700 8px/14px 'Google Sans'; text-align: center; font-style: normal; }
.wstep { background: var(--surface-2); border-radius: 20px; padding: 12px 10px 10px; margin-bottom: 10px; }
.wphone.small { position: relative; }
.wphone.small em { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; background: rgba(255, 255, 255, .35); left: 40px; top: 36px; }
.wphone.widgets .wsos, .wphone.find .wsos, .wphone.hold .wsos { visibility: hidden; }
.wphone.widgets em { top: 70px; border-radius: 12px; width: 40px; height: 26px; }
.wphone.find em { left: 66px; top: 40px; width: 18px; height: 18px; background: var(--blue); }
.wphone.ready em { display: none; }
.wcap { display: flex; align-items: center; gap: 10px; background: var(--btn); border-radius: 14px; padding: 10px 12px; margin-top: -14px; position: relative; font: 400 14px 'Google Sans'; }
.wcap span { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font: 500 13px 'Google Sans'; flex: none; }
#pc-plus .fam { display: flex; align-items: center; gap: 10px; }
#pc-plus .pic { width: 30px; height: 30px; border-radius: 9px; }
#pc-plus .pic .ic { width: 22px; height: 22px; }

/* ------------------------------------------------------------ walk demo settings */
.walk-set { background: var(--surface); border-radius: 18px; padding: 12px; margin-top: 6px; }
.wd-row { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 6px; font: 400 15px 'Google Sans'; }
.wd-row b { font: 700 18px 'Google Sans'; color: var(--blue); font-variant-numeric: tabular-nums; }
.wd-row.off { opacity: .4; }
#wd-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; touch-action: pan-x; }
#wd-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-mid)); }
#wd-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--blue); }
#wd-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
#wd-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
#wd-range:disabled { opacity: .35; }
.wd-ticks { display: flex; justify-content: space-between; font: 400 11px 'Google Sans'; color: var(--mute); margin: 2px 4px 12px; }
#wd-re { height: 42px; font-size: 14.5px; }
#wd-re .ic { width: 20px; height: 20px; }
#ct-list .role, #m-list .role { display: block; }
#ct-list .opt-row > span { display: flex; flex-direction: column; }
.opt-row.add { color: var(--blue); }
.addav { background: var(--blue-deep) !important; color: var(--blue); }
.addav .ic { width: 20px; height: 20px; }
/* route history */
.mini-map.tall { height: 300px; }
.hist-sum { display: flex; justify-content: space-around; padding: 14px 8px; text-align: center; margin-top: -34px; position: relative; z-index: 2; box-shadow: var(--shadow); }
.hist-sum b { display: block; font: 700 20px 'Google Sans'; }
.hist-sum small { font: 400 12px 'Google Sans'; color: var(--mute); }
.trip { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--track); cursor: pointer; transition: background .15s; }
.trip:last-child { border-bottom: 0; }
.trip .grow { flex: 1; min-width: 0; }
.trip b { font: 500 15px 'Google Sans'; display: block; }
.trip small { font: 400 12px 'Google Sans'; color: var(--mute); }
.trip.on b { color: var(--blue); }
.trip .play { color: var(--blue); background: var(--blue-deep); }
.trip .play .ic { width: 18px; height: 18px; }
.hist-end { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px 0 5px; border-radius: 10px; background: var(--blue); color: #fff; font: 500 12.5px 'Google Sans'; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.hist-end.fin { background: var(--green); }
.hist-end .ic { width: 18px; height: 18px; }
.hist-dot .avatar { width: 34px; height: 34px; border-radius: 50%; font-size: 15px; box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(0, 0, 0, .3); }
.hist-card { display: flex; align-items: center; gap: 12px; margin-top: 8px; cursor: pointer; }
.hist-card .grow { flex: 1; } .hist-card b { font: 700 16px 'Google Sans'; display: block; } .hist-card small { color: var(--mute); font-size: 13px; }
.hist-card .tag { width: 38px; height: 38px; border-radius: 12px; }
.hist-card > .ic { width: 20px; height: 20px; color: var(--mute); }

.school-pin.hi .ic { color: #8b5cf6; }
#wd-loop button { display: flex; align-items: center; justify-content: center; gap: 6px; }
#wd-loop .ic { width: 18px; height: 18px; }

/* ------------------------------------------------------------ app menu (bottom sheet, as on the phone) */
.m-banner { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: linear-gradient(100deg, #0a74ff, #36a3ff); color: #fff; cursor: pointer; margin-top: 6px; }
.m-banner.plus { background: linear-gradient(100deg, #f5a300, #ffcc33); color: #2b1b00; }
.m-banner .grow { flex: 1; } .m-banner b { display: block; font: 500 16px/20px 'Google Sans'; } .m-banner small { font: 400 12.5px 'Google Sans'; opacity: .85; }
.mb-ic { width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .22); display: grid; place-items: center; } .mb-ic .ic { width: 28px; height: 28px; }
.m-banner > .ic { width: 20px; height: 20px; }
.m-h { text-align: center; font: 500 16px 'Google Sans'; margin: 18px 0 6px; }
.mrow { display: flex; align-items: flex-start; gap: 14px; padding: 12px 4px; cursor: pointer; transition: opacity .15s; }
.mrow:active { opacity: .6; }
.mrow .mi { width: 26px; height: 26px; color: var(--ink-2); position: relative; flex: none; } .mrow .mi .ic { width: 26px; height: 26px; }
.mrow.blue .mi { color: var(--blue); } .mrow.red, .mrow.red .mi { color: var(--red); }
.mrow.dot .mi::after { content: ''; position: absolute; right: -2px; top: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.mrow .grow { flex: 1; } .mrow b { font: 400 16px/22px 'Google Sans'; display: block; } .mrow small { font: 400 12.5px/16px 'Google Sans'; color: var(--mute); }
.ic.excl { border: 2px solid currentColor; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font: 700 13px 'Google Sans'; margin: 2px; }
/* menu pages */
.srow, .trow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--track); cursor: pointer; }
.srow:last-child, .trow:last-child { border-bottom: 0; }
.srow .grow, .trow .grow { flex: 1; min-width: 0; }
.srow b, .trow b { font: 500 15.5px 'Google Sans'; display: flex; align-items: center; gap: 6px; } .srow small, .trow small { font: 400 12.5px/16px 'Google Sans'; color: var(--mute); display: block; }
.srow > .ic { width: 20px; height: 20px; color: var(--mute); flex: none; }
.srow.add b { color: var(--blue); } .srow.red b, .srow.red .pic { color: var(--red); }
.srow .dim { font: 400 14px 'Google Sans'; }
.card.list.verify { background: #fff4c2; } :root:not([data-theme="light"]) .card.list.verify { background: #6b5a06; }
.lockp { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--blue); color: #fff; } .lockp .ic { width: 12px; height: 12px; }
.setup { height: 30px; padding: 0 12px; border-radius: 9px; background: var(--blue-deep); color: var(--blue); font: 500 13px 'Google Sans'; flex: none; }
.np-ic { width: 64px; height: 64px; margin: 10px auto 4px; border-radius: 20px; background: #fff1c2; color: #e6a100; display: grid; place-items: center; } .np-ic .ic { width: 34px; height: 34px; }
.empty-big { text-align: center; padding: 140px 16px 0; } .empty-big h3 { font: 700 22px 'Google Sans'; margin: 0 0 8px; } .empty-big p { font: 400 14.5px/19px 'Google Sans'; color: var(--ink-2); margin: 0; }
.art-img { display: block; width: 100%; border-radius: 22px; } .art-img.wide { border-radius: 0; }
.art-h { font: 700 22px/27px 'Google Sans'; text-align: center; margin: 18px 0 8px; } .art-p { font: 400 14.5px/19px 'Google Sans'; color: var(--ink-2); text-align: center; margin: 0 0 12px; }
.dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--track-2); } .dots i.on { background: var(--ink); }
.acc-i { background: var(--surface); border-radius: 16px; margin-bottom: 8px; overflow: hidden; }
.acc-h { display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; } .acc-h b { flex: 1; font: 400 15px 'Google Sans'; }
.acc-h .num { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font: 500 13px 'Google Sans'; flex: none; }
.acc-h .ic { width: 20px; height: 20px; color: var(--mute); transition: transform .2s; } .acc-i.open .acc-h .ic { transform: rotate(180deg); }
.acc-b { display: none; padding: 0 14px 14px 50px; font: 400 14px/19px 'Google Sans'; color: var(--ink-2); } .acc-i.open .acc-b { display: block; }
.rb { padding: 4px 14px; margin-top: 10px; } .rb-i { display: flex; gap: 12px; padding: 10px 0; font: 400 14.5px/19px 'Google Sans'; border-bottom: 1px solid var(--track); } .rb-i:last-child { border-bottom: 0; }
.rb-i span { width: 22px; flex: none; font: 700 16px 'Google Sans'; text-align: center; } .rb-i .o { color: var(--orange); } .rb-i .b { color: var(--blue); } .rb-i .g { color: var(--green); }
.arr-art { height: 230px; border-radius: 22px; background: linear-gradient(#2d3b55, #1a2233); position: relative; overflow: hidden; margin-bottom: 14px; }
.arr-phone { position: absolute; left: 50%; top: 18px; width: 210px; height: 260px; margin-left: -105px; border-radius: 30px; border: 6px solid #3c4659; background: repeating-linear-gradient(35deg, #263247 0 22px, #2c3a52 22px 24px); }
.arr-n { position: absolute; left: -46px; right: -46px; top: 40px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: #1f2023; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.arr-n img { width: 34px; height: 34px; border-radius: 9px; } .arr-n small { font: 400 11px 'Google Sans'; color: #aaa; display: block; } .arr-n b { font: 500 14px/17px 'Google Sans'; }
.arr-n .avatar { width: 42px; height: 42px; border-radius: 13px; } .arr-n .grow { flex: 1; }
.arr-home { position: absolute; left: 90px; top: 150px; width: 30px; height: 30px; border-radius: 9px; background: var(--blue); color: #fff; display: grid; place-items: center; } .arr-home .ic { width: 18px; height: 18px; }
.howh { font: 700 17px 'Google Sans'; margin: 18px 4px 6px; } .howp { font: 400 14px/19px 'Google Sans'; color: var(--ink-2); margin: 0 4px; }
.about-hd { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0 18px; } .about-hd img { width: 84px; height: 84px; border-radius: 22px; } .about-hd b { font: 700 22px 'Google Sans'; }
.stars { display: flex; justify-content: center; gap: 8px; margin-top: 14px; } .stars button { color: var(--track-2); } .stars button.on { color: #ffb400; } .stars .ic { width: 40px; height: 40px; }
.ta { width: 100%; height: 120px; border-radius: 16px; border: 0; background: var(--surface); color: var(--ink); padding: 12px; font: 400 15px 'Google Sans'; resize: none; outline: none; }
/* plan */
.plan-hd.is-plus b { background: linear-gradient(90deg, #f5a300, #ff7a00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 10px; background: #fff1c2; color: #b07a00; font: 500 13px 'Google Sans'; margin-bottom: 6px; }
.pl-badge .ic { width: 16px; height: 16px; }
.plus-note { display: flex; align-items: center; justify-content: center; gap: 6px; color: #e6a100 !important; } .plus-note .ic { width: 18px; height: 18px; }

/* app icon picker */
.ico-row { display: flex; gap: 12px; margin: 10px 0 12px; }
.ico-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: var(--surface); border: 2px solid transparent; cursor: pointer; }
.ico-opt.on { border-color: var(--blue); background: var(--blue-deep); }
.ico-opt img { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); margin-bottom: 6px; }
.ico-opt b { font: 500 15px 'Google Sans'; } .ico-opt small { font: 400 12px 'Google Sans'; color: var(--mute); }
.ico-mini { width: 30px; height: 30px; border-radius: 8px; }

/* iPhone notification banner (iOS style: frosted card under the status bar, icon, title, "now", text) */
#iosban { position: absolute; left: 8px; right: 8px; top: max(8px, calc(var(--st) - 4px)); z-index: 95; display: flex; gap: 10px; align-items: center; padding: 12px 14px;
  border-radius: 24px; background: rgba(246, 246, 246, .86); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .16); color: #000; opacity: 0; transform: translateY(-140%); pointer-events: none;
  transition: transform .5s cubic-bezier(.22, 1.2, .36, 1), opacity .25s; touch-action: none; }
:root:not([data-theme="light"]) #iosban { background: rgba(44, 44, 46, .86); color: #fff; }
#iosban.show { opacity: 1; }
#iosban.open { transform: none; pointer-events: auto; cursor: pointer; }
#iosban.drag { transition: none; }
.ib-ic { position: relative; width: 40px; height: 40px; flex: none; }
.ib-av { width: 40px !important; height: 40px !important; border-radius: 50% !important; font-size: 18px !important; }
.ib-app { width: 40px; height: 40px; border-radius: 10px; }
.ib-badge { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 5px; box-shadow: 0 0 0 1.5px rgba(246, 246, 246, .9); }
.ib-t { flex: 1; min-width: 0; }
.ib-r { display: flex; align-items: baseline; gap: 8px; }
.ib-r b { flex: 1; font: 600 15px/19px -apple-system, 'SF Pro Text', 'Google Sans', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-r time { font: 400 13px -apple-system, 'Google Sans', sans-serif; opacity: .5; flex: none; }
.ib-t span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 15px/19px -apple-system, 'SF Pro Text', 'Google Sans', sans-serif; opacity: .92; }

/* iOS Home Screen fit modes (see fit() in app.js) */
@media (max-width: 760px) {
  html[data-fit="doc"], html[data-fit="doc"] body { position: relative; inset: auto; height: var(--fullh); overflow: hidden; }
  html[data-fit="doc"] .layout { position: absolute; left: 0; top: 0; width: 100%; height: var(--fullh); min-height: 0; }
  html[data-fit="doc"] .phone { position: absolute; left: 0; top: 0; right: 0; bottom: auto; height: var(--fullh); }
  html[data-fit="vh"] .phone { position: fixed; left: 0; top: 0; right: 0; bottom: auto; height: 100vh; }
  html[data-fit="lvh"] .phone { position: fixed; left: 0; top: 0; right: 0; bottom: auto; height: 100vh; height: 100lvh; }
}
#diag { position: fixed; left: 10px; right: 10px; top: 35%; z-index: 999; background: rgba(0, 0, 0, .86); color: #fff; border-radius: 16px; padding: 12px 14px; font: 400 13px/18px -apple-system, 'Google Sans', sans-serif; }
#diag b { font-size: 15px; display: block; margin-bottom: 6px; }
#diag div { display: flex; justify-content: space-between; gap: 10px; } #diag span { opacity: .7; } #diag i { font-style: normal; font-variant-numeric: tabular-nums; text-align: right; }
#diag .dg-b { gap: 6px; margin-top: 10px; } #diag .dg-b button { flex: 1; height: 34px; border-radius: 10px; background: #333; color: #fff; font: 500 14px sans-serif; } #diag .dg-b button.on { background: #0a84ff; }
#diag-line { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ff2d55; z-index: 998; pointer-events: none; }

/* launch screen (as the app shows it: icon and the Findmykids wordmark on a plain background) */
#splash { position: fixed; inset: 0; z-index: 1000; background: #f6f6f6; display: flex; flex-direction: column; align-items: center; transition: opacity .35s ease, visibility .35s; }
:root:not([data-theme="light"]) #splash { background: #000; }
#splash .sp-ic { width: 110px; height: 110px; border-radius: 26px; margin-top: calc(40.6vh - 55px); margin-top: calc(40.6dvh - 55px); overflow: hidden; transition: transform .35s cubic-bezier(.3, 0, .2, 1); }
#splash .sp-ic img { width: 100%; height: 100%; display: block; }
#splash .sp-wm { width: 183px; margin-top: 17px; transition: transform .35s cubic-bezier(.3, 0, .2, 1); }
#splash.out { opacity: 0; visibility: hidden; }
#splash.out .sp-ic, #splash.out .sp-wm { transform: scale(1.06); }

#splash .sp-lot { position: absolute; left: calc(50% - 138.7px); top: calc(40.6vh - 103.3px); top: calc(40.6dvh - 103.3px); width: 278.7px; height: 159.3px; pointer-events: none; }
#splash .sp-lot svg { display: block; }
#splash.playing .sp-ic { visibility: hidden; }
.phone.reveal { z-index: 1001; position: relative; }

/* app icons from the App Store */
img.atile.img { display: block; object-fit: cover; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); background: #fff; }
/* time wheels: their own scroll area, framed, never drag the sheet */
.wheels { box-shadow: inset 0 0 0 1px var(--track); touch-action: none; }
.wheel { touch-action: pan-y; }