:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { font-family: 'Avenir Next', system-ui, sans-serif; font-size: 18px;
       margin: 0; padding: 0; background: #f6f6fa; color: #1A1A2E; }
header { padding: 16px; background: #1A1A2E; color: #fff; }
header h1 { font-size: 20px; margin: 0; }
main { padding: 16px; max-width: 720px; margin: 0 auto; }
section.metric-group { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 16px;
                       box-shadow: 0 1px 2px rgba(0,0,0,.06); }
section.metric-group h2 { font-size: 16px; margin: 0 0 12px; color: #555; text-transform: uppercase; letter-spacing: .04em; }
.field { display: flex; align-items: center; justify-content: space-between; padding: 10px 0;
         border-bottom: 1px solid #eee; }
.field:last-child { border-bottom: 0; }
.field label { flex: 1; font-size: 18px; }
.field input { width: 100px; padding: 10px 12px; font-size: 18px; text-align: right;
               border: 1px solid #ddd; border-radius: 6px; background: #fff; }
.save-pill { font-size: 14px; color: #1A6B1A; margin-left: 8px; opacity: 0; transition: opacity .2s; }
.save-pill.show { opacity: 1; }
.save-pill.error { color: #B00020; }