* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; padding: 40px; }
.page-header { max-width: 900px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: space-between; }
.page-header h1 { font-size: 1.5rem; color: #333; }
.back-link { font-size: 0.9rem; color: rgb(11, 111, 251); text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.container { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

.gauge-card { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.1); }

.header { display: flex; align-items: center; margin-bottom: 20px; }
.value-input { width: 100px; height: 70px; font-size: 32px; font-weight: bold; text-align: center; border: 3px solid #222; border-radius: 8px; margin-right: 25px; }
.info h2 { font-size: 22px; color: #333; margin-bottom: 4px; }
.info .reading { font-size: 20px; color: #555; }

.gauge-wrapper { position: relative; height: 60px; margin: 10px 0; }
.gauge-bar { height: 20px; border-radius: 5px; overflow: hidden; display: flex; background: #ddd; }
.gauge-bar > div { height: 100%; }

.pointer {
    position: absolute; bottom: +15px; left: 50%; width: 0; height: 0;
    border-left: 16px solid transparent; border-right: 16px solid transparent;
    border-bottom: 26px solid #00aaff; transform: translateX(-50%);
    transition: all 0.25s ease; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
}

.result-label { text-align: center; font-size: 21px; font-weight: bold; color: #00aaff; transition: color 0.25s; }
.error-msg { text-align: center; color: #d32f2f; font-size: 16px; margin-top: 10px; }

.range-high-warning { background: #e53935; border-right: 1px black solid; }
.range-warning { background: #ffb300; border-right: 1px black solid; }
.range-normal { background: #cbf2ae; border-right: 1px black solid; }
.range-optimal { background: #9ccc65; border-right: 1px black solid; }