:root{--teal: #006d8f;--offline-yellow: #fff3cd;--offline-text: #856404}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0;padding:0;background-color:#fff}.header{background-image:url(/images/appruler.png);background-size:cover;color:#fff;padding:16px;position:fixed;top:0;left:0;width:100%}.back-button{background:var(--teal);color:#fff;border:none;padding:8px 16px;border-radius:4px;position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px;margin:10px 0 0;font-weight:550}.header-title{text-align:right;font-size:24px;margin:10px 0 0;padding-right:24px;font-weight:550}.page-title{text-align:center;font-size:20px;margin:80px 0;border-bottom:#e3e3e3 1px solid;height:35px;font-weight:550}.input-section{background:var(--teal);color:#fff;padding:16px;border-radius:8px;grid-column:span 3;margin-bottom:8px}.input-label{text-align:center;margin:0 auto 12px;font-size:18px;font-weight:550}.input-field{width:100%;padding:12px;border:none;border-radius:4px;font-size:18px;box-sizing:border-box;height:45px;color:#000}.input-field2{width:48%;margin:0 .5%}.focus-border{border:1px solid #ff0000}.keypad-container{padding:16px;background:#f0f0f0;margin:0 auto;width:92%}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;row-gap:2px;margin-bottom:8px}.keypad-button{background:#fff;border:1px solid #ddd;border-radius:8px;padding:24px;font-size:24px;text-align:center;box-shadow:0 1px 3px #0000001a;color:#000;height:10%;line-height:10%}.double-button{grid-column:span 2;background:var(--teal);color:#fff}.utility{background-color:#e3e3e3}.done-button{background:var(--teal);color:#fff;border:none;width:100%;padding:24px;font-size:18px;border-radius:8px;margin-top:8px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid #eee;padding:8px 0}.nav-item{text-align:center;color:#666;margin:5px;padding:3px;border-radius:4px}.nav-item.active{background-color:var(--teal);color:#fff}.nav-icon{font-size:24px!important}.nav-label{font-size:12px}body,.header,.back-button,.header-title,.page-title,.input-section,.input-label,.input-field,.keypad-container,.keypad,.keypad-button,.double-button,.utility,.done-button,.bottom-nav,.nav-item,.nav-icon,.nav-label{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}#result{display:none}.result-container{margin:20px}.result-label{font-size:20px;font-weight:700;margin-right:10px}.result-value{font-size:24px}.favorite-button,.reverse-button{margin:20px auto;padding:12px;background-color:#fff;border:1px solid #006688;border-radius:8px;color:#068;font-size:16px;text-align:center;cursor:pointer;width:100%;display:block}.favorite-button.selected{background-color:#068;color:#fff}.reverse-button{background-color:#068;border:none;color:#fff}.precision-container{margin:20px auto}.precision-label{font-size:16px;margin-bottom:10px;color:#000}.precision-buttons{display:flex;justify-content:space-between;gap:8px}.precision-button{width:40px;height:40px;border:1px solid #ccc;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;background-color:#fff}.precision-button.selected{background-color:#068;color:#fff;border-color:#068}.format-container{margin:20px auto}.decimal-button,.format-button{width:100%;padding:12px;margin:.25% 0;background-color:#fff;border:1px solid #000;border-radius:4px;color:#000;text-align:center;cursor:pointer;font-size:16px}.decimal-button.selected,.format-button.selected{background-color:#068;color:#fff;border:1px solid #000}