:root {
  color-scheme: light;
  font-family: ui-rounded, "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  background: #f5f1e8;
  color: #17352c;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input { font: inherit; }
.site-header { position: sticky; z-index: 5; top: 0; padding-top: env(safe-area-inset-top); border-bottom: 1px solid rgba(214, 207, 193, .9); background: rgba(245, 241, 232, .93); backdrop-filter: blur(14px); }
.site-header-inner { display: flex; width: min(100%, 76rem); min-height: 4.2rem; margin: 0 auto; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 1.25rem; }
.brand { color: #18362d; font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: .25rem; }
.main-nav a { padding: .55rem .7rem; border-radius: .55rem; color: #567067; font-size: .82rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { background: #dfe8df; color: #18362d; }
.logout-button { padding: .55rem .7rem; border: 0; border-radius: .55rem; background: transparent; color: #a53c2a; cursor: pointer; font-size: .82rem; font-weight: 750; white-space: nowrap; }
.logout-button:hover { background: #f5dfd8; }
.logout-button:disabled { cursor: wait; opacity: .55; }
.app-shell { width: min(100%, 76rem); margin: 0 auto; padding: max(1.4rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom)); }
.route-view[hidden] { display: none; }
.masthead { padding: 1.25rem .4rem 2.1rem; }
.page-heading { padding: .25rem .4rem .8rem; }
.eyebrow { margin: 0 0 .7rem; color: #a55335; font-size: .73rem; font-weight: 800; letter-spacing: .13em; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.5rem, 11vw, 3.5rem); font-weight: 500; letter-spacing: -.045em; line-height: .95; }
.page-heading h1 { font-size: clamp(2rem, 8.8vw, 2.8rem); }
.intro { max-width: 26rem; margin: 1.1rem 0 0; color: #476258; font-size: 1rem; line-height: 1.5; }
.upload-card { padding: 1.35rem; background: #fffdf7; border: 1px solid #ded7c8; border-radius: 1.25rem; box-shadow: 0 .8rem 2.4rem rgba(48, 53, 40, .08); }
.step-heading { display: flex; align-items: center; gap: .7rem; margin: 0 0 .8rem; }
.step-heading span { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; background: #dfe8df; border-radius: 50%; color: #18362d; font-size: .83rem; font-weight: 800; }
h2 { margin: 0; font-size: 1rem; }
.type-options { display: grid; gap: .55rem; margin: 0 0 1.75rem; padding: 0; border: 0; }
.type-options label { cursor: pointer; }
.type-options input { position: absolute; opacity: 0; }
.type-options span { display: block; padding: .9rem 1rem; border: 1px solid #d5d1c6; border-radius: .75rem; background: #fff; font-weight: 650; transition: background .15s, border-color .15s, box-shadow .15s; }
.type-options input:checked + span { background: #18362d; border-color: #18362d; box-shadow: 0 .2rem .7rem rgba(24, 54, 45, .16); color: #fff; }
.type-options input:focus-visible + span, .photo-picker:focus-within { outline: 3px solid #d6a253; outline-offset: 2px; }
.photo-picker { display: grid; justify-items: center; gap: .55rem; padding: 1.45rem 1.2rem; border: 1.5px dashed #94a69b; border-radius: .9rem; background: #f1f5ee; cursor: pointer; }
.picker-action { padding: .65rem .9rem; background: #fff; border: 1px solid #c7d2c6; border-radius: .55rem; color: #18362d; font-size: .95rem; font-weight: 800; }
.selection-summary, .status-message { min-height: 1.25rem; color: #52675f; font-size: .9rem; line-height: 1.4; }
.selection-summary { text-align: center; font-weight: 700; }
.selection-summary.has-selection { color: #18362d; font-size: 1.1rem; font-weight: 800; }
.status-message:empty { display: none; }
.status-message.error { color: #a53c2a; }
.status-message.success { color: #236341; }
.upload-button { width: 100%; min-height: 3.25rem; margin-top: 1.35rem; border: 0; border-radius: .8rem; background: #a55335; color: #fff; cursor: pointer; font-weight: 800; transition: transform .15s, opacity .15s; }
.upload-button:not(:disabled):active { transform: scale(.98); }
.upload-button:disabled { cursor: not-allowed; opacity: .45; }
.footer-note { margin: 1.35rem .3rem 0; color: #60746a; font-size: .82rem; text-align: center; }
.feedback-overlay { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 1.25rem; background: rgba(36, 42, 40, .58); }
.feedback-overlay[hidden] { display: none; }
.feedback-modal { width: min(100%, 25rem); padding: 2rem 1.5rem 1.5rem; border: 1px solid #ded7c8; border-radius: 1.25rem; background: #fffdf7; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .25); text-align: center; }
.success-mark { display: grid; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.1rem; place-items: center; border-radius: 50%; background: #dfe8df; color: #236341; font-size: 2rem; font-weight: 800; }
.feedback-modal .eyebrow { margin-bottom: .55rem; }
.feedback-modal h2 { font-family: Georgia, "Times New Roman", serif; font-size: 2.15rem; font-weight: 500; letter-spacing: -.035em; }
.feedback-copy { margin: .8rem 0 1.5rem; color: #476258; font-size: 1rem; line-height: 1.5; }
.feedback-dismiss { width: 100%; min-height: 3.1rem; border: 0; border-radius: .8rem; background: #18362d; color: #fff; cursor: pointer; font-weight: 800; }
.feedback-dismiss:focus-visible { outline: 3px solid #d6a253; outline-offset: 3px; }
.review-list { display: grid; gap: 1rem; overflow-anchor: none; }
.review-card { scroll-margin-top: calc(4.2rem + env(safe-area-inset-top) + .75rem); display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr auto; gap: 1.15rem; align-items: start; padding: 1rem; border: 1px solid #ded7c8; border-radius: 1rem; background: #fffdf7; box-shadow: 0 .6rem 1.8rem rgba(48, 53, 40, .06); }
.review-image { width: 100%; aspect-ratio: 4 / 5; border: 0; border-radius: .7rem; background: #e9eee7; cursor: zoom-in; overflow: hidden; }
.review-image img { width: 100%; height: 100%; object-fit: cover; }
.review-fields { display: grid; gap: .65rem; }
.review-fields label { display: grid; gap: .25rem; color: #567067; font-size: .76rem; font-weight: 750; }
.review-fields textarea, .review-fields input { width: 100%; border: 1px solid #d5d1c6; border-radius: .55rem; background: #fff; color: #18362d; padding: .65rem .7rem; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.4; }
.review-fields textarea { min-height: 3lh; max-height: min(10lh, 55svh); resize: none; line-height: 1.4; overflow-y: auto; }
.review-fields textarea:focus, .review-fields input:focus { outline: 3px solid #d6a253; outline-offset: 1px; border-color: #18362d; }
.review-actions { display: grid; gap: .55rem; min-width: 7rem; }
.review-action-error { grid-column: 1 / -1; margin: 0; color: #a53c2a; font-size: .8rem; line-height: 1.35; }
.review-action { display: inline-flex; min-height: 2.8rem; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: .65rem; color: #fff; cursor: pointer; font-size: .82rem; font-weight: 800; }
.review-action.reject { background: #a53c2a; }
.review-action.approve { background: #236341; }
.review-action:disabled { cursor: wait; opacity: .55; }
.empty-state { padding: 3rem 1.25rem; border: 1px dashed #aebdb0; border-radius: 1rem; background: #f1f5ee; text-align: center; }
.empty-icon { display: grid; width: 3rem; height: 3rem; margin: 0 auto 1rem; place-items: center; border-radius: 50%; background: #dfe8df; color: #236341; font-size: 1.6rem; font-weight: 800; }
.empty-state h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; font-weight: 500; }
.empty-state p { margin: .6rem 0 0; color: #567067; }
.secondary-button { display: block; margin: 1rem auto 0; padding: .7rem 1rem; border: 1px solid #b9c6ba; border-radius: .6rem; background: #fffdf7; color: #18362d; cursor: pointer; font-weight: 750; }
.log-wrap { overflow-x: auto; border: 1px solid #ded7c8; border-radius: 1rem; background: #fffdf7; }
.log-table { width: 100%; border-collapse: collapse; min-width: 42rem; }
.log-table th, .log-table td { padding: .8rem 1rem; border-bottom: 1px solid #ebe5d9; text-align: left; vertical-align: middle; }
.log-table th { color: #567067; font-size: .73rem; letter-spacing: .06em; text-transform: uppercase; }
.log-table td { color: #29483d; font-size: .88rem; }
.log-photo { display: flex; align-items: center; gap: .7rem; }
.log-photo img { width: 2.5rem; height: 3rem; border-radius: .35rem; object-fit: cover; background: #e9eee7; }
.log-caption { max-width: 34rem; color: #29483d; line-height: 1.4; }
.log-metadata { margin-top: .3rem; color: #6b7d73; font-size: .78rem; }
.log-date { margin-top: .35rem; color: #6b7d73; font-size: .75rem; }
.status-pill { display: inline-flex; padding: .25rem .55rem; border-radius: 999px; background: #e7eee7; color: #236341; font-size: .72rem; font-weight: 800; }
.status-pill.rejected { background: #f5dfd8; color: #a53c2a; }
.status-pill.unprocessed { background: #eee9dc; color: #78673f; }
.image-modal { position: relative; width: min(100%, 42rem); padding: 1rem; border-radius: 1rem; background: #fffdf7; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .3); }
.image-modal img { display: block; width: 100%; max-height: 78vh; object-fit: contain; border-radius: .55rem; background: #eef2eb; }
.image-close { position: absolute; z-index: 1; top: .7rem; right: .7rem; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: rgba(24, 54, 45, .9); color: #fff; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.image-modal-title { margin: .7rem .2rem .1rem; color: #567067; font-size: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.auth-shell { display: grid; min-height: 100vh; place-items: center; padding: 1.25rem; background: #f5f1e8; }
.auth-card { width: min(100%, 26rem); padding: 2rem 1.35rem 1.35rem; border: 1px solid #ded7c8; border-radius: 1.25rem; background: #fffdf7; box-shadow: 0 1rem 3rem rgba(48, 53, 40, .1); }
.auth-card h1 { font-size: clamp(2.3rem, 12vw, 3.3rem); }
.auth-copy { margin: .9rem 0 1.6rem; color: #476258; line-height: 1.5; }
.auth-form { display: grid; gap: .75rem; }
.auth-form label { display: grid; gap: .3rem; color: #567067; font-size: .8rem; font-weight: 750; }
.auth-form input { width: 100%; min-height: 3.1rem; padding: .7rem .75rem; border: 1px solid #d5d1c6; border-radius: .65rem; background: #fff; color: #18362d; font-size: 1rem; }
.auth-form input:focus { outline: 3px solid #d6a253; outline-offset: 1px; border-color: #18362d; }
.password-control { position: relative; display: block; }
.password-control input { padding-right: 4.6rem; }
.auth-password-toggle { position: absolute; top: 50%; right: .35rem; min-height: 2.35rem; padding: .35rem .55rem; transform: translateY(-50%); border: 0; border-radius: .45rem; background: transparent; color: #18362d; cursor: pointer; font-size: .82rem; font-weight: 800; }
.auth-password-toggle:hover { background: #edf1e9; }
.auth-password-toggle:focus-visible { outline: 3px solid #d6a253; outline-offset: 1px; }
.auth-submit { min-height: 3.25rem; margin-top: .45rem; border: 0; border-radius: .8rem; background: #18362d; color: #fff; cursor: pointer; font-weight: 800; }
.auth-submit:disabled { cursor: wait; opacity: .55; }
.auth-status { min-height: 1.35rem; margin: .85rem 0 0; color: #a53c2a; font-size: .9rem; line-height: 1.4; }
@media (max-width: 760px) {
  .site-header-inner { display: block; padding-block: .7rem; }
  .brand { display: block; margin-bottom: .45rem; }
  .main-nav { justify-content: space-between; }
  .main-nav a { padding-inline: .45rem; font-size: .76rem; }
  .logout-button { padding-inline: .45rem; font-size: .76rem; }
  .review-card { grid-template-columns: 1fr; }
  .review-image { width: min(100%, 15rem); aspect-ratio: 4 / 5; }
  .review-fields { width: 100%; }
  .review-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (min-width: 600px) { .app-shell { padding-top: 2.8rem; } }