:root { --ink:#123b66; --muted:#607d98; --paper:#f8fbff; --card:#ffffff; --orange:#2686c8; --line:#cfe0ee; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial, Helvetica, sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; background:radial-gradient(circle at 87% 2%, #dceeff 0, transparent 26rem), var(--paper); }
.topbar { height:72px; padding:0 max(5vw,24px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(18,59,102,.12); background:rgba(255,255,255,.72); }
.brand { display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:white; background:var(--ink); font-size:17px; }
.brand strong,.brand small,.family-status strong,.family-status small { display:block; }
.brand strong { font-family:Georgia,serif; font-size:20px; line-height:18px; }
.brand small { color:var(--muted); letter-spacing:.18em; font-size:10px; text-transform:uppercase; margin-top:5px; }
.family-status { display:flex; align-items:center; gap:12px; font-size:13px; }.family-status small { color:var(--muted); margin-top:3px; }
.family-status.error small { color:#a43b3b; }.family-status.saving .avatars { animation:pulse 1s ease-in-out infinite alternate; }
.avatars { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#d9ecfb; font-size:10px; letter-spacing:-1px; border:3px solid white; }
.hero { min-height:210px; padding:34px max(7vw,32px) 30px; display:flex; align-items:flex-end; justify-content:space-between; gap:36px; max-width:1440px; margin:auto; }
.eyebrow { color:#6d817c; text-transform:uppercase; font-weight:700; font-size:10px; letter-spacing:.2em; margin:0 0 10px; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; margin:0; font-weight:500; letter-spacing:-.035em; }
.hero h1 br { display:none; }
h1 { font-size:clamp(42px,5.3vw,68px); line-height:.94; } h1 em { color:var(--orange); font-weight:400; }
.hero-copy { max-width:560px; color:var(--muted); font-size:14px; line-height:1.6; margin:22px 0 0; }
.add-button { border:0; border-radius:999px; background:var(--ink); color:white; padding:12px 18px 12px 12px; display:flex; align-items:center; gap:9px; font-weight:700; box-shadow:0 10px 24px rgba(18,59,102,.16); white-space:nowrap; transition:.2s; }.add-button:hover { transform:translateY(-2px); background:#17578f; }.add-button span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:rgba(255,255,255,.13); font-size:18px; }
.freezer-overview { max-width:1240px; margin:0 auto 26px; padding:0 28px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.freezer-overview button { min-height:72px; display:flex; align-items:center; gap:12px; text-align:left; padding:12px 15px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:rgba(255,255,255,.84); transition:.2s; }.freezer-overview button:hover { border-color:#78abd0; }.freezer-overview button.active { background:#145f9d; color:white; border-color:#145f9d; box-shadow:0 8px 20px rgba(18,78,128,.16); }
.overview-symbol { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:#e3f1fb; color:var(--ink); font-size:20px; }.freezer-overview button.active .overview-symbol { background:#397db4; color:white; }.freezer-overview small,.freezer-overview strong { display:block; }.freezer-overview small { font-size:10px; text-transform:uppercase; letter-spacing:.1em; opacity:.72; margin-bottom:4px; }.freezer-overview strong { font-size:13px; }
.inventory { background:#edf6fc; border-top:1px solid var(--line); padding:34px max(7vw,32px) 90px; min-height:700px; }
.inventory-heading,.freezer-sections,.search-section { max-width:1240px; margin-left:auto; margin-right:auto; }
.inventory-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }.inventory-heading h2,.modal h2 { font-size:34px; }
.search { width:min(430px,44vw); height:44px; display:flex; align-items:center; gap:9px; padding:0 13px; background:white; border:1px solid var(--line); border-radius:999px; }.search>span { font-size:22px; color:#6a93b2; }.search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); }.search button { border:0; background:#e5f1f9; color:#4e7695; width:25px; height:25px; border-radius:50%; }
.freezer-sections { display:grid; gap:34px; padding-top:27px; }.freezer-section { display:grid; gap:11px; }.freezer-heading { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:11px; }.freezer-heading p { color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:9px; margin:0 0 3px; }.freezer-heading h3 { font:500 24px Georgia,serif; margin:0; }.freezer-heading>span { font-size:11px; color:var(--muted); border:1px solid #bdd6e8; border-radius:999px; padding:6px 10px; }.freezer-icon { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:#dceefa; color:#145f9d; font-size:21px; }.freezer-icon.chest { background:#e8f3fb; color:#327caf; }
.drawer-row { display:flex; gap:6px; overflow-x:auto; padding:2px 0 1px 55px; }.drawer-row button { border:1px solid #c7d7d2; background:transparent; color:#607671; border-radius:999px; padding:6px 10px; font-size:11px; white-space:nowrap; }.drawer-row button.active { background:var(--ink); color:white; border-color:var(--ink); }
.item-list { display:grid; gap:7px; }.item-card { display:grid; grid-template-columns:50px minmax(200px,1fr) 135px 82px 96px; align-items:center; gap:12px; background:var(--card); border:1px solid #c5ddeb; border-radius:13px; padding:9px 12px; box-shadow:0 3px 12px rgba(18,59,102,.03); transition:.2s; }.item-card:hover { border-color:#82b2d3; transform:translateY(-1px); }
.item-emoji { width:44px; height:44px; border-radius:11px; background:#eaf4fb; display:grid; place-items:center; font-size:22px; }.item-name h3 { margin:0 0 3px; font-size:15px; }.item-name>p { color:var(--muted); margin:0; font-size:11px; }.item-name .item-note { color:#607d98; margin-top:4px; line-height:1.3; }.item-note span { color:#2686c8; margin-right:5px; }.variant-list { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }.variant-list>span { padding:3px 6px; border-radius:6px; background:#eaf4fb; color:#315f84; font-size:10px; }.variant-list strong { color:#145f9d; }
.item-name .package-size { display:inline-block; width:max-content; margin-top:4px; padding:2px 6px; border-radius:6px; background:#eaf4fb; color:#145f9d; font-weight:700; font-size:10px; }
.location-badge { border-left:1px solid #dce4e1; padding-left:18px; }.location-badge small { display:block; color:#869893; text-transform:uppercase; letter-spacing:.09em; font-size:9px; margin-bottom:5px; }.location-lines { display:grid; gap:6px; }.location-line { display:grid; gap:2px; padding:6px 8px; border-radius:9px; background:#f4f9fd; color:#355a78; }.location-line strong { font-size:12px; }.location-line span { font-size:11px; color:var(--muted); }
.item-count { text-align:right; }.item-count strong,.item-count span,.item-count small { display:block; }.item-count strong { font:500 38px Georgia,serif; line-height:.8; }.item-count span { color:var(--muted); margin-top:4px; font-size:11px; }.item-count small { margin-top:6px; color:#145f9d; font-size:10px; font-weight:700; }
.edit-item-button { display:flex; align-items:center; justify-content:center; gap:5px; border:1px solid #b8d4e7; border-radius:999px; padding:8px 10px; background:#eef7fd; color:#145f9d; font-size:11px; font-weight:700; }.edit-item-button:hover { background:#dceef9; border-color:#7fb2d5; }
.empty { text-align:center; padding:70px; color:var(--muted); }.empty span { font-size:40px; }.empty h3 { color:var(--ink); }.empty.compact { padding:30px; border:1px dashed #bfd0cb; border-radius:17px; }.empty.compact span { font-size:25px; }.empty.compact p { margin:8px 0 0; }
.empty.loading span { display:inline-block; animation:pulse .9s ease-in-out infinite alternate; }
.result-count { max-width:1240px; margin:28px auto 16px; color:var(--muted); font-size:13px; }
.toast { position:fixed; z-index:30; left:50%; bottom:26px; transform:translateX(-50%); background:var(--ink); color:white; border-radius:999px; padding:12px 14px; display:flex; align-items:center; gap:10px; box-shadow:0 15px 40px rgba(0,0,0,.24); }.toast>span { display:grid; place-items:center; border-radius:50%; width:24px; height:24px; background:#65a896; }.toast button { border:0; background:transparent; color:#b8cac5; margin-left:4px; font-size:12px; }
.modal-backdrop { position:fixed; z-index:40; inset:0; background:rgba(12,42,72,.52); backdrop-filter:blur(5px); display:grid; place-items:center; padding:20px; }.modal { width:min(590px,100%); max-height:calc(100vh - 30px); overflow:auto; background:var(--paper); border-radius:28px; padding:36px; position:relative; box-shadow:0 24px 80px rgba(0,0,0,.3); }.modal-close { position:absolute; right:20px; top:17px; border:0; background:transparent; font-size:29px; color:#577893; }
.mode-switch { display:grid; grid-template-columns:1fr 1fr; background:#e7eeeb; padding:4px; border-radius:13px; margin-top:25px; }.mode-switch button { padding:10px; border:0; border-radius:10px; color:#617570; background:transparent; font-weight:700; }.mode-switch button.active { background:white; color:var(--ink); box-shadow:0 2px 6px rgba(24,48,47,.08); }
.modal form { margin-top:24px; display:grid; gap:18px; }.modal label { display:grid; gap:8px; font-size:12px; font-weight:700; }.optional { color:var(--muted); font-weight:400; }.modal input,.modal select,.modal textarea { width:100%; border:1px solid var(--line); background:white; border-radius:12px; padding:13px; outline:0; color:var(--ink); resize:vertical; }.modal input:focus,.modal select:focus,.modal textarea:focus { border-color:#4e97c9; box-shadow:0 0 0 3px #dceefa; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.form-row.three { grid-template-columns:.7fr 1fr 1.3fr; }.submit-button { border:0; background:var(--orange); color:white; padding:15px 18px; border-radius:999px; font-weight:700; display:flex; justify-content:space-between; }
.edit-modal { width:min(560px,100%); }.edit-quantity { padding:16px; border:1px solid var(--line); border-radius:16px; background:#eef7fd; }.edit-quantity>div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:14px; }.edit-quantity small { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:10px; }.edit-quantity strong { font:500 26px Georgia,serif; }.edit-quantity strong span { color:var(--muted); font:12px Arial,sans-serif; }.edit-quantity-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }.edit-quantity-actions button { border:1px solid #c4dcec; border-radius:10px; background:white; color:var(--ink); padding:11px 5px; font-weight:700; }.edit-quantity-actions button:hover { background:#e2f0f9; }.edit-quantity-actions button.increase { background:#145f9d; border-color:#145f9d; color:white; }.edit-quantity-actions button.increase:hover { background:#0f4f86; }.edit-quantity>p { margin:11px 0 0; color:var(--muted); text-align:right; font-size:11px; }
.variant-editor { display:grid; gap:9px; padding:16px; border:1px solid var(--line); border-radius:16px; background:#eef7fd; }.variant-editor-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; margin-bottom:4px; }.variant-editor-heading small { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:9px; }.variant-editor-heading h3 { margin:4px 0 0; font-size:16px; }.variant-editor-heading>strong { font:500 20px Georgia,serif; white-space:nowrap; }.variant-row { display:grid; grid-template-columns:minmax(80px,1fr) 30px 225px; align-items:center; gap:9px; padding:8px 9px; border:1px solid #d1e3ef; border-radius:12px; background:white; }.variant-row>span { font-size:13px; font-weight:700; }.variant-row>strong { text-align:center; font:500 18px Georgia,serif; }.variant-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }.variant-actions button { border:0; border-radius:8px; padding:8px 3px; background:#e9f3f9; color:#145f9d; font-size:10px; font-weight:700; }.variant-actions button:hover { background:#d4e9f5; }.add-variant { display:grid; grid-template-columns:1fr auto; gap:7px; margin-top:3px; }.add-variant input { min-width:0; }.add-variant button { border:0; border-radius:11px; padding:0 14px; background:#145f9d; color:white; font-weight:700; }
.location-editor { display:grid; gap:11px; padding:16px; border:1px solid var(--line); border-radius:16px; background:#eef7fd; }.location-editor small { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:9px; }.location-editor h3 { margin:4px 0 0; font-size:16px; }.location-row { display:grid; grid-template-columns:1.15fr .85fr; gap:10px; padding-top:9px; border-top:1px solid #d1e3ef; }.location-editor>p { margin:0; color:var(--muted); font-size:11px; line-height:1.4; }
.delete-button { border:1px solid #e4a8a8; background:#fff5f5; color:#a52d2d; padding:12px 18px; border-radius:999px; font-weight:700; }.delete-button:hover { background:#ffe7e7; border-color:#d77d7d; }.delete-warning { text-align:center; padding:10px 0 2px; }.delete-warning>span { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 18px; border-radius:50%; background:#ffe2e2; color:#a52d2d; font:700 27px Georgia,serif; }.delete-warning .eyebrow { color:#a52d2d; }.delete-warning>p:not(.eyebrow) { color:var(--muted); line-height:1.55; margin:16px auto 24px; max-width:430px; }.confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.confirm-actions button { border:1px solid var(--line); border-radius:999px; padding:13px 15px; background:white; color:var(--ink); font-weight:700; }.confirm-actions .confirm-delete { border-color:#a52d2d; background:#a52d2d; color:white; }
.mobile-add { display:none; }

@media (min-width:1050px) {
  .item-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .item-card { grid-template-columns:44px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:5px 10px; align-items:center; }
  .item-emoji { grid-row:1 / 3; width:40px; height:40px; font-size:20px; }
  .location-badge { grid-column:2; grid-row:2; border:0; padding:0; display:grid; gap:4px; }
  .location-badge small { display:none; }
  .location-lines { gap:4px; }
  .location-line { padding:4px 6px; }
  .location-line strong { font-size:10px; }
  .location-line span { font-size:10px; }
  .item-count { grid-column:3; grid-row:1; justify-content:flex-end; }
  .edit-item-button { grid-column:3; grid-row:2; padding:5px 9px; }
}
@media (max-width:900px) { .item-card { grid-template-columns:46px minmax(160px,1fr) 120px 78px; }.edit-item-button { grid-column:2 / 5; }.freezer-overview { grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px) {
  .topbar { height:62px; padding:0 16px; }.brand-mark,.avatars { width:32px; height:32px; }.family-status span:last-child { display:none; }.hero { padding:25px 17px 24px; min-height:175px; display:block; }.hero h1 { font-size:42px; }.hero-copy { font-size:12px; line-height:1.55; margin-top:15px; }.add-button { display:none; }
  .freezer-overview { grid-template-columns:repeat(3,minmax(0,1fr)); padding:0 10px; margin-bottom:18px; gap:5px; }.freezer-overview button { min-width:0; min-height:68px; padding:8px 5px; gap:3px; flex-direction:column; justify-content:center; text-align:center; border-radius:11px; }.freezer-overview button:first-child { grid-column:auto; }.overview-symbol { width:26px; height:26px; border-radius:8px; font-size:15px; }.freezer-overview small { font-size:8px; margin-bottom:2px; letter-spacing:.05em; }.freezer-overview strong { font-size:10px; white-space:nowrap; }
  .inventory { padding:24px 10px 84px; }.inventory-heading { align-items:stretch; flex-direction:column; gap:13px; }.inventory-heading h2 { font-size:29px; }.search { width:100%; height:42px; }.freezer-sections { padding-top:22px; gap:29px; }.drawer-row { margin-right:-10px; padding-left:0; }.freezer-heading { grid-template-columns:38px 1fr auto; gap:8px; }.freezer-icon { width:34px; height:34px; font-size:18px; }.freezer-heading h3 { font-size:21px; }
  .item-card { grid-template-columns:40px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:4px 8px; padding:8px; }.item-emoji { grid-column:1; grid-row:1 / 3; width:36px; height:36px; border-radius:9px; font-size:18px; }.item-name { min-width:0; }.item-name h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.item-name>p:not(.item-note) { display:none; }.location-badge { grid-column:2; grid-row:2; border:0; padding:0; display:grid; gap:4px; }.location-badge small { display:none; }.location-lines { gap:4px; }.location-line { padding:4px 6px; }.location-line strong { font-size:10px; }.location-line span { font-size:10px; }.item-count { grid-column:3; grid-row:1; justify-content:flex-end; }.item-count strong { font-size:20px; }.item-count small { font-size:9px; }.edit-item-button { grid-column:3; grid-row:2; width:auto; min-height:29px; padding:4px 8px; font-size:0; }.edit-item-button span { font-size:14px; }.variant-list { gap:3px; margin-top:4px; }.variant-list>span { padding:2px 5px; font-size:9px; }
  .mobile-add { display:grid; place-items:center; position:fixed; z-index:20; right:20px; bottom:20px; width:58px; height:58px; border:0; border-radius:50%; background:var(--orange); color:white; font-size:29px; box-shadow:0 10px 28px rgba(28,104,157,.32); }.toast { width:calc(100% - 28px); justify-content:center; bottom:88px; }
}
@media (max-width:430px) { h1 { font-size:40px; }.form-row,.form-row.three,.location-row,.confirm-actions { grid-template-columns:1fr; }.modal { padding:32px 22px; }.freezer-heading>span { display:none; } }
@media (max-width:540px) { .variant-row { grid-template-columns:1fr 30px; }.variant-actions { grid-column:1 / 3; }.variant-editor-heading { align-items:flex-start; flex-direction:column; }.add-variant { grid-template-columns:1fr; }.add-variant button { min-height:42px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
@keyframes pulse { from { opacity:.45; transform:scale(.96); } to { opacity:1; transform:scale(1); } }

.field-help { display:block; margin-top:-2px; color:var(--muted); font-size:10px; font-weight:400; line-height:1.45; }
.item-name .package-size { display:inline-flex; align-items:center; gap:4px; }
.item-name .package-size span { font-size:11px; }

/* Touch-friendly quantity steppers for the freezer iPad */
.quantity-stepper-field { display:grid; gap:8px; font-size:12px; font-weight:700; }
.quantity-stepper { display:grid; grid-template-columns:48px 58px minmax(104px,1fr) 58px 48px; align-items:stretch; gap:6px; }
.quantity-stepper button { min-height:46px; border:1px solid #b8d4e7; border-radius:12px; background:white; color:#145f9d; font-size:16px; font-weight:700; line-height:1; padding:0 6px; touch-action:manipulation; }
.quantity-stepper button.increase { background:#145f9d; border-color:#145f9d; color:white; }
.quantity-current { min-height:46px; display:grid; place-items:center; gap:1px; margin:0; padding:5px 8px; border:1px solid #97bddb; border-radius:12px; background:#f4f9fe; color:var(--ink); text-align:center; }
.quantity-current small { color:#5d7d9a; text-transform:uppercase; letter-spacing:.08em; font-size:9px; line-height:1; }
.quantity-current strong { display:block; font:700 24px Arial,sans-serif; line-height:1; }
@media (max-width:700px) { .quantity-stepper { grid-template-columns:44px 54px minmax(92px,1fr) 54px 44px; gap:5px; }.quantity-stepper button { min-height:50px; font-size:15px; padding:0 4px; }.quantity-current { min-height:50px; }.quantity-current strong { font-size:22px; } }

.topbar-status { display:flex; align-items:center; gap:12px; }
.version-badge { display:inline-flex; align-items:center; min-height:26px; padding:4px 9px; border:1px solid var(--line); border-radius:999px; background:#eef7fd; color:#5d7d9a; font-size:10px; font-weight:700; letter-spacing:.04em; white-space:nowrap; }
@media (max-width:560px) { .topbar-status { gap:7px; } .version-badge { font-size:9px; padding:3px 7px; } }

.zero-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.zero-actions button { border:1px solid var(--line); border-radius:999px; padding:13px 15px; background:white; color:var(--ink); font-weight:700; }
.zero-actions .confirm-delete { border-color:#a52d2d; background:#a52d2d; color:white; }
.zero-warning>span { background:#eaf4fb; color:#145f9d; }
@media (max-width:560px) { .zero-actions { grid-template-columns:1fr; } }