:root {
 color-scheme: light;
 --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
 --ink: #26372e;
 --muted: #69776e;
 --green: #276247;
 --green-dark: #194d38;
 --line: #dfe8df;
 --surface: #fff;
 --canvas: #f5f7f2;
 --soft-green: #edf5ef;
 --amber: #fff4d8;
 font:
  14px / 20px Inter,
  system-ui,
  sans-serif;
 color: var(--ink);
 background: var(--canvas);
}

html {
 -webkit-tap-highlight-color: transparent;
 -webkit-text-size-adjust: 100%;
}
* {
 box-sizing: border-box;
}
body {
 margin: 0;
 min-width: 320px;
 min-height: 100svh;
 padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
  env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
 background:
  radial-gradient(ellipse 720px 480px at 50% 0%, #e9f1e7 0%, transparent 75%),
  var(--canvas);
}
button,
input,
textarea,
select {
 font: inherit;
}
button {
 cursor: pointer;
 touch-action: manipulation;
 user-select: none;
 -webkit-user-select: none;
 -webkit-touch-callout: none;
}
a,
[role="button"] {
 touch-action: manipulation;
}
button:disabled {
 cursor: wait;
 opacity: 0.65;
}
:focus-visible {
 outline: 3px solid #5f876c;
 outline-offset: 2px;
}

.page-shell {
 grid-template-columns: minmax(0, 1fr);
 width: min(100% - 40px, 840px);
 margin: 0 auto;
}
.masthead {
 position: sticky;
 top: 0;
 z-index: 2;
 grid-column: 1;
 height: 70px;
 border-bottom: 1px solid rgb(225 232 225 / 70%);
 background: rgb(245 247 242 / 82%);
 backdrop-filter: blur(18px) saturate(150%);
}
.wordmark {
 color: var(--ink);
 text-decoration: none;
 font-size: 16px;
 font-weight: 500;
 letter-spacing: -0.02em;
}
.mark {
 display: grid;
 place-items: center;
 width: 33px;
 height: 33px;
 border-radius: 11px 11px 11px 4px;
 color: white;
 background: var(--green);
 font-size: 16px;
 font-weight: 700;
}
.location-note {
 color: var(--muted);
 font-size: 13px;
}
.lang-switch {
 padding: 2px;
 border: 1px solid #d5dfd6;
 border-radius: 999px;
 background: #ffffff;
 box-shadow: 0 1px 2px rgb(38 62 48 / 6%);
}
.lang-btn {
 height: 26px;
 padding: 0 10px;
 border: 1px solid transparent;
 border-radius: 999px;
 color: var(--muted);
 background: transparent;
 font-size: 12px;
 font-weight: 500;
 line-height: 24px;
 cursor: pointer;
 transition:
  color 100ms ease,
  background-color 100ms ease,
  border-color 100ms ease,
  box-shadow 100ms ease;
}
.lang-btn:hover:not(.active) {
 color: var(--green-dark);
 background: #f0f5f1;
}
.lang-btn.active {
 color: #ffffff;
 background: var(--green);
 font-weight: 600;
 box-shadow: 0 2px 5px rgb(39 98 71 / 25%);
}
.intro {
 grid-column: 1;
 align-self: center;
 width: min(100%, 700px);
 padding: 0;
 margin: 43px auto 28px;
 text-align: center;
}
.eyebrow {
 margin: 0 0 14px;
 color: var(--green);
 font-size: 13px;
 font-weight: 500;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
h1,
h2,
h3,
p {
 margin-top: 0;
}
h1,
h2 {
 font-family: Inter, system-ui, sans-serif;
}
h1 {
 max-width: none;
 margin-bottom: 14px;
 font-size: clamp(2.5rem, 6vw, 3.75rem);
 font-weight: 600;
 font-optical-sizing: auto;
 letter-spacing: -0.055em;
 line-height: 1.04;
}
.intro-copy {
 max-width: 510px;
 margin: 0 auto;
 color: var(--muted);
 font-size: 14px;
 line-height: 20px;
}
.lookup-card,
.confirm-card,
.result-card {
 width: min(100%, 760px);
 margin-right: auto;
 margin-left: auto;
 padding: 32px clamp(22px, 5vw, 42px);
 border: 1px solid #e0e8df;
 border-radius: 24px;
 background: rgb(255 255 255 / 96%);
 box-shadow:
  0 20px 60px rgb(38 62 48 / 8%),
  0 2px 8px rgb(38 62 48 / 3%);
}
.confirm-card {
 animation: guided-arrive 260ms var(--ease-out) both;
 transform-origin: 50% 100%;
}
.flow-screen[hidden] {
 display: none !important;
}
.flow-home[hidden] {
 display: none;
}
.visually-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}
.flow-back-btn {
 display: inline-flex;
 gap: 6px;
 align-items: center;
 margin: 0 0 18px;
 padding: 6px 2px;
 border: 0;
 color: var(--muted);
 background: transparent;
 font-size: 13px;
 font-weight: 600;
 line-height: 16px;
}
.flow-back-btn:hover {
 color: var(--green-dark);
}
.flow-new-lookup-btn {
 width: 100%;
 margin-top: 22px;
}
.candidate-panel-standalone {
 margin-top: 0;
 padding-top: 0;
 border-top: 0;
}
.lookup-card {
 grid-column: 1;
 align-self: center;
 animation: guided-arrive 260ms var(--ease-out) both;
 transform-origin: 50% 100%;
}
.step-heading {
 display: flex;
 align-items: flex-start;
 gap: 15px;
}

.section-heading {
 padding-bottom: 20px;
 border-bottom: 1px solid var(--line);
}
.step-number {
 flex: 0 0 auto;
 display: grid;
 place-items: center;
 width: 34px;
 height: 34px;
 border-radius: 50%;
 color: #fff;
 background: var(--green);
 font-size: 12px;
 font-weight: 750;
 letter-spacing: 0.02em;
}
.section-heading h2,
.step-heading h2,
.result-card h2 {
 margin: 1px 0 5px;
 font-size: 17px;
 font-weight: 600;
 line-height: 20px;
 letter-spacing: -0.02em;
}
.section-heading p,
.candidate-intro {
 margin: 0;
 color: var(--muted);
 font-size: 14px;
 line-height: 20px;
}
form {
 margin-top: 20px;
}
.field-group {
 margin-top: 18px;
}
.field-group label {
 display: block;
 margin-bottom: 8px;
 font-size: 13px;
 font-weight: 600;
 line-height: 16px;
}
.optional {
 color: var(--muted);
 font-weight: 400;
}
select,
textarea {
 width: 100%;
 min-height: 40px;
 border: 1px solid #d7e0d7;
 border-radius: 12px;
 color: var(--ink);
 background: white;
 font-size: 16px;
 transition: border-color 140ms ease;
}
select {
 min-height: 48px;
 padding: 0 48px 0 15px;
 appearance: none;
 -webkit-appearance: none;
 border: 1px solid #cbdacc;
 border-radius: 14px;
 color: var(--green-dark);
 background-color: #f8fbf8;
 background-image:
  linear-gradient(45deg, transparent 50%, var(--green) 50%),
  linear-gradient(135deg, var(--green) 50%, transparent 50%),
  linear-gradient(to right, var(--line), var(--line));
 background-position:
  calc(100% - 17px) 50%,
  calc(100% - 12px) 50%,
  calc(100% - 36px) 50%;
 background-repeat: no-repeat;
 background-size:
  5px 5px,
  5px 5px,
  1px 22px;
 box-shadow: 0 1px 2px rgb(32 53 42 / 6%);
 font-weight: 600;
 transition:
  border-color 140ms ease,
  background-color 140ms ease,
  box-shadow 140ms ease;
}

select:not(:disabled) {
 cursor: pointer;
}

select:disabled {
 cursor: not-allowed;
 opacity: 0.65;
}

select:hover:not(:disabled) {
 border-color: #a9c0af;
 background-color: #fff;
}

select option {
 color: var(--ink);
 background: #fff;
 font-weight: 500;
}

select option:checked {
 color: var(--green-dark);
 background: var(--soft-green);
 font-weight: 600;
}
.city-picker {
 position: relative;
}
.city-picker > select {
 position: absolute;
 width: 1px;
 height: 1px;
 opacity: 0;
 pointer-events: none;
}
.city-picker-trigger {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 min-height: 48px;
 padding: 0 16px;
 border: 1px solid #cbdacc;
 border-radius: 14px;
 color: var(--green-dark);
 background: #f8fbf8;
 box-shadow: 0 1px 2px rgb(32 53 42 / 6%);
 font: inherit;
 font-weight: 600;
 text-align: left;
 transition:
  border-color 140ms ease,
  background-color 140ms ease,
  box-shadow 140ms ease;
}
.city-picker-trigger:hover,
.city-picker-trigger[aria-expanded="true"] {
 border-color: var(--green);
 background: #fff;
}
.city-picker-chevron {
 width: 8px;
 height: 8px;
 margin: -4px 3px 0 12px;
 border-right: 2px solid var(--green);
 border-bottom: 2px solid var(--green);
 transform: rotate(45deg);
 transition: transform 140ms ease;
}
.city-picker-trigger[aria-expanded="true"] .city-picker-chevron {
 margin-top: 4px;
 transform: rotate(225deg);
}
.city-picker-menu {
 position: absolute;
 z-index: 5;
 top: calc(100% + 6px);
 right: 0;
 left: 0;
 display: grid;
 gap: 4px;
 padding: 6px;
 border: 1px solid var(--line);
 border-radius: 14px;
 background: var(--surface);
 box-shadow: 0 12px 28px rgb(32 53 42 / 14%);
}
.city-picker-menu[hidden] {
 display: none;
}
.city-picker-option {
 min-height: 44px;
 padding: 0 12px;
 border: 0;
 border-radius: 9px;
 color: var(--ink);
 background: transparent;
 font: inherit;
 text-align: left;
}
.city-picker-option:hover,
.city-picker-option:focus-visible,
.city-picker-option[aria-selected="true"] {
 color: var(--green-dark);
 background: var(--soft-green);
 outline: none;
}
.city-picker-option[aria-selected="true"] {
 font-weight: 600;
}
textarea {
 min-height: 98px;
 padding: 14px 15px;
 line-height: 1.55;
 resize: vertical;
}
textarea::placeholder {
 color: #7d8b82;
}
.field-hint {
 display: block;
 margin-top: 7px;
 color: var(--muted);
 font-size: 13px;
 line-height: 1.45;
}

/* Two-Column Desktop & Mobile Mode Switcher Layout */
.city-field-group {
 margin-top: 14px;
 margin-bottom: 6px;
}
.input-mode-switcher {
 margin: 16px 0 18px;
 padding: 3px;
 border-radius: 999px;
 background: #edf3ee;
 border: 1px solid #dbe6dc;
}
.mode-tab {
 height: 36px;
 padding: 0 10px;
 border: 1px solid transparent;
 border-radius: 999px;
 color: var(--muted);
 background: transparent;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
 transition:
  color 100ms ease,
  background-color 100ms ease,
  border-color 100ms ease,
  box-shadow 100ms ease;
 white-space: nowrap;
}
.mode-tab:hover:not(.active) {
 color: var(--green-dark);
}
.mode-tab.active {
 background: #ffffff;
 color: var(--green-dark);
 font-weight: 600;
 border-color: #d2ded3;
 box-shadow: 0 1px 3px rgb(39 98 71 / 12%);
}
.mode-tab .hi-icon {
 width: 16px;
 height: 16px;
 flex-shrink: 0;
}
.direct-submit-wrap {
 margin-top: 4px;
}

@media (max-width: 899px) {
 #recognize-form[data-active-mode="catalog"] .lookup-col-catalog {
  display: block;
 }
 #recognize-form[data-active-mode="catalog"] .input-panel-text,
 #recognize-form[data-active-mode="catalog"] .input-panel-photo,
 #recognize-form[data-active-mode="catalog"] .direct-submit-wrap {
  display: none !important;
 }

 #recognize-form[data-active-mode="text"] .lookup-col-catalog,
 #recognize-form[data-active-mode="text"] .input-panel-photo {
  display: none !important;
 }
 #recognize-form[data-active-mode="text"] .input-panel-text,
 #recognize-form[data-active-mode="text"] .direct-submit-wrap {
  display: block !important;
 }

 #recognize-form[data-active-mode="photo"] .lookup-col-catalog,
 #recognize-form[data-active-mode="photo"] .input-panel-text {
  display: none !important;
 }
 #recognize-form[data-active-mode="photo"] .input-panel-photo,
 #recognize-form[data-active-mode="photo"] .direct-submit-wrap {
  display: block !important;
 }
}

