:root { --ink:#172f22; --pine:#123c2b; --cream:#faf4e6; --paper:#fffdf7; --orange:#b94e09; --line:#ded4c2; --muted:#596159; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font:16px Arial,Helvetica,sans-serif; }
main { width:min(1080px,calc(100% - 36px)); margin:auto; padding:24px 0 48px; }
header,.heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.brand { display:inline-flex; align-items:center; color:var(--ink); font-weight:800; text-decoration:none; white-space:nowrap; }
.brand b { display:inline-grid; flex:0 0 auto; place-items:center; width:29px; height:29px; margin-right:8px; border-radius:8px; background:var(--pine); color:white; font-size:10px; }
.header-tools { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px; }
.header-tools>span { padding:7px 10px; border:1px solid var(--line); border-radius:16px; color:var(--muted); font-size:12px; }
.presentation-switch { display:flex; gap:2px; margin:0; padding:3px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.presentation-switch legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.presentation-switch label { display:flex; align-items:center; gap:5px; min-height:34px; margin:0; padding:4px 8px; border-radius:8px; color:var(--muted); font-size:12px; cursor:pointer; }
.presentation-switch label:has(input:checked) { background:var(--pine); color:white; }
.presentation-switch input { width:16px; min-height:16px; margin:0; padding:0; accent-color:var(--orange); }
.update-banner { position:sticky; top:10px; z-index:8; display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:14px; padding:11px 14px; border:1px solid #d8a363; border-radius:12px; background:#fff0dc; box-shadow:0 8px 24px #172f2220; }
.update-banner span { display:grid; gap:2px; }
.update-banner small { color:var(--muted); }
button { min-height:43px; padding:11px 15px; border:1px solid var(--pine); border-radius:10px; background:var(--pine); color:white; font-weight:bold; cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.58; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid #e7833d; outline-offset:3px; }
h1[tabindex="-1"]:focus { outline:none; }
.secondary { background:var(--paper); color:var(--pine); }
.plain { border-color:transparent; background:transparent; color:var(--muted); }
.danger { border-color:#8c2f1b; background:#8c2f1b; }
.page-meta { width:100%; margin-top:20px; border-top:1px solid var(--line); }
main[data-layout="narrow"] .page-meta { width:min(720px,100%); margin-inline:auto; }
main[data-layout="partner-gate"] .page-meta { width:min(760px,100%); margin-inline:auto; }
main[data-layout="household-gate"] .page-meta { width:min(880px,100%); margin-inline:auto; }
#status { min-height:20px; margin:12px 0 0; color:var(--pine); font-size:14px; line-height:1.45; }
.panel>p,.heading p { margin:0 0 8px; color:var(--orange); font-size:11px; font-weight:bold; letter-spacing:.14em; }
.state-panel article { max-width:610px; margin-top:18px; color:var(--muted); line-height:1.5; }
nav { display:flex; flex-wrap:wrap; gap:10px; padding:10px 0 25px; }
.panel { padding:22px; border:1px solid var(--line); border-radius:19px; background:var(--paper); }
.panel h2 { margin:0; font-size:25px; letter-spacing:-.05em; }
.dashboard-shell { display:grid; gap:18px; margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.household-masthead { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; padding:4px 2px; }
.household-title { padding:4px 2px; }
.household-title>p,.insight-card .heading p,.expenses-panel .heading p { margin:0 0 7px; color:var(--orange); font-size:11px; font-weight:bold; letter-spacing:.14em; }
.household-title h1 { margin:0; font-size:clamp(34px,4vw,48px); letter-spacing:-.06em; line-height:1; }
.member-blocks { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 16px; padding-top:8px; }
.member-block { display:inline-flex; align-items:baseline; gap:5px; color:var(--muted); white-space:nowrap; }
.member-block strong { color:var(--ink); }
.you-badge { color:var(--muted); font:inherit; }
.command-bar { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.75fr); gap:18px; align-items:center; padding:18px 20px; border:1px solid var(--line); border-radius:19px; background:var(--paper); box-shadow:5px 5px #e7c89d; }
.balance-card { display:flex; flex-direction:column; justify-content:center; min-height:110px; padding:0; color:var(--ink); }
.balance-card small,.balance-card span { color:var(--muted); }
.balance-card strong { margin:8px 0; font-size:23px; line-height:1.2; }
.balance-next { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.balance-next b { font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.balance-next span { line-height:1.4; }
.balance-next button { box-shadow:none; }
.command-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:center; margin:0; padding:18px; }
.command-actions button { width:100%; }
.command-actions .plain { grid-column:1/-1; }
.insights-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:18px; align-items:stretch; }
.insight-card,.expenses-panel { margin:0; }
.insight-card { height:100%; padding:18px 20px; }
.restock-panel { border-left:4px solid var(--orange); }
.insight-card h2 { font-size:22px; }
.preview-row>.suggestion,.preview-row>.expense { width:100%; }
.preview-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:46px; padding-top:8px; border-top:1px solid #eee6d9; }
.preview-controls span { color:var(--muted); font-size:13px; }
.preview-toggle { flex:0 0 auto; }
.import-feedback { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid #d5bd92; border-radius:11px; background:#fff8e9; color:var(--ink); line-height:1.45; }
.import-feedback.duplicate { border-color:#d8a363; background:#fff0dc; }
.import-feedback.error { border-color:#d7aaa0; background:#fff2ee; }
.feedback-dismiss { flex:0 0 auto; min-width:43px; min-height:43px; padding:3px 9px; border-radius:8px; font-size:22px; line-height:1; }
.archive-banner { margin:0; padding:12px 14px; border-radius:10px; background:#f1e4ca; }
.settings { margin:0; padding:0; overflow:hidden; }
.settings>summary { display:flex; justify-content:space-between; align-items:center; min-height:56px; padding:14px 18px; cursor:pointer; }
.settings>summary span:first-child { display:grid; gap:3px; }
.settings>summary small { color:var(--muted); font-weight:normal; }
.settings[open]>summary { border-bottom:1px solid var(--line); }
.settings-body { padding:18px; }
.danger-zone { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:center; margin-top:22px; padding:16px; border:1px solid #d7aaa0; border-radius:12px; background:#fff8f4; }
.danger-zone small { grid-column:1; color:var(--muted); }
.danger-zone button { grid-column:2; grid-row:1/3; }
.empty-state { margin:14px 0 0; color:var(--muted); line-height:1.45; }
.suggestion,.expense { display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid #eee6d9; }
.suggestion b,.expense b,.suggestion span,.expense span { display:block; }
.suggestion span,.expense span { margin-top:5px; color:var(--muted); font-size:13px; }
.suggestion time { color:var(--pine); font-size:13px; font-weight:bold; white-space:nowrap; }
.suggestion time.due { color:var(--orange); }
.ledger-columns,.purchase-row { display:grid; grid-template-columns:minmax(170px,1.5fr) minmax(120px,1fr) 120px 120px minmax(115px,.8fr); gap:14px; align-items:center; }
.ledger-columns { margin-top:16px; padding:9px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:bold; }
.ledger-columns span:last-child { text-align:right; }
.purchase-row>span,.purchase-row>time { margin:0; color:var(--muted); font-size:13px; }
.purchase-row .entry-actions { justify-content:flex-end; }
.hide,[hidden] { display:none!important; }
footer { padding:10px 0 0; color:var(--muted); font-size:12px; }
label { display:grid; gap:6px; margin:13px 0; color:#455348; font-size:13px; font-weight:bold; }
input,select,textarea { width:100%; min-height:43px; padding:10px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--ink); font:inherit; }
textarea { resize:vertical; line-height:1.45; }
select { height:48px; min-height:48px; padding:10px 42px 10px 12px; overflow:hidden; appearance:none; -webkit-appearance:none; background-color:var(--paper); background-image:linear-gradient(45deg,transparent 50%,var(--pine) 50%),linear-gradient(135deg,var(--pine) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 11px) 50%; background-repeat:no-repeat; background-size:6px 6px,6px 6px; text-overflow:ellipsis; white-space:nowrap; }
select:disabled { cursor:not-allowed; opacity:.58; }
.expense-meta-grid { align-items:start; }
.expense-meta-grid>label,.field-with-help { margin:10px 0 0; }
.field-with-help { display:grid; gap:6px; min-width:0; color:#455348; font-size:13px; font-weight:bold; }
.field-with-help label { margin:0; }
.field-with-help small { min-height:32px; color:var(--muted); font-weight:normal; line-height:1.3; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.check { display:flex; align-items:center; gap:9px; }
.check input { width:18px; height:18px; accent-color:var(--pine); }
dialog { width:min(760px,calc(100% - 30px)); max-height:calc(100vh - 30px); overflow:auto; padding:24px; border:0; border-radius:18px; background:var(--paper); box-shadow:0 25px 75px #0006; }
.pdf-review-dialog { width:min(1040px,calc(100% - 30px)); }
dialog::backdrop { background:#15261d88; }
dialog form>div:first-child button { width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--muted); font-size:28px; }
.dialog-help { color:var(--muted); font-size:14px; line-height:1.45; }
.dialog-help:empty { display:none; }
.dialog-help.parser-warning { padding:10px 12px; border-left:4px solid var(--orange); border-radius:8px; background:#fff0dc; color:var(--ink); }
.form-error { min-height:20px; margin:12px 0 0; color:#8c2f1b; font-weight:bold; line-height:1.4; }
menu { display:flex; justify-content:flex-end; gap:9px; margin:16px 0 0; padding:0; }
.item-heading { margin-top:18px; }
.item-heading h3 { margin:0; font-size:21px; }
.ai-improve { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:10px; background:#f1ede4; }
.ai-improve div { display:grid; gap:4px; }
.ai-improve small { color:var(--muted); line-height:1.4; }
.item-row { margin:9px 0; padding:9px 12px 11px; border:1px solid var(--line); border-radius:12px; background:#fffaf0; }
.item-row legend { padding:0 6px; color:var(--pine); font-size:13px; font-weight:bold; }
.item-row label { margin:0; }
.item-primary { display:grid; grid-template-columns:minmax(260px,1fr) 86px 130px; gap:10px; align-items:end; }
.item-flags { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin-top:8px; padding-top:8px; border-top:1px solid #eee6d9; }
.item-flags .check { min-height:36px; margin:0; }
.item-details { margin-left:auto; }
.item-details summary { min-height:36px; padding:9px 10px; border-radius:8px; color:var(--pine); font-size:13px; font-weight:bold; cursor:pointer; }
.item-details:not([open])>div { display:none; }
.item-details>div { display:grid; grid-template-columns:100px 130px 170px auto; gap:10px; align-items:end; padding:10px 0 2px; }
.item-total { position:sticky; bottom:67px; z-index:2; margin-top:10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#f1ede4; color:var(--pine); font-size:14px; font-weight:bold; box-shadow:0 -6px 18px #172f2214; }
.pdf-review-dialog menu { position:sticky; bottom:-24px; z-index:3; margin-inline:-24px; padding:12px 24px 24px; border-top:1px solid var(--line); background:var(--paper); }
.account-gate,.state-panel { width:min(720px,100%); margin:clamp(56px,12vh,128px) auto 0; padding:clamp(28px,5vw,48px); }
.account-gate h1,.state-panel h1 { margin:0 0 18px; font-size:clamp(38px,6vw,58px); letter-spacing:-.07em; line-height:.96; }
.account-gate article { max-width:610px; color:var(--muted); line-height:1.5; }
.account-gate .auth-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; margin-top:24px; }
.account-gate .auth-form.auth-signup { grid-template-columns:minmax(0,.8fr) minmax(0,1fr) auto; }
.account-gate .auth-form label { margin:0; }
.account-gate .auth-form input,.account-gate .auth-form button { height:43px; }
.account-gate .auth-status { width:100%; }
.auth-choice { display:flex; gap:10px; margin-top:22px; }
.setup-name { margin:20px 0 0; padding:12px 14px; border-radius:10px; background:#f1ede4; }
.name-form,.inline-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; max-width:560px; margin-top:22px; }
.name-form label,.inline-form label { margin:0; }
.state-panel button { margin-top:20px; }
.household-gate { width:min(880px,100%); margin-top:48px; }
.action-grid { margin-top:28px; align-items:start; }
.action-grid form,.invite-box { padding:18px; border:1px solid var(--line); border-radius:14px; background:#fffaf0; }
.action-grid h2,.invite-box h2 { margin:0; font-size:22px; }
.partner-gate { width:min(760px,100%); }
.invite-box { margin-top:24px; }
.invite-box p { color:var(--muted); }
.settings-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:20px; }
.settings-actions small { color:var(--muted); font-size:12px; line-height:1.4; }
.entry-actions { display:flex; align-items:center; gap:8px; }
.action { padding:6px 8px; font-size:12px; }
.archive-list { margin-top:22px; padding-top:14px; border-top:1px solid var(--line); }
.archive-list summary { color:var(--pine); font-weight:bold; cursor:pointer; }
.spinner { display:inline-block; width:18px; height:18px; margin:0 10px -3px 0; border:3px solid var(--line); border-top-color:var(--pine); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .spinner { animation:none; border-top-color:var(--orange); } }

html[data-presentation="sketch"] body { background-image:repeating-linear-gradient(0deg,transparent 0,transparent 27px,var(--line) 28px); background-size:100% 28px; }
html[data-presentation="sketch"] .panel,
html[data-presentation="sketch"] .household-masthead,
html[data-presentation="sketch"] .command-bar,
html[data-presentation="sketch"] .import-feedback,
html[data-presentation="sketch"] .update-banner,
html[data-presentation="sketch"] dialog { position:relative; border-color:var(--pine); }
html[data-presentation="sketch"] .panel::after,
html[data-presentation="sketch"] .household-masthead::after,
html[data-presentation="sketch"] .command-bar::after,
html[data-presentation="sketch"] .import-feedback::after,
html[data-presentation="sketch"] .update-banner::after,
html[data-presentation="sketch"] dialog::after { content:""; position:absolute; inset:3px -4px -4px 3px; z-index:4; border:1px solid var(--pine); border-radius:inherit; opacity:.34; pointer-events:none; transform:rotate(.12deg); }
html[data-presentation="sketch"] .settings { overflow:visible; }
html[data-presentation="sketch"] button { border-color:var(--pine); box-shadow:1px 1px 0 var(--cream),3px 3px 0 var(--orange); }
html[data-presentation="sketch"] .plain { box-shadow:none; }
html[data-presentation="sketch"] input:not([type="radio"]) { border-color:var(--pine); box-shadow:inset 1px 1px 0 var(--line); }
html[data-presentation="sketch"] select { border-color:var(--pine); box-shadow:none; }
html[data-presentation="sketch"] .household-title h1 { text-decoration:underline wavy var(--orange) 2px; text-underline-offset:8px; }
html[data-presentation="sketch"] .household-title>p,
html[data-presentation="sketch"] .insight-card .heading p,
html[data-presentation="sketch"] .expenses-panel .heading p,
html[data-presentation="sketch"] .panel>p:first-child { font-family:"Bradley Hand","Comic Sans MS",cursive; font-size:13px; letter-spacing:.08em; }
html[data-presentation="sketch"] .restock-panel { border-left-width:5px; }
html[data-presentation="sketch"] .ledger-columns { border-bottom:2px solid var(--pine); }
html[data-presentation="sketch"] .suggestion,
html[data-presentation="sketch"] .expense { border-top-style:dashed; border-top-color:var(--line); }
html[data-presentation="sketch"] .page-meta { border-top:2px solid var(--pine); }
@media (max-width:900px) and (min-width:701px) {
  .member-blocks { max-width:360px; }
  .command-bar { grid-template-columns:1fr; gap:14px; }
  .command-actions { grid-template-columns:1fr 1fr auto; padding:14px; }
  .command-actions .plain { grid-column:auto; }
  .insights-grid { grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr); gap:14px; }
  .ledger-columns,.purchase-row { grid-template-columns:minmax(160px,1.4fr) minmax(110px,1fr) 110px minmax(105px,.8fr); }
  .ledger-columns span:nth-child(4),.purchase-row>[data-label="Items"] { display:none; }
}
@media (max-width:700px) {
  main { width:min(100% - 24px,600px); }
  header { align-items:flex-start; flex-wrap:wrap; }
  .header-tools { width:100%; justify-content:space-between; }
  .two,.name-form,.inline-form,.command-bar,.insights-grid { grid-template-columns:1fr; }
  .field-with-help small { min-height:0; }
  .suggestion,.expense { display:grid; gap:6px; }
  .account-gate,.state-panel { margin-top:28px; padding:28px 20px; }
  .account-gate .auth-form,.account-gate .auth-form.auth-signup { grid-template-columns:1fr; }
  .name-form button,.inline-form button { width:100%; }
  .entry-actions { justify-content:space-between; }
  nav button { flex:1 1 100%; }
  .dashboard-shell { gap:14px; padding-top:16px; }
  .household-title h1 { font-size:40px; }
  .household-masthead { flex-direction:column; gap:12px; }
  .member-blocks { justify-content:flex-start; max-width:none; padding-top:0; }
  .balance-card { min-height:128px; }
  .balance-next { grid-template-columns:1fr; }
  .balance-next button { width:100%; }
  .command-actions { grid-template-columns:1fr; padding:14px; }
  .command-actions .plain { grid-column:auto; }
  .preview-controls { align-items:flex-start; }
  .ledger-columns { display:none; }
  .purchase-row { grid-template-columns:1fr auto; gap:8px 14px; }
  .purchase-merchant { grid-column:1/-1; }
  .purchase-row>span,.purchase-row>time,.purchase-row>.entry-actions { display:flex; justify-content:space-between; gap:12px; }
  .purchase-row>span,.purchase-row>time { grid-column:1/-1; }
  .purchase-row>[data-label]::before { content:attr(data-label); color:var(--muted); font-weight:bold; }
  .purchase-row>.entry-actions { grid-column:1/-1; }
  .settings>summary { align-items:flex-start; }
  .danger-zone { grid-template-columns:1fr; }
  .danger-zone button,.danger-zone small { grid-column:1; grid-row:auto; }
  dialog { padding:20px 16px; }
  .item-row { padding:11px; }
  .ai-improve { align-items:stretch; flex-direction:column; }
  .ai-improve button { width:100%; }
  .item-primary { grid-template-columns:1fr 1fr; }
  .item-primary .item-name { grid-column:1/-1; }
  .item-flags { display:grid; grid-template-columns:1fr 1fr; }
  .item-details { grid-column:1/-1; width:100%; margin:0; }
  .item-details summary { width:100%; }
  .item-details>div { grid-template-columns:1fr 1fr; }
  .item-details button { width:100%; }
  .item-total { bottom:75px; }
  .pdf-review-dialog menu { bottom:-20px; margin-inline:-16px; padding:12px 16px 20px; }
}