:root {
  color-scheme: light;
  --green: #bdf58e;
  --green-strong: #4bb656;
  --green-deep: #147e42;
  --ink: #ffffff;
  --red: #f1695c;
  --yellow: #f2b62a;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 320px; min-height: 100%; background: #101b15; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; overflow: hidden; }
button { font: inherit; }

.app-shell { position: relative; width: min(100vw, 500px); height: 100dvh; min-height: 560px; margin: 0 auto; overflow: hidden; isolation: isolate; background: #315d3a; }
.app-shell[data-camera-state="idle"] { background-color: #1b261c; background-image: url("assets/startup-portrait.png"); background-position: center; background-size: cover; }
#camera { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -4; }
.camera-wash { position: absolute; inset: 0; z-index: -3; pointer-events: none; background: linear-gradient(180deg, rgba(8, 18, 10, .35), rgba(8, 18, 10, 0) 28%, rgba(14, 31, 11, .08) 70%, rgba(25, 11, 7, .34)); }
.app-shell[data-camera-state="idle"] .camera-wash { display: none; }

.topbar { position: absolute; inset: max(18px, env(safe-area-inset-top)) 18px auto; display: grid; grid-template-columns: 48px 1fr 48px; align-items: start; z-index: 3; color: var(--ink); }
.brand-lockup { display: flex; justify-content: center; gap: 10px; text-align: left; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .28)); }
.brand-icon { width: 42px; height: 42px; border: 3px solid #fff; border-radius: 50%; background: #5abe5d; position: relative; overflow: hidden; transform: rotate(-8deg); }
.brand-icon::before { content: ""; position: absolute; width: 28px; height: 25px; left: 5px; top: 9px; border-radius: 62% 38% 58% 42%; background: #fb504a; }
.brand-icon::after { content: "•••"; position: absolute; top: 10px; left: 11px; color: #202c18; font-size: 13px; letter-spacing: 2px; transform: rotate(-12deg); }
.brand-icon span { position: absolute; inset: 0; border: 4px solid #fff; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(28deg); }
.brand-lockup h1 { margin: -2px 0 1px; font-size: 27px; line-height: 1.1; font-weight: 700; letter-spacing: 0; }
.brand-lockup p { margin: 0; font-size: 14px; color: rgba(255,255,255,.92); }
.round-control { width: 44px; height: 44px; padding: 0; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; color: #3c493d; background: rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(0,0,0,.14); font-size: 35px; line-height: 35px; cursor: pointer; }
.topbar > :last-child { justify-self: end; font-size: 25px; }
.round-control:active { transform: scale(.96); }
.history-panel { position: absolute; top: max(76px, calc(env(safe-area-inset-top) + 58px)); right: 18px; z-index: 6; width: 196px; padding: 14px; border: 1px solid rgba(255,255,255,.62); border-radius: 12px; color: #214229; background: rgba(242,255,227,.94); box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.history-panel[hidden] { display: none; }
.history-panel h2 { margin: 0 0 8px; font-size: 16px; }
.history-panel p { margin: 0; font-size: 13px; color: #496550; }
.history-panel ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.history-panel li { display: flex; justify-content: space-between; font-size: 13px; font-variant-numeric: tabular-nums; }

.camera-prompt { position: absolute; top: 50%; left: 50%; z-index: 4; width: min(56%, 240px); transform: translate(-50%, -50%); padding: 16px; text-align: center; border-radius: 16px; color: #1d6839; background: #ffffff; box-shadow: 0 8px 18px rgba(20, 35, 24, .22); }
.camera-prompt[hidden] { display: none; }
.prompt-brand { margin: 0 0 6px; font-size: 25px; line-height: 1.1; }
.camera-prompt p { margin: 0 0 11px; font-size: 15px; }
.prompt-action { border: 0; border-radius: 999px; padding: 10px 17px; color: #176b3c; background: #d7ffaf; font-weight: 700; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,.18); }
.prompt-note { margin-top: 12px !important; margin-bottom: 0 !important; font-size: 12px !important; color: #628c69; }

.markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.app-shell[data-camera-state="idle"] .markers,
.app-shell[data-camera-state="idle"] .scan-dock,
.app-shell[data-camera-state="idle"] .brand-lockup { display: none; }
.marker { position: absolute; width: 104px; height: 92px; transform: translate(-50%, -50%); transition: transform 150ms ease-out, opacity 150ms ease-out; }
.marker.hidden { opacity: 0; }
.bracket { position: absolute; inset: 19px 3px 4px; border: 3px solid rgba(215,255,184,.96); border-radius: 15px; clip-path: polygon(0 0, 25% 0, 25% 5%, 8% 5%, 8% 18%, 0 18%, 0 82%, 8% 82%, 8% 95%, 25% 95%, 25% 100%, 0 100%, 0 82%, 0 18%, 0 0, 75% 0, 75% 5%, 92% 5%, 92% 18%, 100% 18%, 100% 82%, 92% 82%, 92% 95%, 75% 95%, 75% 100%, 100% 100%, 100% 82%, 100% 18%, 100% 0); filter: drop-shadow(0 1px 4px rgba(0,0,0,.2)); }
.marker-label { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); min-width: 86px; padding: 8px 12px 7px; border: 2px solid rgba(255,255,255,.86); border-radius: 14px; color: #fff; white-space: nowrap; text-align: center; font-size: 15px; font-weight: 700; box-shadow: 0 2px 7px rgba(0,0,0,.15); }
.marker-label strong { margin-right: 5px; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.marker-label.good { background: rgba(116, 211, 94, .88); }
.marker-label.consider { color: #9c6200; background: rgba(255, 233, 133, .9); }
.marker-label.warn { background: rgba(247, 107, 94, .9); }
.marker-dot { position: absolute; top: 54px; left: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.marker-line { position: absolute; top: 35px; left: 50%; width: 2px; height: 19px; transform: translateX(-50%); background: rgba(255,255,255,.9); }

.scan-dock { position: absolute; left: 0; right: 0; bottom: max(21px, env(safe-area-inset-bottom)); z-index: 5; display: flex; flex-direction: column; align-items: center; }
.scan-button { position: relative; width: 220px; height: 94px; border: 4px solid rgba(242,255,226,.92); border-radius: 999px; color: #168842; background: rgba(198,255,151,.94); box-shadow: 0 0 0 9px rgba(225,255,198,.14), 0 8px 25px rgba(26, 91, 30, .28); font-size: 24px; font-weight: 700; cursor: pointer; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.scan-button:active, .scan-button.scanning { transform: scale(.97); background: #d7ffab; }
.scan-button-label { position: relative; z-index: 1; }
.scan-button-ring { position: absolute; inset: -19px; border: 1px solid rgba(236,255,216,.44); border-radius: inherit; pointer-events: none; }
.scan-button.scanning .scan-button-ring { animation: pulse 1.3s ease-out infinite; }
.scan-dock p { margin: 14px 0 0; color: #fff; font-size: 16px; text-shadow: 0 1px 3px rgba(0,0,0,.3); }

@keyframes pulse { from { transform: scale(.95); opacity: .95; } to { transform: scale(1.12); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (min-width: 700px) { .app-shell { margin: 18px auto; height: calc(100dvh - 36px); border-radius: 28px; box-shadow: 0 14px 50px rgba(0,0,0,.3); } }