@media (min-width: 900px) {
 .page-shell {
  width: min(100% - 48px, 1140px);
 }
 .intro {
  width: min(100%, 800px);
 }
 .lookup-card {
  width: 100%;
  max-width: 1140px;
 }
 .input-mode-switcher {
  display: none !important;
 }
 .lookup-two-col {
  --gtc: minmax(320px, 1fr) minmax(360px, 1.18fr);
  --g: var(--s30);
  align-items: start;
 }
 .input-panel-text,
 .input-panel-photo,
 .direct-submit-wrap,
 .lookup-col-catalog {
  display: block !important;
 }
 .lookup-col-catalog {
  background: #fbfdfb;
  border: 1px solid #dfe9e1;
  border-radius: 16px;
  padding: 18px 20px 22px;
  box-shadow: 0 1px 3px rgb(39 98 71 / 5%);
 }
 .lookup-col-catalog .stream-catalog {
  margin-top: 0;
 }
 .lookup-col-direct .input-panel-text .field-group {
  margin-top: 0;
 }
}

.stream-catalog {
 margin-top: 14px;
}
.stream-catalog-header {
 margin-bottom: 8px;
}
.stream-tabs {
 overflow-x: auto;
 padding: 2px 2px 6px;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
 scrollbar-color: #cbd8ce transparent;
}
.stream-tabs::-webkit-scrollbar {
 height: 4px;
}
.stream-tabs::-webkit-scrollbar-thumb {
 background: #cbd8ce;
 border-radius: 4px;
}
.stream-tab {
 display: inline-flex;
 flex: 0 0 auto;
 align-items: center;
 gap: 6px;
 height: 32px;
 min-height: 32px;
 padding: 0 10px;
 border: 1px solid #d6e2d7;
 border-radius: 999px;
 color: var(--muted);
 background: #f8faf7;
 font-size: 13px;
 font-weight: 500;
 white-space: nowrap;
 cursor: pointer;
 transition:
  background-color 100ms ease,
  border-color 100ms ease,
  color 100ms ease,
  box-shadow 100ms ease;
}
.stream-tab:hover {
 border-color: #b8cbbd;
 color: var(--foreground);
 background: #edf5ef;
}
.stream-tab-count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 min-width: 18px;
 height: 18px;
 padding: 0 5px;
 border-radius: 999px;
 font-size: 11px;
 font-weight: 700;
 line-height: 1;
 background: #e6eee7;
 color: #55685d;
 transition:
  background-color 140ms ease,
  color 140ms ease;
}

/* Individual Stream Tab Active States */
.stream-tab[data-stream="recyclables"].active {
 border-color: #3b82f6;
 background: #eff6ff;
 color: #1d4ed8;
 font-weight: 600;
 box-shadow: 0 1px 4px rgb(59 130 246 / 15%);
}
.stream-tab[data-stream="recyclables"].active .stream-tab-count {
 background: #dbeafe;
 color: #1e40af;
}

.stream-tab[data-stream="food"].active {
 border-color: #22c55e;
 background: #f0fdf4;
 color: #15803d;
 font-weight: 600;
 box-shadow: 0 1px 4px rgb(34 197 94 / 15%);
}
.stream-tab[data-stream="food"].active .stream-tab-count {
 background: #dcfce7;
 color: #166534;
}

.stream-tab[data-stream="hazardous"].active {
 border-color: #ef4444;
 background: #fef2f2;
 color: #b91c1c;
 font-weight: 600;
 box-shadow: 0 1px 4px rgb(239 68 68 / 15%);
}
.stream-tab[data-stream="hazardous"].active .stream-tab-count {
 background: #fee2e2;
 color: #991b1b;
}

.stream-tab[data-stream="bulky"].active {
 border-color: #d97706;
 background: #fffbeb;
 color: #b45309;
 font-weight: 600;
 box-shadow: 0 1px 4px rgb(217 119 6 / 15%);
}
.stream-tab[data-stream="bulky"].active .stream-tab-count {
 background: #fef3c7;
 color: #92400e;
}

