.lipid-panel{--lp-primary:#087F8C;--lp-navy:#15324F;--lp-muted:#51657A;--lp-border:#DCE5ED;color:var(--lp-navy);margin:24px 0;background:#fff;border:1px solid var(--lp-border);border-radius:24px;box-shadow:0 2px 5px #15324f05,0 14px 38px #15324f08}
.lipid-panel h1{font-size:clamp(1.65rem,4vw,2.3rem);margin:4px 0 10px;line-height:1.2}.lipid-panel p{color:var(--lp-muted)}.lipid-panel button{background:var(--lp-primary)}.lipid-panel button.secondary{color:var(--lp-primary);background:#eef7f8}
.lipid-panel .heading{align-items:flex-start;gap:20px}.lipid-panel .heading p{max-width:690px}.lipid-panel .eyebrow{color:var(--lp-primary)}.lipid-filters,.lipid-dates,.lipid-layers{display:flex;flex-wrap:wrap;gap:16px}.lipid-filters label:first-child{flex:1;min-width:200px}.lipid-filters label{margin:0}.lipid-panel select,.lipid-panel input:not([type=checkbox]){box-sizing:border-box;width:100%;padding:12px;border:1px solid var(--lp-border);border-radius:10px;background:#fff;color:var(--lp-navy);font:inherit;min-height:44px;min-width:0}.lipid-note{font-size:.83rem}.lipid-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0 30px}
.lipid-panel .lipid-card{--metric:#087F8C;min-width:0;text-align:left;display:flex;align-items:flex-start;flex-direction:column;gap:7px;color:var(--lp-navy);background:linear-gradient(145deg,#fff,#f5f8fb);border:1px solid var(--lp-border);border-top:4px solid var(--metric);padding:20px 16px;border-radius:18px;box-shadow:0 2px 4px #15324f05,0 8px 18px #15324f08;cursor:pointer}.lipid-card[aria-pressed=true]{outline:2px solid var(--metric);outline-offset:2px}.lipid-card strong{font-size:2rem;color:var(--metric);line-height:1.1}.lipid-card small{color:var(--lp-muted);font-weight:400;line-height:1.4}.lipid-card span:first-child{font-size:1rem;font-weight:700}.lipid-badge{font-size:.73rem;color:#815407;background:#fff2d9;padding:4px 7px;border-radius:7px;font-weight:500}
.lipid-panel .metric-total_cholesterol{--metric:#087F8C}.lipid-panel .metric-ldl_c{--metric:#7358B8}.lipid-panel .metric-hdl_c{--metric:#2563EB}.lipid-panel .metric-triglycerides{--metric:#A96708}.lipid-chart-heading{display:flex;justify-content:space-between;gap:16px;align-items:center}.lipid-dates{gap:10px}.lipid-dates label{font-size:.8rem}.lipid-layers{margin:18px 0}.lipid-layers label{display:flex;align-items:center;gap:8px;font-size:.86rem;margin:0}.lipid-panel input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:#087F8C}.lipid-chart{width:100%;border-radius:16px;background:#f7fafc;border:1px solid var(--lp-border);overflow:hidden}.lipid-chart svg{display:block;width:100%;height:auto;min-height:210px}.lipid-axis{font-size:13px;fill:#51657A}.lipid-grid{stroke:#DCE5ED;stroke-width:1}.lipid-line{stroke:var(--metric);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 2px #15324f25)}.lipid-point{fill:var(--metric);stroke:#fff;stroke-width:2;cursor:pointer}.lipid-point.pending{fill:#fff;stroke:var(--metric);stroke-width:2;stroke-dasharray:3 2}.lipid-point:focus{stroke:#15324F;stroke-width:4;outline:none}.lipid-baseline{stroke:#15324F;stroke-width:1.6;stroke-dasharray:7 5}.lipid-ref{stroke:#64748b;stroke-width:3;opacity:.6}.lipid-point-info{min-height:24px;font-size:.85rem;overflow-wrap:anywhere}.lipid-empty{padding:55px 20px;text-align:center}
.lipid-baseline-box{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#edf6f7;border:1px solid #d5e8eb;border-radius:14px;padding:16px}.lipid-baseline-box p{margin:5px 0;font-size:.86rem}.lipid-formulas{margin:16px 0}.lipid-formulas p{font-size:.86rem}.lipid-table{max-width:100%;overflow:auto}.lipid-table table{min-width:850px}.lipid-table td{font-size:.85rem}.lipid-table small{display:block}.lipid-review{color:#815407}.lipid-verified{color:#166045}
.lipid-panel dialog{max-width:min(680px,calc(100vw - 32px));width:620px;max-height:85dvh;overflow:auto;box-sizing:border-box;border:1px solid var(--lp-border);border-radius:20px;padding:26px;color:var(--lp-navy)}.lipid-panel dialog::backdrop{background:#15324f88}.lipid-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.lipid-form-grid label{min-width:0}.lipid-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f4f7fa;padding:12px;font:inherit;font-size:.85rem;max-height:180px;overflow:auto}.lipid-panel button:focus-visible,.lipid-panel input:focus-visible,.lipid-panel select:focus-visible,.lipid-panel a:focus-visible{outline:3px solid #2563EB;outline-offset:3px}
@media(max-width:900px){.lipid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.lipid-chart-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.lipid-panel{padding:18px}.lipid-panel .heading{flex-direction:column}.lipid-card strong{font-size:1.7rem}.lipid-panel .lipid-card{padding:15px 12px}.lipid-baseline-box{align-items:flex-start;flex-direction:column}.lipid-form-grid{grid-template-columns:1fr}.lipid-panel dialog{padding:20px}.lipid-panel .actions{flex-wrap:wrap}.lipid-dates{width:100%;display:grid;grid-template-columns:1fr 1fr}.lipid-dates label{min-width:0}.lipid-axis{font-size:12px}}
@media(prefers-reduced-motion:reduce){.lipid-panel *{transition:none!important;animation:none!important}}

#lipid-title svg{width:30px;height:30px;vertical-align:-3px;margin-right:10px;color:#087F8C}

.lipid-panel h1{letter-spacing:-.6px}.lipid-baseline-box p{overflow-wrap:anywhere}.lipid-panel input[type=checkbox]{margin:0}.lipid-panel .confirm input{margin-top:3px}