@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink-900:#0B1F2A; --ink-800:#122C3A; --teal-700:#0E7C86; --teal-600:#12969F;
  --cyan-400:#4FC1D6; --amber-500:#E8A33D; --paper-50:#F5F8F8; --paper-100:#EBF1F1;
  --slate-700:#33454C; --slate-500:#5D7178; --white:#FFFFFF; --green-600:#2F9E63;
  --red-600:#C8503C; --grey-400:#9AA8AC;
  --font-display:'Space Grotesk', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'IBM Plex Mono', monospace;
  --radius-md:12px; --radius-lg:20px; --shadow-card:0 6px 22px rgba(11,31,42,.07);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--font-body); background:var(--paper-50); color:var(--slate-700);
  padding-bottom:78px; /* space for bottom nav */
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink-900); margin:0 0 .4em;}
a{color:inherit; text-decoration:none;}
.container{max-width:520px; margin:0 auto; padding:0 16px;}
.wide{max-width:960px;}

/* Top bar */
.app-topbar{
  position:sticky; top:0; z-index:30; background:var(--ink-900); color:var(--white);
  padding:16px; display:flex; align-items:center; justify-content:space-between;
}
.app-topbar .title{font-family:var(--font-display); font-weight:700; font-size:17px;}
.app-topbar .sub{font-size:12.5px; color:rgba(255,255,255,.6);}
.property-switch{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border-radius:10px;
  padding:8px 12px; font-size:13.5px;
}
.icon-btn{
  width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.08); display:flex;
  align-items:center; justify-content:center; color:var(--white); border:none; cursor:pointer;
}

/* Bottom nav */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:30; background:var(--white);
  border-top:1px solid rgba(11,31,42,.08); display:flex; justify-content:space-around;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; font-weight:600;
  color:var(--slate-500); padding:6px 10px; border-radius:10px; flex:1; text-align:center;
}
.bottom-nav a.active{color:var(--teal-700);}
.bottom-nav svg{width:22px; height:22px;}

.content{padding:18px 0 28px;}

/* Alert strip */
.alert-strip{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-md);
  margin-bottom:16px; font-size:13.5px; font-weight:500;
}
.alert-strip.critical{background:rgba(200,80,60,.1); color:#9c3a29;}
.alert-strip.warning{background:rgba(232,163,61,.12); color:#9c6b12;}
.alert-strip.info{background:rgba(14,124,134,.08); color:#0E7C86;}

/* Stat / summary row */
.summary-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px;}
.summary-card{background:var(--white); border-radius:var(--radius-md); padding:14px; text-align:center; box-shadow:var(--shadow-card);}
.summary-card .num{font-family:var(--font-display); font-size:20px; color:var(--ink-900);}
.summary-card .lbl{font-size:11px; color:var(--slate-500); text-transform:uppercase; letter-spacing:.03em; margin-top:2px;}

/* Tank card with gauge ring */
.tank-card{
  background:var(--white); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-card);
  margin-bottom:14px; display:flex; gap:16px; align-items:center;
}
.gauge{position:relative; width:74px; height:74px; flex-shrink:0;}
.gauge svg{width:100%; height:100%; transform:rotate(-90deg);}
.gauge .track{stroke:var(--paper-100); stroke-width:8; fill:none;}
.gauge .fill{stroke:var(--teal-600); stroke-width:8; fill:none; stroke-linecap:round; transition:stroke-dashoffset .4s ease;}
.gauge .fill.low{stroke:var(--amber-500);}
.gauge .fill.critical{stroke:var(--red-600);}
.gauge .pct{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:15px; color:var(--ink-900);
}
.tank-info{flex:1; min-width:0;}
.tank-info h4{font-size:15.5px; margin-bottom:4px;}
.tank-meta{display:flex; gap:10px; flex-wrap:wrap; font-size:12px; font-family:var(--font-mono); color:var(--slate-500);}
.tank-meta .good{color:var(--green-600);}
.tank-meta .poor{color:var(--red-600);}
.tank-card .chev{color:var(--grey-400);}

/* Pump control card */
.pump-card{
  background:var(--white); border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--shadow-card);
  margin-bottom:14px;
}
.pump-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.pump-head h4{font-size:15px; margin:0;}
.pump-status-dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px;}
.pump-status-dot.on{background:var(--green-600);}
.pump-status-dot.off{background:var(--grey-400);}
.pump-meta{display:flex; gap:14px; font-size:12px; font-family:var(--font-mono); color:var(--slate-500); margin-bottom:14px; flex-wrap:wrap;}

