:root { --forest:#143d35; --green:#29785e; --mint:#dff2e9; --paper:#fbfaf6; --ink:#1c2825; --muted:#66746f; --line:#dce2dd; --orange:#d8763c; }
* { box-sizing:border-box; } body { margin:0; background:#edf1ed; color:var(--ink); font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; } .app-shell { max-width:760px; min-height:100vh; margin:auto; padding:calc(22px + env(safe-area-inset-top)) 18px calc(94px + env(safe-area-inset-bottom)); background:var(--paper); }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:22px; background:linear-gradient(145deg,#dff2e9,#fbfaf6 58%,#f7dfd1); }.auth-card { width:min(100%,440px); padding:28px; border:1px solid #ffffff99; border-radius:22px; background:#fbfaf6e8; box-shadow:0 18px 50px #143d3522; }.auth-card h1 { font-size:2rem; }.auth-intro { color:var(--muted); margin:12px 0 22px; }.auth-tabs { display:flex; gap:5px; padding:4px; background:#edf1ed; border-radius:11px; }.auth-tab { flex:1; border:0; border-radius:8px; padding:9px; color:var(--muted); background:transparent; font-weight:750; font-size:.82rem; }.auth-tab.active { color:var(--forest); background:#fff; box-shadow:0 2px 6px #143d3518; }.auth-form label { display:block; margin-top:16px; color:#3f504b; font-size:.84rem; font-weight:700; }.auth-form input { display:block; width:100%; margin-top:5px; padding:11px; border:1px solid var(--line); border-radius:9px; background:#fff; }.account-actions { display:flex; align-items:center; justify-content:end; gap:8px; }.logout-button { color:var(--muted); border:0; padding:5px; background:transparent; font-size:.76rem; text-decoration:underline; }
.topbar,.modal-header,.location-title,.card-top,.result-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }.eyebrow { color:var(--green); font-size:.72rem; font-weight:800; letter-spacing:.08em; margin:0 0 2px; text-transform:uppercase; }h1,h2,h3,p { margin-top:0; } h1 { font-size:1.6rem; margin-bottom:0; letter-spacing:-.04em; } h2 { font-size:1.18rem; margin-bottom:0; letter-spacing:-.02em; }.sync-status { color:var(--green); background:var(--mint); border-radius:999px; padding:5px 9px; font-size:.74rem; font-weight:700; white-space:nowrap; }
.search-panel { margin:22px 0 14px; }.search-box { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:0 14px; box-shadow:0 4px 16px #143d3509; }.search-box span { font-size:1.6rem; color:var(--green); }.search-box input { border:0; outline:0; width:100%; padding:15px 0; background:transparent; }
.tabs { display:flex; gap:8px; overflow:auto; padding-bottom:8px; }.tab { border:0; border-radius:999px; padding:8px 13px; white-space:nowrap; color:var(--muted); background:#edf1ed; font-weight:700; font-size:.86rem; }.tab.active { background:var(--forest); color:white; }.view { padding-top:14px; }.hidden { display:none; }.section-heading { display:flex; justify-content:space-between; align-items:baseline; margin:10px 0 12px; }.section-heading p { color:var(--muted); font-size:.84rem; margin:0; }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.summary-card { padding:13px; border-radius:14px; background:#fff; border:1px solid var(--line); }.summary-card strong { font-size:1.4rem; display:block; }.summary-card span { color:var(--muted); font-size:.75rem; }.summary-card.optional strong { color:var(--orange); }
.location-card,.item-card,.space-card { background:white; border:1px solid var(--line); border-radius:15px; padding:14px; margin-bottom:10px; }.location-card { width:100%; text-align:left; color:inherit; }.location-card:hover { border-color:var(--green); }.location-title h3 { margin:0; font-size:1rem; }.location-type,.path,.helper { color:var(--muted); font-size:.78rem; }.chip { padding:3px 8px; background:#edf1ed; color:#43625a; border-radius:999px; font-size:.72rem; font-weight:750; }.progress { width:100%; height:8px; border-radius:999px; background:#edf1ed; overflow:hidden; margin:10px 0 5px; }.progress > i { display:block; height:100%; background:var(--green); border-radius:inherit; }.progress.warn > i { background:var(--orange); }.item-card { display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:11px; }.photo,.photo-placeholder { width:54px; height:54px; border-radius:11px; object-fit:cover; background:var(--mint); display:grid; place-items:center; font-size:1.5rem; }.item-card h3 { margin:0; font-size:1rem; }.item-card p { margin:3px 0 0; }.priority { font-size:.7rem; font-weight:800; padding:4px 7px; border-radius:7px; text-transform:uppercase; }.needed { color:#216047; background:#dff2e9; }.reserve { color:#8b6412; background:#fff1bf; }.optional { color:#a64b24; background:#fde3d6; }.floating-action { position:fixed; z-index:2; right:max(20px,calc((100vw - 720px)/2)); bottom:calc(22px + env(safe-area-inset-bottom)); width:56px; height:56px; border:0; border-radius:50%; background:var(--orange); color:#fff; font-size:2rem; box-shadow:0 8px 22px #8b432c55; }.empty-state { text-align:center; padding:55px 18px; color:var(--muted); }.empty-state span { font-size:3rem; }.empty-state h2 { color:var(--ink); margin:10px 0 4px; }
dialog { max-width:650px; width:calc(100% - 24px); border:0; padding:0; border-radius:20px; box-shadow:0 24px 70px #10231d66; }dialog::backdrop { background:#0c211a88; }.modal form,.detail-modal { padding:22px; }.modal label { display:block; margin:15px 0 0; color:#3f504b; font-size:.84rem; font-weight:700; }.modal input,.modal select { display:block; width:100%; margin-top:5px; padding:11px; border:1px solid var(--line); border-radius:9px; background:#fff; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.primary-button { width:100%; padding:13px; border:0; border-radius:10px; color:#fff; background:var(--forest); font-weight:800; margin-top:20px; }.icon-button { border:0; background:#edf1ed; border-radius:50%; width:32px; height:32px; font-size:1.3rem; }.detail-photo { width:100%; max-height:260px; object-fit:cover; border-radius:13px; margin:12px 0; }.detail-list { padding:0; margin:16px 0 0; list-style:none; }.detail-list li { border-bottom:1px solid var(--line); padding:10px 0; }.detail-actions { display:flex; gap:8px; margin-top:18px; }.secondary-button { flex:1; padding:10px; border-radius:9px; border:1px solid var(--line); background:#fff; font-weight:700; }
@media (max-width:430px) { .summary-grid { gap:6px; }.summary-card { padding:10px; }.summary-card strong { font-size:1.18rem; }.sync-status { max-width:110px; white-space:normal; text-align:center; } }
.household-id { padding:10px; border-radius:9px; background:#edf1ed; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.8rem; overflow-wrap:anywhere; }.member-admin { margin-top:18px; padding-top:15px; border-top:1px solid var(--line); }.member-admin label { display:block; font-size:.84rem; font-weight:700; }.member-admin input { display:block; width:100%; margin-top:5px; padding:11px; border:1px solid var(--line); border-radius:9px; }
#householdSetupDialog,#householdDialog { padding:22px; } #householdSetupDialog form { padding:0; } #householdSetupDialog .secondary-button { width:100%; margin-top:12px; } .quick-actions { display:flex; gap:9px; margin:16px 0 22px; }.quick-actions button { flex:1; }
.danger-button { width:100%; margin-top:10px; padding:11px; border:1px solid #d8763c; border-radius:10px; color:#a64b24; background:#fff; font-weight:800; }
.qr-code { display:grid; place-items:center; margin:18px 0 4px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:12px; }.qr-code img { display:block; }