.stream-tab[data-stream="other"].active {
 border-color: #64748b;
 background: #f8fafc;
 color: #334155;
 font-weight: 600;
 box-shadow: 0 1px 4px rgb(100 116 139 / 15%);
}
.stream-tab[data-stream="other"].active .stream-tab-count {
 background: #e2e8f0;
 color: #1e293b;
}

.stream-icon {
 font-size: 14px;
 line-height: 1;
}

/* Stream Guidance Banner */
.stream-banner {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 margin-top: 10px;
 padding: 10px 12px;
 border-radius: 10px;
 border: 1px solid transparent;
 font-size: 13px;
 line-height: 18px;
 transition:
  background-color 100ms ease,
  border-color 100ms ease,
  color 100ms ease;
}
.stream-banner-icon {
 flex: 0 0 auto;
 margin-top: 1px;
}
.stream-banner-icon .hi-icon {
 width: 17px;
 height: 17px;
}
.stream-banner-content {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.stream-banner-title {
 font-weight: 700;
 font-size: 13px;
}
.stream-banner-desc {
 font-size: 12.5px;
 opacity: 0.9;
}

.stream-banner.stream-recyclables {
 background: #eff6ff;
 border-color: #bfdbfe;
 color: #1e3a8a;
}
.stream-banner.stream-food {
 background: #f0fdf4;
 border-color: #bbf7d0;
 color: #14532d;
}
.stream-banner.stream-hazardous {
 background: #fef2f2;
 border-color: #fecaca;
 color: #7f1d1d;
}
.stream-banner.stream-bulky {
 background: #fffbeb;
 border-color: #fde68a;
 color: #78350f;
}
.stream-banner.stream-other {
 background: #f8fafc;
 border-color: #e2e8f0;
 color: #1e293b;
}

.stream-chips {
 margin-top: 10px;
}
.examples {
 margin-top: 13px;
}
.examples-label {
 display: block;
 margin-bottom: 7px;
 color: var(--muted);
 font-size: 13px;
 font-weight: 500;
}
.example-chip {
 display: inline-flex;
 min-height: 34px;
 align-items: center;
 gap: 7px;
 padding: 5px 11px;
 border: 1px solid #d6e2d7;
 border-radius: 999px;
 color: var(--foreground);
 background: #ffffff;
 font-size: 13px;
 font-weight: 500;
 line-height: 16px;
 cursor: pointer;
 transition:
  background-color 140ms ease,
  border-color 140ms ease,
  color 140ms ease,
  box-shadow 140ms ease,
  transform 80ms ease-out;
}
.example-chip:active {
 transition: transform 120ms ease-out;
 transform: scale(0.98);
}
.chip-label {
 font-weight: 500;
}
.chip-tag {
 display: inline-flex;
 align-items: center;
 padding: 2px 7px;
 border-radius: 999px;
 font-size: 11px;
 font-weight: 600;
 line-height: 13px;
 letter-spacing: 0.01em;
}

/* Stream-specific Chip Theming */
.stream-chips[data-stream="recyclables"] .example-chip {
 border-color: #dbeafe;
}
.stream-chips[data-stream="recyclables"] .example-chip:hover {
 border-color: #93c5fd;
 background: #f0f7ff;
 box-shadow: 0 1px 4px rgb(59 130 246 / 12%);
}
.stream-chips[data-stream="recyclables"] .chip-tag {
 background: #eff6ff;
 color: #1d4ed8;
 border: 1px solid #bfdbfe;
}

.stream-chips[data-stream="food"] .example-chip {
 border-color: #dcfce7;
}
.stream-chips[data-stream="food"] .example-chip:hover {
 border-color: #86efac;
 background: #f3fdf6;
 box-shadow: 0 1px 4px rgb(34 197 94 / 12%);
}
.stream-chips[data-stream="food"] .chip-tag {
 background: #f0fdf4;
 color: #15803d;
 border: 1px solid #bbf7d0;
}

.stream-chips[data-stream="hazardous"] .example-chip {
 border-color: #fee2e2;
}
.stream-chips[data-stream="hazardous"] .example-chip:hover {
 border-color: #fca5a5;
 background: #fff5f5;
 box-shadow: 0 1px 4px rgb(239 68 68 / 12%);
}
.stream-chips[data-stream="hazardous"] .chip-tag {
 background: #fef2f2;
 color: #b91c1c;
 border: 1px solid #fecaca;
}

.stream-chips[data-stream="bulky"] .example-chip {
 border-color: #fef3c7;
}
.stream-chips[data-stream="bulky"] .example-chip:hover {
 border-color: #fde68a;
 background: #fffdf5;
 box-shadow: 0 1px 4px rgb(217 119 6 / 12%);
}
.stream-chips[data-stream="bulky"] .chip-tag {
 background: #fffbeb;
 color: #b45309;
 border: 1px solid #fde68a;
}

.stream-chips[data-stream="other"] .example-chip {
 border-color: #e2e8f0;
}
.stream-chips[data-stream="other"] .example-chip:hover {
 border-color: #cbd5e1;
 background: #f8fafc;
 box-shadow: 0 1px 4px rgb(100 116 139 / 12%);
}
.stream-chips[data-stream="other"] .chip-tag {
 background: #f1f5f9;
 color: #334155;
 border: 1px solid #e2e8f0;
}
.button {
 display: inline-flex;
 height: 32px;
 min-height: 32px;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 0 12px;
 border: 1px solid transparent;
 border-radius: 10px;
 font-size: 13px;
 font-weight: 500;
 transition:
  background-color 140ms ease,
  border-color 140ms ease,
  color 140ms ease,
  box-shadow 140ms ease,
  transform 80ms ease-out;
}
.button-primary {
 color: white;
 background: var(--green);
 box-shadow: 0 3px 8px rgb(36 98 71 / 16%);
}
.button-secondary {
 color: var(--green-dark);
 border-color: #d5dfd7;
 background: white;
}
.button:active:not(:disabled) {
 transition:
  background-color 140ms ease,
  border-color 140ms ease,
  color 140ms ease,
  box-shadow 140ms ease,
  transform 120ms ease-out;
 transform: scale(0.98);
}

#recognize-button {
 width: 100%;
 min-height: 46px;
 justify-content: space-between;
 padding: 0 16px;
 border-radius: 12px;
}
.feedback {
 margin-top: 18px;
 padding: 12px 14px;
 border-radius: 8px;
 color: #365847;
 background: var(--soft-green);
 font-size: 14px;
 line-height: 1.5;
}
.feedback-error {
 color: #842f2f;
 background: #fff0ed;
}
.candidate-panel:not(.candidate-panel-standalone) {
 margin-top: 25px;
 padding-top: 24px;
 border-top: 1px solid var(--line);
}
.step-heading {
 align-items: center;
}
.step-heading h2 {
 margin: 0;
}
.candidate-intro {
 margin: 10px 0 16px 45px;
}
.candidate-name {
 margin-left: 45px;
 padding: 16px 18px;
 border: 1px solid #d6e3d8;
 border-radius: 12px;
 color: var(--green-dark);
 background: #f6faf6;
 font-family: Inter, system-ui, sans-serif;
 font-size: 16px;
 font-weight: 500;
 line-height: 20px;
}
.candidate-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin: 17px 0 0 45px;
}
.candidate-actions .button {
 min-height: 38px;
}
.result-card {
 grid-column: 1;
 margin: 22px auto 0;
 scroll-margin-top: 96px;
}
.compare-button {
 margin-top: 22px;
}
.comparison-grid {
 margin-top: 20px;
}
.comparison-card {
 min-width: 0;
 padding: 20px;
 border: 1px solid var(--line);
 border-radius: 16px;
 background: #fbfcfa;
}
.comparison-card .result-content-matched {
 grid-template-columns: minmax(0, 1fr);
}

