/* iOS system palette, same tokens as hardee.co.in: neutral greys + one accent */
:root {
  --bg:#f2f2f7; --card:#fff; --fill:rgba(60,60,67,.12); --fill2:rgba(60,60,67,.06);
  --label:#000; --label2:rgba(60,60,67,.6);
  --accent:#007aff; --good:#34c759; --bad:#ff3b30; --warn:#ff9500;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --ease:cubic-bezier(.32,.72,0,1);
}
:root[data-theme="dark"] {
  --bg:#000; --card:#1c1c1e; --fill:rgba(235,235,245,.16); --fill2:rgba(235,235,245,.08);
  --label:#fff; --label2:rgba(235,235,245,.6);
  --accent:#0a84ff; --good:#30d158; --bad:#ff453a; --warn:#ff9f0a; --shadow:none;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { color-scheme:light; }
html[data-theme="dark"] { color-scheme:dark; }
html { overflow-x:hidden; }
body { margin:0; min-height:100dvh; overflow-x:hidden; background:var(--bg); color:var(--label); -webkit-font-smoothing:antialiased;
  font:400 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); transition:background .3s var(--ease), color .3s var(--ease); }
body.modal-active { overflow:hidden; }
.hidden { display:none !important; }
button { font:inherit; color:inherit; cursor:pointer; }
svg { display:block; }

.wrap { width:100%; max-width:720px; margin:0 auto; padding:0 20px; }

