/* Dollar Tracker — Home v5 design system (mobile only, light only for now) */
:root {
  color-scheme: light;
  --bg: #FFFDF8;
  --card: #FFFFFF;
  --ink: #111418;
  --sub: #5F6E70;
  --sep: rgba(60, 60, 67, 0.18);
  --hero: #DFE8E4;
  --hero-ink: #18343B;
  --hero-label: #27474E;
  --hero-sub: #36545A;
  --chip: rgba(255, 255, 255, 0.78);
  --chip-label: #3F565B;
  --accent: #214C56;
  --accent-press: #18343B;
  --est: #3D6177;
  --shift: #E3ECE8;
  --seg: #EBE7DE;
  --fill: #FFFDF8;
  --pos: #1F7A4D; --pos-ink: #145C39; --pos-bg: #E3F2E9; --pos-bar: #769B94;
  --neg: #B3261E; --neg-bg: #FBE6E4;
  --amber: #8A5A06; --amber-bg: #FBF1DC;
  --bar: #769B94;
  --shadow: 0 1px 2px rgba(20,30,50,0.04), 0 8px 24px rgba(20,30,50,0.04);
  --shadow-hero: 0 1px 2px rgba(20,30,50,0.04), 0 8px 24px rgba(30,78,149,0.08);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tab-b: max(12px, calc(var(--safe-b) - 14px)); /* tab bar gap from bottom edge */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.4 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--card); padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic { flex: none; vertical-align: middle; }
.nowrap { white-space: nowrap; }

/* ---------- shell: one phone-width column, centred on bigger screens */
main { display: block; max-width: 480px; margin: 0 auto; padding: calc(12px + var(--safe-t)) 16px calc(96px + var(--tab-b)); outline: none; min-width: 0; }
#view > div { display: flex; flex-direction: column; gap: 16px; }

/* ---------- floating tab bar */
.tabbar { position: fixed; left: 50%; transform: translateX(-50%); width: calc(min(480px, 100vw) - 32px); bottom: var(--tab-b); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 28px; background: rgba(255,255,255,0.82); border: 0.5px solid var(--sep); box-shadow: none; z-index: 20; }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0; border-radius: 999px; color: var(--sub); text-decoration: none; font-size: 11px; font-weight: 600; min-height: 50px; }
.tabbar a[aria-current="page"] { background: var(--hero); color: var(--accent-press); }