#comparison-modal .modal-dialog {
 width: min(100%, 1120px);
}
.comparison-card h3 {
 margin: 0 0 12px;
 font-size: 16px;
 line-height: 20px;
 font-weight: 500;
 letter-spacing: -0.02em;
}
.comparison-card .status-pill {
 margin-bottom: 12px;
}
.comparison-card .effective-dates {
 grid-template-columns: minmax(95px, 1fr) 1.3fr;
}
.result-topline {
 display: flex;
 align-items: center;
 gap: 11px;
 margin-bottom: 15px;
}
.status-pill {
 display: inline-flex;
 height: 20px;
 min-height: 20px;
 align-items: center;
 gap: 5px;
 padding: 0 7px;
 border: 0;
 border-radius: 999px;
 color: #72550a;
 background: var(--amber);
 font-size: 11px;
 font-weight: 600;
 line-height: 16px;
}
.status-pill::before {
 content: "•";
 font-size: 16px;
 line-height: 0.7;
}
.status-matched {
 color: #15b042;
 background: #caface;
}
.status-matched::before {
 content: "✓";
 font-size: 12px;
}
.status-unknown {
 color: #72550a;
 background: #fff5dc;
}
.status-unknown::before {
 content: "?";
 font-size: 12px;
}
.status-conflict {
 color: #823d23;
 background: #fff0e5;
}
.status-conflict::before {
 content: "!";
 font-size: 12px;
}
.status-unavailable {
 color: #4d5960;
 background: #eef1f2;
}
.status-unavailable::before {
 content: "–";
 font-size: 14px;
}
.result-card h2 {
 margin-bottom: 18px;
 font-size: 16px;
 line-height: 20px;
}
.result-city {
 margin-bottom: 5px;
 color: var(--muted);
 font-size: 13px;
 font-weight: 500;
}
.result-item-name {
 margin-bottom: 3px;
 font-family: Inter, system-ui, sans-serif;
 font-size: 16px;
 font-weight: 500;
}
.result-category {
 margin-bottom: 16px;
 color: var(--muted);
 font-size: 13px;
}
.instruction {
 margin: 16px 0;
 padding: 19px;
 border-left: 4px solid var(--green);
 border-radius: 0 12px 12px 0;
 background: #f4f8f3;
 font-size: 14px;
 line-height: 20px;
}
.instruction p,
.result-message {
 margin: 0;
 white-space: pre-wrap;
}
.result-message {
 color: #4c5e53;
 line-height: 1.6;
}
.effective-dates {
 display: grid;
 grid-template-columns: minmax(115px, 1fr) 2fr;
 row-gap: 0;
 margin: 19px 0;
 padding: 8px 0;
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 font-size: 13px;
}
.effective-dates dt {
 min-height: 40px;
 display: flex;
 align-items: center;
 color: var(--muted);
}
.effective-dates dd {
 min-height: 40px;
 display: flex;
 align-items: center;
 margin: 0;
 font-weight: 500;
}
.result-section {
 margin-top: 20px;
}
.result-section h3 {
 margin-bottom: 10px;
 font-size: 16px;
 line-height: 20px;
 font-weight: 500;
}
.result-content-matched {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 16px;
}
.result-content-matched > .result-city,
.result-content-matched > .result-item-name,
.result-content-matched > .result-category,
.result-content-matched > .compliance-notice,
.result-content-matched > .effective-dates,
.result-content-matched > .result-section {
 grid-column: 1 / -1;
}
.result-content-matched > .result-city {
 margin: 2px 0 -14px;
}
.result-content-matched > .result-item-name {
 margin: 0;
 font-size: 24px;
 font-weight: 700;
 letter-spacing: -0.04em;
}
.result-content-matched > .result-category {
 margin: -12px 0 0;
}
.result-content-matched > .official-bag-badge,
.result-content-matched > .instruction {
 min-height: 100%;
 margin: 0;
 border: 1px solid var(--line);
 border-radius: 16px;
}
.result-content-matched > .official-bag-badge {
 padding: 18px;
}
.result-content-matched > .instruction {
 display: flex;
 align-items: center;
 padding: 20px;
 border-left: 4px solid var(--green);
}
.result-content-matched > .effective-dates {
 margin: 0;
 padding: 14px 18px;
 border: 1px solid var(--line);
 border-radius: 14px;
 background: #fbfcfa;
}
.result-content-matched > .result-section {
 margin: 0;
 padding-top: 4px;
}
@media (max-width: 560px) {
 .result-content-matched {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
 }
 .result-content-matched > .official-bag-badge,
 .result-content-matched > .instruction {
  grid-column: 1;
 }
 .result-content-matched > .result-item-name {
  font-size: 21px;
 }
}
.source-list {
 display: grid;
 gap: 9px;
 margin: 0;
 padding-left: 19px;
 color: var(--green);
 font-size: 14px;
 line-height: 20px;
}
a {
 color: #24583e;
 text-decoration-thickness: 1px;
 text-underline-offset: 3px;
 overflow-wrap: anywhere;
}
.muted-copy {
 margin: 0;
 color: var(--muted);
 font-size: 13px;
 line-height: 16px;
}
.photo-label {
 margin: 0 0 8px;
 font-size: 13px;
 font-weight: 500;
 line-height: 16px;
}
.photo-picker {
 padding: 17px;
 border: 1px solid #dce6dd;
 border-radius: 16px;
 background: linear-gradient(145deg, #f7faf6, #f0f6f0);
}
.photo-picker-copy {
 display: grid;
 gap: 3px;
}
.photo-picker-copy strong {
 font-size: 14px;
 font-weight: 500;
}
.photo-picker-copy span,
.photo-preview-copy span {
 color: var(--muted);
 font-size: 13px;
 line-height: 1.45;
}
.photo-actions {
 margin-top: 14px;
}
.photo-action {
 min-height: 32px;
 gap: 7px;
 padding: 0 8px;
 font-size: 13px;
}
.photo-action svg {
 width: 19px;
 height: 19px;
 flex: 0 0 auto;
}
.photo-preview {
 display: grid;
 grid-template-columns: 82px minmax(0, 1fr) auto;
 align-items: center;
 gap: 13px;
 margin-top: 12px;
 padding: 10px;
 border: 1px solid var(--line);
 border-radius: 14px;
 background: #f8faf7;
}
.photo-preview #image-preview-image {
 display: block;
 width: 82px;
 height: 82px;
 border-radius: 9px;
 object-fit: cover;
 background: #e8eee8;
}
.photo-preview-copy {
 display: grid;
 min-width: 0;
 gap: 2px;
}
.photo-preview-copy strong {
 font-size: 14px;
}
#image-preview-name {
 min-width: 0;
 color: var(--muted);
 font-size: 13px;
 overflow-wrap: anywhere;
}
#remove-image-button {
 height: 32px;
 min-height: 32px;
 padding: 0 12px;
}
select:focus-visible,
textarea:focus-visible,
.explainer-form textarea:focus-visible {
 border-color: var(--green);
}
.passage-disclosure {
 margin-top: 12px;
 border: 1px solid var(--line);
 border-radius: 10px;
 background: #fbfcfa;
}
.passage-disclosure summary {
 min-height: 40px;
 padding: 11px 15px;
 color: var(--green-dark);
 font-size: 14px;
 font-weight: 500;
 cursor: pointer;
}
.passage-disclosure summary::marker {
 color: var(--green);
}
.passage-disclosure[open] summary {
 border-bottom: 1px solid var(--line);
}
.passage-disclosure > :not(summary) {
 margin: 12px;
}
.source-list a {
 font-weight: 650;
 text-decoration-thickness: 1.5px;
}
a:active,
.passage-disclosure summary:active {
 color: var(--green-dark);
}
@media (hover: hover) and (pointer: fine) {
 .button:hover:not(:disabled) {
  transform: translateY(-1px);
 }
 .button:active:not(:disabled) {
  transform: scale(0.98);
 }
 .example-chip:hover {
  border-color: #b8cbbd;
  background: #edf5ef;
  transform: translateY(-1px);
 }
 .quick-nav-btn:hover {
  transform: translateY(-1px);
 }
 .photo-clear-btn:hover {
  transform: scale(1.1);
 }
 .button-primary:hover:not(:disabled) {
  background: var(--green-dark);
  box-shadow: 0 5px 12px rgb(36 98 71 / 20%);
 }
 .button-secondary:hover:not(:disabled) {
  background: #f5f8f4;
 }
 a:hover {
  color: #143b28;
 }
}
.supporting-passage {
 padding: 15px;
 border-radius: 9px;
 background: #f6f7f4;
}
.supporting-passage blockquote {
 margin: 0;
 color: #48594f;
 font-size: 14px;
 line-height: 1.6;
 white-space: pre-wrap;
}
.supporting-passage-entry + .supporting-passage-entry {
 margin-top: 14px;
 padding-top: 14px;
 border-top: 1px solid var(--line);
}
.supporting-passage-entry h4 {
 margin: 0 0 6px;
 font-size: 13px;
}
.supporting-passage-entry .muted-copy {
 margin-bottom: 8px;
}
.explainer {
 padding-top: 18px;
 border-top: 1px solid var(--line);
}
.explainer-intro {
 margin: 0 0 18px;
 color: var(--muted);
 font-size: 13px;
 line-height: 1.5;
}
.explainer-header {
 display: flex;
 align-items: center;
 gap: 10px;
 padding-bottom: 14px;
 border-bottom: 1px solid var(--line);
}
.explainer-mark {
 flex: 0 0 44px;
 width: 44px;
 height: 44px;
 object-fit: contain;
}
.explainer-assistant-details {
 display: grid;
 gap: 2px;
 min-width: 0;
}
.explainer-assistant-details strong {
 font-size: 13px;
 line-height: 18px;
}
.explainer-assistant-details span {
 color: var(--muted);
 font-size: 11px;
 line-height: 15px;
}
.explainer-thread {
 display: grid;
 gap: 12px;
 max-height: min(46vh, 440px);
 overflow-y: auto;
 padding: 16px 2px 4px;
 overscroll-behavior: contain;
 scrollbar-color: #d5dfd6 transparent;
}
.explainer-user,
.explainer-reply {
 max-width: 94%;
 margin: 0;
 padding: 12px 14px;
 border-radius: 16px;
 line-height: 1.55;
 overflow-wrap: anywhere;
}
.explainer-user {
 justify-self: end;
 border-bottom-right-radius: 5px;
 color: var(--green-dark);
 background: #edf5ef;
 white-space: pre-wrap;
}
.explainer-reply {
 display: grid;
 justify-self: start;
 gap: 8px;
 border: 1px solid #edf0eb;
 border-bottom-left-radius: 5px;
 background: #f8f9f6;
}
.explainer-reply h4 {
 margin: 0;
 font-size: 13px;
 line-height: 16px;
}
.explainer-reply p {
 margin: 0;
}
.explainer-reply ul,
.explainer-reply ol {
 display: grid;
 gap: 6px;
 margin: 0;
 padding-left: 19px;
 font-size: 14px;
 line-height: 20px;
}
.explainer-answer {
 display: grid;
 gap: 8px;
 min-width: 0;
 overflow-wrap: anywhere;
}
.explainer-progress,
.explainer-reasoning {
 color: var(--muted);
 font-size: 11px;
 line-height: 1.6;
}
.explainer-reply[aria-busy="true"] .explainer-progress::before {
 content: "●";
 margin-right: 6px;
 color: var(--green);
}
.explainer-reasoning summary {
 cursor: pointer;
 font-weight: 600;
}
.explainer-reasoning p {
 margin-top: 8px;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
}
.explainer-failed .explainer-progress {
 color: #a33131;
}
.explainer-suggestions {
 display: flex;
 flex-wrap: wrap;
 gap: 7px;
 margin: 4px 0 12px;
}
.explainer-suggestion {
 padding: 6px 9px;
 border: 1px solid var(--line);
 border-radius: 999px;
 color: #45584b;
 background: #fff;
 font-size: 11px;
 line-height: 16px;
 text-align: left;
 transition: border-color 140ms ease, background-color 140ms ease;
}
.explainer-suggestion:hover:not(:disabled) {
 border-color: #a9c2ae;
 background: #f5f8f3;
}
.explainer-form {
 display: flex;
 align-items: end;
 gap: 8px;
 padding: 8px;
 border: 1px solid #cbd8ce;
 border-radius: 16px;
 background: #fff;
 transition: border-color 140ms ease, box-shadow 140ms ease;
}
.explainer-form:focus-within {
 border-color: #73977c;
 box-shadow: 0 0 0 3px rgb(39 98 71 / 10%);
}
.explainer-form textarea {
 width: 100%;
 min-height: 40px;
 max-height: 144px;
 resize: none;
 padding: 9px 7px;
 border: 0;
 outline: 0;
 color: var(--ink);
 background: transparent;
 font: inherit;
 line-height: 22px;
}
.explainer-form textarea:focus-visible {
 outline: 0;
}
.explainer-form textarea::placeholder {
 color: #88948b;
}
.explainer-form textarea:disabled {
 color: var(--muted);
}
.explainer-send {
 display: grid;
 flex: 0 0 38px;
 width: 38px;
 height: 38px;
 place-items: center;
 border: 0;
 border-radius: 12px;
 color: #fff;
 background: var(--green);
 transition: transform 140ms ease-out, background-color 140ms ease;
}
.explainer-send:hover:not(:disabled) {
 background: var(--green-dark);
}
.explainer-send:active:not(:disabled) {
 transform: scale(0.96);
}
.explainer-send:disabled {
 cursor: wait;
 opacity: 0.6;
}
.explainer-send svg {
 width: 18px;
 height: 18px;
 fill: none;
 stroke: currentColor;
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke-width: 1.8;
}
.explainer-feedback {
 margin: 8px 2px 0;
 color: var(--muted);
 font-size: 12px;
 line-height: 1.5;
}
.explainer-feedback.feedback-error {
 color: #842f2f;
}
footer {
 display: flex;
 justify-content: space-between;
 gap: 16px;
 width: min(100%, 760px);
 margin: 0 auto;
 padding: 27px 0 35px;
 color: var(--muted);
 font-size: 13px;
 line-height: 16px;
}
footer span:first-child {
 color: var(--ink);
 font-weight: 700;
}

