:root {
  --bg: #f6f1ff; --card: #ffffff; --ink: #2d1b55; --muted: #7a6c99; --line: #e6dcfa;
  --p: #7c4dcc; --p2: #a58be0; --p-soft: #ede4ff; --warn: #b4472a; --warn-soft: #fff0ea; --ok: #2f9e8f;
  --r: 18px; --shadow: 0 2px 10px rgba(76, 40, 140, .07);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #17112a; --card: #221a3b; --ink: #efe8ff; --muted: #a99bc9; --line: #3a2e5c; --p: #a785f0; --p2: #7c5cc4; --p-soft: #2e2450; --warn: #ff9b7d; --warn-soft: #3a2420; --shadow: none; } }
:root[data-theme="dark"] { --bg: #17112a; --card: #221a3b; --ink: #efe8ff; --muted: #a99bc9; --line: #3a2e5c; --p: #a785f0; --p2: #7c5cc4; --p-soft: #2e2450; --warn: #ff9b7d; --warn-soft: #3a2420; --shadow: none; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); min-height: 100vh; }
body.noscroll { overflow: hidden; }
main { max-width: 760px; margin: 0 auto; padding: calc(30px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom)); }
h1 { font-size: 26px; margin: 4px 0; letter-spacing: -.3px; }
h2 { font-size: 20px; margin: 8px 0 12px; }
h3 { font-size: 16px; margin: 0 0 8px; }
h4 { font-size: 14px; margin: 16px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
p { line-height: 1.45; }
a { color: var(--p); }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 13px; }
.center { text-align: center; }
.empty { color: var(--muted); text-align: center; padding: 24px 8px; }
.warn { color: var(--warn); background: var(--warn-soft); padding: 8px 12px; border-radius: 12px; font-size: 14px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.page-head.home p { margin: 0; }
.head-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gear { font-size: 22px; text-decoration: none; }

.card { background: var(--card); border-radius: var(--r); padding: 16px; margin: 0 0 12px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.btn { appearance: none; border: 0; background: var(--p); color: #fff; font: inherit; font-weight: 600; padding: 11px 18px; border-radius: 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.ghost { background: var(--p-soft); color: var(--p); }
.btn.danger { color: var(--warn); }
.btn.danger:not(.ghost) { background: var(--warn); color: #fff; }
.btn.small { padding: 8px 12px; font-size: 14px; border-radius: 12px; }
.btn.tiny { padding: 5px 10px; font-size: 13px; border-radius: 10px; }
.btn.big { width: 100%; padding: 15px; font-size: 17px; margin-top: 8px; }
.btn:disabled { opacity: .6; }
.link { background: none; border: 0; color: var(--p); font: inherit; font-weight: 600; padding: 0; cursor: pointer; }
.icon { background: none; border: 0; font-size: 20px; color: var(--p); cursor: pointer; padding: 6px 10px; line-height: 1; }

.seg { display: flex; background: var(--p-soft); border-radius: 14px; padding: 4px; margin-bottom: 12px; gap: 4px; }
.seg button { flex: 1; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); padding: 8px 10px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--card); color: var(--p); box-shadow: var(--shadow); }
.seg.scroll { overflow-x: auto; scrollbar-width: none; }
.seg .count { background: var(--p); color: #fff; border-radius: 9px; font-size: 11px; padding: 1px 6px; }
.seg .count:empty { display: none; }

/* nav */
#nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 10; }
#nav a { flex: 1; text-align: center; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-radius: 12px; }
#nav a span { font-size: 22px; filter: grayscale(.6); }
#nav a.on { color: var(--p); background: var(--p-soft); }
#nav a.on span { filter: none; }

/* forms */
.form { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select { min-height: 46px; }
input, select, textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--p2); }
textarea { resize: vertical; line-height: 1.45; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; font-size: 15px; }
label.check input { width: 20px; height: 20px; accent-color: var(--p); }
fieldset { border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
legend { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.actions.wrap { flex-wrap: wrap; justify-content: flex-start; }
.actions.col { flex-direction: column; }
.file-drop { border: 2px dashed var(--p2); border-radius: 14px; padding: 18px; align-items: center; color: var(--p); font-size: 16px; cursor: pointer; text-align: center; }
.file-drop.small { padding: 10px; font-size: 14px; }
.file-drop input { display: none; }
.inline { display: flex; gap: 6px; margin: 6px 0; }
.emoji-in { max-width: 80px; }
.row2:has(.emoji-in) { grid-template-columns: 70px 1fr; }

/* setup */
.setup { max-width: 460px; margin: 0 auto; padding-top: 24px; text-align: center; }
.setup .form { text-align: left; }
.setup .logo { font-size: 56px; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role input { display: none; }
.role span { display: block; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line); text-align: center; color: var(--ink); font-size: 15px; }
.role input:checked + span { border-color: var(--p); background: var(--p-soft); color: var(--p); }
.prow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px dashed var(--line); }
.prow label { font-size: 12px; }

/* people chips */
.who { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.who::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.badge-banner, .info-banner, .warn-banner { border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.badge-banner { background: #fff4d6; color: #7a5a00; }
.info-banner { background: var(--p-soft); color: var(--ink); }
.warn-banner { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-banner { background: #3b3218; color: #f3d98b; } }
:root[data-theme="dark"] .badge-banner { background: #3b3218; color: #f3d98b; }

/* home */
.today .plain li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.today .plain li:last-child { border: 0; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: 4px 0; }
.why { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.countdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.count { text-align: left; display: flex; flex-direction: column; gap: 4px; font: inherit; color: var(--ink); cursor: pointer; margin: 0; }

.count small { color: var(--p); font-weight: 600; }
.shop-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc { background: var(--p-soft); border-radius: 14px; padding: 10px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; font-size: 13px; }
.sc b { font-size: 22px; color: var(--p); }
.quick { display: grid; gap: 8px; }
.reminders li { cursor: pointer; }

/* calendar */
.week-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.week-nav .link { font-size: 16px; }
.summary .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.summary .stats div { background: var(--p-soft); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; }
.summary .stats b { font-size: 16px; }
.summary .stats span { font-size: 12px; color: var(--muted); }
.day.is-today { border-color: var(--p); box-shadow: 0 0 0 2px var(--p-soft); }
.day-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.day-head h3 { margin: 0; }
.ev-tag { font-size: 12px; background: var(--p-soft); padding: 2px 8px; border-radius: 10px; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; cursor: pointer; }
.chip-row .duty-kind { font-size: 15px; }
.nanny-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; margin-top: 8px; border-radius: 12px; background: var(--bg); font-size: 14px; cursor: pointer; }
.nanny-row.needed { background: #e3f6f2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nanny-row.needed { background: #163a35; } }
:root[data-theme="dark"] .nanny-row.needed { background: #163a35; }
.off { font-weight: 700; color: var(--ok); }
.tag { font-size: 11px; background: #fff4d6; color: #7a5a00; padding: 1px 6px; border-radius: 6px; font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.legend .nanny-dot, .mcell.needed { background: #e3f6f2; }
.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.mcell { aspect-ratio: 1 / 1.15; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font: inherit; color: var(--ink); cursor: pointer; position: relative; overflow: hidden; }
.mcell.other { opacity: .4; }
.mcell.is-today { border: 2px solid var(--p); }
.mcell .n { font-size: 13px; font-weight: 700; }
.mcell .marks { display: flex; gap: 2px; flex-wrap: wrap; }
.mcell .marks i { min-width: 14px; height: 14px; border-radius: 7px; font-size: 9px; color: #fff; font-style: normal; display: inline-flex; align-items: center; justify-content: center; padding: 0 2px; }
.mcell .offm, .mcell .evm { font-size: 12px; position: absolute; bottom: 2px; }
.mcell .offm { left: 4px; } .mcell .evm { right: 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .legend .nanny-dot, :root:not([data-theme="light"]) .mcell.needed { background: #163a35; } }
:root[data-theme="dark"] .legend .nanny-dot, :root[data-theme="dark"] .mcell.needed { background: #163a35; }

/* review table */
.review { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.rrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 8px; border-radius: 12px; background: var(--bg); }
.rrow input, .rrow select { font-size: 16px; padding: 6px 8px; min-width: 0; width: 100%; box-sizing: border-box; }
.rrow .rdate { grid-column: 1; grid-row: 1; }
.rrow select { grid-column: 2; grid-row: 1; }
.rrow [data-rm] { grid-column: 3; grid-row: 1; }
.rrow input[data-f=label] { grid-column: 1 / -1; }
.rrow input[data-f=start] { grid-column: 1; }
.rrow input[data-f=end] { grid-column: 2 / -1; }
.sheet .actions.stick { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); background: var(--card); margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); z-index: 1; }
.rrow .rdate { font-weight: 700; font-size: 13px; display: flex; flex-direction: column; }
.rrow .rdate small { color: var(--muted); font-weight: 500; }
.rrow.flying { background: #efe7ff; } .rrow.office { background: #eaf1ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rrow.flying { background: #2f2552; } :root:not([data-theme="light"]) .rrow.office { background: #1f2a48; } }
:root[data-theme="dark"] .rrow.flying { background: #2f2552; } :root[data-theme="dark"] .rrow.office { background: #1f2a48; }
.rrow.flag { outline: 2px solid #f0c050; }
.rflag { grid-column: 1 / -1; font-size: 12px; color: #7a5a00; }
@media (max-width: 560px) { .rrow { grid-template-columns: 62px 1fr auto; } .rrow input[data-f=label] { grid-column: 2 / 4; } .rrow input[type=datetime-local] { grid-column: 2 / 4; } .rrow .icon { grid-row: 1; grid-column: 3; } .rrow select { grid-column: 2; } .rrow .muted { grid-column: 2 / 4; } }
pre.share { background: var(--bg); padding: 12px; border-radius: 12px; white-space: pre-wrap; font: 15px/1.5 inherit; font-family: inherit; }

/* sheet */
.sheet-wrap { position: fixed; inset: 0; background: rgba(30, 15, 60, .4); z-index: 20; display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
.sheet { background: var(--card); width: 100%; max-width: 560px; max-height: 92vh; max-height: calc(100dvh - 12px - env(safe-area-inset-top)); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 22px 22px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); position: relative; animation: up .2s ease-out; }
.sheet.wide { max-width: 760px; }
.sheet-x { position: absolute; top: 10px; right: 10px; background: var(--p-soft); border: 0; border-radius: 50%; width: 32px; height: 32px; color: var(--p); font-size: 15px; cursor: pointer; z-index: 2; }
@media (min-width: 700px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 22px; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 20px; font-weight: 600; opacity: 0; transition: .25s; z-index: 30; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* shopping */
.add-item { display: flex; gap: 6px; margin-bottom: 8px; }
.add-item .qty { max-width: 80px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.qchip { border: 1.5px solid var(--line); background: var(--card); border-radius: 16px; padding: 5px 10px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; flex-direction: row; font-weight: 500; }
.qchip.on { background: var(--p); color: #fff; border-color: var(--p); }
.items { list-style: none; padding: 0; margin: 0 0 12px; background: var(--card); border-radius: var(--r); border: 1px solid var(--line); }
.items li { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.items li:last-child { border: 0; }
.items li.done .iname { text-decoration: line-through; color: var(--muted); }
.iname { flex: 1; cursor: pointer; font-size: 16px; }
.iname small { display: block; color: var(--muted); font-size: 12px; }
.qtyb { background: var(--p-soft); color: var(--p); border-radius: 8px; padding: 1px 6px; font-size: 13px; font-weight: 600; }
.tick { flex-direction: row; }
.tick input { display: none; }
.tick span { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--p2); display: block; }
.tick input:checked + span { background: var(--p); border-color: var(--p); box-shadow: inset 0 0 0 4px var(--card); }
.merged, .orders, .mini, .people, .events { list-style: none; padding: 0; margin: 8px 0; }
.merged li, .orders li, .people li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.merged small, .orders small { display: block; color: var(--muted); font-size: 12px; }
.merged li small { display: inline; }
.budget { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.bar { height: 8px; background: var(--p-soft); border-radius: 4px; overflow: hidden; margin: 6px 0; }
.bar i { display: block; height: 100%; background: var(--p); }
.thumb { max-width: 160px; border-radius: 12px; }
.checks { display: flex; flex-direction: column; gap: 6px; }

/* events */
.month-h { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 18px 0 6px; }
.events li { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 6px; cursor: pointer; }

.events small { display: block; color: var(--muted); font-size: 13px; }
.mini li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); gap: 6px; }
.mini li.done label { text-decoration: line-through; color: var(--muted); }
.mini li span { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.memories { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0; }
.memories figure { margin: 0; background: var(--bg); border-radius: 12px; overflow: hidden; }
.memories img { width: 100%; display: block; }
.memories figcaption { padding: 6px 8px; font-size: 13px; }

/* notes */
.search { margin-bottom: 12px; }
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.note { cursor: pointer; margin: 0; }
.note p { margin: 0 0 8px; color: var(--muted); font-size: 14px; white-space: pre-wrap; }
.note img { width: 100%; border-radius: 10px; background: #fff; }
.note small { color: var(--muted); font-size: 12px; }
.title-in { font-size: 20px; font-weight: 700; border: 0; background: none; padding: 4px 0; }
.pad { width: 100%; background: #fff; border-radius: 14px; border: 1.5px solid var(--line); touch-action: none; display: block; aspect-ratio: 3 / 2; }
details summary { cursor: pointer; color: var(--p); font-weight: 600; font-size: 14px; }

/* settings */
.people li { cursor: pointer; }
.code { font-family: ui-monospace, Menlo, monospace; background: var(--p-soft); padding: 2px 8px; border-radius: 8px; }
.res { margin: 10px 0; }
.res .chips { margin: 6px 0 0; }
.swatches { display: flex; gap: 8px; flex-direction: row; }
.swatches label { flex-direction: row; }
.swatches input { display: none; }
.swatches i { width: 30px; height: 30px; border-radius: 50%; display: block; border: 3px solid transparent; }
.swatches input:checked + i { border-color: var(--ink); }
.rules label { font-weight: 500; }

/* line icons */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
.ic.soft { color: var(--p); opacity: .85; }
.ic.flag { width: 1.35em; height: .9em; vertical-align: -0.1em; }
.btn .ic { width: 1.1em; height: 1.1em; }
#nav a .ic { width: 24px; height: 24px; stroke-width: 1.8; }
.icon .ic { width: 22px; height: 22px; }
.sheet-x { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.sheet-x .ic { width: 16px; height: 16px; }
.gear .ic { width: 26px; height: 26px; color: var(--p); }
.badge-ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.badge-ic .ic { width: 22px; height: 22px; }
.badge-ic .ic.flag { width: 26px; height: 17px; }
.t-p, .flag-b { background: var(--p-soft); color: var(--p); }
.t-pink { background: #fde6f1; color: #c03b82; }
.t-teal { background: #dff5f1; color: #23806f; }
.t-amber { background: #fff0db; color: #b86b10; }
.t-green { background: #e3f6e8; color: #2f8a4a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .t-pink { background: #45213a; color: #f39ac7; } :root:not([data-theme="light"]) .t-teal { background: #163a35; color: #7fd8c6; } :root:not([data-theme="light"]) .t-amber { background: #3d2c14; color: #f2b866; } :root:not([data-theme="light"]) .t-green { background: #1c3a25; color: #8fd9a5; } }
:root[data-theme="dark"] .t-pink { background: #45213a; color: #f39ac7; } :root[data-theme="dark"] .t-teal { background: #163a35; color: #7fd8c6; } :root[data-theme="dark"] .t-amber { background: #3d2c14; color: #f2b866; } :root[data-theme="dark"] .t-green { background: #1c3a25; color: #8fd9a5; }
.reminders li { display: flex; align-items: center; gap: 10px; }
.reminders .badge-ic { width: 30px; height: 30px; border-radius: 9px; }
.reminders .badge-ic .ic { width: 17px; height: 17px; }
.count .badge-ic { margin-bottom: 4px; }
.ev-title { display: flex; align-items: center; gap: 10px; padding-right: 40px; }
.ev-title h2 { margin: 0; }
.duty-kind { display: inline-flex; width: 26px; height: 26px; border-radius: 8px; align-items: center; justify-content: center; background: var(--p-soft); color: var(--p); }
.duty-kind .ic { width: 15px; height: 15px; }
.duty-kind.k-office { background: #e4ecff; color: #3c64c8; }
.duty-kind.k-home { background: #e3f6e8; color: #2f8a4a; }
.duty-kind.k-reserve { background: #fff0db; color: #b86b10; }
.off { display: inline-flex; align-items: center; gap: 5px; }
.mcell .marks i .ic { width: 9px; height: 9px; }
.mcell .offm .ic, .mcell .evm .ic { width: 12px; height: 12px; color: var(--p); }
.ev-tag { display: inline-flex; align-items: center; gap: 4px; }
.ev-tag .ic { width: 13px; height: 13px; }
.sc span { display: flex; align-items: center; gap: 4px; }
.role span { display: flex; align-items: center; justify-content: center; gap: 6px; }
.role .ic { width: 20px; height: 20px; }
.setup img.logo { width: 84px; height: 84px; border-radius: 20px; box-shadow: var(--shadow); }
.logo-ic { width: 72px; height: 72px; margin: 0 auto; border-radius: 20px; background: var(--p-soft); color: var(--p); display: flex; align-items: center; justify-content: center; }
.logo-ic .ic { width: 38px; height: 38px; }
.file-drop span { display: inline-flex; align-items: center; gap: 6px; }
.seg button .ic { width: 16px; height: 16px; vertical-align: -3px; }
.qchip .ic { width: 12px; height: 12px; vertical-align: -1px; }
.icon-pick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.icon-pick label { align-items: center; }
.icon-pick input { display: none; }
.icon-pick span { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); color: var(--ink); }
.icon-pick input:checked + span { background: var(--p); color: #fff; border-color: var(--p); }
.badge-banner, .warn-banner { display: flex; align-items: center; gap: 8px; }
.warn .ic, .rflag .ic { vertical-align: -3px; }
.today .plain li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* birthday surprise */
.gift-wrap { position: fixed; inset: 0; z-index: 50; background: linear-gradient(180deg, #a98ee6, #6a3dbd); overflow: auto; display: flex; justify-content: center; padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.gift-card { position: relative; z-index: 2; background: var(--card); border-radius: 26px; max-width: 440px; width: 100%; padding: 26px 20px; text-align: center; box-shadow: 0 20px 60px rgba(40, 10, 90, .35); align-self: flex-start; animation: up .4s ease-out; }
.gift-logo { width: 84px; height: 84px; border-radius: 20px; box-shadow: var(--shadow); }
.gift-card h1 { font-size: 26px; margin: 14px 0 8px; color: var(--p); }
.gift-card h2 { font-size: 17px; margin: 22px 0 10px; text-align: left; }
.gift-msg { font-size: 16px; line-height: 1.5; margin: 0 0 6px; }
.gift-from { font-family: Georgia, serif; font-style: italic; color: #c03b82; font-size: 18px; margin: 8px 0 0; }
.gift-steps { list-style: none; padding: 0; margin: 0 0 16px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.gift-steps li { display: flex; gap: 12px; align-items: flex-start; background: var(--bg); border-radius: 14px; padding: 12px; font-size: 15px; line-height: 1.4; }
.step-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--p-soft); color: var(--p); display: flex; align-items: center; justify-content: center; flex: none; }
.step-ic .ic { width: 22px; height: 22px; }
.gift-card .warn { text-align: left; margin-top: 14px; }
.confetti { position: fixed; top: -12px; width: 9px; height: 14px; border-radius: 2px; z-index: 1; animation: fall linear infinite; opacity: .9; }
@keyframes fall { to { top: 105vh; transform: rotate(720deg) translateX(40px); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }
.gift-code-note { text-align: left; font-size: 15px; margin: 0 0 8px; }
.gift-code { font-family: ui-monospace, Menlo, monospace; font-size: 26px; font-weight: 700; letter-spacing: 2px; background: var(--p-soft); color: var(--p); border-radius: 14px; padding: 12px; margin-bottom: 16px; user-select: all; }
.signin-link { width: 100%; margin: 0 0 12px; justify-content: center; }
.masked { -webkit-text-security: disc; }
#kc .gift-code { width: 100%; text-align: center; border: 0; }
#nav[hidden] { display: none; }
.found { text-align: center; padding: 22px; margin-bottom: 16px; } .found h2 { margin: 4px 0 6px; font-size: 26px; } .found .logo-ic { margin: 0 auto 8px; }
.setup .btn.big + .btn.big { margin-top: 10px; }
.fam-tile { width: 84px; height: 84px; margin-bottom: 10px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 0 2px; padding: 8px; }
.fam-tile span { display: grid; place-items: center; }
.logo-ic.fam-tile .ic { width: var(--s); height: var(--s); }
.logo-ic.fam-tile .pet .ic { width: calc(var(--s) * .8); height: calc(var(--s) * .8); }
.found .fam-tile { margin: 0 auto 8px; }
.phone-row { display: flex; gap: 8px; }
.phone-row select { flex: 0 0 auto; width: auto; max-width: 112px; }
.phone-row input { flex: 1; min-width: 0; }

/* day timeline */
.tl { position: relative; margin: 4px 0 8px; --lab: 62px; }
.tl-row, .tl-axis { display: grid; grid-template-columns: var(--lab) 1fr; align-items: center; gap: 6px; }
.tl-row { height: 22px; margin: 4px 0; }
.tl-row span { font-size: 12px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-track { position: relative; height: 18px; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--p-soft) 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%); }
.tl-bar { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: var(--c); min-width: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.tl-bar em { font-style: normal; font-size: 10px; font-weight: 700; color: #fff; white-space: nowrap; padding: 0 4px; }
.tl-bar.nanny { opacity: .85; }
.tl-bar[data-duty], .tl-bar[data-nanny] { cursor: pointer; }
.tl-both { position: absolute; top: 0; bottom: 16px; left: calc(var(--lab) + 6px); right: 0; pointer-events: none; }
.tl-clash { position: absolute; top: -2px; bottom: -2px; border-radius: 6px; background: rgba(240, 160, 60, .22); outline: 1.5px dashed #e39a3b; }
.tl-axis div { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
.tl-axis b { font-weight: 500; width: 0; display: flex; justify-content: center; white-space: nowrap; }
.tl-axis b:first-child { justify-content: flex-start; } .tl-axis b:last-child { justify-content: flex-end; }
.tl-key { font-size: 13px; margin: 2px 0 6px; color: var(--muted); }
.tl-key .who { font-size: 13px; }
.view-switch { display: flex; justify-content: flex-end; gap: 4px; margin: -4px 0 10px; }
.view-switch button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 10px; cursor: pointer; }
.view-switch button.on { background: var(--p-soft); color: var(--p); }
.view-switch .ic { width: 15px; height: 15px; }
/* Home: the Today card is the one to read first, so it's filled purple */
.card.today { background: #7c4dcc; border-color: #7c4dcc; color: #fff; box-shadow: 0 6px 18px rgba(124, 77, 204, .28); }
.card.today h3, .card.today .who, .card.today .why, .card.today .ic.soft { color: #fff; opacity: 1; }
.card.today .who::before { width: 12px; height: 12px; background: radial-gradient(circle, var(--c) 0 3.5px, #fff 4px); }
.card.today .plain li { border-color: rgba(255, 255, 255, .22); }
/* Appearance: System follows the phone; Light and Dark are fixed choices saved on this phone */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.seg.theme { margin: 4px 0 0; }
/* Account */
.account-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.account-list .btn { justify-content: flex-start; }
.sheet .danger-note { background: var(--warn-soft); color: var(--warn); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.account-list .btn.danger { background: var(--warn-soft); }
/* Quick tour (first run) */
.tour-wrap { position: fixed; inset: 0; z-index: 45; background: rgba(30, 15, 60, .55); display: flex; align-items: center; justify-content: center; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); animation: fade .2s; }
.tour-card { position: relative; display: flex; flex-direction: column; min-height: min(450px, 100%); background: var(--card); border-radius: 26px; width: 100%; max-width: 400px; padding: 28px 22px 20px; text-align: center; box-shadow: 0 20px 60px rgba(40, 10, 90, .35); animation: up .25s ease-out; }
.tour-card h2 { font-size: 22px; margin: 16px 0 8px; }
.tour-card p { color: var(--muted); margin: 0 auto; max-width: 32ch; font-size: 16px; }
.tour-skip { position: absolute; top: 14px; right: 16px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); padding: 6px; cursor: pointer; min-height: 32px; }
.tour-ic { width: 72px; height: 72px; border-radius: 22px; margin: 6px auto 0; display: grid; place-items: center; }
.tour-ic .ic { width: 36px; height: 36px; }
.tour-ic.t-p { background: var(--p-soft); color: var(--p); }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin: 20px 0 16px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--line); transition: width .2s; }
.tour-dots i.on { width: 20px; background: var(--p); }
.tour-nav { display: flex; justify-content: space-between; gap: 10px; }
.tour-nav .btn { min-width: 112px; }
.tour-demo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px auto 0; padding: 12px; border-radius: 16px; background: var(--bg); max-width: 300px; }
.tour-demo.col { flex-direction: column; align-items: stretch; gap: 8px; }
.td-file { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.td-arrow .ic { color: var(--muted); }
.td-list { display: flex; flex-direction: column; gap: 4px; }
.td-list i { display: block; width: 70px; height: 9px; border-radius: 5px; background: var(--p); }
.td-list i.off { width: 40px; background: var(--line); }
.td-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.td-row b { width: 30px; text-align: left; color: var(--muted); }
.td-bar, .td-both { position: relative; flex: 1; height: 12px; border-radius: 6px; background: var(--line); }
.td-bar::after, .td-both::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); border-radius: 6px; }
.td-bar.teal::after { background: var(--ok); } .td-bar.pink::after { background: #d0569a; } .td-bar.p::after { background: var(--p); }
.td-both { background: none; height: 10px; }
.td-both::after { border: 2px dashed #e08a2c; background: rgba(224, 138, 44, .12); }
.td-off { flex: 1; text-align: left; font-weight: 600; color: var(--ok); display: flex; align-items: center; gap: 4px; }
.td-off .ic { width: 16px; height: 16px; }
.tour-card .tour-dots { margin-top: auto; padding-top: 20px; }
.tour-card .tour-demo { align-self: center; width: 100%; box-sizing: border-box; }
/* iOS draws date and time boxes wider than their column and centres the text: keep them inside the grid, left-aligned, same height as the others */
input[type="time"], input[type="date"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; min-width: 0; text-align: left; }
input::-webkit-date-and-time-value { text-align: left; margin: 0; }