:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#172018;background:#f5f7f3;--green: #6daa08;--green-dark: #0d4a2a;--green-soft: #eef7e6;--text: #172018;--muted: #6b756d;--line: #dfe7db;--card: #ffffff;--shadow: 0 24px 70px rgba(13, 43, 22, .1)}*{box-sizing:border-box}body{margin:0;background:#f5f7f3}button,input{font:inherit}.page{min-height:100vh;padding:32px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(circle at top left,#eef8df,transparent 36%),linear-gradient(180deg,#f9fbf7,#eef4ec)}.phoneCard{width:min(470px,100%);background:var(--card);border:1px solid var(--line);border-radius:32px;padding:26px;box-shadow:var(--shadow)}.topbar{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:26px}.logo{width:170px;height:auto;object-fit:contain}.brandText{display:flex;flex-direction:column;gap:3px}.brandText strong{color:var(--green-dark);font-size:22px;font-weight:850;letter-spacing:-.03em}.brandText span{color:var(--muted);font-size:14px}.eyebrow{margin:0 0 6px;color:var(--green);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}h1{color:var(--green-dark);margin:0 0 12px;font-size:38px;font-weight:850;line-height:1.08;letter-spacing:-.045em}h2{color:var(--text);margin:26px 0 14px;font-size:24px;font-weight:780;letter-spacing:-.02em}.introText{color:var(--muted);margin:0 0 18px;font-size:16px;line-height:1.55}.unitCard{display:flex;gap:16px;align-items:center;padding:18px;border-radius:22px;background:linear-gradient(135deg,#fbfdf8,#f3f8ed);border:1px solid var(--line);margin:18px 0}.unitIcon{width:52px;height:52px;display:grid;place-items:center;border-radius:18px;background:#fff;box-shadow:0 8px 22px #0d2b1614;font-size:28px}.unitCard small{display:block;color:var(--green);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em}.unitCard b{display:block;color:var(--text);font-size:18px;margin-top:4px}.unitCard p{margin:2px 0 0;color:var(--muted);font-size:15px}.muted{color:var(--muted)}.stepper{display:flex;justify-content:space-between;align-items:center;margin:24px 0;position:relative}.stepper:before{content:"";position:absolute;left:30px;right:30px;top:15px;height:2px;background:#dfe7dc}.step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;color:#5f6c62;font-size:14px}.bubble{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #cfd9cb;font-weight:800}.bubble.active{color:#fff;border-color:var(--green);background:linear-gradient(135deg,#86c812,#4e9700)}.meterList{display:grid;gap:14px}.meterRow{width:100%;display:grid;grid-template-columns:54px 1fr auto 18px;align-items:center;gap:14px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:22px;padding:18px;cursor:pointer;box-shadow:0 10px 28px #0d2b1612;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.meterRow:hover{transform:translateY(-2px);border-color:#b9d7a9;box-shadow:0 16px 34px #0d2b161f}.meterIcon{width:48px;height:48px;display:grid;place-items:center;border-radius:17px;font-size:26px;background:var(--green-soft)}.meterIcon.blue{background:#e6f4ff}.meterIcon.orange{background:#fff1df}.meterIcon.red{background:#ffe8e4}.meterIcon.yellow{background:#fff8d9}.meterIcon.gas{background:#e9f4ff}.meterText b{display:block;color:var(--text);font-size:18px;font-weight:800;letter-spacing:-.02em}.meterText small{display:block;color:var(--muted);margin-top:4px;font-size:14px}.meterRow em,.badge{font-style:normal;color:#3f7e04;background:#e7f4d5;border-radius:999px;padding:6px 11px;font-size:13px;font-weight:800}.arrow{color:#67826c;font-size:28px;line-height:1}.selectedMeter{display:flex;gap:14px;align-items:center;padding:16px;border-radius:22px;background:#f8faf6;border:1px solid var(--line);margin-bottom:18px}.selectedMeter h2{margin:0 0 4px}.selectedMeter p{margin:0;color:var(--muted)}.formCard label{display:block;margin:16px 0;font-weight:800;color:var(--text)}input{display:block;width:100%;padding:15px 16px;margin-top:8px;border:1px solid #cfd9cb;border-radius:15px;background:#fbfcfa;color:var(--text);font-size:16px}input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px #6daa081f}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}button,.button{border:0;background:linear-gradient(135deg,#78bb05,#4d9700);color:#fff;padding:15px 20px;border-radius:15px;text-decoration:none;cursor:pointer;font-weight:850;box-shadow:0 10px 22px #5a9f0538}.secondary{background:#68746b;box-shadow:none}.error{color:#a40000;background:#fff1f1;padding:14px;border-radius:14px}.warn{color:#8a5a00;background:#fff6dd;padding:14px;border-radius:14px}.success{text-align:center}.check{width:76px;height:76px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin:14px auto;font-size:44px;font-weight:900}.reference{background:#f8faf6;padding:14px;border-radius:16px;word-break:break-all}.footer{width:min(1100px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:18px;color:#fff;background:linear-gradient(135deg,#064028,#0a5b34);border-radius:22px;padding:20px 24px;box-shadow:0 14px 50px #0d2b1629;line-height:1.45}.adminShell{min-height:100vh;display:grid;grid-template-columns:280px 1fr;background:#f5f7f4}.sidebar{background:linear-gradient(180deg,#064028,#07351f);color:#fff;padding:24px;display:flex;flex-direction:column;gap:24px}.sidebarLogo{width:200px;background:#fff;padding:9px;border-radius:14px}.sidebar nav{display:grid;gap:8px}.sidebar a{padding:14px 15px;border-radius:14px;color:#fff;text-decoration:none;font-weight:700}.sidebar a.active,.sidebar a:hover{background:#ffffff24}.addressBox{margin-top:auto;background:#ffffffeb;color:#123;border-radius:16px;padding:16px;font-size:14px;line-height:1.45}.adminMain{padding:32px}.adminTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.statCard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;gap:15px;box-shadow:0 10px 32px #0000000d}.statCard>span{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--green-soft);font-size:24px}.statCard small{display:block;color:var(--muted)}.statCard b{display:block;font-size:30px;margin:3px 0}.statCard em{font-style:normal;color:var(--muted);font-size:13px}.toolbar,.tableCard{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 10px 32px #0000000d}.toolbar{display:flex;gap:14px;align-items:center}.toolbar input{margin:0}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.06em}@media(max-width:800px){.footer,.adminShell{grid-template-columns:1fr}.sidebar{display:none}.stats{grid-template-columns:1fr}.toolbar{flex-direction:column;align-items:stretch}h1{font-size:34px}.logo{width:150px}}.meterIcon.blue:before{content:"💧"}.meterIcon.orange:before{content:"♨"}.meterIcon.red:before{content:"🔥"}.meterIcon.yellow:before{content:"⚡"}.meterIcon.gas:before{content:"🔥"}.meterIcon:before{font-size:28px;line-height:1}.meterIcon svg{width:28px;height:28px;display:block;stroke:currentColor}.meterIcon.blue{color:#1477d4}.meterIcon.orange{color:#f97316}.meterIcon.red{color:#ef4444}.meterIcon.yellow{color:#d6a100}.meterIcon.gas{color:#2563eb}.detailGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0}.detailGrid div{background:#f8faf6;border:1px solid var(--line);border-radius:16px;padding:16px}.detailGrid small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}.detailGrid b{display:block;color:var(--text);font-size:16px}.photoBox{margin-top:24px}.photoBox img{width:100%;max-width:520px;border-radius:18px;border:1px solid var(--line);box-shadow:0 12px 32px #0000001f}.stackForm{display:flex;flex-direction:column;gap:14px;margin-bottom:30px}.formSubmitRow{margin-top:18px}.formSubmitButton{width:220px}.tableActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.actionButton{border:none;border-radius:12px;padding:10px 18px;min-width:120px;min-height:44px;cursor:pointer;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;line-height:1.1}.editAction{background:#455a64;color:#fff}.deleteAction{background:#c62828;color:#fff}.linkAction{background:#58b000;color:#fff}.exportBox{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px;border:1px solid #d9e5d4;border-radius:18px;background:#fff;margin-bottom:28px}.exportBox h3{margin:0 0 8px}.exportBox p{margin:0}.importInfo{margin-top:8px}.importBox{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid #d9e5d4;border-radius:18px;background:#fff;margin:18px 0 24px}.importBox h4{margin:0}.importActions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px}.importPrimaryButton,.importSecondaryButton{border-radius:14px;min-height:46px;padding:0 22px;font-weight:800;font-size:15px;line-height:1;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;box-shadow:0 10px 22px #00000014}.importPrimaryButton{background:#58b000;color:#fff}.importSecondaryButton{background:#f4f8f1;color:#0b5130;border-color:#cfe2c7;box-shadow:none}.importPrimaryButton:hover,.importSecondaryButton:hover{transform:translateY(-1px)}.importBox input[type=file]{background:#fff;border:1px solid #cfdccc;border-radius:14px;padding:14px 16px}.importBox{gap:10px;padding:20px 22px}.importActions{margin-top:2px;gap:10px}.importPrimaryButton,.importSecondaryButton{min-height:42px;min-width:auto;padding:0 20px;border-radius:12px;font-size:14px;box-shadow:none}.importPrimaryButton{background:#58b000}.importSecondaryButton{background:#fff;color:#0b5130;border:1px solid #bfd8b7}.importBox input[type=file]{padding:11px 14px;border-radius:12px}.importBox h4{margin-bottom:2px}.importBox p{margin:4px 0 10px}.importBox{display:grid!important;grid-template-columns:1fr auto!important;gap:14px 18px!important;align-items:center!important;padding:22px 24px!important}.importBox h4,.importBox p{grid-column:1 / -1!important}.importBox input[type=file]{width:100%!important;min-height:44px!important;padding:9px 12px!important;border-radius:12px!important;background:#fff!important}.importActions{display:flex!important;justify-content:flex-end!important;gap:8px!important;margin:0!important;flex-wrap:nowrap!important}.importPrimaryButton,.importSecondaryButton{min-height:42px!important;height:42px!important;min-width:150px!important;padding:0 16px!important;border-radius:10px!important;font-size:14px!important;font-weight:800!important;box-shadow:none!important;white-space:nowrap!important}.importPrimaryButton{background:#58b000!important;color:#fff!important;border:1px solid #58b000!important}.importSecondaryButton{background:#fff!important;color:#0b5130!important;border:1px solid #bfd8b7!important}@media(max-width:1100px){.importBox{grid-template-columns:1fr!important}.importActions{justify-content:flex-start!important;flex-wrap:wrap!important}}.modalBackdrop{position:fixed;inset:0;background:#0f231973;display:flex;align-items:center;justify-content:center;z-index:999;padding:24px}.qrModal{width:min(460px,100%);background:#fff;border-radius:24px;padding:28px;box-shadow:0 24px 70px #00000038;text-align:center}.qrBox{display:inline-flex;padding:18px;background:#fff;border:1px solid #d9e5d4;border-radius:18px;margin:16px 0}.qrLink{font-size:13px;word-break:break-all;color:#466;background:#f5f8f4;border-radius:12px;padding:10px}.tableActions{display:flex;gap:8px;align-items:center;justify-content:flex-start;flex-wrap:nowrap}.tableActions .actionButton{min-height:38px;height:38px;min-width:auto;padding:0 14px;border-radius:10px;font-size:13px;font-weight:800;line-height:1;box-shadow:none;white-space:nowrap}.tableActions .editAction{background:#3f5661;color:#fff;border:1px solid #3f5661}.tableActions .linkAction{background:#f5f9f2;color:#0b5130;border:1px solid #c7ddbf}.tableActions .deleteAction{background:#c92828;color:#fff;border:1px solid #c92828}.tableActions .actionButton:hover{transform:translateY(-1px)}td .actionButton.linkAction[href]{min-height:38px;height:38px;padding:0 14px;border-radius:10px;font-size:13px}