@keyframes guided-arrive {
 from {
  opacity: 0;
  transform: translateY(8px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}
.enter-transition {
 opacity: 1;
 transform: translateY(0);
 transition:
  opacity 200ms var(--ease-out),
  transform 200ms var(--ease-out);
}
.enter-transition.enter-from {
 opacity: 0;
 transform: translateY(8px);
}
[hidden] {
 display: none !important;
}

@media (max-width: 960px) {
 .page-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(100% - 40px, 840px);
 }
 .intro {
  padding: 0;
  margin: 43px auto 28px;
 }
 .intro h1 {
  max-width: none;
 }
}
@media (max-width: 560px) {
 .page-shell {
  width: min(100% - 28px, 760px);
 }
 .masthead {
  position: static;
  height: auto;
  min-height: 62px;
  padding: 10px 0;
 }
 .masthead-meta {
  width: 100%;
 }
 .location-note {
  font-size: 12px;
 }
 .lang-btn {
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
 }
 .stream-tab {
  height: 30px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
 }
 .intro {
  padding: 0;
  margin: 37px auto 23px;
 }
 h1 {
  max-width: none;
  font-size: clamp(2.25rem, 10vw, 3rem);
  letter-spacing: -0.04em;
 }
 .intro-copy {
  font-size: 14px;
  line-height: 20px;
 }
 .lookup-card,
 .confirm-card,
 .result-card {
  padding: 24px 18px;
  border-radius: 19px;
 }
 .photo-action {
  gap: 5px;
  padding: 0 7px;
  font-size: 13px;
  white-space: nowrap;
 }
 @media (max-width: 360px) {
  .photo-actions {
   --cols: 1;
  }
 }
 .photo-preview {
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 10px;
 }
 .photo-preview #image-preview-image {
  width: 60px;
  height: 60px;
 }
 #remove-image-button {
  grid-column: 1 / -1;
  width: 100%;
 }
 .compare-button {
  width: 100%;
 }
 .comparison-grid {
  --cols: 1;
  --g: var(--s15);
 }
 .comparison-card {
  padding: 17px;
 }
 .comparison-card .effective-dates {
  grid-template-columns: 1fr;
 }
 .result-topline {
  align-items: flex-start;
  flex-wrap: wrap;
 }
 .effective-dates {
  grid-template-columns: 1fr;
  row-gap: 4px;
 }
 .effective-dates dd {
  margin-bottom: 7px;
 }
 .section-heading h2 {
  font-size: 16px;
  line-height: 20px;
 }
 .section-heading p {
  font-size: 14px;
  line-height: 20px;
 }
 .candidate-intro {
  margin-left: 0;
 }
 .candidate-name {
  margin-left: 0;
 }
 .candidate-actions {
  display: grid;
  margin-left: 0;
 }
 .candidate-actions .button,
 #recognize-button {
  width: 100%;
 }
 footer {
  flex-direction: column;
  gap: 6px;
 }
}

