/* Ultimate look (vanilla CSS) */
:root{ --bg:#0f1117; --card:#171a21; --soft:#23273a; --text:#eef1f7; --muted:#a8b0c7; --accent:#c9ff58; --accent2:#b493ff; --radius:20px; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Poppins,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:linear-gradient(180deg,#0f1117 0%, #0b0d12 100%); color:var(--text)}
.bg-watermark{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:8px; color:#7aff0026; font-size:120px; user-select:none; pointer-events:none}
.phone{width:min(430px,96vw); margin:24px auto; background:#0b0d12aa; border:1px solid #1e2232; border-radius:32px; overflow:hidden; box-shadow:0 20px 60px #000a; backdrop-filter:blur(10px)}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #1f2436; background:#0c0f15cc; backdrop-filter:blur(10px)}
.title{font-weight:800; font-size:20px}.title span{color:var(--accent)}
.tabs{display:flex; gap:8px}
.tab{padding:8px 12px; border:1px solid #2b3048; background:var(--soft); border-radius:999px; color:var(--muted); font-weight:700}
.tab.active{background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#0c0f15}
.screen{display:none; padding:16px}.screen.active{display:block}

.card{background:linear-gradient(180deg,var(--card),#141823); border:1px solid #232840; border-radius:var(--radius); padding:16px; margin-bottom:12px; box-shadow:0 8px 30px #0006, inset 0 0 0 1px #ffffff0a}
.card.hero{background:radial-gradient(1000px 800px at -20% -40%, #c9ff5840, transparent 50%), radial-gradient(800px 700px at 120% -20%, #b493ff33, transparent 60%), linear-gradient(180deg,var(--card),#141823)}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.btn{border:1px solid #2a2f40; background:var(--soft); color:var(--text); padding:12px 14px; border-radius:999px; font-weight:800}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#0b0d12}
.btn.full{width:100%}

.model-status{font-size:12px; color:#96a6cc; margin-top:8px}
.preview-wrap{width:100%; aspect-ratio:1.2/1; background:#0d1017; border-radius:16px; border:1px dashed #2a2f40; display:grid; place-items:center; overflow:hidden}
.preview-wrap img{max-width:100%; max-height:100%; display:block}
.row{display:flex; gap:10px; margin-top:10px}
.row.gap{align-items:end}
.stat{flex:1; background:#121520; border:1px solid #232840; border-radius:14px; padding:10px}
.stat.small .stat-value{font-size:18px}
.stat-label{font-size:12px; color:var(--muted)}
.stat-value{font-weight:900; font-size:20px}
.topk{margin-top:8px; display:flex; flex-wrap:wrap; gap:6px}
.topk .pill{padding:6px 10px; border-radius:999px; border:1px solid #33405f; background:#1a2030; color:#cfd7f2; font-size:12px}
.control{display:grid; gap:6px; margin-top:8px}
select,input[type=range],input[type=number]{width:100%}

.calorie-ring{position:relative; width:170px; height:170px; margin:14px auto}
.calorie-ring.big{width:200px; height:200px}
.ring{--pct:0; width:100%; height:100%; background:conic-gradient(var(--accent) calc(var(--pct)*1%), #2a2f40 0), radial-gradient(circle 64px at 50% 50%, #0f1218 99%, transparent 0); border-radius:50%; border:1px solid #2a2f40; filter:drop-shadow(0 6px 20px #b9ff5833)}
.ring-center{position:absolute; inset:0; display:grid; place-items:center}
.kcal{font-size:34px; font-weight:900}.kcal-label{font-size:12px; color:#8ea0ca}

.cam video{width:100%; border-radius:12px; background:#000}
.cam-controls{display:flex; gap:8px; margin-top:8px; justify-content:center}

.meal-list.empty{color:#8ea0ca}
.meal-item{display:flex; align-items:center; gap:10px; padding:10px; background:#121520; border:1px solid #232840; border-radius:14px; margin-bottom:8px}
.meal-item img{width:56px; height:56px; object-fit:cover; border-radius:10px; border:1px solid #2a2f40}
.meal-item .name{font-weight:800}
.meal-item .meta{color:#9db0d8; font-size:12px}
.meal-item .act{margin-left:auto; display:flex; gap:6px}

.group{margin:8px 0 2px; color:#9db0d8; font-weight:700}
.history-item{display:flex; align-items:center; gap:12px; padding:10px; background:#121520; border:1px solid #232840; border-radius:14px; margin:6px 0}
.history-item img{width:56px; height:56px; object-fit:cover; border-radius:10px; border:1px solid #2a2f40}
.history-item .meta{display:grid}
.history-item small{color:#9db0d8}

.insights{display:grid; gap:8px}
.ins-row{display:flex; justify-content:space-between; background:#121520; border:1px solid #232840; border-radius:14px; padding:10px}
.ok{color:#bff77f} .warn{color:#ffd86b} .over{color:#ff8f8f}

.bottombar{display:flex; align-items:center; justify-content:center; padding:10px 16px; border-top:1px solid #1f2436; color:#8ea0ca}