*{box-sizing:border-box}body{color:#111;background:#f4f6f8;margin:0;font-family:Arial,Helvetica,sans-serif}#root{width:100%}.navbar{background:#1f2937;align-items:center;gap:25px;padding:15px 30px;display:flex}.navbar a{color:#fff;font-weight:700;text-decoration:none}.navbar a:hover{opacity:.8}.page-container{width:90%;max-width:1200px;margin:auto;padding:35px}.page-container h1{margin-bottom:30px;font-size:40px}.card,.form-card{background:#fff;border-radius:20px;margin-bottom:25px;padding:30px;box-shadow:0 8px 20px #0000001f}.card h2,.form-card h2{margin-top:0;font-size:26px}.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;display:grid}.dashboard-card{background:#fff;border-radius:20px;padding:25px;box-shadow:0 8px 20px #0000001f}.dashboard-card h2{font-size:25px}.form-grid{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.form-group{flex-direction:column;display:flex}.form-group label{margin-bottom:5px;font-weight:700}input,select{border:1px solid #ccc;border-radius:8px;padding:10px;font-size:16px}button{cursor:pointer;border:none;border-radius:10px;padding:12px 25px}button:hover{opacity:.85}.button-row{gap:15px;margin-top:20px;display:flex}table{border-collapse:collapse;background:#fff;width:100%}th{color:#fff;text-align:center;background:#1f2937;padding:12px}td{text-align:center;border-bottom:1px solid #ddd;padding:12px}.body-metrics-container{width:90%;max-width:1200px;margin:auto;padding:35px}.body-metrics-container h1{margin-bottom:30px;font-size:40px}.body-metrics-grid{grid-template-columns:1fr 1fr;gap:30px;display:grid}.body-metrics-card{background:#fff;border-radius:20px;padding:35px;box-shadow:0 8px 20px #0000001f}.body-metrics-card h2{margin-bottom:25px;font-size:26px}.metric-row{grid-template-columns:180px 1fr;align-items:center;gap:15px;margin-bottom:15px;display:grid}.metric-row label{font-weight:700}.metric-button{color:#fff;cursor:pointer;background:#1f2937;border:none;border-radius:10px;margin-top:20px;padding:12px 25px}.latest-metrics p{margin:15px 0;font-size:18px}@media (width<=900px){.body-metrics-grid,.form-grid,.metric-row{grid-template-columns:1fr}}.body-metrics-container{max-width:1200px;margin:auto;padding:30px}.metrics-tabs{justify-content:center;gap:20px;margin-bottom:30px;display:flex}.metrics-tabs button{cursor:pointer;background:#eee;border:none;border-radius:12px;padding:12px 35px;font-size:18px}.metrics-tabs button:hover{color:#fff;background:#1976d2}.body-metrics-form{background:#fff;border-radius:15px;padding:30px;box-shadow:0 4px 15px #0000001a}.metric-row{align-items:center;margin-bottom:18px;display:flex}.metric-row label{width:220px;font-size:18px;font-weight:700}.metric-row input,.metric-row select{border:1px solid #ccc;border-radius:8px;flex:1;height:42px;padding:5px 10px;font-size:16px}.save-button{color:#fff;cursor:pointer;background:#1976d2;border:none;border-radius:10px;width:220px;height:45px;font-size:18px}.save-button:hover{background:#125aa0}@media (width<=600px){.body-metrics-container{padding:15px}.metrics-tabs{flex-direction:column;gap:10px}.metrics-tabs button{width:100%;font-size:20px}.metric-row{flex-direction:column;align-items:stretch}.metric-row label{width:auto;margin-bottom:8px;font-size:16px}.metric-row input,.metric-row select{width:100%;height:45px}h1{font-size:32px}}.input-unit-wrapper{flex:1;align-items:center;gap:8px;display:flex}.input-unit-wrapper input{flex:1}.input-unit-wrapper span{min-width:35px;font-size:18px;font-weight:700}.metric-history-card{background:#fff;border-radius:15px;margin-bottom:20px;padding:20px;box-shadow:0 4px 15px #0000001a}.metric-history-card h3{margin-top:0}.metric-history-table th{color:#fff;text-align:center;background:#1f2937;padding:12px}.metric-history-table td{border-bottom:1px solid #ddd;padding:10px}.metric-history-table td:first-child{font-weight:700}.body-metrics-container{box-sizing:border-box;width:90%;max-width:1200px;margin:0 auto;padding:20px}.body-metrics-chart{width:100%;max-width:1100px;height:280px;margin:20px auto 35px}.metric-progress-control{margin-bottom:15px}.metric-progress-control label{margin-right:10px;display:inline-block}.metric-progress-control select{min-width:200px;padding:8px}.metric-history-card{box-sizing:border-box;background:#fff;border-radius:15px;width:100%;max-width:1100px;margin:0 auto 30px;padding:20px;box-shadow:0 4px 15px #0000001a}.metric-history-table{border-collapse:collapse;width:100%}.metric-history-table th,.metric-history-table td{text-align:center;padding:10px}