:root { color-scheme: light dark; --bg:#0b0b10; --fg:#eaeaf2; --muted:#9aa0a6; --card:#15151d; --border:#2a2a34; --primary:#6aa0ff; --p1:#34d399; --p2:#f87171 }
@media (prefers-color-scheme: light){ :root{ --bg:#fff; --fg:#1a1a1f; --muted:#57606a; --card:#f6f8fa; --border:#e6e8eb } }
*{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif }
.container{ max-width:1200px; margin:0 auto; padding:24px }
.subtitle{ color:var(--muted) }
.grid{ display:grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap:16px; align-items:start }
.panel{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px }
.h2{ margin:0 0 8px 0; font-size:1.1rem }
.h3{ margin:12px 0 8px 0; font-size:1rem }
.help{ background:color-mix(in srgb, var(--primary) 12%, transparent); border:1px solid var(--border); padding:12px; border-radius:10px; margin-bottom:12px }
.help .steps{ margin:8px 0 0 16px; padding:0 }
.help .steps li{ margin:2px 0 }
.row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:12px; align-items:center }
.group{ display:flex; flex-direction:column; gap:6px }
.group.full{ grid-column:1 / -1 }
.note-row textarea{ resize:vertical; min-height:72px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--fg); font-family:inherit }
.note-row textarea:focus{ outline:2px solid color-mix(in srgb, var(--primary) 50%, transparent); outline-offset:2px }
.btn{ border:1px solid var(--border); background:transparent; color:var(--fg); padding:10px 14px; border-radius:8px; cursor:pointer }
.btn.primary{ background:var(--primary); color:#fff; border-color:transparent }
.note{ color:var(--muted); font-size:.9rem }
canvas{ width:100%; height:auto; background:#0000; border:1px solid var(--border); border-radius:8px }
.status{ min-height:1.2em; color:var(--muted); margin-top:8px }
.measurements{ margin-top:12px }
.list{ list-style:none; margin:6px 0; padding:0 }
.list li{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed var(--border); flex-wrap:wrap }
.list .pill{ padding:2px 6px; border-radius:999px; font-size:.85rem; border:1px solid var(--border) }
.list .rm{ margin-left:auto; background:none; border:1px solid var(--border); border-radius:6px; padding:4px 8px; color:#d33; cursor:pointer }
.list .note-text{ flex:1 1 100%; margin-left:24px; color:var(--muted); font-size:0.85rem }
.list .note-text.empty-note{ font-style:italic }
.list .timestamp{ color:var(--muted); font-size:0.85rem }
.empty{ color:var(--muted); font-style:italic; margin:6px 0 0 }
.insights-panel{ grid-column:2 }
.insights-empty{ color:var(--muted); margin:0 0 12px 0 }
.insights-grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); margin-bottom:16px }
.insight-card{ background:color-mix(in srgb, var(--card) 92%, #202020 8%); border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:4px; min-height:120px }
.insight-label{ margin:0; font-size:0.85rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted) }
.insight-value{ margin:0; font-size:1.6rem; font-weight:700; color:var(--fg) }
.insight-sub{ margin:0; font-size:0.9rem; color:var(--muted); line-height:1.3 }
.trend-up{ color:var(--p1) }
.trend-down{ color:var(--p2) }
.trend-flat{ color:var(--muted) }
.divider{ height:1px; background:var(--border); margin:12px 0 16px 0 }
.tips-title{ margin:0 0 8px 0; font-size:1rem }
.tips-list{ margin:0 0 0 20px; padding:0; display:grid; gap:6px; color:var(--muted); font-size:0.95rem }
.tips-list li{ line-height:1.4 }
@media (max-width: 980px){ .grid{ grid-template-columns: 1fr } }
@media (max-width: 980px){ .insights-panel{ grid-column:auto } }