@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap";:root{color:#202124;font-synthesis:none;--ink:#202124;--muted:#777b85;--purple:#6c55ef;--purple-soft:#e8e3ff;--orange:#ff8b4d;--yellow:#ffd84c;--green:#36b981;--red:#f45d6f;--line:#dde3ec;background:#eef6ff;font-family:Noto Sans SC,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}.app-shell{flex-direction:column;min-height:100vh;display:flex}.site-header{border-bottom:1px solid #20212414;justify-content:space-between;align-items:center;height:72px;padding:0 clamp(20px,5vw,72px);display:flex}.brand{color:var(--ink);background:0 0;border:0;align-items:center;gap:10px;padding:0;font-size:21px;font-weight:800;display:flex}.brand-face{background:var(--yellow);border-radius:13px;place-items:center;width:38px;height:38px;display:grid;transform:rotate(-4deg)}.header-note{color:#667080;align-items:center;gap:6px;font-size:13px;display:flex}main{flex:1}footer{text-align:center;color:#87909d;padding:28px;font-size:12px}.upload-page{grid-template-columns:minmax(0,1fr) minmax(360px,520px);align-items:center;gap:clamp(40px,7vw,100px);max-width:1180px;min-height:calc(100vh - 124px);margin:auto;padding:52px 28px;display:grid}.hero-copy{max-width:570px}.kicker{color:#624bd8;letter-spacing:.03em;background:#6c55ef1c;border-radius:99px;align-items:center;gap:7px;padding:8px 12px;font-size:13px;font-weight:700;display:inline-flex}.hero-copy h1{letter-spacing:-.05em;margin:22px 0 20px;font-size:clamp(48px,6.5vw,82px);line-height:1.07}.hero-copy h1 em{color:var(--purple);font-style:normal;position:relative}.hero-copy p{color:#606673;max-width:520px;font-size:18px;line-height:1.8}.promise-row{color:#646b78;flex-wrap:wrap;gap:18px;margin-top:26px;font-size:13px;display:flex}.promise-row span{align-items:center;gap:5px;display:flex}.promise-row svg{width:16px;color:var(--green)}.upload-card,.form-panel,.report-section{background:#fff;border:1px solid #20212417;border-radius:30px;box-shadow:0 20px 70px #4b5b7e1f}.upload-card{padding:28px}.upload-card-title{align-items:center;gap:14px;display:flex}.upload-card-title h2{margin:0 0 3px;font-size:20px}.upload-card-title p{color:var(--muted);margin:0;font-size:13px}.mini-face{background:#ffe3d2;border-radius:16px;place-items:center;width:46px;height:46px;font-size:22px;display:grid;transform:rotate(-3deg)}.photo-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 16px;display:grid}.add-photo,.photo-preview{aspect-ratio:1;border-radius:18px;position:relative;overflow:hidden}.add-photo{color:#555d6b;background:#f8fbff;border:2px dashed #cbd4e3;flex-direction:column;grid-column:span 3;justify-content:center;align-items:center;gap:7px;min-height:170px;display:flex}.photo-grid:has(.photo-preview) .add-photo{grid-column:span 1;min-height:0}.add-photo span{background:var(--purple-soft);width:48px;height:48px;color:var(--purple);border-radius:16px;place-items:center;display:grid}.add-photo small{color:#9aa1ae}.photo-preview img{object-fit:cover;width:100%;height:100%}.photo-preview button{color:#fff;background:#141414b8;border:0;border-radius:50%;place-items:center;width:28px;height:28px;display:grid;position:absolute;top:6px;right:6px}.photo-tips{color:#7b8390;flex-wrap:wrap;gap:8px;margin-bottom:18px;font-size:12px;display:flex}.photo-tips b{color:#4a505b}.photo-tips span{background:#f2f5f9;border-radius:7px;padding:4px 7px}.primary-button,.secondary-button,.demo-button{border:0;border-radius:16px;justify-content:center;align-items:center;gap:9px;width:100%;min-height:52px;font-weight:700;display:flex}.primary-button{background:var(--ink);color:#fff;box-shadow:0 10px 22px #2021242e}.primary-button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.demo-button{color:#6e7480;background:0 0;min-height:38px;margin-top:7px;font-size:13px}.secondary-button{border:1px solid var(--line);width:auto;color:var(--ink);background:#fff;padding:0 22px}.error{color:#c83d52;background:#fff0f2;border-radius:10px;align-items:flex-start;gap:7px;padding:10px 12px;font-size:13px;display:flex}.loading-page{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:calc(100vh - 124px);padding:30px;display:flex}.scanner{background:#fff;border-radius:45px;place-items:center;width:150px;height:150px;display:grid;position:relative;overflow:hidden;box-shadow:0 24px 60px #53549626}.scan-face{font-size:42px}.scan-line{background:var(--orange);height:3px;box-shadow:0 0 18px var(--orange);animation:2s ease-in-out infinite scan;position:absolute;left:18px;right:18px}@keyframes scan{0%,to{top:22px}50%{top:124px}}.loading-page h1{margin:28px 0 9px}.loading-page p{color:var(--muted)}.loading-pills{gap:8px;margin-top:18px;display:flex}.loading-pills span{color:#8d93a0;background:#e5ebf2;border-radius:99px;padding:7px 11px;font-size:12px}.loading-pills .active{background:var(--purple-soft);color:var(--purple)}.content-width{max-width:1080px;margin:auto;padding:42px 24px 70px}.back-button{color:#666e7b;background:0 0;border:0;align-items:center;gap:6px;margin-bottom:24px;padding:5px 0;display:flex}.section-heading{justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px;display:flex}.section-heading h1{margin:16px 0 8px;font-size:38px}.section-heading p{color:var(--muted);margin:0}.confidence,.result-confidence{color:#167957;white-space:nowrap;background:#dff8ec;border-radius:99px;padding:8px 12px;font-size:12px;font-weight:700}.confidence.low{color:#9d6300;background:#fff0d8}.notice{color:#6d5514;background:#fff8e1;border:1px solid #f4da91;border-radius:16px;gap:12px;margin-bottom:18px;padding:15px 17px;display:flex}.notice p{margin:3px 0 0;font-size:13px}.notice svg{flex:none}.review-grid{grid-template-columns:.9fr 1.1fr;align-items:start;gap:18px;display:grid}.form-panel{border-radius:24px;padding:24px;box-shadow:0 12px 35px #4b5b7e14}.panel-title{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.panel-title h2{margin:0;font-size:19px}.panel-title span{color:#858c98;font-size:12px}.form-panel label{flex-direction:column;gap:7px;margin-bottom:16px;font-size:13px;font-weight:600;display:flex}.form-panel input,.form-panel textarea,.form-panel select{color:var(--ink);background:#fbfcfe;border:1px solid #d9dfe8;border-radius:12px;outline:none;padding:11px 12px}.form-panel input:focus,.form-panel textarea:focus,.form-panel select:focus{border-color:var(--purple);box-shadow:0 0 0 3px #6c55ef1f}.form-panel small{color:#9299a5;font-weight:400}.two-fields{grid-template-columns:1fr 1fr;gap:12px;display:grid}.nutrient-head,.nutrient-row{grid-template-columns:1.15fr 1fr .8fr;align-items:center;gap:8px;display:grid}.nutrient-head{color:#8e95a0;padding:0 5px 8px;font-size:11px}.nutrient-row{border-top:1px solid #edf0f4;padding:8px 4px}.nutrient-row b{font-size:13px}.nutrient-row label{margin:0;position:relative}.nutrient-row input{border-radius:9px;width:100%;padding:8px 27px 8px 8px}.nutrient-row label span{color:#989faa;font-size:11px;position:absolute;top:8px;right:8px}.review-actions{justify-content:flex-end;gap:12px;margin-top:22px;display:flex}.primary-button.compact{width:auto;padding:0 25px}.result-topline{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.result-hero{background:#dfefff;border-radius:34px;grid-template-columns:1fr auto;align-items:center;gap:35px;padding:34px 38px;display:grid}.product-intro small{color:#6f7a8b}.product-intro h1{letter-spacing:-.04em;margin:5px 0 18px;font-size:clamp(30px,5vw,48px)}.verdict-card{color:#202124;background:#fff;border:1px solid #20212414;border-radius:20px;align-items:center;gap:14px;max-width:650px;padding:15px;display:flex}.verdict-card p{color:#696d76;margin:3px 0 0;font-size:14px}.result-face{border-radius:16px;flex:none;place-items:center;width:50px;height:50px;font-size:24px;display:grid}.result-face.good{background:#d8f7e9}.result-face.watch{background:#fff0c2}.result-face.limit{background:#ffe0e4}.result-face.unknown{background:#edf0f5}.score-ring{border:12px solid var(--yellow);background:#fff;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:140px;height:140px;display:flex;box-shadow:0 16px 40px #3a4c6e24}.score-ring strong{font-size:43px;line-height:1}.score-ring>span{color:#9096a1;font-size:11px}.score-ring small{color:#6f7580;margin-top:7px}.score-ring.good{border-color:#66d4a6}.score-ring.limit{border-color:#ff8090}.score-ring.unknown{border-color:#c9d0da}.dimension-grid{grid-template-columns:1fr 1fr;gap:16px;margin:18px 0;display:grid}.dimension{border:1px solid var(--line);background:#fff;border-radius:22px;padding:20px}.dimension>div:first-child{justify-content:space-between;display:flex}.dimension b{color:var(--purple)}.dimension small{color:#8b929e}.bar{background:#edf0f5;border-radius:99px;height:9px;margin:14px 0 9px;overflow:hidden}.bar i{background:var(--purple);border-radius:inherit;height:100%;display:block}.bar.orange i{background:var(--orange)}.report-section{border-radius:26px;margin-top:18px;padding:26px;box-shadow:0 10px 32px #4b5b7e12}.report-heading h2{margin:0;font-size:22px}.report-heading p{color:#888f9a;margin:5px 0 20px;font-size:13px}.finding-grid{grid-template-columns:repeat(2,1fr);gap:11px;display:grid}.finding{background:#f7f9fc;border-radius:16px;gap:12px;padding:14px;display:flex}.finding>span{background:#e8edf4;border-radius:9px;flex:none;place-items:center;width:28px;height:28px;font-weight:800;display:grid}.finding.watch>span{color:#8c6100;background:#fff0c2}.finding.limit>span{color:#bf3047;background:#ffe0e4}.finding strong{font-size:14px}.finding p{color:#767d89;margin:4px 0 0;font-size:12px;line-height:1.6}.empty-good{color:#278163;background:#e8f8f1;border-radius:14px;align-items:center;gap:8px;padding:14px;display:flex}.audience-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.audience-card{background:#fff6e9;border:1px solid #f7dfbd;border-radius:16px;padding:15px}.audience-card span{color:#9a5a12;background:#fff;border-radius:99px;margin-bottom:9px;padding:4px 7px;font-size:10px;display:inline-block}.audience-card strong{font-size:14px;display:block}.audience-card p{color:#806f5e;margin:5px 0 0;font-size:12px;line-height:1.6}.ingredient-list details{border-top:1px solid #edf0f4;padding:13px 0}.ingredient-list details:first-child{border-top:0}.ingredient-list summary{cursor:pointer;grid-template-columns:1fr auto 20px;align-items:center;gap:10px;list-style:none;display:grid}.ingredient-list summary::-webkit-details-marker{display:none}.ingredient-list summary b{color:#6854d8;background:#eeeaff;border-radius:99px;padding:4px 8px;font-size:11px}.ingredient-list details p{color:#747b87;margin:10px 0 0;font-size:13px;line-height:1.7}.tips-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.tips-list li{align-items:flex-start;gap:12px;line-height:1.7;display:flex}.tips-list li span{background:var(--yellow);border-radius:9px;flex:none;place-items:center;width:27px;height:27px;font-weight:800;display:grid}.medical-note{color:#707783;background:#ffffff8c;border-radius:16px;align-items:flex-start;gap:12px;margin:18px 0;padding:15px 18px;font-size:12px;display:flex}.medical-note p{margin:0}.medical-note svg{color:#5271a0;flex:none}.result-reset{max-width:300px;margin:25px auto 0}@media (width<=820px){.upload-page{grid-template-columns:1fr;max-width:620px;padding-top:36px}.hero-copy{text-align:center;margin:auto}.hero-copy p{margin-inline:auto}.promise-row{justify-content:center}.review-grid{grid-template-columns:1fr}.result-hero{text-align:center;grid-template-columns:1fr}.verdict-card{text-align:left}.score-ring{grid-row:1;margin:auto}.audience-grid{grid-template-columns:1fr 1fr}}@media (width<=580px){.site-header{height:62px;padding:0 16px}.header-note{display:none}.upload-page{padding:28px 14px}.hero-copy h1{font-size:48px}.hero-copy p{font-size:15px}.upload-card{border-radius:23px;padding:19px}.content-width{padding:28px 14px 55px}.section-heading{flex-direction:column;align-items:flex-start}.section-heading h1{font-size:30px}.two-fields,.dimension-grid,.finding-grid,.audience-grid{grid-template-columns:1fr}.form-panel{padding:18px}.nutrient-head,.nutrient-row{grid-template-columns:1fr .9fr .72fr}.result-topline{align-items:flex-start;gap:9px}.result-confidence{white-space:normal;text-align:right}.result-hero{border-radius:25px;padding:24px 16px}.verdict-card{align-items:flex-start}.report-section{padding:20px 17px}.review-actions{flex-direction:column-reverse}.secondary-button,.primary-button.compact{width:100%}.photo-grid{grid-template-columns:repeat(2,1fr)}.photo-grid:has(.photo-preview) .add-photo{grid-column:span 1}.add-photo{grid-column:span 2}.promise-row{gap:9px}}@media (prefers-reduced-motion:reduce){.scan-line{animation:none;top:72px}}
