:root { --ink:#18263b; --muted:#657389; --line:#dce4ed; --paper:#fff; --canvas:#f5f8fb; --navy:#173b5c; --blue:#2474d9; --sky:#edf5ff; --green:#0f8b6d; --red:#d4545b; --amber:#bd7917; --radius:16px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.shell { width:min(1120px, calc(100% - 40px)); margin:0 auto; padding:28px 0 48px; }
.shell.narrow { width:min(700px, calc(100% - 40px)); padding-top:38px; }
.brand { display:inline-flex; align-items:center; gap:9px; color:var(--navy); font-weight:750; font-size:17px; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:var(--blue); color:#fff; font-weight:800; }
.hero { padding:62px 0 34px; }
.eyebrow { margin:0 0 8px; color:var(--blue); letter-spacing:.12em; font-size:11px; font-weight:800; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:12px; font-size:clamp(32px,5vw,46px); letter-spacing:-.045em; line-height:1.07; } h2 { margin-bottom:4px; font-size:18px; letter-spacing:-.02em; }
.lede { max-width:610px; color:var(--muted); font-size:17px; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 5px 18px rgba(20,42,69,.035); }
.upload-form { padding:30px; }
.step-heading { display:flex; align-items:flex-start; gap:12px; }.step { display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px; margin-top:1px; border-radius:50%; background:var(--sky); color:var(--blue); font-size:13px; font-weight:800; }.step-heading p,.section-heading p,.metric-card p { color:var(--muted); margin:0; font-size:13px; }
.file-drop { display:flex; align-items:center; gap:15px; margin:22px 0 32px; padding:18px; border:1.5px dashed #aebfd1; border-radius:12px; cursor:pointer; transition:.15s ease; }.file-drop:hover { border-color:var(--blue); background:#f8fbff; }.file-drop input { position:absolute; width:1px; height:1px; opacity:0; }.file-drop strong,.file-drop small { display:block; }.file-drop small { color:var(--muted); font-size:12px; }.file-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--sky); color:var(--blue); font-size:22px; }
.target-heading { padding-top:4px; }.target-inputs { display:flex; align-items:flex-end; gap:12px; margin:18px 0 30px; }.target-inputs label { flex:1; }.target-inputs input { margin-top:6px; }.range-dash { padding:9px 0; color:var(--muted); }.meal-step { margin-bottom:16px; }.meal-step h2 { display:flex; align-items:center; gap:8px; }
label { display:block; color:#34445a; font-weight:650; font-size:13px; } input,textarea { display:block; width:100%; margin-top:5px; padding:10px 11px; border:1px solid #cbd6e2; border-radius:9px; background:#fff; color:var(--ink); font:inherit; font-weight:400; outline:none; } input:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,116,217,.12); }.unit { color:var(--muted); font-weight:500; }.optional { margin-top:25px; border:1px solid #cbddeb; border-radius:11px; background:#f8fbff; }.optional summary { display:flex; justify-content:space-between; padding:15px 16px; cursor:pointer; color:var(--navy); font-weight:750; list-style:none; }.optional summary::-webkit-details-marker { display:none; }.optional summary::before { content:'+'; margin-right:9px; color:var(--blue); }.optional[open] summary::before { content:'−'; }.optional-tag { color:var(--muted); font-size:11px; font-weight:650; }.prominent-tag { display:inline-block; padding:2px 7px; border-radius:999px; background:#e5f0ff; color:#2161ae; font-size:10px; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; }.summary-hint { color:var(--muted); font-size:12px; font-weight:500; }.optional-content { padding:0 16px 18px; }.muted { color:var(--muted); }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0; }.secondary-file { margin-top:16px; padding:14px; border-radius:10px; background:#f8fafc; }.secondary-file input { margin:8px 0; }.secondary-file small { display:block; color:var(--muted); font-weight:400; }.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:43px; padding:0 16px; border:1px solid transparent; border-radius:9px; font:inherit; font-weight:750; cursor:pointer; text-decoration:none; }.primary { width:100%; background:var(--blue); color:#fff; }.primary:hover { background:#1767c5; }.secondary { background:#fff; border-color:#bdcbd9; color:var(--navy); }.quiet { min-height:auto; padding:7px 10px; color:var(--blue); }.footnote { max-width:650px; margin:20px auto 0; color:var(--muted); font-size:12px; text-align:center; }.alert { margin-bottom:20px; padding:14px 16px; border:1px solid #f0b7b9; border-radius:10px; background:#fff4f4; color:#89393f; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:38px; }.report-title { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }.report-title h1 { margin-bottom:7px; }.report-meta { display:flex; flex-wrap:wrap; gap:8px 14px; margin:0; color:var(--muted); font-size:14px; }.report-meta span { color:var(--navy); font-weight:650; }.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }.metric-card { min-height:143px; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }.metric-card.accent { border-color:#acd2c5; background:#f3fbf8; }.metric-card > span,.association span { display:block; color:var(--muted); font-size:12px; font-weight:700; }.metric-card strong { display:block; margin:9px 0 1px; color:var(--navy); font-size:30px; letter-spacing:-.055em; }.metric-card p { margin:0; }.metric-card small,.period-row small,.association small { color:var(--muted); font-size:12px; letter-spacing:0; }.range-split { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }.range-split > div + div { padding-left:10px; border-left:1px solid var(--line); }.range-split strong { font-size:24px; }.range-split p { color:var(--muted); font-size:12px; }.chart-card { padding:24px; margin-bottom:18px; overflow:hidden; }.section-heading { display:flex; justify-content:space-between; margin-bottom:16px; }.section-note { margin:0 0 8px; color:var(--muted); font-size:13px; }.chart-card .plotly-graph-div { width:100% !important; }.two-column { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }.compact-card { padding:22px; }.episode-row { display:flex; gap:11px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--line); }.episode-dot { width:10px; height:10px; margin-top:6px; border-radius:50%; }.high { background:var(--amber); }.low { background:var(--red); }.period-row { display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line); }.period-row strong { color:var(--navy); }.association-list { display:grid; gap:8px; }.association { display:grid; grid-template-columns:1.45fr 1fr 1.25fr; align-items:center; gap:15px; padding:15px; border-radius:11px; background:#f8fafc; }.association p { margin:2px 0 0; color:var(--muted); font-size:12px; }.association strong { color:var(--navy); }.empty-state { display:flex; align-items:center; gap:12px; padding:16px; border-radius:10px; background:#f8fafc; }.empty-state > span { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:#e6eef7; color:var(--blue); font-size:20px; }.empty-state p { margin:2px 0 0; color:var(--muted); font-size:13px; }.clean-list { margin:12px 0 0; padding-left:19px; }.clean-list li { margin-bottom:11px; color:#3c4d61; }.bottom-grid { margin-bottom:0; }.event-card { margin-bottom:18px; padding:24px; }
.source-details { margin:13px 0; padding-top:12px; border-top:1px solid var(--line); }.source-details summary { cursor:pointer; color:var(--blue); font-size:13px; font-weight:700; }.source-details p { margin:8px 0 0; font-size:12px; }.data-notes { padding:15px 22px; }.data-summary { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 12px; }.data-summary strong { color:var(--navy); font-size:14px; }.data-summary span { color:var(--muted); font-size:13px; }.data-notes .source-details { margin:10px 0 0; padding-top:10px; }.data-notes .source-details:not([open]) { border-top:0; padding-top:0; }.data-notes .source-details p { max-width:760px; }
.meal-observations { margin-bottom:18px; }.ai-card { margin-bottom:18px; padding:24px; border-color:#c9daf2; background:linear-gradient(135deg,#fff 55%,#f3f8ff); }.ai-card h3 { margin:20px 0 8px; color:var(--navy); font-size:14px; }.ai-summary { max-width:840px; margin:0 0 16px; color:#33465e; font-size:16px; }.ai-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.ai-list article { padding:14px; border:1px solid #dbe6f2; border-radius:10px; background:rgba(255,255,255,.8); }.ai-list p { margin:4px 0; color:#46586c; font-size:13px; }.ai-list small { color:var(--muted); font-size:12px; }
.meal-times { margin:16px 0; padding:14px; border:1px solid var(--line); border-radius:10px; background:#f8fafc; }.field-label { margin:0; color:#34445a; font-size:13px; font-weight:650; }.meal-times > .muted { margin:2px 0 10px; font-size:12px; }.meal-time-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }.meal-time-grid input { min-width:0; }
@media (max-width:720px) { .shell,.shell.narrow { width:min(100% - 28px, 700px); }.hero { padding:45px 0 25px; }.upload-form { padding:20px; }.form-grid,.two-column,.ai-list { grid-template-columns:1fr; }.meal-time-grid { grid-template-columns:1fr; }.metric-grid { grid-template-columns:1fr 1fr; }.report-title { align-items:flex-start; flex-direction:column; }.association { grid-template-columns:1fr; gap:8px; }.chart-card { padding:16px; }.chart-card .plotly-graph-div { min-width:550px !important; }.chart-card { overflow-x:auto; } }
@media (max-width:410px) { .metric-grid { grid-template-columns:1fr; }.target-inputs { gap:8px; }.range-dash { font-size:12px; } }