/* ---------- headers */
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 0 4px; margin-top: 8px; }
.head .eyebrow { font-size: 13px; color: var(--sub); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.head h1, .title-xl { font-size: 34px; font-weight: 700; letter-spacing: 0.005em; line-height: 1.1; }
.head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.head > :not(div) { flex: none; }
.sync-pill { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); background: rgba(255,255,255,0.7); padding: 6px 10px; border-radius: 999px; margin-bottom: 4px; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sub); flex: none; }
.dot.ok { background: #34A65F; } .dot.warn { background: #F0A020; } .dot.bad { background: var(--neg); } .dot.busy { background: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--hero); color: var(--hero-label); border: 0; text-decoration: none; font-size: 15px; font-weight: 600; padding: 0 14px; min-height: 44px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.back { display: inline-flex; align-items: center; gap: 2px; font-size: 17px; text-decoration: none; min-height: 44px; align-self: flex-start; margin-top: 4px; }
.navbar3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
.navbar3 a, .navbar3 button { font-size: 17px; text-decoration: none; min-height: 44px; display: flex; align-items: center; background: none; border: 0; color: var(--accent); padding: 0; cursor: pointer; }
.navbar3 .t { font-size: 17px; font-weight: 600; text-align: center; }
.page-title { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.page-title .eyebrow { font-size: 13px; color: var(--sub); font-weight: 600; letter-spacing: 0.02em; }

/* ---------- segmented tabs */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--seg); border-radius: 9px; padding: 2px; }
.tabs a, .tabs button { border: 0; background: transparent; color: var(--ink); border-radius: 7px; padding: 7px 0; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { background: #FFFFFF; box-shadow: none; }
.tabs.inline { display: inline-grid; }
.tabs.inline button { padding: 6px 16px; }

/* ---------- cards */
.card { background: var(--card); border-radius: 28px; padding: 16px; box-shadow: none; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.card.list-card { padding: 4px 0 4px 16px; gap: 0; }
.card.list-card.pad8 { padding: 8px 0 8px 16px; }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-h.lh { padding: 8px 16px 8px 0; }
.card-h h2, .h2 { font-size: 20px; font-weight: 700; }
.card-h .hint, .hint { font-size: 13px; color: var(--sub); }
.card-title { display: flex; flex-direction: column; gap: 2px; }
.section-label { font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: 0.04em; text-transform: uppercase; }
.section-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 0; gap: 8px; }
.section-row .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hr { height: 0.5px; background: var(--sep); }
.hr.bleed { height: 1px; margin: 0 -16px; }
.note { margin: 0; font-size: 13px; color: var(--sub); line-height: 1.45; }

.hero { background: var(--hero); border-radius: 28px; padding: 20px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; box-shadow: none; color: var(--hero-ink); }
.hero > * { position: relative; }
.hero .circle { position: absolute; right: -70px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,0.28); }
.hero .circle.top { top: -110px; bottom: auto; }
.hero .lab { font-size: 15px; font-weight: 600; color: var(--hero-label); }
.hero .sublab { font-size: 13px; color: var(--hero-sub); }
.hero .big { font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--hero-ink); }
.hero .big.m { font-size: 34px; line-height: 1.15; }
.hero .big small { font-size: 15px; font-weight: 600; color: var(--hero-sub); }
.hero .meta { font-size: 15px; color: var(--hero-sub); }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chip-tag { font-size: 13px; font-weight: 600; color: var(--hero-label); background: var(--chip); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.chip-tag.amber, .tag-amber { color: var(--amber); background: var(--amber-bg); }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chips.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chip { background: var(--chip); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chips.three .chip { padding: 10px 12px; }
.chip .k { font-size: 13px; color: var(--chip-label); }
.chip .v { font-size: 20px; font-weight: 700; color: var(--hero-ink); white-space: nowrap; }
.chips.three .chip .v.s { font-size: 17px; }
.chip .f { font-size: 11px; color: var(--chip-label); }
.chip.plain { background: var(--fill); }
.chip.blue { background: var(--shift); }
.chip.green { background: #E8F4EC; }
.v.save, .save { color: var(--pos); }
.v.est, .est { color: var(--est); }
.pos { color: var(--pos); } .neg { color: var(--neg); } .muted { color: var(--sub); }

.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--seg); color: var(--chip-label); white-space: nowrap; }
.tag.amber { color: var(--amber); background: var(--amber-bg); }
.tag.blue { color: var(--hero-label); background: var(--hero); }
.tag.green { color: var(--pos-ink); background: var(--pos-bg); }

/* ---------- list rows (iOS inset style: separators start after the left padding) */
.li { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 16px 6px 0; border-bottom: 0.5px solid var(--sep); text-decoration: none; color: inherit; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; font: inherit; }
.li:last-child { border-bottom: 0; }
button.li, a.li { cursor: pointer; }
.li .main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.li .t { font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .t.s { font-size: 15px; }
.li .m { font-size: 13px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .amt { font-size: 17px; font-weight: 600; white-space: nowrap; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.li .amt.s { font-size: 15px; }
.li .amt small { font-size: 11px; color: var(--sub); font-weight: 400; }
.li .chev { color: #C4C5C9; font-size: 22px; font-weight: 300; flex: none; }
.datebox { width: 40px; display: flex; flex-direction: column; align-items: center; flex: none; }
.datebox .d { font-size: 11px; color: var(--sub); font-weight: 600; }
.datebox .n { font-size: 20px; font-weight: 700; }
.ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--seg); color: var(--chip-label); font-weight: 700; font-size: 17px; }
.ico.amber { background: var(--amber-bg); color: var(--amber); }
.ico.blue { background: var(--shift); color: var(--hero-label); }
.ico.in { background: var(--pos-bg); color: var(--pos); }
.ico.out { background: var(--neg-bg); color: var(--neg); }
.ico.sm { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }

/* ---------- work day rows */
.day { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 6px 12px 6px 0; border-bottom: 0.5px solid var(--sep); }
.day:last-child { border-bottom: 0; }
.day .datebox.on .d { color: var(--accent); }
.day .datebox.on .n { color: var(--hero-label); }
.day .datebox.today .d, .day .datebox.today .n { color: var(--accent); }
.day .off { flex: 1; font-size: 15px; color: var(--sub); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.day .off a, .day .off button { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.day .blocks { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plus { width: 44px; height: 44px; border-radius: 50%; background: var(--seg); color: var(--sub); display: grid; place-items: center; flex: none; border: 0; cursor: pointer; }
.sblock { display: flex; align-items: center; gap: 12px; background: var(--shift); border-radius: 12px; padding: 9px 14px; min-width: 0; border: 0; width: 100%; text-align: left; color: var(--ink); cursor: pointer; text-decoration: none; }
.sblock .main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sblock .tm { font-size: 15px; font-weight: 600; white-space: nowrap; }
.sblock .m { font-size: 13px; color: var(--chip-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sblock .amt { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.sblock .amt b { font-size: 15px; font-weight: 600; color: var(--est); white-space: nowrap; }
.sblock .amt small { font-size: 11px; color: var(--chip-label); }
.sblock.cancelled { background: var(--fill); }
.sblock.cancelled .tm { text-decoration: line-through; color: var(--sub); }
.weeknav { display: flex; justify-content: space-between; align-items: center; }
.weeknav .c { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.weeknav .c b { font-size: 17px; font-weight: 600; }
.weeknav .c span { font-size: 13px; color: var(--sub); }
.round { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--card); color: var(--accent); display: grid; place-items: center; box-shadow: none; cursor: pointer; }

/* ---------- calendar (Home) */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; row-gap: 6px; }
.cal .dow { font-size: 11px; color: var(--sub); font-weight: 600; }
.cal button { border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--ink); }
.cal .n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; }
.cal .out .n { color: #B4BCBC; }
.cal .hol .n { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal .sel .n { background: var(--seg); font-weight: 600; }
.cal .today .n { background: var(--accent); color: #fff; font-weight: 700; box-shadow: none; }
.cal .mk { width: 18px; height: 4px; border-radius: 2px; display: flex; overflow: hidden; background: transparent; }
.cal .mk > span { display: block; height: 100%; }
.legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--sub); }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 4px; border-radius: 2px; display: inline-block; }
.legend i.dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--accent); background: transparent; }

/* ---------- bar charts (no axes, value on top, date under) */
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; padding-top: 4px; }
.bars.wide { gap: 12px; }
.bcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.bcol .val { font-size: 13px; font-weight: 600; white-space: nowrap; }
.bcol .val.est { color: var(--est); }
.bcol .bar { width: 100%; max-width: 44px; background: var(--bar); border-radius: 8px 8px 3px 3px; display: block; }
.bars.wide .bcol .bar { max-width: 52px; }
.bcol .bar.striped { background: transparent; box-shadow: inset 0 0 0 1.5px var(--est); background-image: repeating-linear-gradient(135deg, rgba(47,92,153,0.10) 0 6px, transparent 6px 12px); }
.bcol .bar.neg { background: #F2B8B3; }
.bcol .lbl { font-size: 13px; white-space: nowrap; }
.bcol .foot { font-size: 11px; font-weight: 600; color: var(--sub); white-space: nowrap; }
.bcol .foot.ok { color: var(--pos); } .bcol .foot.amber { color: var(--amber); }
.hero .bcol .val { color: var(--hero-ink); } .hero .bcol .val.est { color: var(--est); } .hero .bcol .lbl { color: var(--hero-sub); }
.stack { width: 100%; max-width: 48px; display: flex; flex-direction: column; gap: 2px; }
.stack .sv { width: 100%; display: grid; place-items: center; background: var(--pos-bar); border-radius: 8px 8px 0 0; font-size: 11px; font-weight: 700; color: #0E3F26; white-space: nowrap; overflow: visible; }
.stack .sv.neg { background: #F2B8B3; color: #7A1A14; }
.stack .bd { width: 100%; background: #FFFFFF; border-radius: 0 0 3px 3px; }
.stack.est .sv { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pos); background-image: repeating-linear-gradient(135deg, rgba(31,122,77,0.14) 0 6px, transparent 6px 12px); color: var(--pos-ink); }
.stack.est .bd { background: transparent; box-shadow: inset 0 0 0 1.5px #6F91A8; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.7) 0 6px, transparent 6px 12px); }
.hero .legend { color: var(--hero-sub); }

.progress { height: 10px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.kvline { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; }
.kvline b { font-weight: 600; white-space: nowrap; }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: var(--seg); color: var(--accent); padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 17px; cursor: pointer; min-height: 52px; text-decoration: none; }
.btn.primary { background: var(--accent); color: #fff; min-height: 56px; }
.btn.primary:active { background: var(--accent-press); }
.btn.ghost { background: transparent; color: var(--sub); font-size: 15px; min-height: 44px; font-weight: 400; }
.btn.danger { background: var(--neg-bg); color: var(--neg); }
.btn.sm { min-height: 36px; padding: 6px 12px; font-size: 15px; border-radius: 12px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; border: 0; background: var(--seg); cursor: pointer; color: var(--chip-label); flex: none; }
.link-btn { border: 0; background: transparent; font-size: 15px; color: var(--accent); min-height: 44px; padding: 0; cursor: pointer; }

/* ---------- sheets (bottom sheet) */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 18, 0.42); opacity: 0; transition: opacity .18s; }
.sheet { position: relative; background: #FFFFFF; width: 100%; max-width: 480px; max-height: 92vh; border-radius: 28px 28px 0 0; display: flex; flex-direction: column; transform: translateY(24px); opacity: 0; transition: transform .2s ease, opacity .2s; box-shadow: none; }
.sheet-wrap.in .sheet { transform: none; opacity: 1; } .sheet-wrap.in .sheet-backdrop { opacity: 1; }
.sheet-wrap.closing .sheet { transform: translateY(24px); opacity: 0; } .sheet-wrap.closing .sheet-backdrop { opacity: 0; }
.grabber { align-self: center; width: 36px; height: 5px; border-radius: 3px; background: #D5D6DA; margin-top: 10px; flex: none; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 20px 4px; gap: 12px; }
.sheet-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet-head .eyebrow { font-size: 13px; font-weight: 600; color: var(--sub); letter-spacing: 0.02em; text-transform: uppercase; }
.sheet-head h2 { font-size: 28px; font-weight: 700; line-height: 1.15; }
.sheet-body { padding: 12px 20px calc(34px + var(--safe-b)); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 16px; }
body.sheet-open { overflow: hidden; }
.lead { color: var(--chip-label); margin: 0; font-size: 15px; }

/* grouped inputs, iOS style */
.group { display: flex; flex-direction: column; border-radius: 12px; background: var(--fill); padding: 0 0 0 14px; }
.group > label, .group > .grow { display: flex; align-items: center; gap: 12px; min-height: 52px; padding-right: 14px; border-bottom: 0.5px solid var(--sep); font-size: 17px; }
.group > :last-child { border-bottom: 0; }
.group .lab { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.group .lab small { font-size: 13px; color: var(--sub); }
.group .cur { color: var(--sub); }
.group input.money { width: 110px; border: 0; background: transparent; font-size: 17px; font-weight: 600; text-align: right; padding: 0; min-height: 0; }
.group input[type=time] { border: 0; background: var(--seg); border-radius: 8px; padding: 6px 10px; font-size: 17px; min-height: 0; width: auto; }
.group input[type=date], .group select { border: 0; background: transparent; font-size: 17px; color: var(--accent); text-align: right; padding: 0; min-height: 0; width: auto; max-width: 60%; }
.group > label { flex-wrap: wrap; }
.group .err { flex-basis: 100%; padding-bottom: 8px; }
.switch { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 999px; background: #E7E1D6; position: relative; cursor: pointer; flex: none; margin: 0; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: none; transition: transform .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); }
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pick { min-height: 64px; border-radius: 12px; border: 0; background: var(--fill); color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 14px; cursor: pointer; text-align: left; }
.pick b { font-size: 17px; font-weight: 600; }
.pick span { font-size: 13px; color: var(--sub); }
.pick[aria-pressed="true"] { background: var(--hero); box-shadow: inset 0 0 0 2px var(--accent); color: var(--hero-ink); }
.pick[aria-pressed="true"] span { color: var(--hero-sub); }
.est-box { background: var(--shift); border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.est-box .l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.est-box .l b { font-size: 17px; font-weight: 600; }
.est-box .l span { font-size: 13px; color: var(--chip-label); }
.est-box .r { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.est-box .r b { font-size: 17px; font-weight: 600; color: var(--est); white-space: nowrap; }
.est-box .r small { font-size: 11px; color: var(--chip-label); }
.status-box { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 12px 14px; background: var(--pos-bg); }
.status-box .circ { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--pos); display: grid; place-items: center; flex: none; }
.status-box b { font-size: 15px; font-weight: 600; color: var(--pos-ink); display: block; }
.status-box span { font-size: 13px; color: #2E6B4A; }
.status-box.amber { background: var(--amber-bg); } .status-box.amber .circ { color: var(--amber); } .status-box.amber b { color: var(--amber); } .status-box.amber span { color: #6E4A0A; }
.status-box.neutral { background: var(--fill); } .status-box.neutral .circ { color: var(--sub); } .status-box.neutral b { color: var(--ink); } .status-box.neutral span { color: var(--sub); }
.stack-btns { display: flex; flex-direction: column; gap: 10px; }
.fy-box { background: var(--fill); }
.fy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fy-cell { display: flex; flex-direction: column; gap: 2px; background: var(--card); border-radius: 12px; padding: 8px 10px; }
.fy-cell .k { font-size: 12px; color: var(--sub); }
.fy-cell .v { font-size: 15px; font-weight: 700; }

/* ---------- legacy forms & pages (settings sub-pages, older sheets) in the new style */
form .fields { display: grid; gap: 12px; }
.fields.pair { grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .field > .label { font-size: 13px; font-weight: 600; color: var(--chip-label); }
.field .help { font-size: 12px; color: var(--sub); }
.err { font-size: 13px; color: var(--neg); margin: 0; }
input[type=text], input[type=number], input[type=date], input[type=time], input[type=email], input[type=search], select, textarea { width: 100%; border: 0; background: var(--fill); border-radius: 12px; padding: 10px 12px; min-height: 48px; font-size: 17px; }
textarea { min-height: 72px; resize: vertical; }
input[aria-invalid] { box-shadow: inset 0 0 0 1.5px var(--neg); }
.money-input { position: relative; }
.money-input span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sub); font-size: 17px; }
.money-input input { padding-left: 38px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.form-actions .btn { min-height: 48px; font-size: 16px; }
.form-actions .left { margin-right: auto; }
.legend-title { font-size: 13px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 0; }
.seg { display: inline-flex; background: var(--seg); border-radius: 9px; padding: 2px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button, .seg a { border: 0; background: transparent; padding: 6px 14px; border-radius: 7px; font-weight: 600; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none; }
.seg [aria-selected="true"], .seg [aria-current="page"] { background: #fff; box-shadow: none; }
.tabs-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 4px; flex-wrap: wrap; }
.page-head h1 { font-size: 34px; font-weight: 700; line-height: 1.1; }
.page-head .sub { font-size: 15px; margin-top: 2px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.head-actions .btn { min-height: 40px; font-size: 15px; padding: 6px 14px; }
.sync-mobile { display: none; }
.grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.grid > * { min-width: 0; }
.card.flat { box-shadow: none; }
.card h2 { font-size: 20px; font-weight: 700; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.stat .label { font-size: 13px; color: var(--sub); }
.stat .value { font-size: 24px; font-weight: 700; }
.stat .foot { font-size: 13px; color: var(--sub); }
.notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--amber-bg); font-size: 15px; }
.notice.info { background: var(--shift); }
.notice .ic { color: var(--amber); margin-top: 1px; } .notice.info .ic { color: var(--accent); }
.empty { text-align: center; color: var(--sub); padding: 24px 12px; font-size: 15px; }
.empty strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.list { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid var(--sep); min-height: 56px; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; cursor: pointer; color: inherit; text-decoration: none; font: inherit; }
.row:last-child { border-bottom: 0; }
.row .main { flex: 1; min-width: 0; }
.row .title { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta { font-size: 13px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .amt { font-weight: 600; text-align: right; white-space: nowrap; }
.badge-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--seg); color: var(--chip-label); flex: none; font-size: 15px; font-weight: 700; }
.badge-ic.income { background: var(--pos-bg); color: var(--pos); }
.badge-ic.expense { background: var(--neg-bg); color: var(--neg); }
.badge-ic.transfer, .badge-ic.shift { background: var(--shift); color: var(--hero-label); }
.badge-ic.due { background: var(--amber-bg); color: var(--amber); }
.group-label { font-size: 13px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 0; }
.breakdown { width: 100%; border-collapse: collapse; font-size: 14px; }
.breakdown td, .breakdown th { padding: 8px 4px; border-bottom: 0.5px solid var(--sep); text-align: left; vertical-align: top; }
.breakdown th { font-size: 12px; color: var(--sub); font-weight: 600; }
.breakdown td.r, .breakdown th.r { text-align: right; white-space: nowrap; }
.breakdown tfoot td { font-weight: 700; border-bottom: 0; }
.breakdown .ref { display: block; font-size: 12px; color: var(--sub); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 9px 8px; border-bottom: 0.5px solid var(--sep); text-align: left; white-space: nowrap; }
table.data th { font-size: 12px; color: var(--sub); font-weight: 600; }
table.data td.r, table.data th.r { text-align: right; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 15px; margin: 0; }
.kv dt { color: var(--sub); } .kv dd { margin: 0; text-align: right; font-weight: 600; }
.split { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.hstack { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
details.more summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 15px; padding: 6px 0; }
.mt { margin-top: 12px; }
.small { font-size: 13px; }

/* ---------- toast */
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + var(--tab-b)); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 15px; font-weight: 600; box-shadow: none; transition: opacity .3s, transform .3s; }
.toast.bad { background: var(--neg); }
.toast.out { opacity: 0; transform: translateY(8px); }

@media print {
  .tabbar, #sheets, #toasts, .no-print, .back { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .card, .hero { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
#view > div > .mt { margin-top: 0; }
.head + .tabs { margin-top: -4px; }
.hero.li, .card.li { flex-direction: row; align-items: center; }
.chips.three .chip .k { font-size: 12px; white-space: nowrap; }
.card.li { background: var(--card); }
.hero.li { background: var(--hero); }

/* ---------- Finance overview: this week, one horizontal bar (true proportions) */
.est-tag { font-size: 12px; font-weight: 700; color: var(--est); background: rgba(255,255,255,0.85); border-radius: 999px; padding: 3px 9px; vertical-align: 8px; letter-spacing: 0; }
.tw-track { display: flex; height: 36px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.45); }
.tw-b { background: #FFFFFF; }
.tw-s { background: var(--pos-bar); box-shadow: none; }
.tw-short { background: repeating-linear-gradient(135deg, rgba(179,38,30,0.14) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1.5px #E39A94; border-radius: 0 12px 12px 0; }
.tw-track.striped .tw-b { background: repeating-linear-gradient(135deg, #FFFFFF 0 6px, #E3ECE8 6px 12px); }
.tw-track.striped .tw-s { background: repeating-linear-gradient(135deg, var(--pos-bar) 0 6px, #A9C4BE 6px 12px); }
.tw-keys { display: flex; justify-content: space-between; gap: 12px; margin-top: -4px; }
.tw-keys > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tw-keys .k { font-size: 13px; color: var(--hero-sub); }
.tw-keys b { font-size: 17px; font-weight: 700; color: var(--hero-ink); white-space: nowrap; }
.tw-keys b small { font-size: 13px; font-weight: 600; color: var(--hero-sub); }
.tw-keys .r { text-align: right; }
.tw-keys .pos .k, .tw-keys .pos b { color: var(--pos); }
.tw-keys .neg .k, .tw-keys .neg b { color: var(--neg); }
.tw-cmp { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--hero-sub); border-top: 1px solid rgba(30,78,149,0.15); padding-top: 10px; }
.tw-cmp b { white-space: nowrap; } .tw-cmp b.pos { color: var(--pos); } .tw-cmp b.neg { color: var(--neg); }

/* ---------- Savings chart: green */
.bcol .val.pos-ink { color: var(--pos-ink); }
.bcol .bar.sav { background: var(--pos-bar); border-radius: 10px 10px 4px 4px; }
.bcol .bar.sav.striped { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pos); background-image: repeating-linear-gradient(135deg, rgba(31,122,77,0.20) 0 6px, transparent 6px 12px); }
.bcol .bar.sav.neg { background: #F2B8B3; }
.bcol .bar.sav.striped.neg { background: transparent; box-shadow: inset 0 0 0 1.5px #E39A94; background-image: repeating-linear-gradient(135deg, rgba(179,38,30,0.14) 0 6px, transparent 6px 12px); }

/* =========================================================================
   iOS 26-style pass (v4): glass bars & controls, rounder corners
   ========================================================================= */
body { background: var(--bg); }
.card { border-radius: 28px; background: rgba(255,255,255,0.82); box-shadow: none; }
.hero { border-radius: 28px; box-shadow: none; }
.hero .chip { border-radius: 12px; background: rgba(255,255,255,0.62); box-shadow: none; }
/* Tab bar: glass pill. Slightly more opaque than iOS so labels stay readable over busy content. */
.tabbar { border-radius: 999px; padding: 5px; background: #F6F3EB; border: 0.5px solid rgba(255,255,255,0.8); box-shadow: none; }
.tabbar a { border-radius: 999px; min-height: 52px; }
.tabbar a[aria-current="page"] { background: rgba(255,255,255,0.78); box-shadow: none; color: var(--accent); }
.sync-pill, .pill-btn { background: #F6F3EB; border: 0.5px solid rgba(255,255,255,0.8); box-shadow: none; }
.pill-btn { color: var(--accent); }
.seg, .tabs { border-radius: 999px; background: rgba(118,118,128,0.10); padding: 3px; box-shadow: inset 0 0 0 0.5px rgba(20,30,50,0.05); }
.seg button, .seg a, .tabs a, .tabs button { border-radius: 999px; }
.seg [aria-selected="true"], .seg [aria-current="page"], .tabs [aria-selected="true"], .tabs [aria-current="page"] { background: rgba(255,255,255,0.95); box-shadow: none; }

/* ---------- To do (Home) */
.todo-card { background: var(--amber-bg); padding: 8px 0 8px 16px; }
.todo-card .card-h { padding: 8px 16px 8px 0; }
.todo-card .card-h h2 { color: var(--amber); }
.todo-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--amber); color: #FFFFFF; font-size: 13px; font-weight: 700; }
.todo-card .li { border-bottom: 0.5px solid rgba(138,90,6,0.18); }

/* ---------- Coming Up (grouped, icon per type) */
.cu-card { padding: 16px 14px 12px; gap: 0; }
.cu-card .card-h { padding: 2px 4px 2px; }
.cu-day { font-size: 12px; font-weight: 700; color: var(--sub); letter-spacing: 0.04em; text-transform: uppercase; margin: 14px 6px 6px; }
.cu-grp { background: rgba(118,118,128,0.06); border-radius: 12px; overflow: hidden; }
.cu-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; background: none; border: 0; text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer; min-height: 60px; }
.cu-row + .cu-row::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; border-top: 0.5px solid var(--sep); }
.cu-row:active { background: rgba(118,118,128,0.10); }
.cu-ic { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.i-shift { background: #DFE8E4; color: #214C56; } .i-rent { background: #FDEBD7; color: #C9711A; } .i-joint { background: #FCE4EC; color: #C2416B; }
.i-phone { background: #E0F2F1; color: #1F8A7D; } .i-subs { background: #EDF2F5; color: #3D6177; } .i-fit { background: #E3F2E9; color: #1F7A4D; }
.i-plan { background: #FFF3C4; color: #9A6B00; } .i-rep { background: #EBE7DE; color: #5F6E70; }
.cu-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cu-main .t { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-main .m { font-size: 13px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-amt { font-size: 16px; font-weight: 700; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cu-amt.inc { color: var(--est); }
.cu-est { font-size: 10.5px; font-weight: 700; color: var(--est); background: #E3ECE8; border-radius: 999px; padding: 2px 7px; }

/* ---------- 8-week charts (Work · Pay, Finance · Overview, Finance · Savings) — one component, see views/common.js weekChart */
.wc { gap: 14px; padding: 16px; position: relative; overflow: hidden; }
.wc-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.wc-h > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wc-h h2 { margin: 0; font-size: 20px; font-weight: 700; }
.wc-h .sub { font-size: 13px; color: var(--sub); }
.wc-tog { display: flex; background: #EBE7DE; border-radius: 9px; padding: 2px; flex: none; }
.wc-tog button { border: 0; font: inherit; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 7px; cursor: pointer; background: transparent; color: #3F565B; min-height: 30px; }
.wc-tog button[aria-pressed="true"] { background: #fff; box-shadow: none; color: var(--ink); }
.wc-block { position: relative; height: 244px; }
.wc-avg { position: absolute; left: 0; top: 0; height: 84px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.wc-avg .cap, .wc-call .cap { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--sub); }
.wc-avg > div { display: flex; align-items: baseline; gap: 8px; }
.wc-avg .big { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.wc-avg .unit { font-size: 15px; font-weight: 600; color: var(--sub); }
.wc-avg .rng { font-size: 13px; color: var(--sub); }
.wc-call { position: absolute; top: 0; width: 186px; height: 76px; box-sizing: border-box; padding: 8px 12px; border-radius: 12px; display: flex; flex-direction: column; justify-content: space-between; background: #EBE7DE; box-shadow: none; }
.wc-call-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--sub); white-space: nowrap; }
.wc-esttag { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--est); background: #E3ECE8; padding: 1px 7px; border-radius: 999px; }
.wc-call-big { font-size: 22px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.wc-call-small { font-size: 12px; color: var(--sub); white-space: nowrap; }
.wc-leader { position: absolute; width: 1.5px; background: #B4BCBC; }
.wc-plot { position: absolute; left: 0; right: 0; top: 84px; height: 160px; }
.wc-avgline { position: absolute; left: 0; right: 0; border-top: 1.5px dashed #C7C9CF; pointer-events: none; }
.wc-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.wc-col { border: 0; padding: 0; margin: 0; background: transparent; font: inherit; cursor: pointer; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 2px; height: 100%; min-width: 0; }
.wc-seg { width: 100%; display: block; flex: none; }
.wc-lbls { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; text-align: center; }
.wc-lbls span { font-size: 11px; color: var(--sub); }
.wc-lbls span.sel { font-weight: 700; color: var(--ink); }
.wc-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: 12px; color: #3F565B; }
.wc-legend span { display: flex; align-items: center; gap: 5px; }
.wc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.wc-legend i.est { box-shadow: inset 0 0 0 1.5px #1F7A4D; background-image: repeating-linear-gradient(135deg, rgba(31,122,77,0.35) 0 2px, transparent 2px 4px); }
.wc-foot { font-size: 13px; color: var(--sub); line-height: 1.45; }
.wc-foot.c { text-align: center; font-size: 12px; }
.cu-card .note { padding: 10px 6px 2px; }

/* =========================================================================
   v6 — Float: no-zoom, Week review, payslip form, bills bar, Big spending, overflow guards
   ========================================================================= */

/* ---------- never zoom: ≥16px fields (iOS zooms into anything smaller) + no double-tap zoom */
html, body, button, a, input, select, textarea, label, .card { touch-action: manipulation; }
input, select, textarea { font-size: 16px; }
.li .main, .cu-main, .bp-n, .rv-l { min-width: 0; }
.kvline > span { min-width: 0; overflow-wrap: anywhere; }
.card, .hero, section { max-width: 100%; }
.card .h2, .card-h h2 { overflow-wrap: anywhere; }

/* ---------- budget colour #A6A386 everywhere; savings green stays */
:root { --budget: #A6A386; --budget-ink: #8E8A5B; }
.fbar .seg { padding: 0; box-shadow: none; }
.fbar .seg.bud { background: var(--budget); }
.fbar.est .seg.bud { background: transparent; box-shadow: inset 0 0 0 1.5px #A9A57B; background-image: repeating-linear-gradient(135deg, rgba(197,194,162,0.85) 0 5px, transparent 5px 10px); }
.fin-legend .sw.bud { background: var(--budget); }

/* ---------- Home · To do (one weekly row) */
.todo-card .card-h { justify-content: flex-start; align-items: center; gap: 8px; padding: 8px 16px 4px 0; }
.todo-card .card-h h2 { font-size: 15px; }
.todo-card .li { border-bottom: 0; }
.todo-card .li .m { color: var(--amber); opacity: .8; }

/* ---------- payslip form: filled fields are prominent blue boxes */
.group.pf input.money, .group.pf input.date, .pf input.money, .pf input.date { width: 112px; border: 1px solid rgba(60,60,67,0.2); background: #FFFFFF; border-radius: 10px; font-size: 17px; font-weight: 600; text-align: right; color: var(--ink); padding: 8px 10px; min-height: 0; max-width: none; }
.pf input.date { width: 150px; color: var(--ink); }
.pf input.filled { border: 1.5px solid var(--accent); background: #E3ECE8; color: #27474E; font-weight: 700; }
.pf input::placeholder { color: #B0B3B9; font-weight: 500; }
.pf-card { padding: 0 0 0 16px; gap: 0; }
.pf-card .group { background: transparent; padding: 0; border-radius: 0; }
.pf-card .group.pf input.money, .pf-card .group.pf input.date { background: var(--fill); }
.pf-card .group.pf input.filled { background: #E3ECE8; }
.pf .cur { color: var(--sub); }

/* ---------- our estimate (Gross / Tax / Net — always together) */
.est-card { background: var(--shift); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.est-card .eh1 { display: flex; flex-direction: column; gap: 2px; }
.est-card .eh1 b { font-size: 15px; font-weight: 600; }
.est-card .eh1 span { font-size: 13px; color: var(--chip-label); }
.est-card .eg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.est-card .eg div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.est-card .eg span { font-size: 13px; color: var(--chip-label); }
.est-card .eg b { font-size: 17px; font-weight: 600; color: var(--est); white-space: nowrap; }
.est-card.rows { gap: 0; padding-bottom: 4px; }
.est-card.rows .eh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 6px; border-bottom: 0.5px solid rgba(47,92,153,0.18); }
.est-card.rows .eh b { font-size: 15px; font-weight: 600; } .est-card.rows .eh b small { font-size: 11px; font-weight: 400; color: var(--chip-label); }
.est-card.rows .eh span { font-size: 13px; color: var(--chip-label); }
.est-card.rows .er { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 0.5px solid rgba(47,92,153,0.18); }
.est-card.rows .er:last-child { border-bottom: 0; }
.est-card.rows .er span { font-size: 15px; color: #36545A; }
.est-card.rows .er b { font-size: 17px; font-weight: 600; color: var(--est); white-space: nowrap; }
.status-box.plain { background: var(--seg); } .status-box.plain span { font-size: 15px; color: var(--chip-label); }
.status-box > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.status-box > span:last-child > span { overflow-wrap: anywhere; }

/* ---------- FY so far (inside Add payslip) */
.fy-box { background: var(--fill); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.fy-title { font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: 0.02em; text-transform: uppercase; }
.fy-warn { display: flex; align-items: center; gap: 8px; color: #B8790A; padding-top: 2px; }
.fy-warn span { font-size: 13px; color: #8A5A06; }

/* ---------- Week review */
.rv-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 4px 0; }
.rv-sec h2 { font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: 0.04em; }
.rv-sec span { font-size: 13px; color: var(--sub); }
.rv-list { padding: 0 0 0 16px; }
.rv-row { display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 8px 16px 8px 0; width: 100%; border: 0; border-bottom: 0.5px solid var(--sep); background: none; text-align: left; cursor: pointer; color: var(--ink); }
.rv-row:last-child { border-bottom: 0; }
.rv-l { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rv-d { font-size: 16px; font-weight: 600; white-space: nowrap; }
.rv-m { font-size: 13px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rv-t { font-size: 16px; font-weight: 600; white-space: nowrap; }
.rv-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #3F565B; background: var(--seg); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.rv-pill.done { color: #27474E; background: #E3ECE8; }
.rv-all { width: 100%; }
.rv-hint { font-size: 13px; color: var(--sub); text-align: center; }
.rv-ok { display: flex; align-items: center; gap: 10px; padding: 0 4px; font-size: 15px; color: #27474E; font-weight: 600; }

/* ---------- Where bills go (Option A: one 100% stacked bar + legend) */
.bills-card { gap: 12px; }
.bills-total { font-size: 34px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); text-decoration: none; display: flex; justify-content: space-between; align-items: center; }
.bills-total span { color: var(--accent); font-size: 22px; font-weight: 300; }
.bills-bar { display: flex; gap: 2px; height: 22px; border-radius: 8px; overflow: hidden; }
.bills-bar span { height: 100%; min-width: 3px; }
.bills-legend { display: flex; flex-direction: column; gap: 2px; }
.bills-legend > div { display: flex; align-items: center; gap: 8px; font-size: 15px; min-height: 28px; }
.bills-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bills-legend .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bills-legend .p { color: var(--sub); font-size: 13px; white-space: nowrap; }
.bills-legend b { font-weight: 600; min-width: 74px; text-align: right; white-space: nowrap; }

/* ---------- Big spending · plan (By item / Timeline) — mirrors canvas BigSpendingPlan / BigSpendingTimeline exactly */
.bpx-pill, .tlx-s, .bpx-gs, .bpx-sec span, .bpx-fn, .bpx-note, .bpx-a { line-height: normal; }
.bpx-note { line-height: 1.45; }
#view > div:has(> .bpx-top) { gap: 16px; }
.bpx-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-top: 4px; }
.bpx-back { display: flex; align-items: center; gap: 2px; font-size: 17px; text-decoration: none; min-height: 44px; }
.bpx-acts { display: flex; gap: 4px; } .bpx-act { border: 0; background: transparent; font-size: 15px; color: var(--accent); min-height: 44px; padding: 0 8px; cursor: pointer; }
.bpx-h1 { margin: 0; padding: 0 4px; font-size: 34px; font-weight: 700; letter-spacing: 0.005em; line-height: 1.1; overflow-wrap: anywhere; }
.bpx-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(60,60,67,0.08); }
.bpx-seg button { border: 0; background: transparent; padding: 9px 0; border-radius: 999px; font-size: 15px; font-weight: 600; min-height: 20px; color: var(--sub); cursor: pointer; text-align: center; box-sizing: content-box; }
.bpx-seg button[aria-selected="true"] { background: #FFFFFF; color: var(--ink); box-shadow: none; }
.bpx-card { background: var(--card); border-radius: 28px; box-shadow: none; padding: 16px 0 4px 16px; display: flex; flex-direction: column; min-width: 0; }
.bpx-gh { padding-right: 16px; display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.bpx-gt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bpx-gt.inline { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; }
.bpx-gn { font-size: 17px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; } .bpx-gs { font-size: 13px; color: var(--sub); }
.bpx-gt.inline .bpx-gs { white-space: nowrap; flex: none; }
.bpx-prog { height: 8px; border-radius: 999px; background: #E3ECE8; overflow: hidden; }
.bpx-prog span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bpx-row { display: flex; align-items: center; gap: 10px; min-height: 56px; width: 100%; padding: 0 16px 0 0; border: 0; border-bottom: 0.5px solid var(--sep); background: none; text-align: left; color: var(--ink); cursor: pointer; }
.bpx-row:last-child { border-bottom: 0; }
.bpx-n { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bpx-a { font-size: 16px; font-weight: 600; white-space: nowrap; flex: none; text-align: right; }
.bpx-a.pos { color: var(--pos); } .bpx-a.none { font-size: 13px; font-weight: 400; color: var(--sub); }
.bpx-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex: none; }
.bpx-pill.paid { color: #27474E; background: #E3ECE8; } .bpx-pill.add { color: var(--amber); background: var(--amber-bg); } .bpx-pill.due { color: #3F565B; background: var(--seg); } .bpx-pill.ref { color: var(--pos-ink); background: var(--pos-bg); }
.bpx-sec { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 4px 0; gap: 8px; }
.bpx-sec h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: 0.04em; } .bpx-sec span { font-size: 13px; color: var(--sub); text-align: right; }
.bpx-note { margin: 0; padding: 0 4px; font-size: 13px; color: var(--sub); line-height: 1.45; }
.tlx-r { display: flex; gap: 12px; align-items: stretch; }
.tlx-rail { width: 20px; display: flex; flex-direction: column; align-items: center; flex: none; }
.tlx-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 22px; flex: none; box-sizing: border-box; }
.tlx-dot.open { background: #FFFFFF; border: 2px solid #C9A25A; } .tlx-dot.paid { background: var(--accent); } .tlx-dot.ref { background: var(--pos); }
.tlx-line { width: 2px; flex: 1; background: #DFE8E4; } .tlx-line.open { background: #EADFC6; }
.tlx-card { flex: 1; min-width: 0; background: var(--card); box-shadow: none; border: 0; border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; text-align: left; color: var(--ink); cursor: pointer; }
.tlx-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tlx-body .bpx-pill { align-self: flex-start; margin-top: 4px; }
.tlx-t { font-size: 16px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tlx-s { font-size: 13px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.bpx-fund { background: var(--card); border-radius: 28px; box-shadow: none; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bpx-fl { font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: 0.04em; }
.bpx-fh { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -12px 0 -12px; }
.bpx-fm { border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 600; min-height: 44px; padding: 0 0 0 16px; margin-right: -4px; cursor: pointer; }
.bpx-kv { line-height: 1.2; display: flex; justify-content: space-between; gap: 8px; font-size: 17px; } .bpx-kv span { min-width: 0; overflow-wrap: anywhere; } .bpx-kv b { font-weight: 600; white-space: nowrap; }
.bpx-fn { font-size: 13px; color: var(--sub); }
.bpx-link { border: 0; background: none; color: var(--accent); font-size: 15px; min-height: 44px; padding: 0; text-align: left; cursor: pointer; }
.bpx-frow { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 1px; align-items: center; width: 100%; padding: 10px 0; border: 0; border-top: 0.5px solid var(--sep); background: none; text-align: left; color: var(--ink); cursor: pointer; min-height: 52px; }
.bpx-frow .fn { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } .bpx-frow .fm { grid-column: 1; font-size: 13px; color: var(--sub); } .bpx-frow b { grid-row: 1 / span 2; grid-column: 2; font-size: 16px; white-space: nowrap; }

/* ---------- iOS 26 touches: glass sheets, softer grouped fields */
.sheet { background: #FFFDF8; border-radius: 28px 32px 0 0; box-shadow: none; }
.sheet .group { border-radius: 12px; }
.est-card, .fy-box, .status-box { border-radius: 12px; }
.btn.primary { box-shadow: none; }
.group.pf input.filled { border: 1.5px solid var(--accent); background: #E3ECE8; color: #27474E; font-weight: 700; }

/* =========================================================================
   v8 — net-first figures, estimate states, shared chart, payslip list
   ========================================================================= */
.hero-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hero-duo > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hero-duo .k { font-size: 13px; color: var(--chip-label); }
.hero-duo .v { font-size: 17px; font-weight: 600; color: var(--hero-ink); white-space: nowrap; }
.hero-duo .v.est { color: var(--est); }
.lw-box { background: #E3ECE8; border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; align-items: end; }
.lw-box > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lw-box .k { font-size: 13px; color: var(--chip-label); }
.lw-box .v { font-size: 17px; font-weight: 600; color: var(--hero-ink); white-space: nowrap; }
.lw-box .lw-net .v { font-size: 22px; font-weight: 700; }
.lw-box .v.est { color: var(--est); }
.lw-box .lw-net .v.est { color: var(--hero-label); }
.est-note { font-size: 11px; color: var(--sub); }
.ps-row .t { font-size: 17px; font-weight: 600; }
.ps-row .amt { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.ps-row .amt .n { font-size: 17px; font-weight: 600; }
.ps-row .amt small { font-size: 12px; color: var(--sub); white-space: nowrap; }
.li.see-all { color: var(--accent); font-size: 15px; font-weight: 600; text-decoration: none; justify-content: flex-start; gap: 4px; border-bottom: 0; }
.cu2-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px 0 0; border: 0; border-bottom: 0.5px solid var(--sep); background: none; font: inherit; color: inherit; text-align: left; width: 100%; text-decoration: none; cursor: pointer; }
.cu2-row:last-of-type { border-bottom: 0; }
.cu2-d { width: 40px; display: flex; flex-direction: column; align-items: center; flex: none; }
.cu2-d .d { font-size: 11px; font-weight: 600; color: var(--sub); }
.cu2-d .n { font-size: 20px; font-weight: 700; }
.cu2-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cu2-main .t { font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu2-main .m { font-size: 13px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu2-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.cu2-amt .v { font-size: 17px; font-weight: 600; white-space: nowrap; }
.cu2-amt.est .v { color: var(--est); }
.cu2-amt .e { font-size: 11px; color: var(--sub); }

/* Finance overview: Where bills go (inside-card link), Move your pay */
.bills-card, .mv { gap: 14px; padding: 16px; }
.bills-total.big { display: block; }
.big-link { display: flex; justify-content: space-between; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); }
.big-link > span { display: flex; flex-direction: column; gap: 2px; }
.big-link b { font-size: 15px; font-weight: 600; }
.big-link span span { font-size: 13px; color: var(--sub); }
.big-link i { color: var(--accent); font-size: 22px; font-weight: 300; font-style: normal; }
.mv-net { background: #E3ECE8; border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mv-net .l { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #3F565B; }
.mv-net .r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mv-net .r b { font-size: 26px; font-weight: 700; color: var(--est); white-space: nowrap; }
.mv-net .r small { font-size: 11px; color: var(--pos); }
.mv-bar { display: flex; gap: 2px; height: 22px; border-radius: 8px; overflow: hidden; }
.mv-bar span { height: 100%; min-width: 3px; }
.mv-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; border-bottom: 0.5px solid var(--sep); }
.mv-row.last { border-bottom: 0; }
.mv-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.mv-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mv-t .t { font-size: 17px; font-weight: 600; }
.mv-t .m { font-size: 13px; color: var(--sub); line-height: 1.35; }
.mv-a { display: flex; align-items: center; gap: 8px; flex: none; }
.mv-a b { font-size: 17px; font-weight: 600; white-space: nowrap; }
.mv-a b.pos { color: var(--pos); }
.mv-a i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mv-done { display: flex; justify-content: space-between; align-items: center; min-height: 28px; gap: 8px; }
.mv-done .g { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--pos); font-weight: 600; }
.mv-done b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.mv-done.short span { font-size: 15px; font-weight: 600; color: var(--amber); }
.mv-note { margin: 0; font-size: 13px; color: var(--sub); line-height: 1.45; }
.cu-card { padding: 8px 0 8px 16px; }
.cu-card .card-h { padding: 8px 16px 8px 0; }
.cu-card .note { padding: 10px 16px 6px 0; }

/* ---------- Big spending: the UTS plan is the one purple thing in the app (card #E4ECF1, bar #6F8FA8) */
.bp-menu { background: #E4ECF1; border-radius: 28px; padding: 16px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: #18343B; box-shadow: none; }
.bp-menu .ic { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,0.78); color: #6F8FA8; display: grid; place-items: center; flex: none; }
.bp-menu .main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-menu .t { font-size: 17px; font-weight: 600; } .bp-menu .m { font-size: 13px; color: #3D6177; }
.bp-menu .chev { color: #6F8FA8; font-size: 22px; font-weight: 300; }
.ys-card { background: #EADCCC; }
.bp-hero { background: #E4ECF1; border-radius: 28px; padding: 20px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; text-decoration: none; color: #18343B; box-shadow: none; }
.bp-hero > * { position: relative; }
.bp-circle { display: none; position: absolute !important; right: -70px; top: -110px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,0.28); }
.bp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bp-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-name b { font-size: 20px; font-weight: 700; color: #18343B; overflow-wrap: anywhere; }
.bp-name span { font-size: 13px; color: #3D6177; }
.bp-chip { font-size: 13px; font-weight: 600; color: #214C56; background: rgba(255,255,255,0.78); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.bp-prog { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.78); overflow: hidden; }
.bp-prog span { display: block; height: 100%; background: #6F8FA8; border-radius: 999px; }
.bp-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bp-chips > div { background: rgba(255,255,255,0.78); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bp-chips .k { font-size: 13px; color: #3D6177; } .bp-chips .v { font-size: 17px; font-weight: 700; color: #18343B; white-space: nowrap; }
.bp-more { align-self: center; font-size: 15px; font-weight: 600; color: #214C56; min-height: 28px; display: flex; align-items: center; }
.bpx-prog { background: #EDF2F5; } .bpx-prog span { background: #6F8FA8; }
.bpx-pill.paid { color: #214C56; background: #E4ECF1; }
.tlx-dot.paid { background: #6F8FA8; } .tlx-line { background: #C9DBE6; } .tlx-line.open { background: #EADFC6; }
.bpx-next { background: var(--card); border-radius: 28px; box-shadow: none; padding: 16px 0 8px 16px; display: flex; flex-direction: column; gap: 4px; }
.bpx-nrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 4px 16px 4px 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.bpx-nrow + .bpx-nrow { border-top: 0.5px solid var(--sep); }
.bpx-nt { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================================
   Design v2 (Oct 2026): warm teal palette, thin borders, no shadows, no glass,
   no gradients (striped estimate bars + calendar grid lines only).
   Round 1 = colours, cards, hero, tab bar, controls. Later rounds replace the
   remaining hard-coded old colours page by page.
   ========================================================================= */
:root {
  --bg: #FFFDF8; --card: #FBF8F1; --line: #E7E1D6;
  --ink: #18343B; --sub: #5F6E70; --sep: #E7E1D6;
  --accent: #214C56; --accent-press: #18343B;
  --hero: #DFE8E4; --hero-ink: #18343B; --hero-label: #27474E; --hero-sub: #36545A; --chip-label: #3F565B;
  --est: #3D6177; --shift: #E3ECE8; --seg: #EBE7DE; --fill: #FBF8F1; --bar: #769B94;
  --amber: #6D4915; --amber-bg: #FBECC6;
  --shadow: none; --shadow-hero: none;
}
body { background: var(--bg); background-image: none; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 28px; box-shadow: none; }
.hero { border: 1px solid #CDDCD6; border-radius: 28px; box-shadow: none; }
.hero .circle { display: none; }
.hero .chip { border-radius: 12px; background: rgba(255,255,255,0.62); box-shadow: none; }
.tabbar { gap: 2px; padding: 5px; border-radius: 999px; background: #F6F3EB; border: 1px solid var(--line); box-shadow: none; }
.tabbar a { color: #4F6266; border-radius: 999px; }
.tabbar a[aria-current="page"] { background: #EDF2EE; color: var(--accent); box-shadow: none; }
.sync-pill, .pill-btn { background: var(--card); border: 1px solid var(--line); box-shadow: none; }
.pill-btn { color: var(--accent); }
.seg, .tabs { background: var(--seg); box-shadow: none; }
.tabs [aria-selected="true"], .tabs [aria-current="page"], .seg [aria-pressed="true"], .seg [aria-selected="true"] { background: var(--bg); box-shadow: none; color: var(--accent); }

/* ---- Design v2 round 2: Week review + Roster + shift sheets ---- */
.rv-back { margin-top: 4px; align-self: flex-start; border: 1px solid #E8E2D7; background: var(--bg); text-decoration: none; }
.rv-sec h2 { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #55696C; }
.rv-pill { font-size: 12px; background: #EBE7DE; color: #4F6266; }
.rv-pill.done { background: #E3EEE5; color: #2F6446; }
.rv-ok { color: #2F6446; }
.rv-ok svg { background: #E3EEE5; border-radius: 50%; padding: 5px; box-sizing: content-box; }
.est-card.hero-est { background: #E7EEEA; border: 1px solid #D7E2DD; border-radius: 28px; padding: 15px 15px 13px; gap: 0; }
.est-card.hero-est .eh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.est-card.hero-est .eh b { font-size: 14px; font-weight: 700; color: var(--accent); }
.est-card.hero-est .eh span { font-size: 12px; color: #4F6A65; }
.est-card.hero-est .en { font-size: 13px; color: #4F6A65; margin-top: 12px; }
.est-card.hero-est .nv { font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; margin: 4px 0 12px; color: var(--accent); }
.est-card.hero-est .eg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid #CBD9D3; }
.est-card.hero-est .eg2 span { display: block; font-size: 12px; color: #4F6A65; }
.est-card.hero-est .eg2 b { display: block; font-size: 17px; font-weight: 700; margin-top: 4px; color: #294B4F; }
/* Roster: shifts not saved yet are amber */
[data-r-shift].sblock { background: #F5E4BD; border: 1px solid #E6CC91; }
[data-r-shift].sblock .tm, [data-r-shift].sblock .amt b { color: #5E4A22; }
[data-r-shift].sblock .m, [data-r-shift].sblock .amt small { color: #6B5A34; }
/* ---- Design v2 round 3: Roster Net-first bottom bar (tab bar hidden on Roster) ---- */
.roster-cancel { align-self: flex-start; padding: 0 18px; margin-bottom: 4px; }
body:has(.roster-bar) .tabbar { display: none; }
body:has(.roster-bar) main { padding-bottom: calc(200px + var(--safe-b)); }
.roster-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(480px, 100vw); box-sizing: border-box; z-index: 20; background: var(--bg); border-top: 1px solid #E7E1D6; padding: 14px 16px calc(14px + max(14px, var(--safe-b))); }
.roster-bar .rb-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.roster-bar .rb-sub, .roster-bar .rb-cap { display: block; font-size: 12px; color: #55696C; }
.roster-bar .rb-cap { font-size: 11px; margin-top: 2px; }
.roster-bar .rb-net { display: block; font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); margin-top: 2px; }
.roster-bar .rb-kv { display: flex; gap: 18px; padding-bottom: 2px; }
.roster-bar .rb-kv span { display: block; font-size: 12px; color: #55696C; }
.roster-bar .rb-kv b { display: block; font-size: 17px; font-weight: 700; margin-top: 3px; color: #294B4F; white-space: nowrap; }
.roster-bar .btn.primary { width: 100%; min-height: 52px; border-radius: 999px; margin-top: 14px; }
body:has(.roster-bar) #toasts { bottom: calc(190px + var(--safe-b)); }
/* ---- Design v2 round 3b: Backup & import + Needs checking ---- */
.bk-sec { margin-top: 8px; }
.bk-sec .section-label { font-size: 12px; letter-spacing: 0.07em; color: #5F6E70; }
.bk-sec .hint { font-size: 12px; color: #5F6E70; }
.bk-list .li { gap: 12px; min-height: 64px; cursor: pointer; }
.bk-list .li .t { font-weight: 700; font-size: 15px; }
.bk-list .li .m { font-size: 12px; color: #5F6E70; white-space: normal; }
.bk-list .tag.amber { white-space: nowrap; font-size: 11px; font-weight: 700; }
.bk-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center; }
.bk-ic.teal { background: #E3ECE8; color: #214C56; }
.bk-ic.amber { background: #FFF1C9; color: #8A650B; }
.bk-ic.red { background: #FBEBE4; color: #AE5545; }
.bk-res:empty { display: none; }
.bk-res { margin: 4px 6px 0; }
.bk-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.bk-sync { margin-top: 4px; }
.bk-sync > summary { list-style: none; display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 6px; font-size: 13px; color: #5F6E70; cursor: pointer; }
.bk-sync > summary::-webkit-details-marker { display: none; }
.bk-h { font-size: 15px; margin: 16px 0 6px; }

/* Design v2 round 5: Different times — changed time field highlighted (board ConfirmEdit) */
.group.dt input[type=time] { border: 1px solid #D7DDD6; background: #FFFDF8; color: #214C56; font-weight: 700; }
.group.dt input[type=time].chg { border: 1.5px solid #214C56; background: #E7EEEA; font-weight: 800; }

/* =========================================================================
   Design v2 round 6: canvas match (Work Week, Home, More, Settings). Keep LAST.
   ========================================================================= */
.pill-btn.dark { background: #214C56; color: #FFFDF8; border: 0; }
/* Work — Week summary */
.wk-sum { background: #E7EEEA; border: 1px solid #D7E2DD; border-radius: 28px; padding: 15px 15px 13px; color: #214C56; }
.wk-sum .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #526B6D; font-size: 13px; font-weight: 600; }
.wk-sum .chip { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 6px 10px; background: #D2E0DA; color: #31575B; }
.wk-sum .big { font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -.035em; margin: 9px 0 10px; }
.wk-sum .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 11px; padding-bottom: 11px; border-bottom: 1px solid #CBD9D3; }
.wk-sum span { display: block; font-size: 12px; color: #5A706D; }
.wk-sum .duo b { display: block; font-size: 17px; margin-top: 4px; color: #294B4F; }
.wk-sum .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wk-sum .three > div { padding: 8px 10px; border-radius: 12px; background: rgba(255,253,248,.68); border: 1px solid #D9E4DE; }
.wk-sum .three span { font-size: 11px; }
.wk-sum .three b { display: block; font-size: 17px; margin-top: 4px; }
/* Weekly calendar */
.wk-cal-h { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 2px -4px; }
.wk-cal-h strong { font-size: 17px; letter-spacing: -.02em; color: #18343B; }
.wk-cal-h span { font-size: 12px; color: #5F6E70; }
.wk-cal { background: #FFFDF8; border: 1px solid #E7E1D6; border-radius: 28px; padding: 10px 8px 14px; overflow: hidden; }
.wk-grid { display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)); gap: 3px; }
.wk-heads { margin-bottom: 8px; }
.wk-dh { border: 0; background: transparent; padding: 5px 0 6px; border-radius: 12px; text-align: center; color: #5F6E70; font-size: 10px; font-weight: 700; cursor: pointer; min-height: 44px; }
.wk-dh b { display: grid; place-items: center; width: 26px; height: 26px; margin: 4px auto 0; border-radius: 50%; color: #18343B; font-size: 12px; }
.wk-dh.sel { background: #E4ECE8; color: #315A5B; }
.wk-dh.sel b, .wk-dh.today b { background: #214C56; color: #fff; }
.wk-dh.today:not(.sel) b { background: transparent; color: #214C56; box-shadow: inset 0 0 0 1.5px #214C56; }
.wk-dh.hol b { box-shadow: inset 0 0 0 1.5px #6F8FA8; }
.wk-hours { position: relative; color: #5F6E70; font-size: 10px; line-height: 1; }
.wk-hours span { position: absolute; left: 0; transform: translateY(-1px); white-space: nowrap; }
.wk-col { position: relative; border-left: 1px solid #EEE9DF; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--gh) - 1px), #EEE9DF calc(var(--gh) - 1px), #EEE9DF var(--gh)); }
.wk-col.sel { background-color: #F8F7F1; }
.wk-blk { position: absolute; left: 2px; right: 2px; border-radius: 10px; padding: 6px 2px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow: hidden; text-align: center; cursor: pointer; z-index: 1; }
.wk-blk.am { background: #F5E4BD; border: 1px solid #E6CC91; color: #5E4A22; }
.wk-blk.pm { background: #DCE7EF; border: 1px solid #BDD0DC; color: #2F4B5E; }
.wk-blk.off { opacity: .5; text-decoration: line-through; }
.wk-blk strong { display: block; font-size: 12px; font-weight: 800; }
.wk-blk span { display: block; margin-top: 4px; font-size: 10px; font-weight: 600; }
.wk-add { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); border: 1px solid #E5E0D6; background: #FFFDF8; border-radius: 50%; width: 26px; height: 26px; color: #4F6366; padding: 0; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.wk-add::after { content: ''; position: absolute; inset: -9px; }
.wk-add svg { width: 13px; height: 13px; }
.wk-legend { display: flex; gap: 12px; justify-content: flex-end; margin: 10px 2px 0; font-size: 11px; color: #5F6E70; }
.wk-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.wk-legend i.am, .wk-row i.am { background: #E6CC91; } .wk-legend i.pm, .wk-row i.pm { background: #BDD0DC; }
/* Selected day */
.wk-day { padding: 14px; border-radius: 28px; background: #FFFDF8; border: 1px solid #E7E1D6; color: #18343B; }
.wk-day-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.wk-day-h strong { font-size: 15px; } .wk-day-h span { font-size: 12px; color: #5F6E70; }
.wk-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border: 0; border-top: 1px solid #F0EBE2; background: none; width: 100%; text-align: left; color: inherit; cursor: pointer; }
.wk-row > i { width: 4px; align-self: stretch; border-radius: 4px; flex: none; }
.wk-row i.am { background: #D8AD5E; }
.wk-row .m { flex: 1; min-width: 0; } .wk-row .m b { display: block; font-size: 14px; }
.wk-row .m small { display: block; color: #5F6E70; font-size: 12px; margin-top: 3px; }
.wk-row .a { text-align: right; font-size: 14px; font-weight: 800; white-space: nowrap; }
.wk-row .a small { display: block; font-size: 11px; font-weight: 500; color: #5F6E70; }
.wk-none { font-size: 13px; color: #5F6E70; padding: 8px 0; border-top: 1px solid #F0EBE2; margin: 0; }
.wk-addbtn { width: 100%; border: 0; background: #DCE8E7; color: #214C56; border-radius: 999px; padding: 13px; margin-top: 6px; font-weight: 600; font-size: 15px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
/* Last week */
.wk-last { background: #FFFDF8; border: 1px solid #E7E1D6; border-radius: 28px; padding: 16px; color: #18343B; }
.wk-last .h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wk-last .t { font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.wk-ok { border-radius: 999px; padding: 6px 10px; background: #E3EEE5; color: #2F6446; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid #CFE3D6; display: inline-block; }
.wk-last .rng { font-size: 13px; color: #5F6E70; margin-top: 14px; }
.wk-last .hrs { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.wk-last .hrs b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #1C353A; } .wk-last .hrs span { font-size: 13px; color: #5F6E70; }
.wk-last .net { background: #E8EEEA; border: 1px solid #D7E2DD; border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.wk-last .net span, .wk-last .gt span { display: block; font-size: 13px; color: #5A6A68; }
.wk-last .net b { display: block; font-size: 28px; letter-spacing: -.03em; margin-top: 4px; color: #214C56; }
.wk-last .gt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 4px 0; }
.wk-last .gt b { display: block; font-size: 18px; margin-top: 4px; color: #263E42; }
.wk-last .note { border-top: 1px solid #EEE8DF; margin: 14px 0 0; padding-top: 12px; font-size: 13px; color: #5A6A68; line-height: 1.5; }
.wk-last .est-note { display: block; margin-top: 6px; }
/* Home (board "Home" + "Home — Month") */
.hm-sun { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #E8DFD1; background: #FFF7E7; display: grid; place-items: center; color: #B98222; flex: none; }
.hm-sun.night { background: #EEF2F4; border-color: #DCE3E6; color: #3D6177; }
.hm-hero { padding: 18px; border-radius: 28px; background: #DFE8E4; border: 1px solid #CDDCD6; color: #18343B; }
.hm-hero .lab { font-size: 13px; font-weight: 700; color: #27474E; }
.hm-hero .row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 12px; }
.hm-hero .big { font-size: 31px; line-height: 1.02; font-weight: 800; letter-spacing: -.055em; }
.hm-hero .sub { font-size: 15px; margin-top: 6px; font-weight: 650; color: #36545A; }
.hm-hero .ring { position: relative; width: 74px; height: 74px; flex: none; }
.hm-hero .ring svg { position: absolute; inset: 0; }
.hm-hero .ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hm-hero .ring b { font-size: 18px; font-weight: 800; } .hm-hero .ring small { font-size: 10px; color: #3F565B; margin-top: 1px; }
.hm-hero .bar { height: 5px; background: #ADBFBA; border-radius: 999px; margin-top: 14px; overflow: hidden; }
.hm-hero .bar i { display: block; height: 100%; background: #214C56; border-radius: 999px; }
.hm-hero .cap { font-size: 12px; color: #3F565B; margin-top: 7px; }
.hm-calbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hm-seg { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: #EBE7DE; width: 150px; flex: 0 0 150px; }
.hm-seg button { flex: 1; border: 0; border-radius: 999px; background: transparent; color: #5F6E70; padding: 8px 4px; font-size: 13px; font-weight: 600; min-height: 34px; cursor: pointer; }
.hm-seg button[aria-selected=true] { background: #FFFDF8; color: #214C56; }
.hm-calbar .nav { display: flex; align-items: center; gap: 8px; }
.hm-calbar .nav span { font-size: 14px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; color: #18343B; }
.hm-calbar .nav button { width: 34px; height: 34px; border: 1px solid #E8E2D7; border-radius: 50%; background: #FFFDF8; color: #214C56; font-size: 18px; line-height: 1; padding: 0; cursor: pointer; position: relative; }
.hm-calbar .nav button::after { content: ''; position: absolute; inset: -5px; }
.hm-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; padding: 2px 0 4px; }
.hm-cal .dow { font-size: 10px; color: #5F6E70; font-weight: 800; text-align: center; padding: 2px 0 4px; }
.hm-cal button { border: 0; background: transparent; padding: 2px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; color: #18343B; min-height: 44px; }
.hm-cal.week button { padding: 4px 0; gap: 5px; }
.hm-cal .dw { font-size: 10px; color: #5F6E70; font-weight: 800; }
.hm-cal .n { font-size: 14px; font-weight: 600; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.hm-cal .out .n { color: #B4BCBC; }
.hm-cal .hol .n { border: 1.5px solid #214C56; box-sizing: border-box; }
.hm-cal .sel .n { background: #E4ECE8; color: #214C56; font-weight: 700; }
.hm-cal .today .n { background: #214C56; color: #fff; font-weight: 700; border: 0; }
.hm-cal .dots { display: flex; gap: 3px; height: 5px; }
.hm-cal .dots i, .hm-legend i { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.hm-cal .dots i.s, .hm-legend i.s { background: #6F91A8; } .hm-cal .dots i.b, .hm-legend i.b { background: #E2B34B; }
.hm-legend { display: flex; justify-content: center; gap: 14px; font-size: 11px; color: #5F6E70; margin-top: -2px; }
.hm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.hm-legend i.h { width: 8px; height: 8px; border: 1.2px solid #214C56; box-sizing: border-box; background: transparent; }
.hm-card { background: #FBF8F1; border: 1px solid #E7E1D6; border-radius: 28px; padding: 18px; color: #18343B; }
.hm-card .h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; }
.hm-card .t, .hm-todo .t { font-size: 19px; font-weight: 780; letter-spacing: -.04em; }
.hm-card .d { font-size: 12px; color: #5F6E70; }
.hm-item, .hm-cu { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: none; padding: 6px 0; text-align: left; color: inherit; text-decoration: none; cursor: pointer; min-height: 52px; }
.hm-item .hc, .hm-cu .hc { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: #E3ECE8; color: #214C56; display: grid; place-items: center; }
.hm-cu .hc { width: 38px; height: 38px; flex-basis: 38px; }
.hm-item .hc.amber, .hm-cu .hc.amber { background: #FFF0CF; color: #9A6A14; }
.hm-item .hc.blue, .hm-cu .hc.blue { background: #E4ECF2; color: #3D6177; }
.hm-item .m, .hm-cu .m { flex: 1; min-width: 0; }
.hm-item .m b { display: block; font-size: 14px; font-weight: 740; } .hm-cu .m b { display: block; font-size: 13px; font-weight: 740; }
.hm-item .m small, .hm-cu .m small { display: block; font-size: 12px; color: #5F6E70; margin-top: 3px; }
.hm-item .a, .hm-cu .a { text-align: right; font-size: 14px; font-weight: 760; color: #3D6177; white-space: nowrap; }
.hm-cu .a { font-size: 13px; }
.hm-item .a small, .hm-cu .a small { display: block; font-size: 11px; color: #5F7686; font-weight: 500; margin-top: 1px; }
.hm-item .a.plain, .hm-cu .a.plain { color: #18343B; }
.hm-add { width: 100%; border: 0; background: #DCE8E7; color: #214C56; border-radius: 999px; padding: 13px; margin-top: 8px; font-weight: 760; font-size: 14px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.hm-card .note { font-size: 12px; color: #5F6E70; margin: 10px 0 0; }
.hm-card .note a { color: #214C56; font-weight: 600; }
.hm-card.cu .h { margin-bottom: 0; }
.hm-card .more { border: 0; background: transparent; color: #214C56; font-size: 12px; font-weight: 760; padding: 10px 0; cursor: pointer; }
.hm-card .dh { font-size: 11px; color: #5F6E70; font-weight: 780; letter-spacing: .03em; margin: 10px 0 2px; }
.hm-card .dh ~ .hm-cu + .hm-cu { border-top: 1px solid #F0EBE2; }
.hm-todo { background: #FBECC6; border: 1px solid #EFD9A7; border-radius: 28px; padding: 18px; color: #18343B; }
.hm-todo .h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hm-todo .badge { font-size: 12px; color: #6D4915; background: #F2D89C; border-radius: 999px; padding: 6px 9px; font-weight: 750; }
.hm-todo .row { display: flex; align-items: center; gap: 11px; padding: 11px 0; min-height: 48px; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(183,137,54,.2); }
.hm-todo .row:last-child { border-bottom: 0; padding-bottom: 0; }
.hm-todo .ck { width: 22px; height: 22px; flex: 0 0 22px; border: 1.5px solid #9D8E6C; border-radius: 50%; background: rgba(255,255,255,.5); box-sizing: border-box; }
.hm-todo .m { flex: 1; min-width: 0; } .hm-todo .m b { display: block; font-size: 14px; font-weight: 740; }
.hm-todo .m small { display: block; font-size: 12px; color: #5F4F2E; margin-top: 2px; }
.hm-todo svg { color: #7A6A45; flex: none; }
.hm-head h1 { font-size: 33px; font-weight: 780; letter-spacing: -.05em; white-space: nowrap; }
.hm-head { align-items: flex-start; }
/* More + settings rows (board "More", "Settings — *") */
.mr-big, .mr-year { display: flex; align-items: center; gap: 13px; padding: 16px; border-radius: 28px; text-decoration: none; }
.mr-big { background: #DFE8E4; border: 1px solid #CDDCD6; color: #17323A; }
.mr-year { background: #214C56; color: #FFFDF8; padding: 18px 16px; }
.mr-ic2 { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,253,248,.7); color: #214C56; }
.mr-year .mr-ic2 { background: rgba(255,253,248,.12); border: 1px solid rgba(255,255,255,.14); color: #FFFDF8; box-sizing: border-box; }
.mr-big .mr-m b, .mr-year .mr-m b { font-size: 17px; font-weight: 780; letter-spacing: -.04em; }
.mr-big .mr-m small { color: #36545A; } .mr-year .mr-m small { color: #C9DCD8; }
.mr-fy { font-size: 11px; font-weight: 760; border-radius: 999px; padding: 6px 9px; background: #DBE5E1; color: #214C56; white-space: nowrap; }
.mr-year .mr-chev { color: #C9DCD8; }
.mr-sec { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #5F6E70; margin: 10px 4px -4px; }
.mr-card { background: #FBF8F1; border: 1px solid #E7E1D6; border-radius: 28px; padding: 2px 14px; display: flex; flex-direction: column; }
.mr-row { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 12px 0; border: 0; border-bottom: 1px solid #F0EBE2; background: transparent; min-height: 60px; text-align: left; color: #18343B; text-decoration: none; cursor: pointer; font: inherit; }
.mr-row:last-child { border-bottom: 0; }
.mr-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: #E3ECE8; color: #214C56; display: grid; place-items: center; }
.mr-ic.amber { background: #FFF0CF; color: #9A6A14; } .mr-ic.blue { background: #E4ECF2; color: #3D6177; } .mr-ic.grey { background: #EFEDE4; color: #6B6A55; } .mr-ic.red { background: #FBEBE4; color: #AE5545; } .mr-ic.green { background: #E3EEE5; color: #2F6446; }
.mr-m { flex: 1; min-width: 0; display: block; }
.mr-m b { display: block; font-size: 14px; font-weight: 740; }
.mr-m small { display: block; font-size: 12px; color: #5F6E70; margin-top: 2px; line-height: 1.35; }
.mr-val { font-size: 14px; font-weight: 780; color: #214C56; white-space: nowrap; } .mr-val.ink { color: #18343B; font-size: 15px; font-weight: 750; }
.mr-chip { font-size: 11px; font-weight: 760; border-radius: 999px; padding: 5px 8px; background: #F2D89C; color: #79511A; white-space: nowrap; }
.mr-chev { color: #8A9A9B; display: grid; place-items: center; flex: none; }
.mr-sync { display: flex; align-items: center; gap: 7px; padding: 2px 4px; font-size: 12px; color: #5F6E70; }
.bd-hero { padding: 20px; border-radius: 28px; background: #E7EEEA; border: 1px solid #D7E2DD; }
.bd-hero .l { font-size: 13px; font-weight: 700; color: #27474E; }
.bd-hero .r { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.bd-hero .r span { font-size: 40px; font-weight: 800; letter-spacing: -.04em; color: #214C56; }
.bd-edit { border: 0; border-radius: 999px; background: #FFFDF8; color: #214C56; padding: 10px 16px; font-weight: 700; font-size: 14px; min-height: 44px; cursor: pointer; }
.bd-hero .s { font-size: 13px; color: #3F565B; margin-top: 6px; }
.bd-h { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 6px -4px; font-size: 12px; color: #5F6E70; }
.bd-h span:first-child { font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.bd-bar { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; margin: 2px 2px 0; }
.bd-bar i { display: block; }
.mr-chip.grey { background: #EFEDE4; color: #6B6A55; font-weight: 700; } .mr-chip.sage { background: #E3ECE8; color: #214C56; font-weight: 700; }
.mr-wide { border: 0; border-radius: 999px; background: #E3ECE8; color: #214C56; min-height: 52px; font-size: 16px; font-weight: 700; width: 100%; cursor: pointer; }
.bd-hero .hn { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; color: #214C56; }
.mr-card .mr-row small:empty { display: none; }
.mr-card.mr-cats .mr-row { min-height: 56px; }
.mr-card.mr-plain .mr-ic { display: none; }
.ab-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 28px; background: #E7EEEA; border: 1px solid #D7E2DD; }
.ab-hero .f { width: 48px; height: 48px; border-radius: 50%; background: #214C56; color: #FFFDF8; display: grid; place-items: center; font-size: 22px; font-weight: 800; flex: none; }
.ab-hero b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.03em; color: #214C56; } .ab-hero small { display: block; font-size: 12px; color: #3F565B; margin-top: 2px; }
.ab-more { background: #FBF8F1; border: 1px solid #E7E1D6; border-radius: 28px; padding: 4px 16px; }
.ab-more summary { min-height: 48px; display: flex; align-items: center; font-size: 14px; font-weight: 700; color: #214C56; cursor: pointer; }
.ab-more ul { padding-left: 18px; margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: #36545A; }
/* Finance — Move your pay (board tiles) */
.mv2 { background: #EEF5EE; border-radius: 28px; padding: 18px 16px; color: #182D38; }
.mv2 .h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.mv2 .h span { font-size: 17px; letter-spacing: -.02em; font-weight: 730; color: #123745; } .mv2 .h small { font-size: 12px; color: #5F6E70; }
.mv2 .net { background: #E9F1F7; border-radius: 12px; padding: 13px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mv2 .net b { display: block; font-size: 14px; font-weight: 700; } .mv2 .net small { display: block; font-size: 12px; color: #5F6E70; margin-top: 4px; }
.mv2 .net .r { text-align: right; } .mv2 .net .r b { font-size: 26px; letter-spacing: -.03em; font-weight: 760; color: #234F88; white-space: nowrap; } .mv2 .net .r small { font-size: 11px; color: #214C56; font-weight: 600; margin-top: 2px; }
.mv2 .bar { display: flex; gap: 2px; height: 13px; margin: 12px 1px 4px; overflow: hidden; border-radius: 999px; } .mv2 .bar i { display: block; }
.mv2 .pcts { display: grid; text-align: center; font-size: 11px; color: #5E7277; margin-bottom: 12px; }
.mv2 .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mv2 .tile { background: #FFFEFA; border: 1px solid rgba(227,226,216,.7); border-radius: 12px; padding: 12px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; }
.mv2 .tile .top { display: flex; justify-content: space-between; align-items: flex-start; }
.mv2 .tile .ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; }
.mv2 .tile .chip { border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 750; }
.mv2 .tile .t { font-size: 13px; font-weight: 700; line-height: 1.25; margin-top: 8px; }
.mv2 .tile .a { font-size: 17px; font-weight: 760; margin-top: 4px; } .mv2 .tile .a.pos { color: #216C54; }
.mv2 .tile .m { font-size: 11px; color: #5F6E70; margin-top: 2px; line-height: 1.3; }
.mv2 .mv-done { margin-top: 12px; }
.mv2 .note { font-size: 12px; color: #5F6E70; line-height: 1.45; margin: 12px 2px 0; }
/* Add / Edit shift: board white time boxes (same look as Different times, unchanged state) + plain red Remove link */
.sheet-body .group input[type=time] { border: 1px solid #D7DDD6; background: #FFFDF8; color: #214C56; font-weight: 700; }
.btn.link-danger { background: transparent; color: #B3261E; font-weight: 600; min-height: 44px; border: 0; }
.sheet .stack-btns .btn[data-a=diff] { background: #E3ECE8; color: #214C56; border: 0; }

/* v9.1: To Do shows hours to log + "all caught up" */
.hm-todo button.row { width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(183,137,54,.2); font: inherit; text-align: left; cursor: pointer; }
.hm-todo button.row:last-child { border-bottom: 0; padding-bottom: 0; }
.hm-todo .clear { margin: 4px 0 0; font-size: 13px; color: #5F4F2E; }

/* v9.2: This week card (pill + segments), bigger type */
.hm-hero { padding: 20px; }
.hm-hero .lab { font-size: 16px; }
.hm-hero .row { align-items: flex-start; gap: 10px; }
.hm-hero .big { font-size: 39px; white-space: nowrap; }
.hm-hero .sub { font-size: 17px; white-space: nowrap; }
.hm-hero .rt { text-align: right; flex: none; }
.hm-hero .pill { display: inline-flex; flex-direction: column; align-items: center; background: rgba(140,165,160,.28); border-radius: 22px; padding: 8px 12px; }
.hm-hero .pill b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.hm-hero .pill span { font-size: 12px; color: #46605F; }
.hm-hero .left { font-size: 15px; color: #46605F; margin-top: 10px; }
.hm-hero .segs { display: flex; gap: 7px; margin-top: 16px; }
.hm-hero .segs i { flex: 1; height: 10px; border-radius: 999px; background: rgba(160,185,180,.45); }
.hm-hero .segs i.on { background: #6A9A94; }

/* v9.2: the hidden attribute must win over .field { display:flex } (To account / Category / date fields in the recurring form) */
[hidden] { display: none !important; }
.hm-hero .row { border: 0; padding: 0; min-height: 0; }

/* partner app: fortnight card, leave row, leave page */
.hm-fn { padding: 18px; border-radius: 28px; background: #FBF8F1; border: 1px solid #E7E1D6; color: #18343B; margin-top: 12px; }
.hm-fn .lab { font-size: 13px; font-weight: 700; color: #5F6E70; }
.hm-fn .big { font-size: 34px; line-height: 1.02; font-weight: 800; letter-spacing: -.05em; margin-top: 6px; }
.hm-fn .big small { font-size: 15px; font-weight: 650; color: #36545A; letter-spacing: 0; }
.hm-fn .sub { font-size: 13px; margin-top: 6px; color: #5F6E70; }
.hm-fn .wk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.hm-fn .wk > div { background: #DFE8E4; border-radius: 18px; padding: 10px 12px; }
.hm-fn .wk span { display: block; font-size: 12px; color: #36545A; }
.hm-fn .wk b { font-size: 17px; }
.hm-fn .pd { font-size: 13px; font-weight: 700; color: #214C56; margin-top: 12px; }
.hm-leave { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 16px; min-height: 56px; border-radius: 22px; background: #FBF8F1; border: 1px solid #E7E1D6; color: inherit; text-decoration: none; }
.hm-leave .hc { width: 36px; height: 36px; border-radius: 50%; background: #DCE8E7; color: #214C56; display: grid; place-items: center; flex: 0 0 36px; }
.hm-leave .m { flex: 1; min-width: 0; } .hm-leave .m b { display: block; font-size: 15px; } .hm-leave .m small { display: block; font-size: 12px; color: #5F6E70; margin-top: 2px; }
.lv-hero { padding: 18px; border-radius: 28px; background: #DFE8E4; border: 1px solid #CDDCD6; }
.lv-hero .big { font-size: 44px; font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.lv-hero .big small { font-size: 17px; font-weight: 650; color: #36545A; letter-spacing: 0; }
.lv-hero p { margin: 6px 0 0; font-size: 14px; color: #36545A; }

/* first setup */
.fs-card { margin-top: 16px; padding: 22px 18px; }
.fs-t { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 8px; }
.fs-p { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: #36545A; } .fs-p.small { font-size: 13px; color: #5F6E70; margin: 12px 0 0; }
.fs-btn { width: 100%; cursor: pointer; }
.fs-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.fs-list li { display: flex; gap: 8px; align-items: baseline; } .fs-list b { color: var(--accent); } .fs-list span { margin-left: auto; font-size: 12px; color: #5F6E70; }

/* v9.3 — Coming Up: date chips (replace day headers + round icons) */
.hm-card.cu .cu-dg + .cu-day { border-top: 1px solid #F0EBE2; }
.hm-card.cu .cu-dg { padding: 4px 0; }
.hm-card.cu .cu-dg .hm-cu { min-height: 56px; }
.dchip { flex: 0 0 46px; width: 46px; border-radius: 14px; background: #DFE8E4; color: #18343B; text-align: center; padding: 6px 0; line-height: 1.1; }
.dchip small { display: block; font-size: 10.5px; font-weight: 750; letter-spacing: .05em; color: #36545A; }
.dchip b { display: block; font-size: 19px; font-weight: 740; margin-top: 1px; }
.dchip.due { background: #FFF0CF; } .dchip.due small { color: #7A5410; } .dchip.due b { color: #5E3F08; }
.dchip.plan { background: #E4ECF2; } .dchip.plan small { color: #3D6177; }
.dchip.sp { background: none; }
.hm-card.cu .hm-cu .m b { font-size: 15px; } .hm-card.cu .hm-cu .a { font-size: 14px; }

/* v9.3 — Where bills go: donut */
.bills-don { display: flex; align-items: center; gap: 12px; }
.bills-ring { position: relative; width: 120px; height: 120px; flex: none; }
.bills-ring svg { display: block; width: 120px; height: 120px; transform: rotate(-90deg); }
.bills-ring .c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.bills-ring .c b { font-size: 13px; font-weight: 740; letter-spacing: -0.01em; } .bills-ring .c small { font-size: 12px; color: var(--sub); }
.bills-don .bills-legend { flex: 1; min-width: 0; gap: 0; }
.bills-don .bills-legend > div { min-height: 30px; font-size: 14px; }
.bills-don .bills-legend i { border-radius: 50%; }
.bills-don .bills-legend b { min-width: 0; font-size: 13px; }