/* Quick Navigation Bar */
.quick-nav {
 margin: 0 auto 28px;
 width: min(100%, 700px);
}
.quick-nav-btn {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 padding: 8px 15px;
 border: 1px solid #d5dfd6;
 border-radius: 999px;
 color: var(--green-dark);
 background: #ffffff;
 font-size: 13px;
 font-weight: 500;
 box-shadow: 0 1px 3px rgb(38 62 48 / 6%);
 transition:
  background-color 140ms ease,
  border-color 140ms ease,
  color 140ms ease,
  box-shadow 140ms ease,
  transform 80ms ease-out;
}
.quick-nav-btn:hover {
 background: var(--soft-green);
 border-color: var(--green);
}
.quick-nav-btn:active {
 transform: translateY(0);
}
/* Heroicons Styling */
.hi-icon {
 width: 1.15em;
 height: 1.15em;
 display: inline-block;
 vertical-align: -0.16em;
 stroke: currentColor;
 stroke-width: 1.75;
 fill: none;
 flex-shrink: 0;
}
.btn-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: var(--green-dark);
}
.btn-icon .hi-icon {
 width: 1.15rem;
 height: 1.15rem;
}
.stream-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 14px;
 line-height: 1;
}
.stream-icon .hi-icon {
 width: 1.15rem;
 height: 1.15rem;
}
.modal-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: var(--green);
}
.modal-icon .hi-icon {
 width: 1.35rem;
 height: 1.35rem;
}
.bag-badge-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
}
.bag-badge-icon .hi-icon {
 width: 1.35rem;
 height: 1.35rem;
}
.print-stream-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
}
.print-stream-icon .hi-icon {
 width: 1.45rem;
 height: 1.45rem;
}
.modal-close-btn .hi-icon {
 width: 1.15rem;
 height: 1.15rem;
}
.hi-inline-scale {
 width: 1.1em;
 height: 1.1em;
 display: inline-block;
 vertical-align: -0.15em;
 margin-right: 4px;
}
.compliance-icon .hi-icon {
 width: 1.35rem;
 height: 1.35rem;
 color: #c2410c;
}
.hub-pin {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: var(--green);
 flex-shrink: 0;
}
.hub-pin .hi-icon {
 width: 1.15rem;
 height: 1.15rem;
}
.photo-clear-btn .hi-icon {
 width: 12px;
 height: 12px;
 stroke-width: 2.2;
}
.quiz-trophy .hi-icon {
 width: 58px;
 height: 58px;
 color: #f59e0b;
}
.quiz-feedback-title .hi-icon {
 width: 1.25rem;
 height: 1.25rem;
 color: var(--green);
}
.quiz-feedback.is-wrong .quiz-feedback-title .hi-icon {
 color: #ef4444;
}

/* Voice Search Button & Wrapper */
.textarea-label-row {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
}
.textarea-wrapper {
 position: relative;
 width: 100%;
}
.textarea-wrapper textarea {
 padding-right: 46px;
}
.voice-search-btn {
 position: absolute;
 right: 8px;
 bottom: 10px;
 width: 32px;
 height: 32px;
 padding: 0;
 display: grid;
 place-items: center;
 border: 1px solid #cbdacc;
 border-radius: 50%;
 color: var(--muted);
 background: #f8faf8;
 transition:
  color 140ms ease,
  border-color 140ms ease,
  background-color 140ms ease;
}
.voice-search-btn:hover {
 color: var(--green);
 border-color: var(--green);
 background: #ffffff;
}
.voice-search-btn.listening {
 color: #ffffff;
 border-color: #dc2626;
 background: #dc2626;
}
.voice-search-btn.listening::after {
 content: "";
 position: absolute;
 inset: -4px;
 border: 2px solid rgb(220 38 38 / 60%);
 border-radius: 50%;
 pointer-events: none;
 animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
 0% {
  opacity: 1;
  transform: scale(1);
 }
 70% {
  opacity: 0;
  transform: scale(1.35);
 }
 100% {
  opacity: 0;
  transform: scale(1.35);
 }
}
.mic-icon {
 width: 17px;
 height: 17px;
}
.voice-status {
 margin-top: 8px;
 padding: 8px 12px;
 border-radius: 8px;
 font-size: 13px;
 line-height: 18px;
 background: #edf5ef;
 color: var(--green-dark);
 border-left: 3px solid var(--green);
}
.voice-status.listening {
 background: #fef2f2;
 color: #b91c1c;
 border-left-color: #dc2626;
}

/* Photo Preview Thumbnail & Clear/Retake Buttons */
.photo-preview-thumb-wrap {
 position: relative;
 width: 82px;
 height: 82px;
 flex: 0 0 auto;
}
.photo-preview-thumb-wrap img {
 display: block;
 width: 100%;
 height: 100%;
 border-radius: 9px;
 object-fit: cover;
 background: #e8eee8;
}
.photo-clear-btn {
 position: absolute;
 top: -6px;
 right: -6px;
 width: 22px;
 height: 22px;
 padding: 0;
 display: grid;
 place-items: center;
 border: 1.5px solid #ffffff;
 border-radius: 50%;
 color: #ffffff;
 background: #475569;
 font-size: 11px;
 font-weight: 700;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 transition:
  background-color 120ms ease,
  color 120ms ease,
  transform 80ms ease-out;
}
.photo-clear-btn:hover {
 background: #ef4444;
}
.photo-preview-actions {
 display: flex;
 gap: 8px;
}
.photo-preview-meta {
 color: var(--muted);
 font-size: 12px;
}
.photo-retake-btn {
 height: 32px;
 min-height: 32px;
 padding: 0 12px;
 font-size: 13px;
}

/* Official Bag Color Badges & Bin Visual Indicators */
.official-bag-badge {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 margin: 14px 0 16px;
 padding: 14px 16px;
 border-radius: 14px;
 border: 1.5px solid transparent;
 transition: transform 140ms ease;
}
.bag-badge-icon {
 font-size: 24px;
 line-height: 1;
 flex: 0 0 auto;
 margin-top: 1px;
}
.bag-badge-content {
 display: grid;
 gap: 3px;
}
.bag-badge-label {
 font-size: 11px;
 text-transform: uppercase;
 font-weight: 700;
 letter-spacing: 0.05em;
 opacity: 0.85;
}
.bag-badge-title {
 font-size: 16px;
 font-weight: 700;
 line-height: 22px;
}
.bag-badge-desc {
 font-size: 13px;
 line-height: 18px;
 opacity: 0.9;
}

/* 🟢 Green Bag / Organic */
.bag-badge-food {
 background: #f0fdf4;
 border-color: #86efac;
 color: #14532d;
}
.bag-badge-food .bag-badge-title {
 color: #166534;
}

/* ⚪ Transparent Bag / Blue Bin (Recyclables) */
.bag-badge-recyclables {
 background: #eff6ff;
 border-color: #93c5fd;
 color: #1e3a8a;
}
.bag-badge-recyclables .bag-badge-title {
 color: #1d4ed8;
}

/* ⚫ Dark / Gray Bag (Other Domestic Waste) */
.bag-badge-other {
 background: #f8fafc;
 border-color: #cbd5e1;
 color: #1e293b;
}
.bag-badge-other .bag-badge-title {
 color: #0f172a;
}

/* 🔴 Labeled Red/Orange Hazard Container */
.bag-badge-hazardous {
 background: #fef2f2;
 border-color: #fca5a5;
 color: #7f1d1d;
}
.bag-badge-hazardous .bag-badge-title {
 color: #991b1b;
}

/* 🟤 Brown / Truck (Bulky Waste) */
.bag-badge-bulky {
 background: #fffbeb;
 border-color: #fde68a;
 color: #78350f;
}
.bag-badge-bulky .bag-badge-title {
 color: #92400e;
}

/* Decree 45/2022/NĐ-CP Compliance Notice */
.compliance-notice {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 margin: 12px 0 16px;
 padding: 12px 14px;
 border-radius: 12px;
 border-left: 4px solid #ea580c;
 background: #fff7ed;
 color: #9a3412;
 font-size: 13px;
 line-height: 18px;
}
.compliance-icon {
 font-size: 18px;
 flex: 0 0 auto;
 margin-top: 1px;
}
.compliance-content {
 display: grid;
 gap: 2px;
}
.compliance-title {
 font-size: 13px;
 font-weight: 700;
 color: #7c2d12;
}
.compliance-copy {
 margin: 0;
}