.mode-toggle{display:flex; background:var(--paper-100); border-radius:10px; padding:3px; margin-bottom:10px;}
.mode-toggle button{
  flex:1; padding:8px 6px; border:none; background:transparent; border-radius:8px; font-size:12.5px;
  font-weight:600; color:var(--slate-500); cursor:pointer;
}
.mode-toggle button.active{background:var(--ink-900); color:var(--white);}

.power-toggle{
  display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px solid rgba(11,31,42,.06);
}
.switch{position:relative; width:48px; height:27px;}
.switch input{opacity:0; width:0; height:0;}
.slider{position:absolute; cursor:pointer; inset:0; background:var(--grey-400); border-radius:999px; transition:.2s;}
.slider:before{position:absolute; content:""; height:21px; width:21px; left:3px; top:3px; background:white; border-radius:50%; transition:.2s;}
input:checked + .slider{background:var(--green-600);}
input:checked + .slider:before{transform:translateX(21px);}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px;
  font-weight:600; font-size:14.5px; border:1px solid transparent; cursor:pointer; font-family:var(--font-body);}
.btn-primary{background:var(--teal-700); color:var(--white);}
.btn-outline{background:transparent; color:var(--ink-900); border-color:rgba(11,31,42,.15);}
.btn-danger-outline{background:transparent; color:var(--red-600); border-color:rgba(200,80,60,.3);}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px; font-size:13px;}
.fab{
  position:fixed; right:18px; bottom:88px; width:54px; height:54px; border-radius:50%; background:var(--teal-700);
  color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(14,124,134,.4);
  z-index:25; border:none; cursor:pointer;
}

/* Forms */
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:600; color:var(--ink-900); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:12px 13px; border-radius:10px; border:1px solid rgba(11,31,42,.15);
  font-family:var(--font-body); font-size:14.5px; background:var(--white);
}
.field textarea{resize:vertical; min-height:80px;}
.card{background:var(--white); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-card); margin-bottom:16px;}

.alert{padding:12px 16px; border-radius:10px; font-size:13.5px; margin-bottom:16px; font-weight:500;}
.alert-success{background:rgba(47,158,99,.1); color:#227a4c;}
.alert-error{background:rgba(224,80,80,.1); color:#b23b3b;}

.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; font-family:var(--font-mono);}
.badge-blue{background:#E7F0FB; color:#2A63A8;}
.badge-amber{background:#FCF0DD; color:#9C6B12;}
.badge-teal{background:#DEF3F1; color:#0E7C86;}
.badge-green{background:#E1F6E9; color:#227a4c;}
.badge-red{background:#FBE8E5; color:#9c3a29;}
.badge-grey{background:#EEF1F2; color:#5D7178;}

.empty-state{padding:50px 20px; text-align:center; color:var(--slate-500);}
.small{font-size:13px; color:var(--slate-500);}
.section-title{display:flex; justify-content:space-between; align-items:center; margin:22px 0 12px;}
.section-title h3{font-size:15px; margin:0; text-transform:uppercase; letter-spacing:.03em; color:var(--slate-500);}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ink-900); padding:20px;}
.login-card{background:var(--white); border-radius:20px; padding:32px 26px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.3);}

.property-tile{
  display:flex; justify-content:space-between; align-items:center; background:var(--white); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow-card); margin-bottom:12px;
}
.property-tile h4{margin:0 0 4px; font-size:15.5px;}

@media (min-width:640px){
  .bottom-nav{display:none;}
  body{padding-bottom:0;}
  .fab{display:none;}
}