/* timobox — design system.
   ONE font stack app-wide: Nunito (Latin/digits — rounded terminals,
   matching the logo's letterforms) leads; Noto Sans SC / JP supply
   the CJK glyphs. The stack is IDENTICAL for every language — glyph
   coverage decides per character, so switching language never
   changes the look: Latin is always Nunito, CJK always Noto.
   Headings 700 (800/900 rendered blobby for CJK), body 400,
   emphasis 600–700. Everything inherits via --font-main.
   ONE accent: --accent comes from families.theme_color and drives every
   primary button, selected nav item, segmented control and accent. */
:root {
  --accent:#2f9e8f;
  --ink:#26302c; --muted:#7d8a84; --line:#e7e2d8; --bg:#faf8f3; --card:#ffffff;
  --appw:560px; /* app content column width — fixed chrome (nav, language pill) caps to this too */
  --font-main:"Nunito","Noto Sans SC","Noto Sans JP",sans-serif;
  --shadow:0 1px 2px rgba(38,48,44,.05),0 8px 24px rgba(38,48,44,.06);
}
* { box-sizing:border-box; }
/* Reserve the scrollbar gutter on EVERY page: without this, a page with
   a scrollbar （成长） centres the 560px column in a narrower box than a
   short page without one （提醒）, and the whole UI — column, fixed
   bottom nav, language pill — jumps sideways when switching tabs.
   With the gutter always reserved, .view (margin auto), #bottomnav
   (left:50%) and .langbar (50%-based right) all anchor to the same
   stable box on scrolled and unscrolled pages alike. */
html { scrollbar-gutter:stable; overflow-y:scroll; }
body { margin:0; font-family:var(--font-main); font-size:15.5px; line-height:1.55;
       background:var(--bg); color:var(--ink); padding-bottom:96px; }
button, input, select, textarea { font:inherit; color:inherit; }
h1, h2, h3, .brandname, .kname, .ss-title { font-family:var(--font-main); line-height:1.2; }
h1 { font-size:25px; font-weight:700; } h2 { font-size:17px; font-weight:700; margin:22px 0 10px; }
/* tab page titles (Timeline / Reminders / Growth / Settings) */
#tab-timeline h2, #tab-reminders h2, #tab-growth h2, #tab-settings h2 { font-size:20px; }
h3 { font-size:16.5px; font-weight:700; margin:4px 0 10px; }
.hidden { display:none !important; }
.view { max-width:var(--appw); margin:0 auto; padding:16px; }
.centerbox { text-align:center; display:flex; flex-direction:column; gap:12px;
  min-height:calc(100dvh - 32px); justify-content:center;
  padding:calc(10px + env(safe-area-inset-top)) 0 calc(10px + env(safe-area-inset-bottom)); }
.centerbox p { margin:0; }
.logoimg { width:200px; max-width:72%; height:auto; align-self:center; display:block; }
.gsi-wrap { display:flex; justify-content:center; }
/* small print sits directly under the form (~22px), operated-by under it */
#view-auth .centerbox > p[data-i18n="signinNote"] { margin-top:10px; }
.tagline { color:var(--muted); margin:0; }
.brandname { font-size:21px; font-weight:700; }
.muted { color:var(--muted); } .small { font-size:13px; } .center { text-align:center; }
.page { display:flex; flex-direction:column; gap:12px; }
.field { display:flex; flex-direction:column; gap:6px; font-size:14px; text-align:left; font-weight:600; min-width:0; }
.field input, .field select, .field textarea { padding:11px 12px; border:1.5px solid var(--line);
  border-radius:12px; font-size:16px; background:#fff; width:100%; font-weight:400;
  box-sizing:border-box; min-width:0; max-width:100%; }
/* Date/time inputs, normalised app-wide with ONE shared rule
   (Mode, 2026-11-08; build 1230). Two phone problems, one fix:
   (1) iOS renders native date chrome roughly 1.6x taller than the
   neighbouring text/select controls — the explicit height below
   pins the box to the standard control height (16px font + 22px
   vertical padding + 3px border = 47px), with the vertical padding
   folded into that height and the line-height centring the value;
   (2) the intrinsic minimum width let the box protrude a few px
   past its card — width:100% + border-box + min-width:0 ends that.
   The ::-webkit-date-and-time-value reset is the iOS alignment fix
   (value sits left, no stray margin). Applies to EVERY .field date
   input: entry form, reminder form, growth form, book-export
   dialog (from/to), onboarding + settings kid forms. Fix the
   class once, never per form. */
.field input[type="date"], .field input[type="time"], .field input[type="datetime-local"] {
  height:47px; padding-top:0; padding-bottom:0; line-height:44px;
  width:100%; min-width:0; max-width:100%; box-sizing:border-box; flex-shrink:1; }
.field input[type="date"]::-webkit-date-and-time-value,
.field input[type="time"]::-webkit-date-and-time-value,
.field input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align:left; margin:0; }
.field input[type="date"]::-webkit-calendar-picker-indicator { margin-left:0; }
.btn { border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:999px;
  padding:10px 18px; font-size:15px; font-weight:700; cursor:pointer; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--muted); }
.btn.big { width:100%; padding:14px; font-size:16px; }
.btn.smallbtn { padding:7px 14px; font-size:14px; }