/* Modals */
.modal {
 position: fixed;
 inset: 0;
 z-index: 100;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 16px;
}
.modal-backdrop {
 position: absolute;
 inset: 0;
 background: rgba(15, 23, 42, 0.55);
 backdrop-filter: blur(4px);
 animation: fadeIn 200ms var(--ease-out);
}
.modal-dialog {
 position: relative;
 z-index: 1;
 width: min(100%, 580px);
 max-height: 90vh;
 max-height: 90dvh;
 display: flex;
 flex-direction: column;
 border-radius: 20px;
 background: #ffffff;
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 animation: modalScaleUp 220ms var(--ease-out);
 overflow: hidden;
}
.modal-dialog-lg {
 width: min(100%, 720px);
}
@keyframes fadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}
@keyframes modalScaleUp {
 from {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
 }
 to {
  opacity: 1;
  transform: scale(1) translateY(0);
 }
}
.modal-header {
 padding: 18px 22px;
 border-bottom: 1px solid var(--line);
}
.modal-icon {
 font-size: 20px;
}
.modal-header h2 {
 margin: 0;
 font-size: 18px;
 font-weight: 700;
}
.modal-close-btn {
 width: 32px;
 height: 32px;
 padding: 0;
 display: grid;
 place-items: center;
 border: none;
 border-radius: 50%;
 color: var(--muted);
 background: #f1f5f9;
 font-size: 15px;
 font-weight: 700;
 transition:
  color 120ms ease,
  background-color 120ms ease;
}
.modal-close-btn:hover {
 color: var(--ink);
 background: #e2e8f0;
}
.modal-body {
 padding: 22px;
 overflow-y: auto;
}

/* Quiz UI */
.quiz-progress-bar {
 height: 6px;
 border-radius: 999px;
 background: #e2e8f0;
 overflow: hidden;
 margin-bottom: 18px;
}
.quiz-progress-fill {
 height: 100%;
 width: 100%;
 background: var(--green);
 transform-origin: left center;
 transform: scaleX(0);
 transition: transform 200ms var(--ease-out);
}
.quiz-counter {
 font-size: 12px;
 font-weight: 600;
 text-transform: uppercase;
 color: var(--muted);
 letter-spacing: 0.04em;
 margin-bottom: 6px;
}
.quiz-question-text {
 font-size: 17px;
 font-weight: 600;
 line-height: 24px;
 margin: 0 0 18px;
 color: var(--ink);
}
.quiz-options {
 display: grid;
 gap: 10px;
 margin-bottom: 16px;
}
.quiz-option-btn {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 12px 16px;
 border: 1.5px solid #e2e8f0;
 border-radius: 12px;
 background: #ffffff;
 color: var(--ink);
 text-align: left;
 font-size: 14px;
 line-height: 20px;
 transition:
  border-color 140ms ease,
  background-color 140ms ease,
  color 140ms ease;
}
.quiz-option-btn:hover:not(:disabled) {
 border-color: var(--green);
 background: #f8faf8;
}
.quiz-option-btn.correct {
 border-color: #22c55e !important;
 background: #f0fdf4 !important;
 color: #14532d !important;
 font-weight: 600;
}
.quiz-option-btn.incorrect {
 border-color: #ef4444 !important;
 background: #fef2f2 !important;
 color: #7f1d1d !important;
}
.quiz-option-letter {
 display: grid;
 place-items: center;
 width: 24px;
 height: 24px;
 border-radius: 50%;
 background: #f1f5f9;
 font-size: 12px;
 font-weight: 700;
 flex: 0 0 auto;
}
.quiz-option-btn.correct .quiz-option-letter {
 background: #22c55e;
 color: #ffffff;
}
.quiz-option-btn.incorrect .quiz-option-letter {
 background: #ef4444;
 color: #ffffff;
}
.quiz-feedback {
 margin-top: 14px;
 padding: 14px 16px;
 border-radius: 12px;
 background: #f8fafc;
 border-left: 4px solid var(--green);
}
.quiz-feedback.is-wrong {
 border-left-color: #ef4444;
 background: #fef2f2;
}
.quiz-feedback-title {
 display: flex;
 align-items: center;
 gap: 8px;
 font-weight: 700;
 font-size: 14px;
 margin-bottom: 6px;
}
.quiz-feedback-copy {
 margin: 0;
 font-size: 13px;
 line-height: 19px;
 color: #334155;
}
.quiz-nav-actions {
 display: flex;
 justify-content: flex-end;
 margin-top: 18px;
}
.quiz-score-view {
 text-align: center;
 padding: 12px 6px;
}
.quiz-trophy {
 font-size: 54px;
 margin-bottom: 12px;
}
.quiz-score-number {
 font-size: 42px;
 font-weight: 800;
 color: var(--green);
 margin: 0;
}
.quiz-score-title {
 font-size: 18px;
 font-weight: 700;
 margin: 8px 0 16px;
 color: var(--ink);
}
.quiz-score-copy {
 color: var(--muted);
 font-size: 14px;
 line-height: 21px;
 max-width: 440px;
 margin: 0 auto 24px;
}
.quiz-score-actions {
 display: flex;
 justify-content: center;
 gap: 12px;
 flex-wrap: wrap;
}

/* Drop-off Directory UI */
.dropoff-intro {
 margin: 0 0 16px;
 color: var(--muted);
 font-size: 13px;
 line-height: 20px;
}
.dropoff-filters {
 margin-bottom: 18px;
 padding-bottom: 14px;
 border-bottom: 1px solid var(--line);
}
.filter-label {
 font-size: 12px;
 font-weight: 600;
 color: var(--muted);
 min-width: 70px;
}
.filter-chip {
 height: 28px;
 padding: 0 10px;
 border: 1px solid #d5dfd6;
 border-radius: 999px;
 background: #ffffff;
 color: var(--muted);
 font-size: 12px;
 font-weight: 500;
 transition:
  background-color 100ms ease,
  border-color 100ms ease,
  color 100ms ease;
}
.filter-chip:hover {
 background: #f1f5f2;
}
.filter-chip.active {
 background: var(--green);
 border-color: var(--green);
 color: #ffffff;
 font-weight: 600;
}
.dropoff-list {
 display: grid;
 gap: 12px;
}
.dropoff-card {
 padding: 16px;
 border: 1px solid var(--line);
 border-radius: 14px;
 background: #fbfdfb;
 display: grid;
 gap: 6px;
}
.dropoff-card-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 8px;
}
.dropoff-card-title {
 margin: 0;
 font-size: 15px;
 font-weight: 700;
 color: var(--ink);
}
.dropoff-badge {
 flex: 0 0 auto;
 font-size: 11px;
 font-weight: 600;
 padding: 3px 8px;
 border-radius: 999px;
 background: var(--soft-green);
 color: var(--green-dark);
}
.dropoff-address {
 margin: 0;
 font-size: 13px;
 color: #334155;
 display: flex;
 align-items: flex-start;
 gap: 6px;
}
.dropoff-notes {
 margin: 0;
 font-size: 12px;
 color: var(--muted);
 line-height: 17px;
 padding-top: 4px;
 border-top: 1px dashed #e2e8f0;
}

/* Footer Links */
footer {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
 width: min(100%, 760px);
 margin: 0 auto;
 padding: 27px 0 35px;
 color: var(--muted);
 font-size: 13px;
 text-align: center;
}
.footer-link-btn {
 border: none;
 background: transparent;
 color: var(--green);
 font-size: 13px;
 font-weight: 500;
 padding: 2px 6px;
 text-decoration: underline;
 text-underline-offset: 3px;
 display: inline-flex;
 align-items: center;
 gap: 4px;
}
.footer-link-btn:hover {
 color: var(--green-dark);
}
.footer-sep {
 color: #cbd5e1;
}
.footer-meta {
 display: flex;
 gap: 8px;
 justify-content: center;
}
.footer-meta span:first-child {
 font-weight: 700;
 color: var(--ink);
}

/* Printable Household Sorting Cheat-Sheet */
.printable-guide {
 display: none;
}

@page {
 size: A4 landscape;
 margin: 8mm;
}

