:root {
      --surface: #fbf9f6;
      --surface-low: #f5f3f0;
      --surface-high: #e8e8e3;
      --surface-white: #fff;
      --ink: #31332f;
      --ink-soft: #5d605b;
      --primary: #5f5e5e;
      --warm-tan: #a9907e;
      --cream: #f3deba;
      --sage: #abc4aa;
      --dark-brown: #675d50;
      --error: #9e422c;
      --shadow-ambient: 0 18px 48px rgba(49, 51, 47, .055);
      --bs-body-font-family: 'Manrope', sans-serif;
      --bs-body-color: var(--ink);
      --bs-body-bg: var(--surface);
      --bs-primary: var(--primary);
      --bs-primary-rgb: 95, 94, 94;
      --bs-link-color: var(--dark-brown);
      --bs-link-hover-color: var(--primary);
      --bs-border-color: rgba(93, 96, 91, .15);
      --bs-border-radius: .375rem;
      --bs-border-radius-lg: .5rem;
      --bs-focus-ring-color: rgba(169, 144, 126, .25);
    }
    * { -webkit-tap-highlight-color: transparent; }
    body { min-height: 100vh; background: var(--surface); color: var(--ink); font-family: 'Manrope', sans-serif; }
    .page-shell { max-width: 980px; padding: 0 28px 72px; }
    .site-header { padding-top: 24px; }
    .brand-bar { display:flex; align-items:center; gap:12px; width:fit-content; margin:0 auto 38px; padding:10px 17px; border-radius:999px; background:rgba(255,255,255,.72); backdrop-filter:blur(24px); color:var(--dark-brown); font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
    .brand-mark { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--cream); color:var(--dark-brown); font-family:'Noto Serif',serif; font-size:.95rem; }
    .hero { max-width:760px; margin:0 auto 36px; text-align:center; }
    .eyebrow { margin-bottom:12px; color:var(--warm-tan); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
    h1 { margin:0; color:var(--ink); font-family:'Noto Serif',serif; font-size:clamp(2.15rem, 5vw, 3.65rem); font-weight:500; letter-spacing:-.045em; line-height:1.12; }
    .unit-label { display:inline-block; margin-left:.12em; color:var(--warm-tan); white-space:nowrap; }
    .hero-copy { max-width:630px; margin:18px auto 0; color:var(--ink-soft); font-size:.98rem; line-height:1.8; }
    .form-wrap { max-width:780px; margin:auto; }
    #formStatus { border:0; border-radius:.5rem; padding:15px 18px; color:var(--ink-soft); background:var(--surface-high); font-size:.88rem; line-height:1.65; }
    #formStatus.alert-success { background:rgba(171,196,170,.34); color:#425544; }
    #formStatus.alert-warning { background:rgba(243,222,186,.7); color:var(--dark-brown); }
    #formStatus.alert-danger { background:rgba(158,66,44,.1); color:var(--error); }
    .meter-card { position:relative; overflow:hidden; padding:clamp(22px, 4vw, 38px); margin:18px 0 24px; border-radius:.5rem; background:var(--surface-white); box-shadow:var(--shadow-ambient); }
    .meter-card::before { position:absolute; top:0; left:0; width:5px; height:100%; background:var(--warm-tan); content:""; }
    .meter-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:28px; }
    .meter-card-kicker { margin-bottom:7px; color:var(--warm-tan); font-size:.69rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
    .meter-card-title { margin:0; font-family:'Noto Serif',serif; font-size:1.45rem; font-weight:500; }
    .meter-index { display:grid; flex:0 0 auto; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--surface-low); color:var(--dark-brown); font-size:.8rem; font-weight:700; }
    .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
    .mb-3 { margin-bottom:22px!important; }
    .form-label { margin-bottom:9px; color:var(--ink-soft); font-size:.79rem; font-weight:700; letter-spacing:.015em; }
    .form-control { min-height:50px; padding:12px 14px; border:0; border-bottom:1px solid rgba(93,96,91,.2); border-radius:0; background:var(--surface-low); color:var(--ink); font-size:.94rem; box-shadow:none!important; transition:background .2s ease, border-color .2s ease; }
    .form-control:focus { border-bottom:2px solid var(--warm-tan); background:#fff; }
    .form-control[readonly] { background:var(--surface-high); color:var(--dark-brown); }
    .form-control::placeholder { color:#898b84; }
    .form-text { margin-top:8px; color:var(--ink-soft); font-size:.76rem; line-height:1.65; }
    input[type=file].form-control { padding:9px 12px; }
    input[type=file]::file-selector-button { margin:-4px 12px -4px -4px; padding:9px 13px; border:0; border-radius:.375rem; background:var(--surface-high); color:var(--ink); font-family:inherit; font-size:.8rem; font-weight:700; }
    textarea.form-control { min-height:auto; }
    .form-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:4px 0 26px; }
    .btn { min-height:46px; padding:11px 17px; border:0; border-radius:.375rem; font-family:inherit; font-size:.82rem; font-weight:700; transition:transform .18s ease, background .18s ease, color .18s ease; }
    .btn:hover { transform:translateY(-1px); }
    .btn-primary { background:var(--primary); color:#fff; }
    .btn-primary:hover,.btn-primary:focus { background:#484847; color:#fff; }
    .btn-outline-primary { background:var(--surface-high); color:var(--ink); }
    .btn-outline-primary:hover { background:var(--cream); color:var(--dark-brown); }
    .btn-outline-danger { background:rgba(158,66,44,.08); color:var(--error); }
    .btn-outline-danger:hover { background:rgba(158,66,44,.14); color:var(--error); }
    .add-meter { display:inline-flex; align-items:center; gap:9px; }
    .add-icon { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:rgba(255,255,255,.72); font-size:1rem; }
    .comment-panel { margin-top:28px; padding:24px; border-radius:.5rem; background:var(--surface-low); }
    .comment-panel .form-control { background:rgba(255,255,255,.78); }
    .submit-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:22px; padding:22px 24px; border-radius:.5rem; background:rgba(255,255,255,.7); backdrop-filter:blur(24px); }
    .submit-note { max-width:310px; color:var(--ink-soft); font-size:.76rem; line-height:1.6; }
    .submit-btn { min-width:210px; min-height:54px; }
    .footer-note { margin:34px auto 0; color:var(--ink-soft); font-size:.72rem; text-align:center; }
    .help-toast { position:fixed; right:20px; bottom:20px; min-width:250px; }
    .swal2-popup { border-radius:.5rem!important; font-family:'Manrope',sans-serif!important; }
    .swal2-title { color:var(--ink)!important; font-family:'Noto Serif',serif!important; font-weight:500!important; }
    .swal2-styled.swal2-confirm { border-radius:.375rem!important; background:var(--primary)!important; font-family:'Manrope',sans-serif!important; }
    @media (max-width:640px) {
      .page-shell { padding:0 18px 46px; }
      .site-header { padding-top:17px; }
      .brand-bar { margin-bottom:30px; }
      .hero { margin-bottom:25px; text-align:left; }
      .hero-copy { margin-left:0; font-size:.9rem; }
      .field-grid { grid-template-columns:1fr; gap:0; }
      .meter-card { padding:23px 19px; margin:14px 0 20px; }
      .form-actions,.submit-panel { align-items:stretch; flex-direction:column; }
      .form-actions .btn,.submit-btn { width:100%; }
      .comment-panel { padding:20px 18px; }
      .submit-panel { padding:19px; }
      .submit-note { max-width:none; text-align:center; }
    }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* Read-only values are visibly distinct from fields the tenant can edit. */
.form-control[readonly] {
  border-bottom-color: transparent;
  background: #e8e8e3;
  color: #675d50;
  cursor: default;
  opacity: .82;
}
.form-control[readonly]:focus {
  border-bottom-color: transparent;
  background: #e8e8e3;
}
.locked-help {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #675d50;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .025em;
}
.locked-help::before {
  content: "▣";
  color: #a9907e;
  font-size: .75rem;
}