*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;background:linear-gradient(180deg,#edf4ff 0,#f6f9ff 24%,#f3f6fb 100%);color:#10233f}
.hidden{display:none!important}
button:disabled{opacity:.45;cursor:not-allowed}
a{color:#0d5bdd;font-weight:700;text-decoration:none}
.login-page{min-height:100vh;background:radial-gradient(circle at top,#1667ff 0,#0f4bb5 38%,#082a63 100%);display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:420px;max-width:100%;background:rgba(255,255,255,.14);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);border-radius:28px;padding:40px;color:#fff;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.icon{width:72px;height:72px;margin:0 auto 18px;border-radius:20px;background:linear-gradient(135deg,#12c8f8,#0967e8);display:flex;align-items:center;justify-content:center;font-size:34px;overflow:hidden}.small{width:42px;height:42px;margin:0;font-size:20px;border-radius:14px}.logo-mark img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;padding:6px}
.login-card h1{margin:0;font-size:30px}.login-card p{opacity:.75;margin:6px 0 30px}.login-card input{width:100%;padding:17px 18px;margin:10px 0;border:0;border-radius:12px;background:#fffde0;font-size:18px}.login-card button,.primary{width:100%;padding:16px 18px;border:0;border-radius:12px;background:linear-gradient(90deg,#00b8f5,#1168eb);color:white;font-weight:700;font-size:18px;cursor:pointer;margin-top:12px}
.login-link{display:inline-block;margin-top:14px;color:#fff;text-decoration:underline;text-underline-offset:3px}
.app{display:grid;grid-template-columns:290px 1fr;min-height:100vh}
aside{background:linear-gradient(180deg,#062d6d 0,#0b3b79 100%);color:#e9f2ff;padding:24px 16px;position:sticky;top:0;align-self:start;height:100vh;overflow:auto;box-shadow:inset -1px 0 0 rgba(255,255,255,.08)}
.brand{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.brand span{font-size:12px;opacity:.7;width:100%;margin-left:54px;margin-top:-10px}.user-chip{background:#12498f;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px 12px;margin-bottom:18px;font-size:13px;color:#dbeafe}
nav button{display:block;width:100%;text-align:left;padding:13px 14px;margin:7px 0;border:0;border-radius:12px;background:transparent;color:#e9f2ff;cursor:pointer;font-size:15px;transition:background .15s ease, transform .15s ease}nav button:hover{background:#12498f;transform:translateX(2px)}
main{padding:24px;overflow:auto}header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;position:sticky;top:0;z-index:2;padding:10px 0 14px;background:linear-gradient(180deg,rgba(243,246,251,.98),rgba(243,246,251,.82),rgba(243,246,251,0));backdrop-filter:blur(10px)}header h2{margin:0}header button,.btn{border:0;background:#0d5bdd;color:white;padding:10px 16px;border-radius:10px;cursor:pointer}.btn.active{background:#073373}.btn.secondary{background:#e8eef7;color:#10233f}
.cards{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:16px;margin-bottom:18px}.card{background:linear-gradient(180deg,#fff,#f8fbff);border-radius:18px;padding:20px;box-shadow:0 10px 28px rgba(7,51,115,.08);border:1px solid #e5ecf8}.card b{font-size:30px;display:block;margin-top:8px}.card small{display:block;color:#64748b;margin-top:6px}.card span{color:#334155;font-weight:700}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:end}.toolbar label{font-size:13px;color:#334155}.toolbar input,.toolbar select,.form input,.form select,.form textarea{padding:12px;border:1px solid #d8e0ef;border-radius:10px;background:white;width:100%}.toolbar input,.toolbar select{min-width:130px}.topbar{align-items:end}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.full{grid-column:1/-1}.panel{background:white;border-radius:16px;padding:18px;box-shadow:0 6px 20px rgba(7,51,115,.08);border:1px solid #e5ecf8;margin-bottom:16px}.panel h3{margin-top:0;color:#073373}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.hint{color:#64748b;font-size:14px}.error{background:#fff1f0;color:#b42318}
table{width:100%;border-collapse:collapse;background:white;border-radius:14px;overflow:hidden}th,td{padding:12px;border-bottom:1px solid #edf1f8;text-align:left;font-size:14px;vertical-align:top}th{background:#073373;color:white}.status{padding:5px 9px;border-radius:20px;background:#eef5ff;font-size:12px;display:inline-block}.ok{background:#e7fbef;color:#07863f}.bad{background:#fff1f0;color:#c83224}.warn{background:#fff8e2;color:#a36b00}.neutral{background:#eef5ff;color:#0d5bdd}
.modal{position:fixed;inset:0;background:rgba(3,18,42,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}.modal-card{width:980px;max-width:100%;max-height:92vh;overflow:auto;background:white;border-radius:18px;padding:24px;position:relative;box-shadow:0 30px 80px rgba(3,18,42,.35)}.x{position:absolute;right:16px;top:14px;border:0;background:#e8eef7;border-radius:50%;width:34px;height:34px;font-size:22px;cursor:pointer}.actions button{margin-right:6px;margin-bottom:4px;border:0;border-radius:8px;padding:7px 9px;cursor:pointer}.edit{background:#eef5ff}.del{background:#ffe9e7}.print{background:#eaf8ef}.download{display:inline-block;background:#0d5bdd;color:white;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700}.water{background:#f0faff}.electric{background:#fffbea}.form textarea{resize:vertical}
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.room-card{background:#fff;border:1px solid #e5ecf8;border-radius:18px;padding:18px;box-shadow:0 6px 20px rgba(7,51,115,.08);position:relative;overflow:hidden}.room-card:before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:#0d5bdd}.room-card.ok:before{background:#07863f}.room-card.warn:before{background:#d97706}.room-card.bad:before{background:#c83224}.room-no{font-size:34px;font-weight:900;color:#073373;line-height:1}.room-status{margin-top:10px;display:inline-block;padding:5px 10px;border-radius:999px;background:#eef5ff;font-size:12px}.room-tenant{margin-top:14px;font-weight:700;min-height:42px}.room-meta,.room-note{font-size:13px;color:#64748b;margin-top:8px}.room-card .actions{margin-top:14px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:#334155}.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}.c1{background:#0d5bdd}.c2{background:#ef8a00}.c3{background:#d83434}canvas{width:100%;height:360px}.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.role-grid div{background:#f8fafc;border:1px solid #e5ecf8;border-radius:12px;padding:14px}.role-grid p{margin:6px 0 0;color:#64748b;font-size:13px}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}.role-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  aside{position:relative;height:auto}
  nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  nav button{margin:0;padding:12px 10px;font-size:14px;min-height:48px}
  .cards,.grid2,.grid3{grid-template-columns:1fr}
  main{padding:14px}
  table{font-size:13px}
  th,td{padding:9px}
  .brand span{margin-left:0}
  .toolbar input,.toolbar select{min-width:100%}
  .room-grid{grid-template-columns:1fr}
  .role-grid{grid-template-columns:1fr}
  header{padding-top:6px;padding-bottom:10px;flex-wrap:wrap}
  header button,.btn{width:auto}
}
.alert-panel{border-color:#fed7aa;background:#fffaf0}.alert-panel h3{color:#9a3412}.alert-panel b{color:#9a3412}.success-panel{border-color:#bbf7d0;background:#f0fdf4;color:#166534}.missing-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:12px}.missing-list button{border:1px solid #fed7aa;background:#fff7ed;border-radius:12px;padding:12px;text-align:left;cursor:pointer;color:#10233f}.missing-list button:hover{background:#ffedd5}.missing-list span{display:block;color:#64748b;font-size:12px;margin-top:4px}.room-no-link{border:0;background:transparent;padding:0;cursor:pointer;text-align:left}.room-no-link:hover{text-decoration:underline;color:#0d5bdd}.bill-expense-row{border:1px dashed #cbd5e1;border-radius:14px;padding:14px;margin:12px 0;background:#f8fafc}.small-btn{margin-top:8px;border:0;border-radius:8px;padding:8px 10px;cursor:pointer}.logo-preview{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #d8e0ef;border-radius:10px;background:#f8fafc;min-height:48px}.logo-preview img{max-width:90px;max-height:70px;object-fit:contain}.brand b{line-height:1.25}.brand .icon{flex:0 0 auto}
.danger{background:linear-gradient(90deg,#dc2626,#ef4444)!important}
.meter-preview{margin-top:14px;display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.meter-preview img{max-width:360px;max-height:260px;border-radius:16px;border:1px solid #d8e2ef;box-shadow:0 10px 25px rgba(15,23,42,.12);object-fit:contain;background:#fff}

.meter-selected-card{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:16px;
  border:1px solid #bfdbfe;
  border-radius:16px;
  background:#eff6ff;
  margin:12px 0 18px;
}
.meter-selected-card span{display:block;color:#64748b;font-size:13px;margin-bottom:4px;}
.meter-selected-card b{display:block;color:#0b3b79;font-size:28px;line-height:1.1;}
.meter-selected-card small{display:block;color:#334155;margin-top:4px;}
.link-btn{border:0;background:transparent;color:#0b5bd3;cursor:pointer;padding:0;font:inherit;text-align:left;}
.link-btn:hover{text-decoration:underline;}
@media(max-width:760px){.meter-selected-card{flex-direction:column;align-items:flex-start}.meter-selected-card .actions{width:100%}}
.hint-box{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:12px;padding:12px 14px;color:#334155;line-height:1.65}
.meter-only-mode .login-card{width:min(100%,430px);padding:32px 22px}
.meter-only-mode .app{grid-template-columns:1fr}
.meter-only-mode aside{display:none}
.meter-only-mode main{padding:12px}
.meter-only-mode header{display:none}
.meter-only-mode .panel{border-radius:18px}
.meter-only-mode .toolbar{gap:8px}
.meter-only-mode .toolbar .btn,.meter-only-mode .toolbar .secondary{width:100%}
.meter-only-mode .meter-preview img{max-width:100%;max-height:none}
.meter-only-mode #content{display:grid;gap:12px}
.meter-only-mode #content>.panel{margin-bottom:0}
.meter-only-mode #content>.panel.form{
  background:linear-gradient(180deg,#ffffff 0,#f5f9ff 100%);
  border:1px solid #cfe0ff;
  box-shadow:0 16px 40px rgba(13,91,221,.10);
}
.meter-only-mode #content>.panel.form h3{
  font-size:24px;
  line-height:1.25;
  margin-bottom:8px;
}
.meter-only-mode #content>.panel.form>.hint{
  font-size:15px;
  line-height:1.6;
  margin-bottom:14px;
}
.meter-only-mode .meter-selected-card{
  background:linear-gradient(135deg,#0b5bd3 0,#0a7be6 100%);
  color:#fff;
  border:0;
  box-shadow:0 18px 38px rgba(11,91,211,.26);
}
.meter-only-mode .meter-selected-card span,
.meter-only-mode .meter-selected-card small{color:rgba(255,255,255,.82)}
.meter-only-mode .meter-selected-card b{
  color:#fff;
  font-size:34px;
  letter-spacing:.5px;
}
.meter-only-mode .meter-selected-card .actions{
  display:grid;
  gap:8px;
  width:min(100%,280px);
}
.meter-only-mode .meter-selected-card .actions button{
  width:100%;
  min-height:48px;
  font-weight:700;
  border-radius:12px;
  border:0;
}
.meter-only-mode .meter-selected-card .actions .print{
  background:rgba(255,255,255,.16);
  color:#fff;
  backdrop-filter:blur(8px);
}
.meter-only-mode .grid3{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.meter-only-mode .grid3 label,
.meter-only-mode .grid3 .full{
  background:#fff;
  border:1px solid #dbe7fb;
  border-radius:14px;
  padding:10px;
  box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.meter-only-mode .grid3 .full{grid-column:1/-1}
.meter-only-mode .grid3 label{
  color:#334155;
  font-size:13px;
  font-weight:700;
}
.meter-only-mode .grid3 select,
.meter-only-mode .grid3 input{
  margin-top:6px;
  min-height:48px;
  font-size:16px;
}
.meter-only-mode #meter_photo{
  background:#eff6ff;
  border:1px dashed #93c5fd;
}
.meter-only-mode .toolbar .btn{
  min-height:52px;
  border-radius:14px;
  font-size:17px;
  font-weight:800;
  box-shadow:0 10px 24px rgba(13,91,221,.18);
}
.meter-only-mode #meterPreview{
  background:#f8fbff;
  border:1px dashed #bfd5f6;
  border-radius:16px;
  padding:12px;
  min-height:72px;
}
.meter-only-mode #meterPreview .hint{
  margin:0;
  font-size:14px;
}
.meter-only-mode #meterOcrResult .panel{
  border:1px solid #bbf7d0;
  box-shadow:0 14px 34px rgba(22,101,52,.10);
}
.meter-only-mode #meterOcrResult h3{
  font-size:26px;
  margin-bottom:8px;
}
.meter-only-mode #meterOcrResult input{
  min-height:48px;
  font-size:18px;
  margin-top:6px;
}
.meter-only-mode #meterOcrResult .primary{
  min-height:54px;
  margin-top:14px;
  font-size:18px;
  border-radius:14px;
}
.meter-only-mode table{
  display:block;
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
  border-radius:16px;
}
.meter-only-mode th,.meter-only-mode td{font-size:13px}
.meter-only-mode .login-page{
  background:linear-gradient(180deg,#eef6ff 0,#f8fbff 100%);
  align-items:center;
}
.meter-only-mode .login-card{
  background:#fff;
  color:#10233f;
  border:1px solid #dbe7fb;
  box-shadow:0 18px 48px rgba(15,23,42,.10);
}
.meter-only-mode .login-card .icon,
.meter-only-mode .login-card .logo-mark{display:none}
.meter-only-mode .login-card h1{
  font-size:28px;
  margin-bottom:12px;
  color:#0b3b79;
}
.meter-only-mode .login-card input{
  background:#fff;
  border:1px solid #cfe0ff;
  color:#10233f;
}
.meter-only-mode .login-card small{
  display:block;
  margin-top:14px;
  color:#64748b;
}
.meter-mobile-shell{
  background:linear-gradient(180deg,#ffffff 0,#f4f8ff 100%)!important;
  border:1px solid #cfe0ff!important;
  box-shadow:0 18px 42px rgba(13,91,221,.10)!important;
}
.meter-mobile-head{
  text-align:center;
  margin-bottom:14px;
}
.meter-kicker{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:#e0eeff;
  color:#0b5bd3;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.meter-mobile-head h3{
  margin:12px 0 6px;
  font-size:30px;
  color:#0b3b79;
}
.meter-mobile-status{
  display:grid;
  gap:8px;
  padding:16px;
  border-radius:20px;
  background:linear-gradient(135deg,#0b5bd3 0,#1182ea 100%);
  color:#fff;
  margin-bottom:14px;
}
.meter-mobile-status b{font-size:32px;line-height:1}
.meter-mobile-status small{color:rgba(255,255,255,.84)}
.meter-mobile-badge,.meter-mobile-last{
  display:inline-flex;
  width:fit-content;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:13px;
  font-weight:700;
}
.meter-mobile-stack{
  display:grid;
  gap:12px;
}
.meter-step-card{
  display:grid;
  gap:10px;
  padding:16px;
  border-radius:18px;
  background:#fff;
  border:1px solid #dbe7fb;
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}
.meter-step-card>span{
  font-size:15px;
  font-weight:800;
  color:#0b3b79;
}
.meter-step-card select,
.meter-step-card input{
  min-height:54px;
  font-size:18px;
  border-radius:14px;
}
.meter-type-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.meter-type-buttons .btn{
  min-height:56px;
  font-size:18px;
  font-weight:800;
}
.meter-type-hidden{display:none}
.meter-upload-card{
  cursor:pointer;
  text-align:center;
  background:linear-gradient(180deg,#f8fbff 0,#eef6ff 100%);
  border:2px dashed #93c5fd;
}
.meter-upload-card strong{
  font-size:22px;
  color:#0b3b79;
}
.meter-upload-card small{
  color:#64748b;
  font-size:14px;
}
.meter-capture-btn{
  min-height:60px!important;
  font-size:20px!important;
  font-weight:900!important;
}
@media(max-width:760px){
  .meter-only-mode .panel{padding:14px}
  .meter-only-mode .meter-selected-card b{font-size:24px}
  .meter-only-mode .meter-selected-card .actions{width:100%}
  .meter-only-mode .grid3{grid-template-columns:1fr}
  .meter-only-mode #content>.panel.form h3{font-size:22px}
  .meter-only-mode .toolbar .btn,.meter-only-mode .toolbar .secondary{font-size:16px}
  .meter-only-mode #meterOcrResult h3{font-size:22px}
  .meter-mobile-head h3{font-size:26px}
  .meter-mobile-status b{font-size:28px}
  .meter-type-buttons{grid-template-columns:1fr}
  .meter-only-mode th:nth-child(4),.meter-only-mode th:nth-child(5),.meter-only-mode th:nth-child(7),.meter-only-mode td:nth-child(4),.meter-only-mode td:nth-child(5),.meter-only-mode td:nth-child(7){display:none}
}
@media(max-width:900px){
  .login-page{padding:14px 12px;align-items:flex-start}
  .login-card{padding:24px 18px;border-radius:24px}
  .login-card .icon{width:64px;height:64px;margin-bottom:14px}
  .login-card h1{font-size:24px;line-height:1.15}
  .login-card input{font-size:16px;min-height:52px;padding:14px 14px;margin:8px 0}
  .login-card button,.primary,.btn{min-height:52px;font-size:16px;border-radius:14px}
  .login-link{font-size:15px;line-height:1.45}
  .brand{margin-bottom:14px}
  .brand .icon{width:36px;height:36px;border-radius:12px}
  .brand b{font-size:18px}
  nav{display:grid;grid-template-columns:1fr;gap:8px}
  nav button{margin:0;padding:14px 14px;font-size:16px;min-height:52px;border-radius:14px;background:rgba(255,255,255,.10)}
  .toolbar,.topbar{gap:8px}
  .toolbar .btn,.toolbar .secondary,.toolbar button,.topbar .btn,.topbar .secondary{width:100%;min-height:52px;font-size:16px;border-radius:14px}
  .toolbar input,.toolbar select{min-height:50px}
  .panel{padding:16px;border-radius:18px}
  .panel h3{font-size:20px;line-height:1.25}
  header{gap:8px}
  header h2{font-size:24px;line-height:1.15}
  header button,.btn{width:100%}
  .cards{gap:12px}
  .card{padding:16px;border-radius:16px}
  .card b{font-size:26px}
  .meter-only-mode .login-card{width:min(100%,430px);padding:26px 18px}
}