@media print {
 /* Hide all interactive/screen elements */
 body {
  background: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 11pt !important;
 }
 .page-shell {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
 }
 .masthead,
 .quick-nav,
 .intro,
 .flow-home,
 .lookup-card,
 .confirm-card,
 #confirm-screen,
 #candidate-panel,
 #manual-panel,
 #result-panel,
 footer,
 .modal {
  display: none !important;
 }

 /* Show and format printable guide */
 .printable-guide {
  display: block !important;
  padding: 4mm 2mm !important;
  color: #000000 !important;
  font-family: Inter, system-ui, sans-serif !important;
 }
 .print-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 2.5px solid #16a34a !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
 }
 .print-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
 }
 .print-brand-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #16a34a !important;
 }
 .print-titles {
  text-align: right !important;
 }
 .print-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #14532d !important;
 }
 .print-subtitle {
  margin: 2px 0 0 !important;
  font-size: 10px !important;
  color: #475569 !important;
 }
 .print-compliance-banner {
  background: #fef2f2 !important;
  border: 1.5px solid #dc2626 !important;
  color: #991b1b !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 9.5pt !important;
  line-height: 14pt !important;
  margin-bottom: 10px !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
 }
 .print-compliance-banner strong {
  color: #b91c1c !important;
 }
 .print-streams-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
 }
 .print-stream-card {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 10px !important;
  font-size: 10pt !important;
  line-height: 14.5pt !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
 }
 .print-stream-food {
  border-color: #22c55e !important;
  background: #f0fdf4 !important;
 }
 .print-stream-recyclables {
  border-color: #3b82f6 !important;
  background: #eff6ff !important;
 }
 .print-stream-other {
  border-color: #64748b !important;
  background: #f8fafc !important;
 }
 .print-stream-hazardous {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
 }
 .print-stream-bulky {
  border-color: #d97706 !important;
  background: #fffbeb !important;
 }
 .print-stream-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
  padding-bottom: 5px !important;
  margin-bottom: 5px !important;
 }
 .print-stream-icon {
  font-size: 15px !important;
 }
 .print-stream-title-wrap h2 {
  margin: 0 !important;
  font-size: 10.5pt !important;
  font-weight: 800 !important;
  line-height: 12.5pt !important;
 }
 .print-badge {
  font-size: 8.5pt !important;
  font-weight: 700 !important;
  display: block !important;
  margin-top: 3px !important;
 }
 .print-dos {
  margin-bottom: 8px !important;
 }
 .dos-label {
  font-weight: 700 !important;
  color: #166534 !important;
  display: block !important;
 }
 .donts-label {
  font-weight: 700 !important;
  color: #b91c1c !important;
  display: block !important;
 }
 .print-stream-body p {
  margin: 2px 0 0 !important;
 }
 .print-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid #cbd5e1 !important;
  padding-top: 6px !important;
  margin-top: 10px !important;
  font-size: 8.5pt !important;
  color: #64748b !important;
 }
}

@media (prefers-reduced-motion: reduce) {
 html {
  scroll-behavior: auto;
 }
 .lookup-card,
 .confirm-card {
  animation: guided-arrive-opacity 200ms var(--ease-out) both;
 }
 @keyframes guided-arrive-opacity {
  from {
   opacity: 0;
  }
  to {
   opacity: 1;
  }
 }
 @keyframes guided-arrive {
  from {
   opacity: 0;
   transform: none;
  }
  to {
   opacity: 1;
   transform: none;
  }
 }
 @keyframes modalScaleUp {
  from {
   opacity: 0;
   transform: none;
  }
  to {
   opacity: 1;
   transform: none;
  }
 }
 .enter-transition.enter-from {
  transform: none;
 }
 .button:hover:not(:disabled),
 .example-chip:hover,
 .quick-nav-btn:hover,
 .photo-clear-btn:hover {
  transform: none !important;
 }
 .voice-search-btn.listening::after {
  animation: none;
 }
}

@media (prefers-reduced-transparency: reduce) {
 .masthead {
  background: var(--canvas);
  backdrop-filter: none;
 }
}

/* Lism design tokens — WhatBin brand (overrides lism-base :root) */
@layer lism-custom {
 :root {
  --base: #f5f7f2;
  --base-2: #edf5ef;
  --text: #26372e;
  --text-2: #69776e;
  --divider: #dfe8df;
  --brand: #276247;
  --link: #24583e;
  --accent: #194d38;
  --green: #276247;
  --shadow: rgb(38 62 48 / 8%);
 }
}

#result-panel {
 width: min(calc(100vw - 40px), 1180px);
 margin-inline: calc((100% - min(calc(100vw - 40px), 1180px)) / 2);
 padding: 0;
 border: 0;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
}
.result-layout {
 display: grid;
 grid-template-columns: minmax(0, 1.35fr) minmax(400px, 1fr);
 align-items: start;
 gap: 20px;
}
.result-layout:not(.has-chat) {
 grid-template-columns: minmax(0, 1fr);
}
.result-main {
 min-width: 0;
 padding: 24px clamp(20px, 3vw, 32px);
 border: 1px solid var(--line);
 border-radius: 18px;
 background: var(--surface);
}
.result-chat {
 position: sticky;
 top: 90px;
 min-width: 0;
 padding: 24px;
 border: 1px solid var(--line);
 border-radius: 16px;
 background: var(--surface);
}
.result-chat:empty {
 display: none;
}
.result-chat .explainer {
 margin: 0;
 padding: 0;
 border: 0;
}
.result-chat .explainer h3 {
 margin: 0 0 6px;
 font-size: 17px;
 line-height: 22px;
}
.result-chat .explainer .muted-copy {
 margin-bottom: 14px;
}
.result-chat .explainer-thread {
 min-height: 280px;
 max-height: min(60vh, 560px);
 margin: 12px 0;
}
.result-chat .explainer-user,
.result-chat .explainer-reply {
 max-width: 100%;
}

@media (max-width: 880px) {
 .result-layout {
  grid-template-columns: minmax(0, 1fr);
 }
 .result-chat {
  position: static;
 }
}

@media (max-width: 560px) {
 #result-panel {
  width: min(calc(100vw - 40px), 760px);
  margin-inline: calc((100% - min(calc(100vw - 40px), 760px)) / 2);
 }
 .result-main,
 .result-chat {
  padding: 18px;
 }
}

#result-panel .result-content-matched {
 grid-template-columns: minmax(0, 1fr);
}
#result-panel .result-content-matched > .instruction {
 display: grid;
 gap: 8px;
}

/* Leafy, friendly framing from the WhatBin reference UI. */
body {
 position: relative;
 isolation: isolate;
}
body::before {
 position: fixed;
 z-index: 0;
 inset: 0;
 background: url("/whatbin-background.webp") center / cover no-repeat;
 content: "";
 pointer-events: none;
}
@media (max-width: 899px) {
 body::before {
  background-size: auto 100%;
 }
}
.page-shell {
 position: relative;
 z-index: 1;
}
.mark {
 display: block;
 width: 44px;
 height: 44px;
 border-radius: 0;
 object-fit: contain;
 background: transparent;
}
.lookup-card {
 position: relative;
}
.lookup-mascot {
 position: absolute;
 z-index: 1;
 top: -92px;
 right: 82px;
 width: 148px;
 height: 122px;
 object-fit: contain;
 pointer-events: none;
}
.lookup-card::before {
 position: absolute;
 top: -62px;
 right: 214px;
 width: 30px;
 height: 30px;
 background: url("/accent-spark-teal.webp") center / contain no-repeat;
 content: "";
 pointer-events: none;
}
.stream-banner {
 position: relative;
 padding-right: 60px;
}
.stream-banner::after {
 position: absolute;
 right: 6px;
 bottom: -6px;
 width: 54px;
 height: 54px;
 background: url("/mascot-wink.webp") center / contain no-repeat;
 content: "";
 pointer-events: none;
}
.direct-submit-wrap {
 position: relative;
}
.direct-submit-wrap::before {
 position: absolute;
 z-index: 1;
 top: -12px;
 left: -20px;
 width: 26px;
 height: 26px;
 background: url("/accent-spark-yellow.webp") center / contain no-repeat;
 content: "";
 pointer-events: none;
}
.photo-picker {
 display: grid;
 grid-template-columns: 100px minmax(0, 1fr);
 align-items: center;
 gap: 8px 14px;
}
.photo-mascot {
 grid-row: 1 / span 2;
 width: 108px;
 height: 104px;
 object-fit: contain;
 align-self: end;
}
.photo-actions {
 grid-column: 2;
 margin-top: 2px;
}
@media (max-width: 899px) {
 .lookup-mascot {
  display: none;
 }
 .input-mode-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
 }
 .mode-tab {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: 52px;
  padding: 6px 4px;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
 }
}
@media (max-width: 420px) {
 .photo-picker {
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 8px 10px;
  padding: 12px;
 }
 .photo-mascot {
  width: 72px;
  height: 78px;
 }
}
@media (max-width: 899px) {
 .stream-banner {
  padding-right: 12px;
 }
 .stream-banner::after {
  display: none;
 }
 .lookup-card::before {
  display: none;
 }
}