:root { font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; color: #14221c; background: #f1f5f2; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
.topbar { height: 58px; padding: 0 16px; background: #08775d; color: white; display: flex; align-items: center; justify-content: space-between; font-weight: 750; }
.topbar form { margin: 0; }.link-button { color: white; background: transparent; border: 0; font-size: 16px; }
.top-actions { display: flex; align-items: center; gap: 14px; }.top-actions a { text-decoration: none; }
.meter-number-row { display: grid; grid-template-columns: auto 1fr; align-items: center; border: 2px solid #c9d5cf; border-radius: 13px; overflow: hidden; }.meter-number-row:focus-within { outline: 4px solid #c8f0e5; border-color: #098267; }.meter-number-row span { align-self: stretch; display: grid; place-items: center; padding: 0 12px; color: #34453d; background: #edf2ef; font-size: 20px; font-weight: 800; }.meter-number-row input { border: 0; border-radius: 0; }.meter-number-row input:focus { outline: 0; }
.wizard { width: min(100% - 24px, 620px); margin: 16px auto 50px; }
.progress { height: 10px; background: #d8e3dd; border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
#progress-bar { width: 16.6%; height: 100%; background: #11a47e; transition: width .25s; }
.step { display: none; background: white; border-radius: 20px; padding: 24px; box-shadow: 0 8px 30px rgba(23, 60, 44, .08); }
.step.active { display: block; }
.step-number { color: #08775d; font-weight: 800; }.step h1 { margin: 8px 0 10px; font-size: 30px; }.step p { color: #64736c; font-size: 18px; }
label { display: block; margin: 20px 0 8px; font-size: 18px; font-weight: 750; }
input, select { width: 100%; min-height: 58px; border: 2px solid #c9d5cf; border-radius: 13px; padding: 12px 14px; background: white; font-size: 20px; }
input:focus, select:focus { outline: 4px solid #c8f0e5; border-color: #098267; }
button { cursor: pointer; }
.hero-button, .next-button, .finish-button { width: 100%; min-height: 64px; border: 0; border-radius: 14px; color: white; background: #08775d; font-size: 21px; font-weight: 800; margin-top: 20px; }
.next-button { background: #1267c4; }.finish-button { background: #d65a16; }.finish-button:disabled { opacity: .55; }
.back-button, .secondary-button { width: 100%; min-height: 52px; border: 0; border-radius: 12px; color: #44534c; background: #e8eeeb; font-weight: 700; margin-top: 12px; }
#scanner { background: #12201a; padding: 10px; border-radius: 14px; margin-top: 12px; color: white; text-align: center; }#qr-reader { width: 100%; overflow: hidden; border: 0 !important; border-radius: 9px; background: #000; }#qr-reader video { max-height: 440px; object-fit: cover; }
.summary { background: #eaf6f1; padding: 18px; border-radius: 14px; font-size: 20px; line-height: 1.7; }.summary small { overflow-wrap: anywhere; color: #56675f; }
.meter-card { margin-top: 18px; padding: 18px; border: 2px solid #dbe5e0; border-radius: 15px; }.meter-title { display: flex; justify-content: space-between; font-size: 20px; }.remove-meter { border: 0; color: #b33e2e; background: #fae7e3; border-radius: 8px; padding: 7px 12px; }
.photo-button { display: block; padding: 17px; border-radius: 12px; color: #075f49; background: #dff3ec; text-align: center; }.photo-button input { display: none; }.photo-status { color: #69776f; text-align: center; }
.error { color: #9c261d; background: #fde8e5; border-radius: 12px; padding: 14px; margin-top: 16px; font-weight: 700; }.success-icon { width: 90px; height: 90px; margin: 20px auto; border-radius: 50%; display: grid; place-items: center; color: white; background: #10a276; font-size: 56px; }.step[data-step="success"] { text-align: center; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(145deg, #e6f4ef, #f5f7f4); }.login-card { width: min(100%, 430px); padding: 28px; border-radius: 20px; background: white; box-shadow: 0 12px 40px rgba(20,60,42,.12); }.login-card h1, .login-card p { text-align: center; }.logo { width: 68px; height: 68px; margin: auto; border-radius: 18px; display: grid; place-items: center; color: white; background: #08775d; font-size: 34px; font-weight: 900; }
.company-name { margin: 8px 0 20px; color: #08775d; font-size: 17px; font-weight: 750; }
@media (max-width: 480px) { .wizard { width: min(100% - 16px, 620px); margin-top: 8px; }.step { padding: 20px 15px; border-radius: 16px; }.step h1 { font-size: 27px; } }