:root { --ink:#17241d; --muted:#66716b; --canvas:#f5f6f4; --surface:#fff; --line:#dce2da; --green:#126542; --green-dark:#0b452d; --danger:#b52c38; } * { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--canvas); font:14px/1.4 Inter,ui-sans-serif,system-ui,sans-serif; } button,input { font:inherit; } button,.button { padding:.45rem .65rem; color:var(--green-dark); font-weight:650; background:white; border:1px solid #b7c2b9; border-radius:6px; cursor:pointer; } button:hover,.button:hover { background:#edf5ef; }.danger { color:#a2222f; border-color:#e2b7bc; }.danger:hover { background:#fff0f1; }.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem max(1rem,calc((100% - 900px)/2)); color:white; background:var(--green-dark); }.topbar p,.heading p { margin:0; font-size:.75rem; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }.topbar p { color:#a9dbc2; }.topbar h1 { margin:0; font-size:1.1rem; }.profile-menu { display:flex; align-items:center; gap:.65rem; }.profile-menu button { color:white; background:transparent; border-color:#79a68f; } main { max-width:900px; margin:0 auto; padding:1.5rem 1rem; }.heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }.heading p { color:var(--green); }.heading h2 { margin:.05rem 0 0; font-size:1.35rem; }.tracker { background:var(--surface); border:1px solid var(--line); border-radius:9px; overflow:hidden; }.rule { display:grid; grid-template-columns:minmax(220px,1fr) minmax(280px,1.5fr); align-items:center; gap:1rem; min-height:55px; padding:.7rem .85rem; border-bottom:1px solid var(--line); }.rule:last-child { border:0; }.rule-title { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }.rule h3 { margin:0; font-size:.92rem; }.status { display:inline-flex; padding:.15rem .4rem; font-size:.7rem; font-weight:750; border-radius:999px; white-space:nowrap; }.good { color:#075c38; background:#dff5e7; }.warning { color:#875100; background:#fff1d6; }.bad { color:#941d2b; background:#ffe3e5; }.rule-control { display:flex; align-items:center; gap:.45rem; }.checks { display:flex; flex-wrap:wrap; gap:.3rem; }.check { display:flex; align-items:center; justify-content:center; width:27px; height:27px; border:1px solid #bac7bd; border-radius:5px; cursor:pointer; }.check:has(input:checked) { color:#fff; background:var(--green); border-color:var(--green); }.check input { position:absolute; opacity:0; }.choice { display:flex; gap:.3rem; }.choice button { padding:.3rem .5rem; font-size:.78rem; }.choice button.selected { color:white; background:var(--green); border-color:var(--green); }.text-input { width:100%; max-width:310px; padding:.4rem .5rem; border:1px solid #bac7bd; border-radius:5px; }.limit { color:var(--muted); font-size:.78rem; }.actions { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }.actions input { display:none; } dialog { width:min(430px,calc(100% - 2rem)); padding:0; border:0; border-radius:10px; box-shadow:0 18px 50px #0005; } dialog::backdrop { background:#07170f99; } dialog > div { padding:1.25rem; } dialog p { margin:0; color:var(--green); font-size:.75rem; font-weight:750; letter-spacing:.07em; text-transform:uppercase; } dialog h2 { margin:.2rem 0 1rem; font-size:1.2rem; }.profile-list { display:grid; gap:.4rem; margin-bottom:1rem; }.profile-option { text-align:left; }.inline-form { display:flex; gap:.4rem; margin-top:.3rem; }.inline-form input { min-width:0; flex:1; padding:.45rem; border:1px solid #aebbb1; border-radius:6px; }
@media (max-width:620px) { .topbar { align-items:flex-start; flex-direction:column; }.rule { grid-template-columns:1fr; gap:.55rem; }.rule-title { justify-content:flex-start; }.heading { align-items:flex-start; flex-direction:column; gap:.45rem; } }