:root { --ink:#243330; --muted:#65736f; --canvas:#f4f7f5; --paper:#fff; --line:#dce5e1; --brand:#176f62; --brand-dark:#0e5148; --brand-soft:#e6f2ee; --blue:#39769b; }
body[data-theme="purple"] { --ink:#302838; --muted:#746b7d; --canvas:#f7f4f9; --brand:#76518d; --brand-dark:#503663; --brand-soft:#eee6f3; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font-family:Heebo,sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(20px,calc((100vw - 980px) / 2)); color:#fff; background:var(--brand-dark); }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font:600 1.3rem Newsreader,serif; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgb(255 255 255 / 45%); border-radius:50%; font-family:Heebo,sans-serif; }
.icon-button { width:40px; height:40px; display:inline-grid; place-items:center; color:inherit; border:1px solid rgb(255 255 255 / 25%); border-radius:5px; text-decoration:none; }
.icon-button svg { width:19px; height:19px; }
.reports-shell { width:min(980px,calc(100% - 32px)); margin:28px auto 56px; }
.page-heading,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.page-heading { margin-bottom:22px; }
.page-heading > svg { width:38px; height:38px; color:var(--brand); }
.eyebrow { margin:0 0 3px; color:var(--brand); font-size:.72rem; font-weight:800; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:4px; font-size:1.8rem; } h2 { margin-bottom:0; font-size:1.25rem; } h3 { margin:0; font-size:1.05rem; }
.page-heading p:not(.eyebrow) { margin:0; color:var(--muted); }
.vault-error { color:#a43c34; font-weight:700; }
.vault-error:empty { display:none; }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:20px; background:var(--paper); border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.summary-grid article { display:grid; gap:3px; padding:18px; border-inline-end:1px solid var(--line); } .summary-grid article:last-child { border-inline-end:0; }
.summary-grid span { color:var(--muted); font-size:.8rem; } .summary-grid strong { font-size:1.35rem; }
.report-section { padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:7px; }
.count-badge { min-width:28px; height:28px; display:grid; place-items:center; color:var(--brand); background:var(--brand-soft); border-radius:50%; font-weight:800; }
.cycle-list { display:grid; gap:12px; margin-top:18px; }
.cycle-card { padding:16px; border:1px solid var(--line); border-radius:6px; }
.cycle-card header > div { display:grid; gap:6px; }
.cycle-card header { display:grid; grid-template-columns:1fr; justify-items:start; gap:12px; margin-bottom:14px; }
.cycle-card header > div { min-width:0; }
.status-pill { display:block; margin-top:12px; margin-inline-start:0; padding:4px 9px; color:var(--brand); background:var(--brand-soft); border-radius:999px; font-size:.75rem; font-weight:800; white-space:nowrap; }
.cycle-dates { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.cycle-dates div { display:grid; gap:3px; padding:9px; background:#f7faf8; border-inline-start:3px solid var(--brand); }
.cycle-dates span { color:var(--muted); font-size:.72rem; } .cycle-dates strong { font-size:.8rem; }
.delete-cycle, .delete-entry { display:inline-flex; align-items:center; gap:5px; color:#a43c34; background:#fff8f7; border:1px solid #e8c4c0; border-radius:5px; cursor:pointer; font-size:.72rem; font-weight:700; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.delete-cycle:hover, .delete-entry:hover { color:#812c26; background:#fdecea; border-color:#d99a94; }
.delete-cycle:focus-visible, .delete-entry:focus-visible { outline:2px solid #d99a94; outline-offset:2px; }
.delete-cycle svg, .delete-entry svg { width:14px; height:14px; }
.delete-cycle { width:32px; height:32px; display:grid; place-items:center; margin-bottom:12px; padding:0; }
.delete-entry { width:30px; height:30px; justify-self:start; display:grid; place-items:center; padding:0; }
.empty-state { margin:18px 0 4px; color:var(--muted); font-size:.88rem; }
@media (max-width:700px) { .reports-shell { width:min(100% - 20px,980px); margin-top:18px; } .summary-grid { grid-template-columns:1fr; } .summary-grid article { border-inline-end:0; border-bottom:1px solid var(--line); } .summary-grid article:last-child { border-bottom:0; } .report-section { padding:15px; } .cycle-dates { grid-template-columns:repeat(2,1fr); } }