:root {
  --ink:#17211c; --muted:#66736c; --line:#dce5df; --paper:#fbfcf8;
  --panel:#fff; --field:#f4f7f1; --green:#28694b; --green-soft:#dfeee5;
  --blue:#27636f; --yellow:#f2c94c; --red:#b54242;
  --shadow:0 12px 28px rgba(23,33,28,.08);
}
* { box-sizing:border-box; min-width:0; }
body {
  margin:0; min-height:100vh;
  background:linear-gradient(135deg,rgba(223,238,229,.8),rgba(251,252,248,.7)),radial-gradient(circle at top right,rgba(242,201,76,.24),transparent 32%),var(--paper);
  color:var(--ink); font-family:Aptos,"Segoe UI",sans-serif;
}
a { color:inherit; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.wrap { width:min(1180px,calc(100% - 32px)); margin:0 auto; }
.header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:900; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border:2px solid var(--green); border-radius:8px; color:var(--green); }
.nav,.actions,.toolbar,.tabs { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.actions { row-gap:12px; }
.actions + *, .toolbar + *, .tabs + *, .panel > form + form, .main > form + form { margin-top:16px; }
.topbar .actions, .schedule-row .actions, .header .nav { margin-bottom:0; }
.btn,button {
  min-height:42px; border:1px solid var(--line); border-radius:8px; padding:0 15px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--panel); color:var(--ink); font-weight:800; text-decoration:none;
}
.primary { border-color:var(--green); background:var(--green); color:#fff; }
.secondary { border-color:var(--green); color:var(--green); }
.danger { border-color:var(--red); background:var(--red); color:#fff; }
.hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:40px; align-items:center; padding:52px 0 34px; }
.hero h1 { margin:0 0 22px; font-size:clamp(42px,7vw,82px); line-height:.94; }
.hero p { margin:0 0 26px; max-width:650px; color:var(--muted); font-size:20px; line-height:1.55; }
.salt-visual { min-height:420px; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); background:linear-gradient(160deg,rgba(39,99,111,.93),rgba(40,105,75,.84)),repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 3px,transparent 3px 14px); position:relative; overflow:hidden; }
.salt-visual:before { content:""; position:absolute; inset:auto 7% -12% 7%; height:42%; background:#f7f8f2; border-radius:50% 50% 0 0; }
.salt-visual:after { content:"Softener salt delivered and poured"; position:absolute; left:26px; right:26px; bottom:28px; font-weight:900; font-size:28px; }
.grid-3,.grid-2 { display:grid; gap:14px; margin:24px 0; }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.panel,.card { border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.9); box-shadow:var(--shadow); }
.panel { padding:22px; margin:18px 0; }
.card { padding:20px; }
.panel h1,.panel h2,.panel h3,.card h3 { margin-top:0; }
.muted,.card p { color:var(--muted); }
.form { display:grid; gap:16px; }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
label { display:grid; gap:7px; color:var(--muted); font-weight:800; font-size:14px; min-width:0; }
input:not([type=checkbox]),select,textarea {
  display:block; width:100%; max-width:100%; min-width:0; min-height:44px; height:44px;
  border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink);
  padding:10px 12px; line-height:1.2; appearance:auto;
}
input[type=date],input[type=time],input[type=number],input[type=email],input[type=tel] { min-width:0; max-width:100%; }
input[type=date],input[type=time] {
  width:calc(100% - 18px); max-width:calc(100% - 18px);
  min-inline-size:0; overflow:hidden; padding:0 8px; line-height:42px; justify-self:start;
}
input[type=checkbox] { width:18px; height:18px; min-height:0; margin:0; accent-color:var(--green); }
textarea { height:auto; min-height:92px; resize:vertical; }
.checkline { display:flex; grid-template-columns:none; align-items:center; gap:9px; color:var(--ink); }
.range-line {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:12px; align-items:end; border-top:1px solid var(--line); padding-top:14px;
}
.range-line > * { min-width:0; max-width:100%; }
.range-line input,.range-line select { width:100%; min-width:0; max-width:100%; }
.range-line input[type=date],.range-line input[type=time] {
  width:calc(100% - 18px); max-width:calc(100% - 18px);
}
.range-line button { width:100%; padding-inline:10px; }
.range-line .checkline { align-self:center; min-height:44px; }
.notice { border-left:4px solid var(--blue); background:#edf6f5; padding:14px; border-radius:8px; margin:14px 0; font-weight:700; }
.error { border-left-color:var(--red); background:#fae6e6; }
.success { border-left-color:var(--green); background:var(--green-soft); }
.profile-card {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:18px 0;
  border:1px solid var(--line); border-radius:8px; background:var(--panel); overflow:hidden;
}
.profile-card > div { padding:14px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.profile-card > div:nth-child(3) { border-right:0; }
.profile-card > div.top-last { border-right:0; }
.profile-card > div.wide { grid-column:1 / -1; border-right:0; border-bottom:0; }
.profile-card span { display:block; color:var(--muted); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.profile-card strong { display:block; color:var(--ink); font-size:17px; line-height:1.35; overflow-wrap:anywhere; }
.dashboard { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:100vh; }
.sidebar { border-right:1px solid var(--line); background:rgba(255,255,255,.75); padding:24px 18px; }
.sidebar nav { display:grid; gap:8px; margin-top:24px; }
.side-link,.tab { border:1px solid transparent; border-radius:8px; background:transparent; min-height:42px; padding:0 12px; display:flex; align-items:center; gap:9px; color:var(--muted); font-weight:900; text-decoration:none; }
.side-link.active,.tab.active { border-color:var(--green); background:var(--green-soft); color:var(--green); }
.main { min-width:0; padding:28px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.topbar h1 { margin:0; font-size:32px; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
table { width:100%; border-collapse:collapse; min-width:780px; }
th,td { border-bottom:1px solid var(--line); padding:12px; text-align:left; vertical-align:top; }
th { color:var(--muted); font-size:13px; text-transform:uppercase; }
tr:last-child td { border-bottom:0; }
.badge { display:inline-flex; align-items:center; min-height:24px; border-radius:999px; padding:0 9px; background:var(--green-soft); color:var(--green); font-size:12px; font-weight:900; }
.badge.red { background:#f7dddd; color:var(--red); }
.schedule-row { border:1px solid var(--line); border-radius:8px; background:var(--panel); padding:16px; margin-bottom:12px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; }
.schedule-row h3 { margin:0 0 6px; }
.schedule-row p { margin:0; }
.day-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.day-head h2 { margin-bottom:0; }
.day-line { display:grid; grid-template-columns:1.1fr .8fr .8fr .8fr .7fr; gap:10px; align-items:end; border-top:1px solid var(--line); padding-top:12px; }
.visit-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:12px; }
.visit-card { border:1px solid var(--line); border-radius:8px; padding:14px; background:var(--panel); }
.login-box { width:min(460px,calc(100% - 32px)); margin:70px auto; }
.inline-form { display:inline-flex; align-items:center; margin:0; vertical-align:middle; }
.actions .inline-form { margin-top:0; }
.inline-edit { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:8px; align-items:center; margin-bottom:10px; }
.inline-edit select { min-width:0; width:100%; }
.small { font-size:13px; }
.right { text-align:right; }
@media (max-width:820px) {
  .hero,.grid-3,.grid-2,.form-row,.dashboard,.day-line,.range-line,.schedule-row,.inline-edit,.profile-card { grid-template-columns:1fr; }
  .profile-card > div,.profile-card > div:nth-child(3),.profile-card > div.top-last,.profile-card > div.wide { grid-column:1; border-right:0; border-bottom:1px solid var(--line); }
  .profile-card > div:last-child { border-bottom:0; }
  .main { padding:18px; }
  .sidebar { border-right:0; border-bottom:1px solid var(--line); }
  .sidebar nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .salt-visual { min-height:300px; }
  .topbar { align-items:flex-start; flex-direction:column; }
}