/* Money HQ - the look (see "The look" in the project note)
   Font Archivo. Paper #F2F1ED, white cards, ink #16181D.
   blue = owed to me, rust = I owe, green = money in, violet = assistant.
   Corners 10/14/18/24. Spacing 4 8 12 16 20 24 32. Every tap target >= 44px. */
@font-face { font-family: Archivo; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/archivo-400.woff2) format("woff2"); }
@font-face { font-family: Archivo; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/archivo-500.woff2) format("woff2"); }
@font-face { font-family: Archivo; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/archivo-600.woff2) format("woff2"); }
@font-face { font-family: Archivo; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/archivo-700.woff2) format("woff2"); }
:root { --paper: #F2F1ED; --ink: #16181D; --mute: #5E6168; --line: #EAE8E3; --blue: #0B5FD0; --rust: #B4510B; --rust-t: #9C4609; --green: #0E7A43; --violet: #6236CE; --track: #E4E2DC; --bad: #B3261E; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: Archivo, system-ui, sans-serif; font-size: 16px; font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; }
a { color: var(--blue); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
button:disabled { opacity: .5; cursor: default; }
input, textarea { border: none; background: transparent; outline: none !important; caret-color: var(--blue); min-width: 0; }
.irow:focus-within, .sh-field:focus-within, .searchbox:focus-within, .ask-box:focus-within { box-shadow: inset 0 0 0 2px #B9D0F2; border-radius: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::selection { background: #D9E4F7; color: var(--ink); }
h1, h2 { margin: 0; letter-spacing: -0.01em; }
.hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; }
.page { padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px 120px; display: flex; flex-direction: column; gap: 12px; }
.page.form { padding-bottom: 120px; gap: 14px; }
.center-note { text-align: center; padding: 80px 24px; color: var(--mute); }
.spinner { width: 28px; height: 28px; border-radius: 999px; border: 3px solid var(--track); border-top-color: var(--ink); margin: 0 auto 16px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.small, .sm { font-size: 13px; color: var(--mute); }
.sm.in, .in { padding: 0 4px; }
.mute { color: var(--mute); }
.blue { color: var(--blue); } .rust { color: var(--rust-t); } .green { color: var(--green); }
.foot { margin: 0; padding: 0 4px; font-size: 13px; line-height: 18px; color: var(--mute); }
.foot.center { text-align: center; }
.muted-note { color: var(--mute); font-size: 15px; }
.intro { margin: 0; padding: 0 4px; font-size: 15px; line-height: 21px; color: var(--mute); }
.lbl, .cap { padding: 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--mute); }
.group { display: flex; flex-direction: column; gap: 9px; }
.tiny-note { font-size: 12px; color: var(--mute); }

/* netbar: waiting to send */
#netbar { position: sticky; top: 0; z-index: 30; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 0; pointer-events: none; }
.nb { pointer-events: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; box-shadow: 0 4px 14px rgba(22,24,29,.22); }
.nb-bad { background: var(--bad); }
.nb-off { background: #fff; color: var(--mute); font-weight: 500; box-shadow: 0 1px 3px rgba(22,24,29,.12); }
#netbar + main .page { padding-top: 12px; }

/* headers */
.hdr, .today-hdr { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.hdr h1 { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; }
.hdr-r { display: flex; align-items: center; gap: 8px; }
.hello { display: flex; flex-direction: column; gap: 1px; }
.hello .date { font-size: 13px; font-weight: 500; color: var(--mute); }
.hello .name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.ask-btn { height: 44px; padding: 0 15px 0 11px; border-radius: 999px; background: #fff; color: var(--ink); display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; box-shadow: 0 1px 3px rgba(22,24,29,.10); }
.round-btn { width: 44px; height: 44px; border-radius: 999px; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(22,24,29,.10); color: var(--ink); }
.round-btn:disabled { background: #E9E7E2; box-shadow: none; }
.nav-hdr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; margin: 0 -4px; }
.nav-hdr h1 { font-size: 17px; font-weight: 600; text-align: center; }
.nav-hdr .back { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; gap: 2px; font-size: 16px; color: var(--blue); padding: 0 4px; }
.nav-hdr .right { justify-self: end; }
.textbtn { min-height: 44px; padding: 0 8px; font-size: 16px; font-weight: 600; color: var(--blue); }
.textbtn.left { align-self: flex-start; font-weight: 500; font-size: 14px; padding: 0 4px; }

/* cards */
.card { background: #fff; border-radius: 18px; }
.card.pad { padding: 16px; }
.card.pad0 { padding: 4px 16px; }
.card.pad18 { padding: 4px 18px; }
.card.list { padding: 2px 16px; }
.card.list.pad0 { padding: 4px 16px; }
.card h2, .blk { font-size: 17px; font-weight: 600; }
.blk { padding: 12px 0 2px; }
.row-h { display: flex; justify-content: space-between; align-items: baseline; }
.row-h h2 { font-size: 17px; font-weight: 600; }
.big-tap { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0 0 16px; margin: -12px 0; font-size: 15px; font-weight: 500; }
.link { color: var(--blue); }

/* dark card */
.dark { background: var(--ink); color: #fff; border-radius: 24px; padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 4px; }
.dark.mid { border-radius: 18px; padding: 16px 18px 18px; gap: 3px; }
.dark .k { font-size: 13px; font-weight: 500; color: #A9ADB8; }
.dark .big { display: flex; align-items: baseline; gap: 6px; }
.dark .big b { font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -.03em; }
.dark.mid .big b { font-size: 32px; line-height: 38px; }
.dark .big i { font-style: normal; font-size: 16px; font-weight: 500; color: #A9ADB8; }
.dark .k2 { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #A9ADB8; }
.status { margin-left: auto; display: flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #22252C; font-weight: 600; }
.status.ok { color: #6FDB9B; } .status.warn { color: #F2A468; }
.dark .hr { height: 1px; background: #32353D; margin: 10px 0 8px; }
.shopbar { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.shopbar .k { white-space: nowrap; }
.shopbar .bar { flex: 1; height: 6px; border-radius: 999px; background: #32353D; overflow: hidden; }
.shopbar .bar span { display: block; height: 6px; background: #fff; }
.shopbar b { font-weight: 600; white-space: nowrap; }

/* quick buttons and tiles */
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 500; min-height: 44px; }
.qb { width: 100%; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { background: #fff; border-radius: 18px; padding: 13px 16px 14px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); min-width: 0; }
.tile .tl { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--mute); }
.tile b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.tile b.blue { color: var(--ink); } .tile b.rust { color: var(--ink); }
.tile .sm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coming { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 0 14px; border-radius: 14px; background: #fff; color: var(--ink); }
.coming .cm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 4px 0; }
.coming .cap { padding: 0; }
.coming .ct { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coming .more { font-size: 13px; color: var(--mute); white-space: nowrap; }
.where { display: flex; flex-direction: column; gap: 10px; }
.stackbar { display: flex; gap: 3px; height: 8px; } .stackbar span { border-radius: 999px; }
.catgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.catc { min-height: 56px; border-radius: 14px; color: #fff; padding: 9px 13px; display: flex; flex-direction: column; justify-content: space-between; gap: 2px; }
.catc span { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catc b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }

/* where it went */
.monthnav { display: flex; align-items: center; justify-content: center; gap: 12px; }
.monthnav span { font-size: 17px; font-weight: 600; min-width: 128px; text-align: center; }
.donutcard { display: flex; align-items: center; gap: 16px; }
.donut { position: relative; width: 148px; height: 148px; flex: none; }
.dc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.dc b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .dc span { font-size: 12px; color: var(--mute); }
.legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.legend > div { display: flex; align-items: center; gap: 8px; }
.legend .ln { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.rise { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--rust-t); background: #FBECE0; padding: 4px 8px; border-radius: 10px; }
.card.pad { display: flex; flex-direction: column; gap: 12px; }
.card.pad.donutcard { flex-direction: row; }
.daily { display: block; }
.axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); } .axis b { color: var(--ink); }
.paygrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.paygrid div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: var(--paper); min-width: 0; }
.paygrid span { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; } .paygrid b { font-size: 15px; font-weight: 700; }
.labelcard { background: #ECE6FB; border-radius: 14px; padding: 13px 14px; display: flex; gap: 11px; align-items: center; color: var(--ink); min-height: 44px; }
.labelcard .cm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .labelcard b { font-size: 14px; font-weight: 600; } .labelcard .cm span { font-size: 13px; color: #4C4A63; }

/* segmented control, chips */
.seg { display: grid; gap: 3px; padding: 3px; border-radius: 13px; background: var(--track); }
.seg button { min-height: 44px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--mute); padding: 0 4px; }
.seg button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(22,24,29,.12); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 15px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; }
.chip.on { background: var(--ink); color: #fff; font-weight: 600; }
.chip.warn { background: #FBECE0; color: var(--rust-t); font-weight: 600; }
.chip.pill { flex: none; }
.strip { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.searchbox { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 14px; background: #fff; }
.searchbox input { flex: 1; font-size: 16px; }

/* activity rows */
.day-h { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 4px 0; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--mute); }
.day-h b { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.erow, .hrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); min-height: 60px; }
.erow:last-child, .hrow:last-child { border-bottom: none; }
.erow .mid, .hrow .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.ttl { font-size: 16px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow .ttl { font-size: 15px; }
.sub { font-size: 13px; color: var(--mute); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amt { font-size: 16px; font-weight: 600; white-space: nowrap; }
.amt.green { color: var(--green); } .amt.blue { color: var(--blue); } .amt.rust { color: var(--rust); }
.gone { opacity: .55; } .gone .ttl { text-decoration: line-through; }
.av { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex: none; }
.av-blue { background: #E4ECFA; color: var(--blue); font-size: 12px; } .av-rust { background: #FBECE0; color: var(--rust-t); font-size: 12px; } .av-green { background: #E3F2E9; color: var(--green); } .av-grey { background: var(--paper); color: var(--mute); }
.tag-warn { font-size: 12px; font-weight: 600; color: var(--rust-t); background: #FBECE0; padding: 2px 8px; border-radius: 999px; }
.pillbadge { font-size: 12px; font-weight: 600; color: var(--mute); background: var(--paper); padding: 2px 8px; border-radius: 999px; display: inline-block; }
.pillbadge.bad { color: var(--rust-t); background: #FBECE0; } .pillbadge.good { color: var(--green); background: #E3F2E9; font-size: 13px; padding: 3px 9px; }
.clip { flex: none; }
.btn.wide { width: 100%; }
.alert-bad { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 12px 14px; border-radius: 14px; background: #FBECE0; color: var(--rust-t); text-align: left; font-size: 14px; }
.alert-bad b { font-weight: 700; } .alert-bad span { font-size: 13px; color: #6E3A12; }
.alert-bad.static .mini { margin-top: 8px; }
.alert-wait { padding: 12px 14px; border-radius: 14px; background: #E4ECFA; color: #0A4BA6; font-size: 14px; }

/* buttons */
.btn { min-height: 48px; padding: 0 18px; border-radius: 14px; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #fff; color: var(--ink); }
.btn.blue { background: var(--blue); color: #fff; } .btn.rust { background: var(--rust); color: #fff; } .btn.green { background: var(--green); color: #fff; }
.btn.white { background: #fff; } .btn.ghost { background: transparent; color: var(--blue); } .btn.grey { background: var(--paper); color: var(--ink); font-weight: 500; }
.btn.danger { color: var(--bad); } .btn.big { min-height: 54px; font-size: 16px; }
.btn.sm44 { min-height: 44px; border-radius: 12px; font-size: 15px; padding: 0 8px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.btn.col { flex-direction: column; min-height: 66px; font-size: 13px; padding: 0 4px; gap: 5px; text-align: center; }
.mini { min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--blue); background: transparent; display: inline-flex; align-items: center; gap: 6px; }
.mini.big { background: #E4ECFA; font-size: 14px; } .mini.danger, .mini.big.danger { background: #fff; color: var(--rust-t); }
.qa .mini { min-width: 96px; justify-content: center; }

/* people and plan rows */
.prow { display: flex; flex-direction: column; gap: 6px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); min-height: 60px; }
.prow:last-of-type { border-bottom: none; }
.prow.simple { flex-direction: row; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 500; }
.pl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pl > span:first-child { font-size: 16px; font-weight: 500; } .pl b { font-size: 16px; font-weight: 600; }
.bar2 { height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; display: block; } .bar2 span { display: block; height: 5px; }
.bar3 { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; } .bar3 span { display: block; height: 6px; background: var(--green); }
.showall { display: flex; align-items: center; min-height: 48px; width: 100%; border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; color: var(--blue); }
.shopcredit { gap: 4px !important; font-size: 14px; }
.frow { display: flex; flex-direction: column; gap: 7px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.frow:last-child { border-bottom: none; }
.fl { font-size: 16px; }
.frow .fl { display: block; }
.frow > .fl, .frow .fl:not(.two) { }
.frow > div.fl, .frow div.fl { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.acts { display: flex; gap: 0; margin: -6px 0; }
.equb { gap: 10px !important; } .equb .nm { font-size: 17px; font-weight: 600; } .row-sm { display: flex; justify-content: space-between; font-size: 13px; color: var(--mute); }
.pface { display: flex; flex-direction: column; align-items: center; gap: 5px; } .pface h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.balance { gap: 9px !important; } .balance .mute { font-size: 15px; font-weight: 400; } .balance .pl b { font-size: 15px; }

/* forms */
.amount-in { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 2px; }
.amount-in input { width: 100%; text-align: center; font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
.form-rows { padding: 0 16px; }
.irow { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); }
.irow:last-child { border-bottom: none; }
.irow .fl { width: 96px; flex: none; }
.irow input { flex: 1; font-size: 16px; }
.irow input.right { text-align: right; }
.irow.big { min-height: 64px; } .irow.big input { text-align: right; font-size: 26px; font-weight: 700; letter-spacing: -.02em; } .irow .unit { font-size: 14px; color: var(--mute); }
.irow.big + .irow input { text-align: right; }
.frow-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; border-bottom: 1px solid var(--line); text-align: left; }
.frow-btn .fl { width: 96px; flex: none; } .frow-btn .fv { flex: 1; min-width: 0; color: var(--mute); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-rows .frow-btn:last-child { border-bottom: none; }
.people-strip { gap: 10px; }
.pchip { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 58px; flex: none; font-size: 12px; font-weight: 500; min-height: 44px; }
.pchip span:last-child { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip .av { box-shadow: 0 0 0 0 transparent; } .pchip .av-grey { background: #fff; } .pchip.on .av { box-shadow: 0 0 0 2.5px var(--blue); background: #E4ECFA; color: var(--blue); }
.lendseg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lk { min-height: 56px; border-radius: 14px; background: #fff; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--ink); text-align: left; }
.lk span { display: flex; flex-direction: column; gap: 1px; } .lk b { font-size: 16px; font-weight: 700; } .lk small { font-size: 12px; font-weight: 500; opacity: .85; }
.lk.lent.on { background: var(--blue); color: #fff; } .lk.borrowed.on { background: var(--rust); color: #fff; }
.savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); background: linear-gradient(to top, var(--paper) 70%, rgba(242,241,237,0)); max-width: 480px; margin: 0 auto; }
.savebar .btn { min-height: 54px; font-size: 16px; }
.photos { gap: 10px !important; }
.ph-row { display: flex; gap: 10px; flex-wrap: wrap; } .ph-row:empty { display: none; }
.thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: #DCDFE4; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb img.nopic { opacity: .3; }
.thumb .x { position: absolute; top: 0; right: 0; width: 44px; height: 44px; color: #fff; font-size: 20px; line-height: 1; display: flex; align-items: flex-start; justify-content: flex-end; padding: 2px 8px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ph-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ph-t { flex: 1 1 100%; display: flex; flex-direction: column; gap: 1px; } .ph-t b { font-size: 16px; font-weight: 600; }
.bigamt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 2px; }
.ba { display: flex; align-items: baseline; gap: 6px; } .ba b { font-size: 40px; font-weight: 700; letter-spacing: -.03em; } .ba i { font-style: normal; font-size: 16px; font-weight: 500; color: var(--mute); }
.srcpill { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--mute); background: #fff; padding: 4px 11px; border-radius: 999px; max-width: 100%; }
.labels { align-items: flex-start; padding: 8px 0; } .labels .fl { padding-top: 10px; }
.lab-r { flex: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lab { min-height: 44px; padding: 0 12px; border-radius: 999px; background: #E4ECFA; color: var(--blue); font-size: 13px; font-weight: 600; } .lab.add { background: none; border: 1px dashed #C9C6BE; color: var(--mute); font-weight: 500; }

/* settings */
.setrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 16px; text-align: left; color: var(--ink); }
.setrow.last, .card .setrow:last-child { border-bottom: none; }
.setrow .fl { flex: 1; min-width: 0; } .setrow .fl.two { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; } .setrow small { font-size: 13px; color: var(--mute); }
.setrow .fv { font-weight: 500; color: var(--mute); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.setrow.static { cursor: default; }
.switch { width: 52px; height: 32px; border-radius: 999px; background: #CFCCC4; position: relative; flex: none; margin: 6px -4px; padding: 0; }
.switch::after { content: ""; position: absolute; inset: -6px -2px; }
.switch span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.switch.on { background: var(--green); } .switch.on span { left: 23px; }
.filecard { background: #E3F2E9; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.filecard .pl { justify-content: flex-start; align-items: center; gap: 11px; }
.xls { width: 38px; height: 38px; border-radius: 10px; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.fn { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .fn b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fn small { font-size: 13px; color: #1E5E3A; }

/* setup */
.setup { padding-top: 56px; }
.logo { width: 72px; height: 72px; border-radius: 18px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; }
.setup h1 { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; }
.sh-field { display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 14px; padding: 10px 14px; }
.sh-field span { font-size: 12px; font-weight: 600; color: var(--mute); letter-spacing: .02em; }
.sh-field input, .sh-field textarea { font-size: 16px; min-height: 28px; width: 100%; resize: none; }

/* sheets */
#sheets { position: relative; z-index: 100; }
.sheet-wrap { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.sheet-back { position: absolute; inset: 0; background: rgba(22,24,29,.45); }
.sheet { position: relative; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: var(--paper); border-radius: 24px 24px 0 0; padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 20px); animation: up .18s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.grab { width: 36px; height: 5px; border-radius: 999px; background: #CFCCC4; margin: 0 auto 8px; }
.sheet-body { display: flex; flex-direction: column; gap: 12px; }
.sh-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; padding: 4px 4px 0; } .sh-title.bad { color: var(--bad); }
.sh-text { margin: 0; padding: 0 4px; font-size: 15px; line-height: 22px; } .sh-text.pre { white-space: pre-wrap; } .sh-text.small { font-size: 13px; color: var(--mute); }
.sh-list { display: flex; flex-direction: column; background: #fff; border-radius: 18px; padding: 0 16px; }
.sh-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 0; min-height: 52px; border-bottom: 1px solid var(--line); text-align: left; font-size: 16px; width: 100%; justify-content: center; }
.sh-opt:last-child { border-bottom: none; } .sh-opt small { font-size: 13px; color: var(--mute); } .sh-opt.on span { font-weight: 700; color: var(--blue); }
.sh-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.yr { display: flex; align-items: center; justify-content: center; gap: 16px; } .yr b { font-size: 20px; min-width: 70px; text-align: center; }
.months { gap: 6px; } .months .chip { padding: 0 11px; min-height: 44px; }
.days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.day { min-height: 44px; border-radius: 12px; background: #fff; font-size: 16px; font-weight: 500; } .day.on { background: var(--blue); color: #fff; font-weight: 700; }
.qlist { display: flex; flex-direction: column; gap: 8px; }
.qitem { background: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .qitem.bad { background: #FBECE0; }
.qt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .qt b { font-size: 13px; color: var(--mute); } .qitem.bad .qt b { color: var(--rust-t); } .qa { display: flex; gap: 8px; }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); transform: translate(-50%, 16px); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 15px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 200; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.bad { background: var(--bad); }

/* tab bar */
#tabbar { position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); max-width: 448px; margin: 0 auto; height: 64px; border-radius: 999px; background: var(--ink); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; padding: 0 6px; box-shadow: 0 12px 28px rgba(22,24,29,.26); z-index: 40; }
#tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 48px; color: #878B95; font-size: 11px; font-weight: 500; letter-spacing: .02em; }
#tabbar a.on { color: #fff; font-weight: 600; }
#tabbar a.plusw { color: var(--ink); }
.plusb { width: 50px; height: 50px; border-radius: 999px; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; }

/* assistant */
.ask-page { background: #2A2C33; min-height: 100vh; padding-top: calc(env(safe-area-inset-top, 0px) + 20px); }
.ask-sheet { background: var(--paper); border-radius: 24px 24px 0 0; min-height: calc(100vh - 20px); display: flex; flex-direction: column; padding-top: 8px; }
.ask-sheet .grab { margin-bottom: 0; }
.ask-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 10px; } .ask-h h1 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.ask-msgs { flex: 1; min-height: 0; padding: 10px 16px 8px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: calc(100vh - 230px); }
.ask-empty { text-align: center; color: var(--mute); padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .ask-empty p { margin: 0; font-size: 15px; }
.bub { padding: 10px 14px; border-radius: 18px; font-size: 16px; line-height: 22px; }
.bub.me { align-self: flex-end; max-width: 80%; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.bub.ai { background: #fff; border-bottom-left-radius: 4px; } .bub.ai.err { background: #FBECE0; color: #6E3A12; }
.bub-wrap { display: flex; flex-direction: column; gap: 8px; max-width: 94%; align-items: flex-start; }
.usedtag { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #4C4A63; background: #ECE6FB; padding: 4px 10px; border-radius: 999px; }
.sugg { background: #fff; border: 1.5px solid var(--violet); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.sugg .lbl { padding: 0; color: #4C4A63; } .sg-t { font-size: 16px; font-weight: 600; } .sg-a { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.sugg.saved { border-color: var(--green); } .sugg.skipped { opacity: .6; border-color: var(--track); } .sg-done { font-weight: 700; color: var(--green); } .sg-done.mute { color: var(--mute); }
.typing { display: flex; gap: 5px; width: 64px; } .typing span { width: 8px; height: 8px; border-radius: 999px; background: #B6BBC3; animation: bl 1s infinite; } .typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bl { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.qs { padding: 6px 16px; margin: 0; }
.ask-in { display: flex; align-items: center; gap: 8px; padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 24px); }
.ask-box { flex: 1; min-width: 0; display: flex; align-items: center; height: 46px; padding: 0 14px; border-radius: 999px; background: #fff; } .ask-box input { flex: 1; font-size: 16px; }
.round46 { width: 46px; height: 46px; border-radius: 999px; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; flex: none; } .round46.blue { background: var(--blue); color: #fff; }
.hist-row { padding: 6px 0; border-top: 1px solid var(--track); }