:root {
  --ink:#163b42;
  --muted:#667c80;
  --page:#f3f6f5;
  --line:#dce5e2;
  --teal:#245d61;
  --teal-dark:#153d45;
  --mint:#e6efeb;
  --warm:#ebc799;
  --white:#fff;
  --danger:#9f3c38;
  --shadow:0 9px 35px #1d444407;
  font-family:Inter,"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--page);
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
[hidden] {
  display:none!important;
}
body {
  margin:0;
  font-size:16px;
  line-height:1.5;
}
button,input,select {
  font:inherit;
}
button,a,input,summary {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
a {
  color:inherit;
}
button:disabled {
  cursor:not-allowed;
  opacity:.47;
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #70a9ad;
  outline-offset:4px;
}
h1,h2,p {
  margin-top:0;
}
h1 {
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.14;
  letter-spacing:-.055em;
  font-weight:650;
  margin-bottom:.65rem;
}
h2 {
  font-size:1.2rem;
  letter-spacing:-.025em;
  font-weight:650;
  margin:0 0 .7rem;
}
p {
  margin-bottom:1rem;
}
.muted {
  color:var(--muted);
}
.small {
  font-size:.82rem;
  line-height:1.6;
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.66rem;
  font-weight:700;
  color:#5e7779;
  display:block;
  margin-bottom:.8rem;
}
.eyebrow.light {
  color:#b4cdcc;
}
.site-header {
  height:100px;
  max-width:1336px;
  padding:0 48px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand {
  color:#203d34;
  font-size:2rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  gap:12px;
  white-space:nowrap;
}
.brand-icon {
  display:block;
  width:46px;
  height:46px;
  flex-shrink:0;
}
.brand-wordmark {
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
  letter-spacing:-.06em;
  line-height:1;
}
.brand-domain {
  color:#64746c;
  font-size:.74em;
  font-weight:450;
  letter-spacing:-.045em;
}
.brand.brand-footer {
  font-size:1rem;
  gap:7px;
}
.brand-footer .brand-icon {
  width:22px;
  height:22px;
}
.header-actions {
  display:flex;
  align-items:center;
  gap:22px;
}
.header-tag {
  font-size:.74rem;
  color:var(--muted);
}
.page-shell {
  max-width:1240px;
  margin:0 auto;
  padding:22px 24px 60px;
}
.button {
  border:1px solid transparent;
  border-radius:9px;
  padding:12px 19px;
  min-height:46px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  font-size:.82rem;
  font-weight:650;
  line-height:1.3;
  text-decoration:none;
  transition:background .16s,border-color .16s,transform .16s;
  white-space:normal;
}
.button:hover:not(:disabled) {
  transform:translateY(-1px);
}
.button-primary {
  background:var(--teal-dark);
  color:white;
}
.button-primary:hover:not(:disabled) {
  background:#24565c;
}
.button-primary span {
  font-size:1.3rem;
  margin-left:auto;
}
.button-outline {
  background:transparent;
  border-color:#c8d6d2;
  color:var(--ink);
}
.button-outline:hover:not(:disabled) {
  background:#e9f0ed;
  border-color:#9db7af;
}
.button-quiet {
  background:transparent;
  color:var(--ink);
  padding:8px 0;
  min-height:36px;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:#b6c9c4;
}
.button-warm {
  background:var(--warm);
  color:#4c3923;
}
.button-warm:hover:not(:disabled) {
  background:#e5bd89;
}
.full-width {
  width:100%;
}
.login-layout {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  min-height:650px;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:white;
}
.welcome-panel {
  background:var(--teal-dark);
  color:#f4f8f5;
  position:relative;
  padding:62px 58px 38px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.welcome-panel h1 {
  font-size:clamp(2.8rem,4.3vw,4.3rem);
  letter-spacing:-.07em;
  line-height:1.06;
  margin:.3rem 0 24px;
  position:relative;
  z-index:1;
}
.welcome-panel>p {
  font-size:.91rem;
  max-width:320px;
  color:#b8cecb;
  line-height:1.8;
  position:relative;
  z-index:1;
}
.welcome-caption {
  position:relative;
  z-index:1;
  font-size:.7rem;
  color:#bcd0cc;
  margin-top:auto;
  letter-spacing:.025em;
}
.winter-scene {
  position:relative;
  flex:1;
  min-height:230px;
  margin:20px -58px 0;
  overflow:hidden;
}
.sun-disc {
  width:88px;
  height:88px;
  background:#c9d7bd;
  border-radius:50%;
  position:absolute;
  right:88px;
  top:20px;
  opacity:.9;
}
.scene-hill {
  position:absolute;
  background:#326369;
  width:140%;
  height:155px;
  border-radius:70% 70% 0 0;
  bottom:-40px;
  left:-20%;
  transform:rotate(9deg);
}
.scene-hill-back {
  background:#26545b;
  bottom:0;
  left:8%;
  transform:rotate(-12deg);
  height:140px;
}
.scene-line {
  position:absolute;
  width:100%;
  height:1px;
  bottom:38px;
  background:#80aaa33b;
}
.car-outline {
  position:absolute;
  left:40%;
  bottom:42px;
  width:150px;
  height:40px;
  border:2px solid #a1c0b9;
  border-radius:30px 47px 10px 10px;
  background:#214d53;
  transform:rotate(-2deg);
}
.car-outline:before {
  content:"";
  position:absolute;
  left:29px;
  top:-27px;
  width:87px;
  height:29px;
  border:2px solid #a1c0b9;
  border-bottom:0;
  border-radius:45px 40px 0 0;
  transform:skewX(15deg);
  background:#214d53;
}
.car-outline:after,.car-outline span:after {
  content:"";
  width:20px;
  height:20px;
  border-radius:50%;
  border:3px solid #a1c0b9;
  background:#1b464d;
  position:absolute;
  bottom:-10px;
  left:19px;
}
.car-outline span:after {
  left:107px;
}
.login-card {
  padding:65px 56px;
  align-self:center;
  background:white;
}
.login-card h2,.login-card h1 {
  font-size:2.1rem;
  margin-bottom:15px;
}
.login-card>p {
  font-size:.88rem;
  margin-bottom:30px;
}
.login-card label {
  margin-top:18px;
}
.login-card .button-primary {
  margin-top:27px;
}
.login-help {
  margin:25px 0 0!important;
  max-width:290px;
}
label {
  display:block;
  font-size:.78rem;
  font-weight:600;
  margin:15px 0 7px;
}
input:not([type=checkbox]) {
  display:block;
  width:100%;
  background:#fbfcfb;
  border:1px solid #d7e2df;
  border-radius:8px;
  padding:12px 13px;
  min-height:46px;
  color:var(--ink);
  font-size:.88rem;
  transition:border-color .15s;
}
input:not([type=checkbox]):focus {
  border-color:#5d8e8d;
  background:white;
}
input::placeholder {
  color:#8fa09f;
  opacity:1;
}
input:disabled {
  background:#f1f4f2;
  color:#81918d;
}
.optional {
  font-weight:400;
  color:var(--muted);
}
.page-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin:10px 0 31px;
}
.page-heading>div>p {
  margin-bottom:0;
  font-size:.88rem;
}
.page-heading .eyebrow {
  margin-bottom:10px;
}
.dashboard-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.card {
  background:white;
  border:1px solid #e0e8e4;
  border-radius:16px;
  padding:29px 30px;
  box-shadow:var(--shadow);
  min-width:0;
}
.card-topline {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.card-topline h2,.card-topline .eyebrow {
  margin-bottom:0;
}
.round-icon {
  display:inline-grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:50%;
  border:1px solid #b8cdbe;
  color:#487269;
  flex-shrink:0;
  font-size:1.1rem;
}
.round-icon.subtle {
  border-color:var(--line);
  color:var(--muted);
}
.departure-card {
  background:#e8efe7;
  border-color:#dce6da;
  position:relative;
  overflow:hidden;
  padding-bottom:21px;
}
.departure-card:after {
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  border:1px solid #cbdcc9;
  border-radius:50%;
  right:-55px;
  bottom:-55px;
  pointer-events:none;
}
.departure-card:before {
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  border:1px solid #cbdcc9;
  border-radius:50%;
  right:-30px;
  bottom:-30px;
  pointer-events:none;
}
.departure-card .card-topline {
  position:relative;
  z-index:1;
}
.departure-time {
  font-size:4.7rem;
  line-height:1.07;
  letter-spacing:-.075em;
  font-weight:500;
  margin:17px 0 5px;
  position:relative;
  z-index:1;
}
.departure-day {
  font-size:.9rem;
  color:#527063;
  margin-bottom:24px;
}
.departure-foot {
  padding-top:18px;
  border-top:1px solid #cbdcc7;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.71rem;
  color:#537363;
  position:relative;
  z-index:1;
}
.tiny-dot {
  height:6px;
  width:6px;
  background:#618871;
  border-radius:50%;
  flex-shrink:0;
}
.badge {
  display:inline-flex;
  align-items:center;
  font-size:.66rem;
  line-height:1.3;
  font-weight:600;
  padding:6px 9px;
  border-radius:30px;
  white-space:nowrap;
  background:#eaf2eb;
  color:#40674c;
}
.badge-muted {
  color:#6f817a;
  background:#eef2ef;
}
.badge-warm {
  background:#fbefdd;
  color:#966a2e;
}
.badge-error {
  background:#f9eae7;
  color:#9b4c43;
}
.status-card {
  display:flex;
  flex-direction:column;
}
.device-state {
  display:flex;
  align-items:center;
  gap:17px;
  margin:20px 0 19px;
}
.power-icon {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#edf2ef;
  color:#71887f;
  font-size:2rem;
  flex-shrink:0;
}
.power-icon.is-on {
  background:#fbedd9;
  color:#9b6d34;
}
.state-title {
  font-size:1.3rem;
  line-height:1.2;
  font-weight:550;
  letter-spacing:-.035em;
  margin-bottom:7px;
}
.device-state .small {
  margin:0;
}
.status-card>p {
  margin-top:auto;
  margin-bottom:0;
}
.command-panel {
  border-top:1px solid var(--line);
  padding-top:14px;
  margin-top:18px;
}
.command-panel .eyebrow {
  margin-bottom:4px;
}
.command-panel p {
  font-size:.8rem;
  margin:0;
}
.schedule-card {
  grid-column:1 / -1;
}
.schedule-card>p {
  font-size:.86rem;
}
fieldset {
  border:0;
  margin:0;
  padding:0;
}
legend {
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:650;
  padding:0;
  margin:8px 0;
}
.days-fieldset {
  padding:10px 0 20px;
}
.departure-days {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;
}
.day-row {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 8px;
}
.day-check {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0;
  min-height:40px;
  font-size:.84rem;
  font-weight:450;
}
.day-check input {
  width:17px;
  height:17px;
  accent-color:var(--teal);
  margin:0;
}
.day-row input[type=time] {
  width:100%;
  padding:8px 10px;
  min-height:37px;
  font-size:.83rem;
}
.location-settings {
  border-top:1px solid var(--line);
  margin-top:9px;
  padding-top:15px;
}
.location-settings>label {
  margin-top:0;
}
.location-settings>p {
  margin:7px 0 12px;
}
.location-combobox {
  position:relative;
  max-width:620px;
}
.location-options {
  position:absolute;
  top:calc(100% + 5px);
  left:0;
  right:0;
  z-index:5;
  list-style:none;
  padding:5px;
  margin:0;
  max-height:260px;
  overflow-y:auto;
  background:white;
  border:1px solid #b6cbc3;
  border-radius:9px;
  box-shadow:0 10px 24px #183b3222;
}
.location-options li {
  padding:11px 10px;
  font-size:.85rem;
  line-height:1.4;
  border-radius:5px;
  cursor:pointer;
}
.location-options li:hover,.location-options li[aria-selected=true] {
  background:#e8efe7;
}
input[aria-invalid=true]:not([type=checkbox]) {
  border-color:var(--danger);
  background:#fff8f5;
}
.location-feedback {
  min-height:1.5em;
}
.location-attribution {
  font-size:.65rem;
  color:var(--muted);
}
.form-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.form-footer {
  display:flex;
  align-items:center;
  gap:18px;
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:24px;
}
.form-footer .small {
  max-width:210px;
}
.notice {
  background:#e7f0e9;
  border:1px solid #c6dacb;
  padding:14px 17px;
  border-radius:10px;
  font-size:.84rem;
  line-height:1.55;
  margin-bottom:22px;
  color:#345d43;
}
.notice-error {
  background:#fcf0ec;
  border-color:#e8cbc0;
  color:#8d4840;
}
.field-error {
  color:var(--danger);
  font-size:.8rem;
  line-height:1.6;
  margin:13px 0 0;
}
.site-footer {
  max-width:1192px;
  margin:0 auto;
  padding:25px 24px 32px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  color:#7e918b;
  font-size:.7rem;
}
.site-footer>span:first-child {
  font-weight:650;
  letter-spacing:-.02em;
}
.admin-login-wrap {
  max-width:460px;
  margin:45px auto 80px;
}
.admin-login-wrap .login-card {
  border:1px solid var(--line);
  border-radius:17px;
  padding:42px 40px;
  box-shadow:var(--shadow);
}
.admin-grid {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(340px,.9fr);
  gap:25px;
  align-items:start;
}
.admin-grid form fieldset+fieldset {
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.admin-grid form>button {
  margin-top:27px;
}
.admin-grid legend {
  margin:12px 0 4px;
}
.table-scroll {
  overflow:auto;
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:.78rem;
  text-align:left;
}
th {
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:650;
  color:var(--muted);
  padding:14px 10px;
  border-bottom:1px solid var(--line);
}
td {
  padding:18px 10px;
  border-bottom:1px solid #edf1ee;
  vertical-align:top;
  overflow-wrap:anywhere;
}
td:first-child,th:first-child {
  padding-left:0;
}
td:last-child,th:last-child {
  padding-right:0;
}
td small {
  display:block;
  color:var(--muted);
  margin-top:4px;
}
.customer-list-card {
  padding-bottom:15px;
}
.skip-link {
  position:fixed;
  top:-60px;
  left:20px;
  z-index:100;
  background:var(--teal-dark);
  color:white;
  padding:10px 20px;
  border-radius:0 0 8px 8px;
}
.skip-link:focus {
  top:0;
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@media(max-width:950px) {
  .site-header {
    padding:0 30px;
  }
  .login-layout {
    min-height:590px;
  }
  .welcome-panel {
    padding:45px 35px 32px;
  }
  .login-card {
    padding:45px 34px;
  }
  .winter-scene {
    margin-left:-35px;
    margin-right:-35px;
  }
  .dashboard-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  .card {
    padding:23px;
  }
  .departure-days {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .admin-grid {
    grid-template-columns:1fr;
  }
  .admin-grid>section:nth-child(2) {
    max-width:650px;
    width:100%;
  }
  .header-tag {
    display:none;
  }
}
@media(max-width:650px) {
  .site-header {
    height:78px;
    padding:0 18px;
    gap:12px;
  }
  .brand {
    font-size:1.5rem;
    gap:9px;
  }
  .brand-icon {
    width:36px;
    height:36px;
  }
  .header-actions {
    gap:12px;
  }
  .page-shell {
    padding:12px 18px 38px;
  }
  .login-layout {
    display:flex;
    flex-direction:column;
    border-radius:16px;
  }
  .welcome-panel {
    padding:30px 28px 24px;
    min-height:280px;
  }
  .welcome-panel h1 {
    font-size:2.7rem;
    margin-bottom:16px;
  }
  .welcome-panel>p {
    max-width:260px;
    font-size:.82rem;
    margin-bottom:0;
  }
  .welcome-caption {
    display:none;
  }
  .winter-scene {
    position:absolute;
    left:0;
    right:0;
    top:50px;
    height:240px;
    min-height:0;
    margin:0;
    opacity:.28;
    pointer-events:none;
  }
  .sun-disc {
    right:15px;
    top:0;
    width:85px;
    height:85px;
  }
  .car-outline {
    left:60%;
    bottom:39px;
    transform:scale(.8);
  }
  .scene-hill {
    bottom:-30px;
  }
  .scene-hill-back {
    bottom:10px;
  }
  .login-card {
    padding:30px 27px 34px;
    width:100%;
  }
  .login-card .eyebrow {
    margin-bottom:9px;
  }
  .login-card h2 {
    font-size:1.8rem;
  }
  .login-card>p {
    margin-bottom:22px;
  }
  .page-heading {
    margin:9px 0 25px;
    align-items:flex-end;
    gap:10px;
  }
  .page-heading h1 {
    font-size:2rem;
  }
  .page-heading>div>p {
    font-size:.78rem;
  }
  .page-heading .button {
    font-size:.7rem;
    padding:8px 10px;
    min-height:39px;
  }
  .dashboard-grid {
    display:flex;
    flex-direction:column;
    gap:17px;
  }
  .card {
    padding:24px 23px;
    border-radius:14px;
  }
  .departure-time {
    font-size:4.1rem;
    margin-top:8px;
  }
  .departure-day {
    margin-bottom:22px;
  }
  .departure-card {
    min-height:239px;
  }
  .status-card .device-state {
    margin-top:9px;
  }
  .departure-days {
    display:block;
  }
  .day-row {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    border:0;
    padding:6px 0;
  }
  .day-row input[type=time] {
    width:112px;
  }
  .form-footer {
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }
  .form-footer .button {
    width:100%;
  }
  .form-footer .small {
    max-width:none;
  }
  .site-footer {
    margin:0 18px;
    padding:20px 0 24px;
    font-size:.64rem;
  }
  .admin-login-wrap {
    margin:28px auto 50px;
  }
  .admin-login-wrap .login-card {
    padding:32px 25px;
  }
  .admin-grid {
    display:flex;
    flex-direction:column;
  }
  .admin-grid>section {
    width:100%;
  }
  .customer-list-card {
    padding:23px 17px;
  }
  .form-columns {
    gap:10px;
  }
  .badge {
    font-size:.62rem;
  }
  .header-actions {
    gap:10px;
  }
}
@media(max-width:400px) {
  .site-header .brand {
    font-size:1.125rem;
    gap:8px;
  }
  .site-header .brand-icon {
    width:32px;
    height:32px;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
