:root{--bg: #f0f0f0;--card-bg: #ffffff;--text: #222;--nav-bg: #ffffff;--border: #ccc;--input-bg: #ffffff;--input-text: #222;--button-bg: #0078ff;--button-text: #fff;--breakdown-bg: #ffffff}h2{font-size:24px;margin-bottom:10px;color:#0078ff}body.dark{--bg: #1e1e1e;--card-bg: #2a2a2a;--text: #f5f5f5;--nav-bg: #111;--border: #444;--input-bg: #3a3a3a;--input-text: #f5f5f5;--button-bg: #4a90e2;--button-text: #fff;--breakdown-bg: #333}body{background:var(--bg);color:var(--text);margin:0;font-family:Arial,sans-serif}.navbar{background:var(--nav-bg);padding:10px 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.navbar-links{display:flex;gap:15px}.navbar a{color:var(--text);text-decoration:none;font-weight:700;font-size:14px}.navbar a:hover{opacity:.7}.navbar button{padding:6px 12px;font-size:12px;border-radius:4px;border:1px solid var(--border);background:var(--card-bg);color:var(--text);cursor:pointer;width:auto}.page{max-width:600px;margin:20px auto;padding:10px}.card{background:var(--card-bg);padding:15px;border-radius:8px;box-shadow:0 2px 6px #0000001a}.section-title{margin-top:15px;margin-bottom:6px;font-size:15px;font-weight:700}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.input-group{display:flex;gap:6px;align-items:center}.input-group input{flex:1;padding:7px;border-radius:5px;border:1px solid var(--border);background:var(--input-bg);color:var(--input-text);font-size:13px}.unit-select{width:60px;padding:7px;border-radius:5px;border:1px solid var(--border);background:var(--input-bg);color:var(--input-text);font-size:13px}button{width:100%;padding:10px;background:var(--button-bg);color:var(--button-text);border:none;border-radius:6px;font-size:14px;cursor:pointer;margin-top:12px}button:hover{opacity:.9}.breakdown{background:var(--breakdown-bg);padding:12px;border-radius:6px;margin-top:12px;border:1px solid var(--border)}.breakdown p{margin:4px 0;font-size:13px}.breakdown h3{margin-top:10px;font-size:18px;font-weight:700}@media(max-width:600px){.page{max-width:100%;padding:10px}.card{padding:12px}.form-grid{grid-template-columns:1fr;gap:8px}.input-group{flex-direction:row;gap:6px}.input-group input{font-size:14px;padding:8px}.unit-select{width:70px;font-size:14px}.breakdown{padding:10px}.breakdown h3{font-size:16px}button{font-size:15px;padding:12px}}