/* header */
header { padding:clamp(24px, 6dvh, 64px) 0 0; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
h1 { margin:0; font-size:clamp(36px, 7vw, 52px); font-weight:700; letter-spacing:-.03em; line-height:1.05; }
#tagline { margin:8px 0 0; color:var(--label2); }
.tools { display:flex; gap:8px; padding-top:6px; }
.icon-btn { width:38px; height:38px; border:0; border-radius:50%; background:var(--fill); display:grid; place-items:center; transition:transform .2s var(--ease), background .2s; }
.icon-btn:active { transform:scale(.92); }
.icon-btn svg { width:20px; height:20px; }
.sun { display:none; }
html[data-theme="dark"] .sun { display:block; }
html[data-theme="dark"] .moon { display:none; }

/* cards */
.card { background:var(--card); border-radius:24px; box-shadow:0 0 0 1px var(--fill); padding:24px; }
.card + .card, .stack > * + * { margin-top:16px; }

/* search */
.search { padding:8px; margin-top:28px; }
.search-row { display:flex; gap:8px; align-items:center; }
.search-row.secondary { margin-top:8px; padding-top:8px; border-top:1px solid var(--fill); }
.search-row.secondary .btn { flex:1; justify-content:center; min-width:0; }
.btn-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:inherit; font:inherit; padding:10px 12px; }
.search input::placeholder { color:var(--label2); }
.btn { border:0; border-radius:14px; padding:11px 18px; font-weight:600; background:var(--fill); transition:transform .2s var(--ease), opacity .2s; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.btn:active { transform:scale(.96); }
.btn:disabled { opacity:.5; cursor:default; }
.btn.primary { background:var(--accent); color:#fff; }
.btn svg { width:18px; height:18px; }

/* banner */
.banner { display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:12px 14px; border-radius:14px; font-size:15px; font-weight:500;
  color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, transparent); }
.banner[data-kind="ok"] { color:var(--good); background:color-mix(in srgb, var(--good) 14%, transparent); }
.banner svg { width:20px; height:20px; flex:none; margin-top:1px; }

/* empty + loading */
.empty { text-align:center; padding:36px 0 8px; color:var(--label2); }
.empty svg { width:min(280px, 70%); height:auto; margin:0 auto 12px; opacity:.85; }
.empty p { margin:0; font-size:15px; }
.loading { flex-direction:column; align-items:center; padding:48px 0; color:var(--label2); font-size:15px; text-align:center; gap:16px; display:flex; }
.spinner { width:28px; height:28px; border-radius:50%; border:2.5px solid var(--fill); border-top-color:var(--accent); animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* results */
#resultsContainer { margin-top:24px; opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
#resultsContainer.show { opacity:1; transform:none; }
.head { text-align:center; }
.chip { display:inline-block; padding:4px 12px; border-radius:999px; background:var(--fill); color:var(--label2); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.head h2 { margin:12px 0 0; font-size:clamp(26px, 5vw, 34px); font-weight:700; letter-spacing:-.025em; line-height:1.1; text-transform:capitalize; }
.head p { margin:12px auto 0; max-width:34em; color:var(--label2); font-size:15px; line-height:1.45; }

.score-row { display:grid; gap:28px; margin-top:28px; padding-top:28px; border-top:1px solid var(--fill); }
@media (min-width:640px) { .score-row { grid-template-columns:200px 1fr; align-items:center; } }
.score { display:flex; flex-direction:column; align-items:center; }
.ring { --score-pct:0deg; --score-color:var(--accent); width:172px; height:172px; border-radius:50%; position:relative; display:grid; place-items:center;
  background:conic-gradient(var(--score-color) var(--score-pct), var(--fill) 0deg); }
.ring::before { content:""; position:absolute; inset:9px; border-radius:50%; background:var(--card); }
.ring > div { position:relative; text-align:center; }
#scoreValue { display:block; font-size:54px; font-weight:700; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.ring small { color:var(--label2); font-size:13px; font-weight:500; }
.tag { --g:var(--accent); margin-top:16px; padding:5px 14px; border-radius:999px; font-size:14px; font-weight:600; color:var(--g); background:color-mix(in srgb, var(--g) 14%, transparent); }
.grades { display:flex; align-items:flex-end; gap:5px; margin-top:16px; }
.tile { border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:700; width:28px; height:28px; font-size:13px; opacity:.4; transition:all .4s var(--ease); }
.tile.on { width:40px; height:40px; font-size:21px; opacity:1; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.caption { margin:12px 0 0; font-size:12px; color:var(--label2); text-align:center; max-width:15rem; }

.section-title { margin:0 0 12px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--label2); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cells { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
@media (min-width:480px) { .cells { grid-template-columns:repeat(4, 1fr); } }
.cell { background:var(--fill2); border-radius:14px; padding:10px 12px; }
.cell > span { display:block; font-size:12px; color:var(--label2); font-weight:500; }
.cell b { font-size:19px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cell b i { font-style:normal; font-size:12px; font-weight:500; color:var(--label2); margin-left:2px; }
.cell.bad b { color:var(--bad); } .cell.good b { color:var(--good); }
.cell.wide { grid-column:1 / -1; }
.cell.wide b { font-size:32px; letter-spacing:-.03em; }

.pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.pill { padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600; color:var(--good); background:color-mix(in srgb, var(--good) 13%, transparent); }
.pill.bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, transparent); }

details { margin-top:14px; font-size:15px; }
summary { cursor:pointer; color:var(--accent); font-weight:500; list-style:none; user-select:none; }
summary::-webkit-details-marker { display:none; }
summary::after { content:" \203A"; display:inline-block; transition:transform .3s var(--ease); }
details[open] summary::after { transform:rotate(90deg); }
.rows { margin-top:10px; border-radius:14px; background:var(--fill2); padding:4px 14px; }
.row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--fill); font-size:14px; }
.row:last-child { border:0; font-weight:700; }
.row b.up { color:var(--bad); } .row b.down { color:var(--good); }
.note { margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--label2); }

.portion-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.portion-head h3 { margin:0; font-size:22px; font-weight:600; letter-spacing:-.02em; }
.impact { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-top:16px; }
@media (min-width:480px) { .impact { grid-template-columns:repeat(4, 1fr); } }
.meter { background:var(--fill2); border-radius:14px; padding:10px 12px; }
.meter div { display:flex; justify-content:space-between; font-size:12px; color:var(--label2); font-weight:500; margin-bottom:8px; }
.meter div b { color:var(--label); font-weight:600; }
.meter i { display:block; height:5px; border-radius:99px; background:var(--fill); overflow:hidden; }
.meter i em { display:block; height:100%; border-radius:99px; }

footer { padding:28px 0 24px; text-align:center; font-size:12px; color:var(--label2); }

/* sheets */
.backdrop { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.4); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:16px; }
.sheet { width:100%; max-width:440px; background:var(--card); border-radius:24px; box-shadow:0 0 0 1px var(--fill); overflow:hidden; animation:rise .4s var(--ease); }
@keyframes rise { from { transform:translateY(24px); opacity:0; } }
@media (max-width:560px) { .backdrop { align-items:flex-end; padding:8px; } }
.sheet-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--fill); }
.sheet-head h3 { margin:0; font-size:17px; font-weight:600; }
.sheet-body { padding:20px; }
.sheet-body p { margin:0 0 14px; font-size:15px; color:var(--label2); }
.field { width:100%; padding:12px 14px; border-radius:12px; border:0; outline:0; background:var(--fill2); color:inherit; font:inherit; box-shadow:0 0 0 1px var(--fill); }
.field:focus { box-shadow:0 0 0 2px var(--accent); }
.actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.segmented { display:flex; gap:4px; padding:4px; background:var(--fill2); border-radius:14px; }
.seg { flex:1; border:0; background:transparent; color:var(--label2); font-size:13px; font-weight:600; padding:9px 6px; border-radius:10px; transition:background .2s, color .2s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seg.on { background:var(--card); color:var(--label); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.link { color:var(--accent); text-decoration:none; }

.viewfinder { position:relative; background:#000; aspect-ratio:4 / 3; }
.viewfinder video { width:100%; height:100%; object-fit:cover; }
.corners { position:absolute; inset:18% 12%; pointer-events:none; }
.corners i { position:absolute; width:26px; height:26px; border:2.5px solid #fff; opacity:.9; }
.corners i:nth-child(1) { top:0; left:0; border-right:0; border-bottom:0; border-top-left-radius:10px; }
.corners i:nth-child(2) { top:0; right:0; border-left:0; border-bottom:0; border-top-right-radius:10px; }
.corners i:nth-child(3) { bottom:0; left:0; border-right:0; border-top:0; border-bottom-left-radius:10px; }
.corners i:nth-child(4) { bottom:0; right:0; border-left:0; border-top:0; border-bottom-right-radius:10px; }
.corners::after { content:""; position:absolute; left:6%; right:6%; top:50%; height:1.5px; background:var(--bad); box-shadow:0 0 8px var(--bad); animation:sweep 2.4s ease-in-out infinite; }
@keyframes sweep { 0%,100% { top:20%; } 50% { top:80%; } }
.controls { display:flex; align-items:center; gap:12px; padding:12px 20px 0; }
.controls label { flex:1; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--label2); }
.controls input[type=range] { flex:1; accent-color:var(--accent); }
.scan-actions { display:flex; gap:8px; }
.scan-actions input { flex:1; min-width:0; }
.wide-btn { width:100%; justify-content:center; margin-bottom:12px; background:var(--label); color:var(--bg); }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

@media (max-width:480px) { .card:not(.search) { padding:20px; } }
@media (max-width:380px) {
  .search-row.secondary .btn { padding:10px 8px; gap:6px; font-size:14px; }
  .search-row.secondary .btn svg { width:16px; height:16px; flex:none; }
}
@media (max-width:479px) { .cells.portion > .cell:last-child { grid-column:1 / -1; } }