:root{
  --accent:#078463;
  --accent-dark:#066b51;
  --accent-soft:#e9f7f1;
  --ink:#182433;
  --muted:#667382;
  --border:#dce3e9;
  --surface:#ffffff;
  --canvas:#f4f6f8;
  --danger:#b42318;
  --radius:10px;
  --shadow-sm:0 1px 2px rgba(24,36,51,.05);
  --shadow-md:0 8px 24px rgba(24,36,51,.08);
  --soft:var(--accent-soft);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
header{min-height:64px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);display:flex;gap:16px;align-items:center;padding:0 max(20px,calc((100vw - 1140px)/2));position:relative;z-index:40}
header .brand{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--accent);text-decoration:none;white-space:nowrap}
header>span{color:var(--muted);white-space:nowrap;font-size:14px}
header nav{display:flex;gap:4px;margin-left:auto}
header nav a{color:#455364;text-decoration:none;font-size:13px;font-weight:700;padding:9px 11px;border-radius:8px;transition:.15s ease}
header nav a:hover{background:var(--accent-soft);color:var(--accent-dark)}
header form{margin:0}
.station-switcher label{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.station-switcher select{display:block;min-width:165px;max-width:210px;border:1px solid var(--border);border-radius:8px;padding:7px 30px 7px 10px;background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--shadow-sm)}
.current-station{font-size:12px;color:var(--accent-dark)}
button,.button-link{border:0;border-radius:8px;padding:10px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s ease,box-shadow .15s ease,transform .05s ease}
button{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
button:hover:not(:disabled){background:var(--accent-dark);box-shadow:0 3px 10px rgba(7,132,99,.18)}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(7,132,99,.22);outline-offset:2px}
main{max-width:1180px;margin:0 auto;padding:36px 20px 56px}
.page-title h1{font-size:30px;letter-spacing:-.035em}
.eyebrow{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:0 0 5px}
h1,h2,h3{color:#14202e;letter-spacing:-.02em}
h2{font-size:21px;margin:.15rem 0}
h3{font-size:17px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}
.grid article,section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.grid span{display:block;color:var(--muted);font-size:12px}
.grid strong{display:block;font-size:25px;margin-top:5px}
.notice{background:var(--accent-soft);line-height:1.6}
.login{max-width:420px;margin:6vh auto;box-shadow:var(--shadow-md)}
.login label{display:block;margin:14px 0;font-size:12px;font-weight:700}
input,select,textarea{accent-color:var(--accent)}
.login input{width:100%;padding:10px;margin-top:5px;border:1px solid var(--border);border-radius:8px}
table thead th{background:#f8fafb}
table tbody tr:hover:not(.rate-change-detail):not(.pump-group-row){background:#fbfdfc}
.flash{box-shadow:var(--shadow-sm)}
@media(max-width:1100px){
  .grid{grid-template-columns:1fr 1fr}
  header{gap:8px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
  header>span{display:none}
  .station-switcher{margin-left:auto}
  header nav{order:3;width:100%;justify-content:center;border-top:1px solid var(--border);padding-top:7px}
  header nav a{flex:1;text-align:center;padding:8px 4px}
  main{padding:24px 14px 44px}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr}
  .page-title h1{font-size:26px}
  section{padding:16px}
}