:root {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#273c32;
  background:#f7f8f3;
  font-synthesis:none;
  --green:#224d3b;
  --muted:#748078;
  --line:#e4e8df;
  --lime:#d9e8ae;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input,a {
  -webkit-tap-highlight-color:transparent;
}
button,input {
  font:inherit;
}
button,a,input {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:not-allowed;
  opacity:.5;
}
button,a {
  transition:background .15s,box-shadow .15s;
}
button:focus-visible,a:focus-visible {
  outline:3px solid #8ba96a;
  outline-offset:3px;
}
input:focus {
  outline:2px solid #6b8c60;
  outline-offset:1px;
}
button {
  border:0;
}
button,a {
  min-height:44px;
}
a {
  color:inherit;
  text-decoration:none;
}
[hidden] {
  display:none!important;
}
.topbar {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(5vw,24px);
  border-bottom:1px solid var(--line);
  background:#fcfdf9;
}
.brand {
  display:flex;
  align-items:center;
  font-size:29px;
  font-weight:750;
  letter-spacing:-1.5px;
  gap:10px;
}
.brand-icon {
  background:var(--green);
  color:#eef2d5;
  border-radius:11px;
  padding:2px 10px;
  font-size:28px;
  letter-spacing:0;
}
.brand-dot {
  color:#90a963;
  margin-left:-10px;
}
.top-note {
  font-family:Georgia,serif;
  font-style:italic;
  color:var(--muted);
  font-size:16px;
}
#account {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:13px;
}
.text-button {
  background:none;
  color:var(--muted);
  padding:8px;
}
.text-button:hover {
  color:var(--green);
}
main {
  max-width:1240px;
  margin:auto;
  padding:52px 32px 20px;
}
.eyebrow {
  font-size:10px;
  font-weight:750;
  letter-spacing:2px;
  color:var(--muted);
  margin:0 0 15px;
}
h1 {
  font-family:Georgia,'Times New Roman',serif;
  font-size:44px;
  font-weight:400;
  letter-spacing:-1.6px;
  line-height:1.14;
  margin:0;
}
.accent {
  color:#89a65b;
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:38px;
}
.intro p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin:14px 0 0;
}
.sync {
  font-size:11px;
  white-space:nowrap;
  background:#edf1e5;
  padding:8px 11px;
  border-radius:20px;
  color:#58744d;
}
.sync.offline {
  background:#fcebdc;
  color:#92532b;
}
.layout {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:30px;
}
.sidebar {
  padding-top:6px;
}
.section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.section-label h2 {
  font-size:13px;
  font-weight:600;
  margin:0;
}
.section-label>span {
  font-size:11px;
  color:var(--muted);
}
#list-nav {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.list-choice {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  width:100%;
  background:transparent;
  border:1px solid transparent;
  padding:15px 14px;
  border-radius:10px;
  color:#627166;
}
.list-choice:hover {
  background:#eff2e9;
}
.list-choice.active {
  background:#eaf0dd;
  border-color:#dde6ca;
  color:var(--green);
}
.list-choice .list-symbol {
  font-size:22px;
}
.list-choice .choice-name {
  flex:1;
  min-width:0;
  overflow-wrap:anywhere;
  font-size:13px;
  font-weight:600;
}
.list-choice .choice-count {
  font-size:11px;
  border-radius:6px;
  background:#fff9;
  padding:4px 7px;
}
.new-list {
  margin-top:12px;
  border:1px dashed #c7d1c0;
  border-radius:10px;
  width:100%;
  background:none;
  color:#62775a;
  text-align:left;
  padding:12px 14px;
  font-size:13px;
}
.new-list>span {
  font-size:20px;
  vertical-align:middle;
  margin-right:8px;
}
.new-list:hover {
  background:#edf2e5;
}
.sidebar-note {
  margin-top:44px;
  padding:22px 14px;
  border-top:1px solid var(--line);
  display:flex;
  gap:14px;
  color:#80916b;
}
.sidebar-note>span {
  font-size:24px;
}
.sidebar-note p {
  font-size:12px;
  line-height:1.8;
  margin:0;
  color:#546648;
}
.sidebar-note p span {
  font-size:11px;
  color:var(--muted);
}
.list-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  min-height:430px;
  box-shadow:0 6px 25px #344a2d03;
}
.list-header {
  padding:30px 30px 22px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.list-header .eyebrow {
  font-size:9px;
  letter-spacing:1.6px;
  margin-bottom:10px;
}
.list-header h2 {
  font-family:Georgia,serif;
  font-size:30px;
  font-weight:400;
  letter-spacing:-.8px;
  margin:0;
  overflow-wrap:anywhere;
}
.list-header p:last-child {
  color:var(--muted);
  font-size:12px;
  margin:10px 0 0;
}
.list-actions {
  display:flex;
  gap:4px;
}
.icon-button {
  background:transparent;
  border-radius:8px;
  color:#809080;
  font-size:21px;
  min-width:44px;
  padding:8px;
  align-self:start;
}
.icon-button:hover {
  background:#eff3e9;
  color:var(--green);
}
.progress-track {
  height:3px;
  background:#f0f3ea;
}
#progress-fill {
  height:3px;
  background:#a5bb76;
  transition:width .3s;
}
.add-form {
  display:flex;
  align-items:end;
  gap:10px;
  margin:26px 30px 28px;
  padding:17px;
  background:#f7f8f3;
  border:1px solid #edf0e7;
  border-radius:10px;
}
.field {
  display:flex;
  flex-direction:column;
  gap:7px;
}
.field label {
  font-size:11px;
  font-weight:600;
  color:#5f6c60;
}
.field input {
  height:46px;
  min-width:0;
  width:100%;
  border:1px solid #dce3d7;
  border-radius:7px;
  background:#fff;
  padding:10px 12px;
  color:var(--green);
  font-size:14px;
}
.field input::placeholder {
  color:#9aa395;
}
.item-name {
  flex:1;
  min-width:0;
}
.count-field {
  width:70px;
}
.primary {
  background:var(--green);
  color:#fff;
  border:1px solid var(--green);
  border-radius:7px;
  padding:12px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:13px;
  font-weight:550;
  min-height:46px;
  white-space:nowrap;
}
.primary:hover {
  background:#30664f;
}
.primary.danger {
  background:#a84439;
  border-color:#a84439;
}
.secondary {
  padding:12px 18px;
  background:#f0f2eb;
  border-radius:7px;
  color:var(--green);
  font-size:13px;
}
.items-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 30px 12px;
}
.items-heading h3 {
  font-size:11px;
  letter-spacing:.4px;
  font-weight:600;
  margin:0;
}
.items-heading h3 span {
  color:#88947d;
  margin-left:7px;
}
.items-heading>span {
  font-size:10px;
  color:#99a08f;
}
.item {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:70px;
  border-top:1px solid #edf0e8;
  margin:0 30px;
}
.check {
  width:44px;
  min-width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  background:transparent;
  border-radius:8px;
}
.check::before {
  content:'';
  border:1.5px solid #c8d3bf;
  width:22px;
  height:22px;
  border-radius:7px;
  background:#fff;
}
.check[aria-checked=true]::before {
  content:'✓';
  background:#dce8c8;
  border-color:#dce8c8;
  color:#52733b;
  line-height:22px;
  font-size:14px;
}
.item-label {
  flex:1;
  min-width:0;
  text-align:left;
  background:transparent;
  color:#36483b;
  font-size:14px;
  padding:10px 0;
  overflow-wrap:anywhere;
}
.item-label:hover {
  color:#779451;
}
.item.checked .item-label {
  text-decoration:line-through;
  color:#9aa394;
}
.item-quantity {
  background:#f3f5ee;
  border-radius:6px;
  padding:5px 9px;
  font-size:11px;
  color:#78866d;
  white-space:nowrap;
}
.item .remove {
  font-size:17px;
  color:#9ba491;
}
.checked-heading {
  padding-top:27px;
}
.list-footer {
  padding:20px 30px;
  margin-top:22px;
  background:#fbfcf8;
  color:#8c9783;
  font-size:10px;
  text-align:center;
  border-top:1px solid #edf0e8;
}
.list-footer>span {
  margin-right:5px;
}
.page-footer {
  display:flex;
  justify-content:space-between;
  margin:30px 0 0;
  color:#98a18e;
  font-size:10px;
}
.page-footer span:first-child {
  font-family:Georgia,serif;
  font-size:13px;
  font-style:italic;
}
.page-footer span:last-child {
  font-size:8px;
  letter-spacing:1.5px;
}
.empty {
  text-align:center;
  padding:70px 20px;
}
.empty-icon {
  font-size:44px;
  color:#9eb776;
}
.empty h2 {
  font:32px Georgia,serif;
  letter-spacing:-.8px;
}
.empty p {
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
}
.empty .primary {
  margin-top:14px;
}
.empty.small {
  padding:25px 20px;
}
.empty.small .empty-icon {
  font-size:30px;
}
.empty.small h3 {
  font:22px Georgia,serif;
  margin:14px 0;
}
.done-banner {
  margin:15px 30px;
  padding:18px;
  background:#edf3e2;
  color:#557443;
  border-radius:8px;
  font-size:13px;
  text-align:center;
}
.welcome {
  padding:52px 12px 100px;
  position:relative;
  min-height:530px;
}
.welcome h1 {
  font-size:72px;
  line-height:1.02;
  letter-spacing:-2px;
}
.welcome>p:not(.eyebrow) {
  color:var(--muted);
  line-height:1.9;
  font-size:15px;
  margin-top:24px;
}
.login-button {
  margin-top:16px;
  padding:14px 20px;
  gap:16px;
}
.welcome .fine-print {
  font-size:11px!important;
  margin-top:13px!important;
}
.welcome-art {
  position:absolute;
  right:7%;
  top:55px;
  width:310px;
  height:340px;
  background:#ecf0de;
  border-radius:48% 48% 16px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}