/* connection self-diagnosis checklist (Settings → Drive card) */
.diagbox { margin-top:12px; }
#btn-diagnose.busy { opacity:.55; }
.diag-list { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.diag-row { display:flex; align-items:center; gap:8px; font-size:13px; }
.diag-mark { width:18px; text-align:center; font-weight:700; flex:none; }
.diag-ok .diag-mark { color:#0e7c6f; }
.diag-fail .diag-mark { color:#c0392b; }
.diag-skip { opacity:.55; }
.diag-label { flex:1; }
.diag-word { font-weight:600; }
.btn:disabled { opacity:.55; cursor:default; }
/* Quiet text-style link (build 1330): the sign-in screen's contact
   entry — a plain accent word, no pill, no box. */
.textlink { background:none; border:none; padding:4px 8px; font:inherit;
  font-size:14px; color:var(--accent); cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; }
.divider { color:var(--muted); font-size:13px; }
.msg { min-height:20px; font-size:14px; color:var(--accent); white-space:pre-wrap; font-weight:600; }
.msg.err { color:#c0392b; }

/* language: globe button + dropdown (replaces the old text pills) */
/* anchored to the content column's right edge, not the window's:
   on wide screens it hugs the column; on phones it keeps a 12px margin */
.langbar { position:fixed; top:8px; right:max(12px, calc(50% - var(--appw)/2 + 12px)); z-index:70; }
.langglobe { display:flex; align-items:center; gap:6px; border:1.5px solid var(--line); background:#fff;
  border-radius:999px; padding:6px 12px 6px 9px; font-size:13px; font-weight:700; color:var(--ink);
  cursor:pointer; box-shadow:var(--shadow); }
.langglobe svg { width:17px; height:17px; color:var(--accent); }
.langmenu { position:absolute; top:calc(100% + 6px); right:0; z-index:70; max-width:calc(100vw - 20px); background:#fff; border:1.5px solid var(--line);
  border-radius:14px; box-shadow:0 10px 28px rgba(38,48,44,.12); padding:5px; min-width:132px;
  display:flex; flex-direction:column; }
.langmenu button { display:flex; justify-content:space-between; align-items:center; gap:14px; border:0;
  background:transparent; padding:9px 11px; border-radius:9px; font-size:14px; font-weight:700;
  color:var(--ink); cursor:pointer; text-align:left; }
.langmenu button:hover { background:var(--bg); }
.langmenu button .ck { color:var(--accent); font-weight:700; visibility:hidden; }
.langmenu button.sel .ck { visibility:visible; }

.swatches { display:flex; gap:10px; }
.swatch { width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.swatch.sel { border-color:var(--ink); }
.apphead { display:flex; justify-content:space-between; align-items:flex-start; padding:2px 104px 8px 0; min-height:42px; border-bottom:1px solid var(--line); }
#hdr-role, #ss-brand-role, #gd-brand-role { font-size:12px; }
/* Brand block on dedicated views (slideshow, guide): ONE header row,
   exactly the main app header's geometry — the dedicated views keep
   .view's standard 16px top padding (no extra clearance), so this
   block's top sits at the same y as #view-app's .apphead, and the
   fixed language pill overlays the RIGHT of this same row. The 104px
   right padding (mirroring .apphead, including its 2px top padding)
   keeps a long family name from ever sliding under the pill. */
.viewbrand { padding:2px 104px 10px 0; }
/* Onboarding views have no brand row — their first row carries a
   right-side action, so they clear the fixed language pill VERTICALLY
   with 54px top padding instead. (The dedicated views used to live in
   this group too; that leftover clearance pushed their brand block a
   full band below the pill — removed in 1060.) */
#view-onboard-family, #view-onboard-child, #view-onboard-drive { padding-top:54px; }
/* The dedicated views keep the bottom navigation visible (the nav now
   lives at body level, above them), so they carry their own clearance
   over the fixed bar — slideshow controls and guide chapter ends never
   slide under it. */
#view-slideshow, #view-guide, #view-contact { padding-bottom:84px; }
.hdr-brandwrap { display:flex; align-items:center; gap:11px; min-width:0; cursor:pointer; }
.hdrlogo-slot { flex:none; display:inline-flex; }
.hdrlogo { width:36px; height:36px; border-radius:10px; object-fit:cover; border:1px solid var(--line); display:block; flex:none; }
.logotile { width:40px; height:40px; border-radius:12px; background:var(--accent); color:#fff;
  display:inline-grid; place-items:center; font-family:var(--font-main); font-weight:700; font-size:20px; }
.row { display:flex; gap:10px; align-items:center; } .row.between { justify-content:space-between; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; margin:12px 0;
  display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow); }
.kidlist { display:flex; flex-direction:column; gap:10px; }
.kidcard { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; box-shadow:var(--shadow); }
.kidcard .kname { font-size:18px; font-weight:700; }

/* home: kid chips, slideshow hero, recent moments */
.kidchips { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:4px 0 6px; }
.kidchips.cols-1 { grid-template-columns:1fr; }
.kidchips.cols-2 { grid-template-columns:1fr 1fr; }
.kidchips.cols-3 { grid-template-columns:repeat(3,1fr); }
.kidchips.cols-3 .kidchip { padding:8px 10px 8px 8px; gap:8px; }
.kidchips.cols-3 .kidchip .av { width:34px; height:34px; font-size:15px; }
.kidchip { display:flex; align-items:center; gap:10px; padding:8px 14px 8px 9px; border-radius:16px;
  min-width:0; min-height:58px;
  background:var(--card); border:1.5px solid var(--line); cursor:pointer; text-align:left; box-shadow:var(--shadow); }
.kidchip.active { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--card)); }
.kidchip .av { width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-main); font-weight:700; color:#fff; flex:none; font-size:17px; }
.kidchip .kt { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:1px; }
.kidchip .kn { display:block; font-weight:700; font-size:15px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kidchip .ka { display:block; color:var(--muted); font-size:11px; font-weight:600; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.showcard { display:block; width:100%; text-align:left; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:0; overflow:hidden; cursor:pointer; box-shadow:var(--shadow);
  margin:4px 0 18px; color:var(--ink); }
.showcard-art { display:block; position:relative; height:168px; background:color-mix(in srgb, var(--accent) 55%, #0c2b25) linear-gradient(150deg, color-mix(in srgb, var(--accent) 62%, #0a2921), color-mix(in srgb, var(--accent) 68%, #cdeee4));
  background-size:cover; background-position:center; }
.showcard-art img.artimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.showcard-ring { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px;
  border-radius:50%; background:rgba(255,255,255,.95); display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.28); color:var(--accent); }
.showcard-ring svg { width:26px; height:26px; margin-left:3px; }
.showcard-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 15px; }
.showcard-meta .lbl { font-family:var(--font-main); font-size:17.5px; font-weight:700; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px; }
.showcard-meta .lbl svg { width:19px; height:19px; color:var(--accent); }
.showcard-cap { color:var(--muted); font-weight:700; font-size:13px; text-align:right; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent { display:flex; flex-direction:column; gap:9px; }
.recentrow { display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left; background:var(--card);
  border:1px solid var(--line); border-radius:18px; padding:12px; cursor:pointer; box-shadow:var(--shadow); }
.recentrow .rthumb { width:56px; height:56px; border-radius:12px; object-fit:cover; flex:none; }
.recentrow .rthumbph { width:56px; height:56px; border-radius:12px; flex:none; display:grid; place-items:center;
  color:#fff; font-family:var(--font-main); font-weight:700; font-size:20px; }
.recentrow .rbody { flex:1; min-width:0; }
.recentrow .rtext { font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.recentrow .rmeta { display:flex; gap:7px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--muted); margin-bottom:3px; }
.recentrow .rsub { display:block; color:var(--muted); font-size:12.5px; font-weight:600; margin-top:2px; }

/* home: role explainer banner (Contributor/Viewer only, dismissible) */
.rolebanner { display:flex; gap:10px; align-items:flex-start; background:#eef6f3;
  border:1px solid var(--line); border-radius:14px; padding:10px 8px 10px 13px;
  font-size:13.5px; font-weight:600; margin:2px 0 12px; }
.rolebanner span { flex:1; padding-top:2px; }
.rolebanner button { flex:none; border:0; background:transparent; color:var(--muted);
  font-size:17px; line-height:1; padding:3px 7px; cursor:pointer; }

/* home: quick-add type presets */
.quickadd { margin:2px 0 4px; }
.qa-title { display:block; color:var(--muted); font-size:13px; font-weight:700; margin-bottom:7px; }
.qa-chips { display:flex; gap:7px; flex-wrap:wrap; }
.qa-chip { border:1.5px solid var(--line); background:#fff; color:var(--ink); padding:7px 14px;
  border-radius:999px; font-weight:700; font-size:13.5px; cursor:pointer; box-shadow:var(--shadow); }
.qa-chip:active { border-color:var(--accent); color:var(--accent); }

/* favourite-things chips (kid rows) */
.favchips { display:inline-flex; gap:5px; flex-wrap:wrap; margin-top:3px; }
.favchip { font-size:11px; font-weight:700; background:#fdf1e7; color:#b05f2a;
  border-radius:999px; padding:1px 8px; white-space:nowrap; }

/* growth: tappable measurement rows / latest cards */
.measrow { cursor:pointer; }
.kidcard[data-measlatest] { cursor:pointer; }

/* timeline entries */
.entry { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px 16px; margin:10px 0; box-shadow:var(--shadow); }
.entry .meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--muted); }
.chip { border-radius:999px; padding:2px 9px; font-size:12px; background:#eef4f2; color:var(--accent); font-weight:700; }
.chip.kid { background:#fdf1e7; color:#b05f2a; }
/* Reminder type tints (build 1045) — one soft colour per type */
.chip.rt-doctor_visit { background:#e2edf9; color:#33608c; }
.chip.rt-vaccination { background:#e4f1de; color:#3d6b35; }
.chip.rt-health_check { background:#ddf0ee; color:#2f6f6a; }
.chip.rt-travel { background:#fdf0d8; color:#8a5a12; }
.chip.rt-anniversary { background:#fbe3ee; color:#9c3a68; }
.chip.rt-birthday { background:#eee5fb; color:#6b46a8; }
.chip.rt-school { background:#fde7dd; color:#9c4a2f; }
.chip.rt-other { background:#ececec; color:#666; }
.entry .quote { font-size:17px; font-weight:700; margin:6px 0; font-family:var(--font-main); }
.entry img.photo { width:100%; border-radius:12px; margin-top:8px; }
.connectcard { font-size:13.5px; color:var(--ink); background:#eef6f3; border:1px solid var(--line); border-radius:12px; padding:12px; margin-top:8px; }
.connectcard .btn { margin-top:8px; }
/* quiet no-photo placeholder: soft gradient + one line-drawn image icon.
   No text, no dashed border — identical slot size whether the photo
   loads or not. Base = small light thumb (soft tint, theme-dark icon). */
.photo-ph { display:grid; place-items:center; border-radius:12px; flex:none;
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 7%, white), color-mix(in srgb, var(--accent) 20%, white)); color:color-mix(in srgb, var(--accent) 55%, transparent); }
.photo-ph svg { width:24px; height:24px; display:block; }
.entry .photo-ph { width:100%; height:180px; margin-top:8px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 62%, #0a2921), color-mix(in srgb, var(--accent) 68%, #cdeee4)); color:rgba(255,255,255,.55); }
.entry .photo-ph svg { width:30px; height:30px; }
.recentrow .photo-ph { width:56px; height:56px; border-radius:12px; }
.recentrow .photo-ph svg { width:22px; height:22px; }
.thumb .photo-ph { width:100%; height:100%; border-radius:10px; }
.thumb .photo-ph svg { width:22px; height:22px; }
.ss-slide .photo-ph { position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; background:rgba(10,38,32,.30); color:rgba(255,255,255,.85); }
.ss-slide .photo-ph svg { width:22px; height:22px; }
.entry .actions { display:flex; gap:6px; margin-top:10px; }
.btn.danger { background:#c0392b; border-color:#c0392b; color:#fff; font-weight:700; }
.delconfirm { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; font-size:14px; color:#c0392b; }
@keyframes tlflash { 0%,100% { box-shadow:var(--shadow); } 25%,60% { box-shadow:0 0 0 3px var(--accent); } }
.entry.flash { animation:tlflash 1.1s ease-in-out 2; }
.thumbs { display:flex; gap:10px; flex-wrap:wrap; margin:4px 0; }
.thumb { position:relative; width:72px; height:72px; flex:none; }
.thumb img { width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; }
.thumb.ph { border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 7%, white), color-mix(in srgb, var(--accent) 20%, white)); color:color-mix(in srgb, var(--accent) 55%, transparent); }
.thumb.ph svg { width:22px; height:22px; display:block; }
.thumb .rm { position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--ink); font-size:14px; line-height:1; cursor:pointer; padding:0; }
.field.rowcheck { flex-direction:row; align-items:center; gap:8px; }
.field.rowcheck input { width:auto; }

/* growth chart */
.chartcard { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; margin:12px 0;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.seg { display:inline-flex; gap:4px; background:var(--bg); border:1.5px solid var(--line); border-radius:999px; padding:4px; align-self:flex-start; }
.seg button { border:0; background:transparent; padding:7px 16px; border-radius:999px; font-weight:700;
  cursor:pointer; color:var(--muted); font-size:14px; }
.seg button.active { background:var(--accent); color:#fff; }
.chiprow { display:flex; gap:7px; flex-wrap:wrap; }
.gkid { border:1.5px solid var(--line); background:#fff; color:var(--muted); padding:6px 13px; border-radius:999px;
  font-weight:700; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.gkid .dotc { width:9px; height:9px; border-radius:50%; flex:none; }
.gkid.active { color:var(--ink); border-color:var(--accent); }
/* multi-child picker in the entry / reminder forms (build 1200):
   the .gkid toggle chips, wrapped in their own row */
.kidpick { display:flex; gap:7px; flex-wrap:wrap; }
.ref-chip { display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--line); background:#fff;
  color:var(--muted); padding:6px 12px; border-radius:999px; font-weight:700; font-size:13px; cursor:pointer; opacity:.55; }
.ref-chip .rsw { width:10px; height:10px; border-radius:3px; flex:none; }
.ref-chip.on { opacity:1; color:var(--ink); }
.chartwrap { background:#fffdf8; border:1px solid var(--line); border-radius:16px; padding:8px 4px; }
.chartwrap svg { width:100%; height:auto; display:block; color:var(--ink); }
#meas-panel { border-top:1px dashed var(--line); padding-top:12px; margin-top:2px; }
#meas-panel-head .mp-name { font-family:var(--font-main); font-weight:700; font-size:17px; }
#meas-panel-head .mp-big { font-family:var(--font-main); font-size:21px; font-weight:700; margin-top:2px; }
.mp-sub { font-weight:700; font-size:13.5px; margin:10px 0 6px; color:var(--muted); }
.meas-moment { display:flex; gap:10px; align-items:center; width:100%; text-align:left; background:var(--bg);
  border:1px solid var(--line); border-radius:12px; padding:9px 12px; margin:6px 0; cursor:pointer; font-size:14px; }
.meas-moment .mm-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.meas-moment .mm-body { flex:1; min-width:0; }
.meas-moment .mm-text { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }

/* stories */
.storycard { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:15px 16px; margin:10px 0; box-shadow:var(--shadow); }
.storycard .stitle { font-family:var(--font-main); font-size:18px; font-weight:700; }
.storycard .sexcerpt { color:var(--ink); font-size:14.5px; margin-top:5px; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.favstar { color:#e9a13b; }

/* settings: logo card + family member list */
.logorow { display:flex; align-items:center; gap:14px; }
.logoprev { flex:none; display:inline-flex; }
.logoprev img { width:62px; height:62px; border-radius:16px; object-fit:cover; border:1px solid var(--line); display:block; }
.logoprev .logotile { width:62px; height:62px; border-radius:16px; font-size:29px; }
.logobtns { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.logobtns label.btn { margin:0; }
.famsec { margin-top:14px; }
#family-list #form-member-edit { margin:10px 0 14px; }
.famsec:first-child { margin-top:2px; }
.famsec-h { font-size:13px; font-weight:700; letter-spacing:.05em; color:var(--muted); margin:0 0 7px; }
.famrow { display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line);
  border-radius:12px; padding:8px 11px; font-size:14px; margin-bottom:6px; }
.famrow .fav { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-family:var(--font-main); font-weight:700; font-size:13.5px; flex:none; }
.famrow .fmain { display:flex; flex-direction:column; min-width:0; }
.famrow .fname { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.famrow .fsub { color:var(--muted); font-size:12.5px; font-weight:600; }
.famrow > .fsub { margin-left:auto; }
.fambadge { margin-left:auto; font-size:11.5px; font-weight:700; border-radius:999px;
  padding:2px 9px; flex:none; }
.fambadge.owner { color:color-mix(in srgb, var(--accent) 80%, black); background:color-mix(in srgb, var(--accent) 12%, white); }
.fambadge.contributor { color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, white); }
.fambadge.viewer { color:#6d7772; background:#eef0ec; }
.famswitch { margin-left:auto; display:flex; gap:6px; flex:none; }
.famchip { font:inherit; font-size:12px; font-weight:700; cursor:pointer; border-radius:999px;
  padding:3px 10px; border:1px solid var(--line); background:#fff; color:var(--muted); }
.famchip.on.contributor { background:var(--accent); border-color:var(--accent); color:#fff; cursor:default; }
.famchip.on.viewer { background:#eef0ec; border-color:#d8dcd6; color:#6d7772; cursor:default; }
.famrow.pending { border-style:dashed; background:#fff; }
.famrow .invremove { background:none; border:none; cursor:pointer; font:inherit; font-size:12.5px;
  font-weight:700; color:#c0564f; padding:2px; flex:none; }
.famrow .invremove:hover { text-decoration:underline; }
.famrow .famedit { background:none; border:none; cursor:pointer; font:inherit; font-size:12.5px;
  font-weight:700; color:var(--accent); padding:2px; flex:none; }
.famrow .famedit:hover { text-decoration:underline; }
#member-remove-zone { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
#m-who-sub { margin:2px 0 8px; }
#tl-loadmore-wrap { margin:14px 0 4px; }
.famwrap .delconfirm { margin:6px 2px 8px; }
.famhint { margin:8px 2px 0; }

/* member rows: email line, relation badge, right-side cluster */
.famrow .fmail { font-size:12px; }
.fright { margin-left:auto; display:flex; align-items:center; gap:6px; flex:none; }
.fright .fambadge, .fright .famswitch { margin-left:0; }
.relbadge { font-size:11.5px; font-weight:700; border-radius:999px; padding:3px 9px;
  color:#8a5a12; background:#fdf1e7; flex:none; white-space:nowrap; }

/* family card header: title + 列表/家族树 view toggle */
.famhead { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.famhead h3 { margin:0; }
.famviewseg { align-self:center; flex:none; }
.famviewseg button { padding:5px 12px; font-size:13px; }

/* family tree view: generation bands of centred nodes (pure CSS) */
.treeband { margin-top:14px; }
.treeband:first-child { margin-top:4px; }
.treeband + .treeband { border-top:1px dashed var(--line); padding-top:13px; }
.treeband-h { text-align:center; }
.treerow { display:flex; flex-wrap:wrap; gap:14px 12px; justify-content:center; }
.treenode { width:78px; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
.treenode .tav { width:44px; height:44px; border-radius:50%; color:#fff; display:grid;
  place-items:center; font-weight:700; font-size:18px; flex:none; }
.treenode .tname { font-size:13px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.treenode .trel { font-size:11px; color:var(--muted); font-weight:600; line-height:1.25; }

/* Drive card: when the family is connected, Connect stays visible
   but inert (muted, unclickable) — Disconnect is the only live action */
.btn.isoff { background:#eceee9; border-color:var(--line); color:var(--muted);
  pointer-events:none; box-shadow:none; opacity:1; }

/* invite duplicate warning */
.dupwarn { background:#fdf3d3; border:1px solid #ecd9a0; border-radius:14px; padding:12px 14px; }
.dupwarn p { margin:0 0 9px; font-size:14px; font-weight:600; }

/* Dedicated-view column (1060): brand row, title row, stage and
   controls all live in ONE wrapper (.viewcol, a plain block at the
   view's content width), so the title row and the stage below it are
   co-extensive BY CONSTRUCTION — same parent, same width, and no
   element between either of them and the wrapper carries horizontal
   padding or margin. Inside the title row the invariant is:
   - the title span has no padding/border → its text's left edge IS
     the row's left edge IS the stage's left edge;
   - the close button is pushed by margin-left:auto (not space-
     between) and carries padding-right:0 AND border-right-width:0,
     so its TEXT's right edge IS its border-box right edge IS the
     row's right edge IS the stage's right edge.
   (Pre-1060 the text sat 15.5px inside: .btn.smallbtn's 14px right
   padding + the ghost button's 1.5px transparent border; 1030 zeroed
   the padding but left the border.) */
.viewcol { width:100%; }
.ss-top { display:flex; align-items:center; width:100%; padding:2px 0 10px; }
.ss-top .btn { margin-left:auto; padding-right:0; border-right-width:0; }
.ss-title { font-size:19px; font-weight:700; }
.ss-stage { position:relative; border-radius:22px; overflow:hidden; background:color-mix(in srgb, var(--accent) 55%, #0c2b25) linear-gradient(150deg, color-mix(in srgb, var(--accent) 62%, #0a2921), color-mix(in srgb, var(--accent) 68%, #cdeee4));
  min-height:340px; display:flex; }
.ss-slide { position:absolute; inset:0; opacity:0; transition:opacity .45s ease; display:flex; align-items:flex-end; }
.ss-slide.active { opacity:1; }
.ss-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ss-cap { position:relative; z-index:2; width:100%; box-sizing:border-box;
  padding:44px 18px 16px; background:linear-gradient(transparent, rgba(9,32,27,.74)); color:#fff; }
.ss-badge { display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.02em;
  background:rgba(255,255,255,.22); border-radius:999px; padding:3px 10px; margin-bottom:7px; }
.ss-text { font-size:19px; font-weight:700; line-height:1.45; }
.ss-sub { font-size:13px; font-weight:600; opacity:.85; margin-top:4px; }
.ss-note { margin:auto; padding:26px 22px; text-align:center; color:#fff; font-size:15.5px;
  display:flex; flex-direction:column; align-items:center; gap:14px; }
/* Controls row (1060): a 1fr/auto/1fr grid over the full stage width,
   so the transport trio (‹ play ›) in the centre cell is centred on
   the STAGE's centre line by construction — the counter and music
   button live in the right cell and can no longer drag the trio off
   centre (as a single centred flex group they pulled it ~29px left:
   half of counter 44px + gap 14px). */
.ss-controls { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; padding:12px 0 2px; }
.ssc-mid { display:flex; align-items:center; justify-content:center; gap:14px; }
.ssc-side { display:flex; align-items:center; gap:14px; min-width:0; }
.ssc-right { justify-content:flex-end; }
.ss-controls .btn { display:inline-flex; align-items:center; justify-content:center; }
.ss-controls .btn svg { width:22px; height:22px; display:block; }
.ss-controls #ss-play { min-width:104px; }
.ss-controls #ss-counter { min-width:44px; text-align:right; }
.dots { display:flex; justify-content:center; align-items:center; gap:7px; width:100%; padding:9px 0 2px; }
.dots .dot { width:9px; height:9px; border-radius:50%; border:0; padding:0; flex:none;
  background:#ccd6d0; cursor:pointer; transition:all .25s ease; }
.dots .dot.on { background:var(--accent); transform:scale(1.3); }
.remgroup { margin:18px 0 8px; font-size:15px; font-weight:700; }
/* bottom navigation: a real fixed bar — transparent buttons, 24px icons.
   Compact: capped to the content column width and centered, so on desktop
   it matches the column instead of stretching across the whole window;
   below the column width it stays full-width as before. */
#bottomnav { position:fixed; left:50%; transform:translateX(-50%); width:100%; max-width:var(--appw); bottom:0; z-index:55; display:flex;
  background:rgba(255,255,255,.97); border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 18px rgba(38,48,44,.05); }
#bottomnav .navbtn { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:transparent; border:0; border-radius:12px; padding:4px 0 3px;
  font-size:11px; font-weight:700; line-height:1.15; color:var(--muted); cursor:pointer; }
#bottomnav .navbtn svg { width:23px; height:23px; flex:none; display:block; }
#bottomnav .navbtn.sel { color:var(--accent); }

/* One stack for every language (see --font-main): no per-language
   overrides — those were what made the font visibly change on switch. */

/* timeline: filters + month groups on a rail (demo parity) */
.tl-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:12px 0 2px; }
.tl-kid-select { padding:8px 10px; border:1.5px solid var(--line); border-radius:999px; background:#fff; font-size:14px; font-weight:600; }
.tl-month { font-weight:700; font-size:16px; margin:18px 0 2px 2px; color:var(--accent); }
.tl-group { position:relative; margin-left:8px; padding-left:20px; }
.tl-group::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; background:var(--line); border-radius:2px; }
.tl-group .entry { position:relative; }
.tl-dot { position:absolute; left:-27px; top:20px; width:11px; height:11px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 0 1.5px var(--line); z-index:1; }

/* footprints: timeline list|map toggle, the map, pins, entry card */
.tl-viewseg { margin:10px 0 2px; }
.tl-map { height:62vh; min-height:320px; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); margin-top:10px;
  position:relative; z-index:0; font-family:var(--font-main); background:#e8efe9; }
#tl-notice { margin:8px 0 0; }
/* place chip on timeline cards (tap → fly to the pin) */
.pinchip { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line);
  background:#eef6f3; color:var(--accent); border-radius:999px; padding:1px 9px 1px 7px;
  font:inherit; font-size:12px; font-weight:700; cursor:pointer; max-width:100%; }
.pinchip svg { width:12px; height:12px; flex:none; }
.pinchip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* markers: 40px round pins — photo face, warm house for home, teal pin */
.mk-wrap { background:transparent; border:none; }
.mk-pin { width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; overflow:hidden; cursor:pointer;
  border:2px solid #fff; box-shadow:0 3px 10px rgba(20,50,42,.35); }
.mk-pin svg { width:20px; height:20px; display:block; }
.mk-pin.photo img { width:100%; height:100%; object-fit:cover; display:block; }
.mk-pin.photo .photo-ph { width:100%; height:100%; border-radius:50%; }
.mk-pin.photo .photo-ph svg { width:18px; height:18px; }
.mk-pin.home { background:#e07856; }
.mk-pin.pick { width:36px; height:36px; background:var(--accent); }
.mk-pin.pick svg { width:19px; height:19px; }
/* cluster bubbles in the app's teal family (library defaults are lime/blue) */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background:rgba(87,183,165,.35); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
  background:rgba(23,94,82,.82); color:#fff; font-family:var(--font-main); font-weight:700; }
/* the card under the map for the tapped marker (recent-row layout) */
.tl-mapcard { display:flex; gap:11px; align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-radius:18px; padding:12px; box-shadow:var(--shadow); margin-top:10px; }
.tl-mapcard .rthumb { width:56px; height:56px; border-radius:12px; object-fit:cover; flex:none; }
.tl-mapcard .rthumbph { width:56px; height:56px; border-radius:12px; flex:none; display:grid;
  place-items:center; color:#fff; font-family:var(--font-main); font-weight:700; font-size:20px; }
.tl-mapcard .photo-ph { width:56px; height:56px; border-radius:12px; }
.tl-mapcard .rbody { flex:1; min-width:0; }
.tl-mapcard .rmeta { display:flex; gap:7px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--muted); margin-bottom:3px; }
.tl-mapcard .rtext { font-weight:600; font-size:14.5px; display:block; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.tl-mapcard .mc-place { display:inline-flex; align-items:center; gap:4px; font-weight:700; color:var(--accent); }
.tl-mapcard .mc-place svg { width:12px; height:12px; flex:none; }
.tl-mapcard .mc-actions { display:block; margin-top:8px; }

/* entry form: location block + picker */
.locblock { border:1px solid var(--line); border-radius:14px; padding:12px;
  background:#fffdf8; display:flex; flex-direction:column; gap:10px; }
.locblock .field { margin:0; }
.locbtns { flex-wrap:wrap; }
.locsearchrow input { flex:1; min-width:0; padding:10px 12px; border:1.5px solid var(--line);
  border-radius:12px; font-size:16px; background:#fff; font-weight:400; }
.loc-map { height:260px; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  position:relative; z-index:0; font-family:var(--font-main); background:#e8efe9; }
#loc-coords { margin:0; }
#loc-msg { min-height:0; }
#loc-msg:not(:empty) { min-height:20px; }

/* kids manager rows (Settings) */
.kidrow { display:flex; gap:9px; align-items:center; flex-wrap:wrap; padding:9px 0; border-bottom:1px solid var(--line); }
.kidrow .av { width:34px; height:34px; border-radius:50%; display:inline-grid; place-items:center; color:#fff; font-weight:700; font-size:15px; flex:none; }
.kidrow .kbody { flex:1; min-width:110px; display:flex; flex-direction:column; }
.kidrow .kn { font-weight:700; }
.kidrow .ka { font-size:12px; color:var(--muted); }
.kidrow .delconfirm, .kidrow .msg { flex-basis:100%; }

/* reminders rows (Home) */
.remrow { display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin:8px 0; box-shadow:var(--shadow); }
.remrow .remdate { font-weight:700; font-size:13px; }
.remrow .remtitle { font-weight:600; flex:1; min-width:110px; }
.remrow.done { opacity:.55; }
.remrow .remover { color:#c0392b; font-size:12px; font-weight:700; }

/* --- 0825: search suggestions, frequent places, top places --- */
.loc-results { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.loc-result { text-align:left; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; font-size:13px; color:var(--ink); cursor:pointer; }
.loc-result:active { background:var(--accent-soft, #e6f4f1); }
.loc-common { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 2px; }
.loc-common-label { font-size:12px; color:var(--muted); font-weight:600; }
.loc-common .chiprow { display:flex; gap:6px; flex-wrap:wrap; }
.tl-top { padding:10px 14px; margin:10px 0; }
.tl-top-h { margin:0 0 6px; font-size:13px; color:var(--muted); font-weight:700; }
.tl-top-row { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none;
  padding:5px 0; cursor:pointer; font-size:13px; color:var(--ink); }
.tl-top-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38%; }
.tl-top-bar { flex:1; height:6px; background:var(--line); border-radius:3px; overflow:hidden; }
.tl-top-fill { display:block; height:100%; background:var(--accent); border-radius:3px; }
.tl-top-count { color:var(--muted); font-size:12px; white-space:nowrap; }

/* ---- in-app guide (使用指南): search + accordion chapters ---- */
.gd-search { width:100%; padding:11px 14px; border:1.5px solid var(--line); border-radius:999px;
  font-size:16px; background:#fff; margin:2px 0 12px; }
.gd-search:focus { outline:none; border-color:var(--accent); }
.gd-ch { background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); margin:10px 0; overflow:hidden; }
.gd-head { display:flex; align-items:center; gap:8px; width:100%; background:none; border:none;
  padding:14px 16px; cursor:pointer; text-align:left; font-size:16px; font-weight:700; color:var(--ink); }
.gd-badge { flex:none; border-radius:999px; padding:2px 9px; font-size:12px; font-weight:700;
  background:color-mix(in srgb, var(--accent) 12%, var(--card)); color:var(--accent); }
.gd-arrow { margin-left:auto; flex:none; color:var(--muted); font-size:13px;
  transition:transform .18s ease; }
.gd-ch.open .gd-arrow { transform:rotate(180deg); }
.gd-body { padding:2px 16px 16px; white-space:pre-line; font-size:15px; line-height:1.65; }

/* ---- build 1010: drive guardrails banner, home mini-map, slideshow
   music toggle, growth-book print ---- */
.gap8 { gap:8px; }
.drivebanner { display:flex; gap:10px; align-items:center; margin:0 0 12px;
  background:#fdf3e3; border:1.5px solid #e8b34b; color:#6d4c00;
  border-radius:14px; padding:10px 12px; font-size:14px; line-height:1.45;
  box-shadow:var(--shadow); }
.drivebanner span { flex:1; }
.drivebanner-btn { flex:none; background:#e8b34b; color:#3d2c00; border:0; font-weight:700; }
/* Demo mode (build 1230): the slim always-on-top sample-family bar.
   Accent-tinted so it reads as part of the app, impossible to miss,
   and the exit stays one tap away on every tab. */
.demobanner { display:flex; gap:10px; align-items:center; margin:0 0 12px;
  background:color-mix(in srgb, var(--accent) 14%, #fff);
  border:1.5px solid var(--accent); color:var(--ink);
  border-radius:14px; padding:8px 12px; font-size:14px; font-weight:700;
  line-height:1.4; box-shadow:var(--shadow); }
.demobanner span { flex:1; }
.demobanner .btn { flex:none; }
/* Pull-to-refresh (build 1230): a slim branded bar the five main
   tabs pull down from the very top. Its height is driven from JS
   during the drag (the transition gives the snap-back on release);
   the ring flips as the pull arms and spins while the reload runs.
   Icon + the existing “loading” label — no new vocabulary. */
.ptrbar { height:0; overflow:hidden; display:flex; align-items:center;
  justify-content:center; gap:8px; font-size:13px; font-weight:700;
  color:var(--muted); transition:height .18s ease; }
.ptrspin { width:16px; height:16px; border-radius:50%; flex:none;
  border:2.5px solid color-mix(in srgb, var(--accent) 25%, #fff);
  border-top-color:var(--accent); transition:transform .18s ease; }
.ptrbar.armed .ptrspin { transform:rotate(180deg); }
.ptrbar.busy .ptrspin { animation:ptrrot .7s linear infinite; }
@keyframes ptrrot { to { transform:rotate(360deg); } }
.minimap-card { padding:12px 12px 8px; cursor:pointer; margin-top:14px; }
.minimap-head { display:flex; align-items:center; gap:7px; font-weight:700; font-size:15.5px; margin:0 2px 8px; }
.minimap-pin { width:17px; height:17px; color:var(--accent); display:inline-flex; }
.minimap-pin svg { width:100%; height:100%; }
.minimap { height:180px; border-radius:14px; overflow:hidden; background:#eef1ea; }
.minimap .leaflet-control-attribution { font-size:9px; padding:0 4px; }
.ssmusic { font-size:19px; line-height:1; min-width:44px; }
/* multi-select category chips (1010): lit chips get a filled tint +
   ring so several selected at once read unmistakably */
#tl-cat-chips .ref-chip.on { background:color-mix(in srgb, var(--accent) 14%, #fff); border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent) inset; }
.ssmusic.on { color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent); }
.ssmusic.off { color:var(--muted); opacity:.65; }

/* Growth book: the container is print-only on screen. */
#print-book { display:none; }
@media print {
  @page { size:A4; margin:15mm 14mm; }
  body.book-printing > *:not(#print-book) { display:none !important; }
  body.book-printing { padding:0; background:#fff; }
  body.book-printing #print-book { display:block; color:#26302c;
    font-family:var(--font-main); font-size:11.5pt; line-height:1.6; }
  #print-book .bk-cover { text-align:center; padding-top:34mm; page-break-after:always; }
  #print-book .bk-cover-logo { width:34mm; height:34mm; object-fit:cover; border-radius:8mm; }
  #print-book .bk-cover-tile { display:inline-flex; width:34mm; height:34mm; border-radius:8mm;
    align-items:center; justify-content:center; font-size:44pt; font-weight:700; color:#fff; background:var(--accent); }
  #print-book .bk-cover-name { font-size:30pt; font-weight:700; margin:10mm 0 2mm; }
  #print-book .bk-cover-book { font-size:15pt; color:#7d8a84; letter-spacing:.35em; margin-bottom:12mm; }
  #print-book .bk-cover-kid { font-size:14pt; margin:1.5mm 0; }
  #print-book .bk-cover-period { margin-top:12mm; color:#7d8a84; font-size:11pt; }
  #print-book .bk-chapter { page-break-before:always; }
  #print-book .bk-chapter-h { font-size:17pt; font-weight:700; padding:3mm 4mm; border-radius:3mm;
    background:color-mix(in srgb, var(--accent) 14%, #fff); margin:0 0 6mm; }
  #print-book .bk-entry { margin:0 0 7mm; page-break-inside:avoid; }
  #print-book .bk-photo { width:100%; max-height:120mm; object-fit:cover; border-radius:3mm; margin-bottom:3mm; }
  #print-book .bk-quote { font-size:14pt; font-weight:600; background:#f4f1e8; border-radius:4mm;
    padding:4mm 5mm; margin:0 0 2.5mm; }
  #print-book .bk-text { white-space:pre-line; }
  #print-book .bk-meta { color:#7d8a84; font-size:9.5pt; margin-top:1.5mm; }
  #print-book .bk-growth { border:1px solid #e7e2d8; border-radius:3mm; padding:3.5mm 4.5mm; margin:2mm 0 6mm; }
  #print-book .bk-growth h4 { margin:0 0 2mm; font-size:12pt; }
  #print-book .bk-growth p { margin:0.8mm 0; }
  #print-book .bk-page { page-break-before:always; }
  #print-book .bk-place { display:flex; gap:4mm; align-items:center; margin:0 0 4mm; page-break-inside:avoid; }
  #print-book .bk-place img { width:26mm; height:26mm; object-fit:cover; border-radius:2.5mm; }
  #print-book .bk-place-name { font-weight:700; font-size:12.5pt; }
  #print-book .bk-back { text-align:center; padding-top:26mm; }
  #print-book .bk-back-big { font-size:16pt; font-weight:700; margin-bottom:5mm; }
}

/* ---- build 1100: video, storage meter, Drive migration ---- */
.vidwrap { position:relative; display:block; margin-top:8px; }
.vidwrap img.photo { margin-top:0; }
.vbadge { position:absolute; left:10px; bottom:10px; width:40px; height:40px;
  border-radius:50%; border:0; background:rgba(20,16,32,.72); color:#fff;
  font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding-left:3px; }
.vbadge:disabled { opacity:.55; }
.entry video.vidplayer { width:100%; border-radius:12px; margin-top:8px; background:#000; }
.vidprev { border:1px solid var(--line, #e5e0f0); border-radius:12px; padding:10px; margin-top:8px; }
.vidprev video { width:100%; border-radius:8px; background:#000; max-height:300px; }
.vidprev-meta { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; margin-top:8px; font-size:13px; }
.vidprev-cover { display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.vidprev-cover .coverthumb { width:56px; height:40px; object-fit:cover; border-radius:6px; }
.vidprev .rm, .curvideo .rm { margin-left:auto; }
.curvideo { display:flex; align-items:center; gap:10px; margin-top:8px;
  border:1px solid var(--line, #e5e0f0); border-radius:12px; padding:8px 10px; }
.curvideo img { width:64px; height:48px; object-fit:cover; border-radius:8px; }
.ss-slide video.ss-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.quotabanner { background:#fdecec; border:1px solid #e58a8a; color:#6d1a1a; }
.quotablock { margin:10px 0 4px; }
.qmeter { height:10px; border-radius:6px; background:var(--line, #e5e0f0); overflow:hidden; }
.qmeter > div { height:100%; width:0; background:var(--accent); border-radius:6px; transition:width .3s; }
.qmeter > div.hot { background:#d9534f; }
#quota-warn.gentle { color:#8a6d1a; }
#quota-warn.strong { color:#a12622; font-weight:700; }
.swapbar { height:10px; border-radius:6px; background:var(--line, #e5e0f0); overflow:hidden; margin:8px 0; }
.swapbar > div { height:100%; width:0; background:var(--accent); transition:width .3s; }
.swapbtns { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
/* ---- build 1130: two-field date rows + media editor ---- */
/* Paired date fields in a .row (the book dialog's 从/到 was the visible
   casualty): each field may shrink and the row may wrap, so the pair can
   never squeeze into ~2/3 of the card or run under each other on mobile.
   This is the 0855 form rule (min-width:0, box-sizing) applied to the
   ROW's flex children, which the dialog had missed. */
.daterow { flex-wrap:wrap; }
.daterow .field { flex:1 1 150px; min-width:0; }
.daterow .field input { width:100%; }
/* staged-photo edit (✎) badge: bottom-left, mirroring .rm top-right */
.thumb .edbtn { position:absolute; left:-7px; bottom:-7px; width:22px; height:22px; border-radius:50%;
  border:none; background:var(--accent); color:#fff; font-size:12px; line-height:22px;
  text-align:center; cursor:pointer; padding:0; box-shadow:0 1px 4px rgba(38,48,44,.25); }
/* video trim controls inside the staged-video preview */
.vidtrim { margin-top:10px; border-top:1px dashed var(--line); padding-top:8px; }
.vidtrim .vt-label { font-weight:700; font-size:13.5px; }
.vidtrim .vt-row { display:flex; align-items:center; gap:8px; margin-top:6px; }
.vidtrim .vt-row span { flex:none; font-size:13px; color:var(--muted); min-width:34px; }
.vidtrim .vt-row output { flex:none; font-size:13px; min-width:38px; text-align:right; }
.vidtrim input[type="range"] { flex:1; min-width:0; accent-color:var(--accent); }
.vidtrim .vt-len { font-size:13px; margin-top:6px; }
/* photo editor sheet (fixed overlay; the app stays mounted beneath) */
.edoverlay { position:fixed; inset:0; z-index:90; background:var(--bg); overflow-y:auto;
  padding:calc(12px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
.edcol { max-width:var(--appw); margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.edcanvas { width:100%; height:auto; display:block; border-radius:12px; background:#20241f;
  touch-action:none; box-shadow:var(--shadow); }
.edrow { flex-wrap:wrap; }
.edlabel { font-weight:700; font-size:14px; margin-top:2px; }
.edtray { display:flex; flex-wrap:wrap; gap:8px; }
.edtray .edstk { width:46px; height:46px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--card); font-size:24px; line-height:1; display:grid; place-items:center;
  cursor:pointer; padding:0; }
.edtray .edstk canvas { width:30px; height:30px; display:block; }
.edsize { display:flex; align-items:center; gap:8px; flex:1; min-width:170px; font-size:14px; font-weight:600; }
.edsize input[type="range"] { flex:1; min-width:0; accent-color:var(--accent); }

/* ---- build 1300: pet members + landing intro ---- */
.introblock { margin-top:6px; text-align:left; display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--line); padding-top:16px; }
.introrow { display:flex; gap:12px; align-items:flex-start; }
.introicon { flex:none; width:22px; height:22px; color:var(--accent); margin-top:2px; }
.introicon svg { width:22px; height:22px; display:block; }
.introt { font-weight:700; font-size:14.5px; line-height:1.35; }
.introb { color:var(--muted); font-size:13px; line-height:1.5; }
.kidkind { align-self:flex-start; }
.petonly { display:flex; flex-direction:column; gap:10px; }
.seg.smallseg { padding:3px; }
.seg.smallseg button { padding:4px 10px; font-size:12.5px; }
.petdatekindwrap { display:inline-flex; }