.welcome-art>span {
  font-size:85px;
  position:absolute;
  top:55px;
  left:50px;
  transform:rotate(-25deg);
}
.welcome-art>span:nth-child(2) {
  left:130px;
  top:60px;
  transform:rotate(20deg);
}
.welcome-art>span:nth-child(3) {
  left:100px;
  top:120px;
  transform:none;
}
.basket-art {
  position:absolute;
  top:180px;
  background:#cbdba4;
  width:220px;
  height:115px;
  border-radius:10px 10px 65px 65px;
  display:grid;
  place-items:center;
  color:#567143;
  font:italic 24px Georgia,serif;
  box-shadow:0 9px 0 #dde6c2;
}
.notice {
  position:fixed;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  background:#273e32;
  color:#fff;
  padding:14px 24px;
  border-radius:10px;
  box-shadow:0 5px 25px #0002;
  max-width:calc(100% - 32px);
  width:max-content;
  font-size:13px;
  z-index:5;
}
.dev-banner {
  background:#fff1d5;
  color:#7e6428;
  padding:10px 15px;
  font-size:12px;
  border-radius:8px;
  margin-bottom:20px;
}
dialog {
  border:1px solid var(--line);
  border-radius:16px;
  width:min(440px,calc(100vw - 32px));
  padding:26px;
  color:var(--green);
  box-shadow:0 20px 80px #10281630;
}
dialog::backdrop {
  background:#122c2455;
  backdrop-filter:blur(3px);
}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dialog-heading h2 {
  font:27px Georgia,serif;
  margin:0;
}
#editor-description {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}
#editor-fields {
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:20px;
}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px;
}
.form-error {
  font-size:12px;
  color:#ae483a;
  min-height:16px;
  margin-bottom:0;
}
@media(min-width:1400px) {
  main {
    padding-top:66px;
  }
}
@media(max-width:900px) {
  .top-note {
    display:none;
  }
  .layout {
    grid-template-columns:190px minmax(0,1fr);
    gap:20px;
  }
  .welcome-art {
    right:0;
    transform:scale(.75);
    transform-origin:right center;
  }
  .welcome h1 {
    font-size:60px;
  }
  .add-form {
    flex-wrap:wrap;
  }
  .add-form .primary {
    flex-basis:100%;
  }
  .list-header {
    padding:24px;
  }
  .items-heading {
    padding-left:24px;
    padding-right:24px;
  }
  .item {
    margin:0 24px;
  }
  .add-form {
    margin:22px 24px;
  }
}
@media(max-width:640px) {
  .topbar {
    height:72px;
    padding:0 20px;
  }
  .brand {
    font-size:26px;
  }
  #account {
    gap:8px;
  }
  #username {
    max-width:92px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
  }
  main {
    padding:30px 16px 20px;
  }
  .intro {
    display:block;
    margin-bottom:27px;
  }
  .intro h1 {
    font-size:34px;
    max-width:320px;
  }
  .intro .eyebrow {
    font-size:8px;
    letter-spacing:1.6px;
  }
  .intro p:not(.eyebrow) {
    font-size:12px;
  }
  .sync {
    display:inline-block;
    margin-top:18px;
    font-size:10px;
  }
  .layout {
    display:block;
  }
  .sidebar {
    margin-bottom:24px;
  }
  .section-label {
    margin-bottom:12px;
  }
  .section-label h2 {
    font-size:12px;
  }
  #list-nav {
    flex-direction:row;
    overflow-x:auto;
    padding-bottom:5px;
    gap:8px;
  }
  .list-choice {
    width:auto;
    flex-shrink:0;
    max-width:230px;
    padding:9px 12px;
    min-height:48px;
  }
  .list-choice .choice-name {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:12px;
  }
  .list-choice .list-symbol {
    font-size:18px;
  }
  .new-list {
    min-height:44px;
    font-size:12px;
    margin-top:8px;
    padding:8px 12px;
  }
  .sidebar-note {
    display:none;
  }
  .list-panel {
    border-radius:12px;
  }
  .list-header {
    padding:22px 18px 18px;
  }
  .list-header h2 {
    font-size:27px;
  }
  .list-header .eyebrow {
    font-size:8px;
  }
  .list-actions {
    gap:0;
  }
  .list-actions .icon-button {
    min-width:40px;
  }
  .add-form {
    margin:20px 16px 25px;
    padding:13px;
    gap:10px;
  }
  .add-form .primary {
    flex-basis:100%;
  }
  .field input {
    font-size:16px;
  }
  .count-field {
    width:66px;
  }
  .items-heading {
    padding:0 18px 12px;
  }
  .items-heading>span {
    display:none;
  }
  .item {
    margin:0 14px;
    gap:7px;
    min-height:68px;
  }
  .item-label {
    font-size:14px;
  }
  .checked-heading {
    padding-top:25px;
  }
  .list-footer {
    font-size:9px;
    padding:18px 10px;
  }
  .page-footer span:last-child {
    display:none;
  }
  .page-footer {
    justify-content:center;
  }
  .welcome {
    padding:24px 4px 45px;
  }
  .welcome h1 {
    font-size:56px;
  }
  .welcome-art {
    position:relative;
    right:auto;
    top:auto;
    margin:35px auto 0;
    transform:scale(.8);
    transform-origin:top center;
    margin-bottom:-65px;
  }
  .welcome>p:not(.eyebrow) {
    font-size:14px;
  }
  .empty {
    padding:40px 14px;
  }
  .done-banner {
    margin:10px 16px;
    font-size:12px;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
  }
}
.list-header > div:first-child {
  min-width: 0;
}
@media (max-width: 360px) {
  #username {
    display: none;
  }
}

/* Optional quantity and unit stay side by side on small screens. */
.unit-field { width: 120px; min-width: 0; }
.count-field { width: 90px; }
.optional { display: block; font-size: 9px; font-weight: 400; color: var(--muted); }
.input-hint { margin: -15px 30px 25px; color: var(--muted); font-size: 11px; }
#edit-unit-field { margin-top: 16px; }
.item-quantity { max-width: 42%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .add-form .item-name { flex-basis: 100%; }
  .add-form .count-field, .add-form .unit-field { flex: 1; width: auto; }
}
@media (max-width: 640px) { .input-hint { margin-left: 18px; margin-right: 18px; } }