:root{--blue:#0857f8;--ink:#0c1729;--muted:#68778e;--line:#e0e8f5;--bg:#f7faff;--soft:#eef4ff}*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font:15px/1.55 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.012em;background:var(--bg)}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}.header{height:84px;background:white;border-bottom:1px solid #e9edf5}.header-inner{height:100%;max-width:1320px;padding:0 24px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{font-size:26px;font-weight:870;letter-spacing:-1px}.brand span{color:var(--blue)}.header-nav{display:flex;align-items:center;gap:22px;font-size:13px;font-weight:760}.header-nav a:hover{color:var(--blue)}.main{max-width:1300px;padding:55px 24px 90px;margin:0 auto}.grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);gap:25px}.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--blue);font-weight:850;margin:0 0 8px}.heading{font-size:clamp(34px,4vw,54px);line-height:1.08;letter-spacing:-.05em;margin:0 0 14px;font-weight:850}.heading span{color:var(--blue)}.lead{color:var(--muted);font-size:16px;max-width:750px;line-height:1.65;margin:0 0 25px}.panel{border:1px solid var(--line);border-radius:19px;background:white;box-shadow:0 20px 50px #203b7310;padding:28px}.panel h2{font-size:22px;letter-spacing:-.032em;line-height:1.2;margin:0 0 6px}.panel .sub{font-size:13px;color:#6c7990;margin:0 0 22px}.side{position:sticky;top:16px;align-self:start}.side .panel{margin-bottom:18px}.side h3{font-size:18px;margin:0 0 14px}.check-list{list-style:none;padding:0;margin:0;display:grid;gap:13px}.check-list li{font-size:13px;display:flex;gap:10px;color:#485c78}.check-list li::before{content:"✓";font-weight:800;color:var(--blue)}.cardnote{background:#edf4ff;border:1px solid #dae8ff;color:#26528d;border-radius:12px;padding:15px;font-size:13px;line-height:1.55;margin-bottom:18px}.cardnote.warn{background:#fff7e9;border-color:#f1ddb8;color:#815920}.cardnote.good{background:#edf8f1;border-color:#d1ebdc;color:#206d52}.section-h{font-size:17px;font-weight:820;margin:24px 0 13px;display:flex;justify-content:space-between;align-items:center;gap:10px}.section-h:first-child{margin-top:0}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.formfield{display:grid;gap:6px;min-width:0;align-content:start}.formfield.wide{grid-column:1/-1}.formfield label{font-size:12px;font-weight:750;color:#334562}.formfield input:not([type="checkbox"]),.formfield select,.formfield textarea{border:1px solid #d7e1ef;border-radius:10px;background:#fff;padding:12px 13px;min-width:0;width:100%;outline:none;min-height:46px;color:#1b2c48}.formfield textarea{min-height:72px;resize:vertical}.formfield input:not([type="checkbox"]):focus,.formfield select:focus,.formfield textarea:focus{border-color:#81a6fb;box-shadow:0 0 0 3px rgba(8,87,248,.09)}.formfield input:not([type="checkbox"]):disabled,.formfield select:disabled,.formfield textarea:disabled{background:#f5f7fa;color:#8490a3}.divider{height:1px;background:var(--line);margin:26px 0}.checkrow{display:flex;align-items:flex-start;gap:11px;line-height:1.6;font-size:13px;color:#40516c}.checkrow input[type="checkbox"]{appearance:auto;width:17px;height:17px;min-width:17px;min-height:17px;padding:0;border:0;border-radius:3px;box-shadow:none;accent-color:var(--blue);margin:3px 0 0;flex-shrink:0}.checkrow a{color:#0757ed;text-decoration:underline}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--blue);border:2px solid rgba(8,87,248,.05);color:white;border-radius:10px;padding:13px 20px;min-height:49px;font-weight:800;cursor:pointer;box-shadow:0 8px 20px rgba(8,87,248,.10)}.button:hover:not(:disabled){background:#0749d6}.button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.button.outline{background:white;color:var(--blue);border:1px solid #cbdafe}.button.outline:hover{background:#f3f7ff}.button.full{width:100%}.hint{font-size:12px;color:var(--muted);line-height:1.5}.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.pill{font-size:11px;font-weight:750;border-radius:25px;background:#ecf3ff;color:#0754d8;padding:4px 10px}.price{font-size:29px;font-weight:860;letter-spacing:-.04em}.result{display:none;border-radius:12px;padding:15px;line-height:1.55;font-size:13px;border:1px solid #d1e1fb;background:#eef5ff;color:#254874;margin-top:17px}.result.show{display:block}.result.error{background:#fff1f1;border-color:#f2d3d9;color:#9b3341}.result.success{background:#eaf8f0;border-color:#cfe9db;color:#286a50}.small{font-size:12px;color:#6b7890}.station-toggle{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 17px;background:#f1f6ff;border:1px solid #d8e6ff;border-radius:12px;margin-bottom:16px}.station-toggle strong{display:block}.station-toggle p{font-size:12px;color:#597293;margin:3px 0 0}.station-toggle input{width:19px;height:19px;accent-color:var(--blue)}.footer{border-top:1px solid var(--line);padding:25px;color:#7b899c;font-size:12px;text-align:center;background:white}.mini-table{width:100%;border-collapse:collapse;font-size:13px}.mini-table td{padding:10px 0;border-bottom:1px solid #e9eef7}.mini-table td:last-child{text-align:right;font-weight:750}.mini-table tr:last-child td{border-bottom:0}.loading{opacity:.8}.station-item{padding:14px;border:1px solid var(--line);border-radius:10px;margin:10px 0}.station-item strong{display:block}.station-item small{color:var(--muted)}.detail{font-weight:700;color:var(--blue)}.status-tag{font-size:11px;background:#ecf3ff;padding:3px 9px;border-radius:20px;color:#1762bb;font-weight:760}.top-row{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:24px}@media(max-width:950px){.grid{grid-template-columns:1fr}.side{position:static}.main{padding:35px 20px 65px}}@media(max-width:550px){.header{height:72px}.header-inner{padding:0 16px}.brand{font-size:23px}.header-nav{gap:12px;font-size:12px}.header-nav .hide-small{display:none}.main{padding:24px 14px 50px}.panel{padding:20px 16px}.formgrid{grid-template-columns:1fr}.formfield.wide{grid-column:auto}.heading{font-size:36px}.actions .button{width:100%}.station-toggle{padding:12px}.section-h{font-size:16px}}
/* MyStationHub register: aligned password pair + compact agreement checkboxes */
#registerForm .formfield {align-self:start;align-content:start}
#registerForm .password-help {grid-column:1/-1; margin:-7px 0 0; color:var(--muted);font-size:12px;line-height:1.5}
#registerForm .checkrow, #registerForm .formfield label.checkrow {font-size:13px;font-weight:400;line-height:1.6;align-items:flex-start}
#registerForm .checkrow {outline:none;box-shadow:none;background:transparent}
#registerForm .checkrow input[type="checkbox"] {
  -webkit-appearance:none;appearance:none;
  display:inline-block;position:relative;flex:0 0 18px;
  width:18px;height:18px;min-width:18px;min-height:18px;max-width:18px;max-height:18px;
  margin:2px 0 0;padding:0;
  border:1.5px solid #8294ad;border-radius:4px;
  background:#fff;box-shadow:none;outline:none;vertical-align:top;cursor:pointer;
}
#registerForm .checkrow input[type="checkbox"]:checked {background:var(--blue);border-color:var(--blue)}
#registerForm .checkrow input[type="checkbox"]:checked::after {
  content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
#registerForm .checkrow input[type="checkbox"]:focus {outline:none;box-shadow:none}
#registerForm .checkrow input[type="checkbox"]:focus-visible {outline:2px solid rgba(8,87,248,.55);outline-offset:2px}
@media(max-width:550px){#registerForm .password-help{margin:0}}

/* Registration consent outside the text-input grid to prevent padded checkbox outlines */
#registerForm .consent-field{grid-column:1/-1;min-width:0}
#registerForm .consent-field>.checkrow{display:flex;align-items:flex-start;gap:11px;margin:0;width:100%;min-height:0;padding:0;line-height:1.6}
#registerForm .consent-field input[type="checkbox"]{box-sizing:border-box;flex:none;width:18px;height:18px;min-width:18px;min-height:18px;max-width:18px;max-height:18px;padding:0;margin:2px 0 0;border-radius:4px}

/* Registration password requirements: accessible responsive checklist */
#registerForm .password-help{padding:10px 0 2px}
#registerForm .password-rule-title{display:block;font-size:12px;font-weight:750;color:#344969;margin-bottom:8px}
#registerForm .password-rules{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:6px;margin:0 0 9px;padding:0}
#registerForm .password-rules li{position:relative;padding-left:19px;font-size:12px;line-height:1.5;color:#7a889a;transition:color .15s}
#registerForm .password-rules li::before{content:"○";position:absolute;left:0;top:0;color:#94a3b8;font-size:15px;line-height:1.25}
#registerForm .password-rules li.met{color:#137a56}
#registerForm .password-rules li.met::before{content:"✓";font-weight:800;color:#137a56}
#registerForm .password-rule-note{display:block;font-size:11px;line-height:1.55;color:#7b879b}
@media(max-width:550px){#registerForm .password-rules{grid-template-columns:1fr}}

/* Align agreement checkbox and first text line precisely on all screen sizes */
#registerForm .consent-field > label.checkrow,
#registerForm label.checkrow {
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:start;
  column-gap:12px;
  gap:0 12px;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  line-height:20px;
}
#registerForm label.checkrow > input[type="checkbox"],
#registerForm .consent-field > label.checkrow > input[type="checkbox"] {
  grid-column:1;
  width:18px;height:18px;min-width:18px;min-height:18px;max-width:18px;max-height:18px;
  margin:1px 0 0;
  padding:0;
  align-self:start;
  justify-self:start;
}
#registerForm label.checkrow > span {
  grid-column:2;
  display:block;
  margin:0;
  padding:0;
  line-height:20px;
  font-weight:400;
}

/* Unified MyStationHub forward-action chevron (approved site design) */
.button .msh-chevron,.detail .msh-chevron{display:inline-block;vertical-align:-.14em;flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;transform:none!important;transition:none!important}
.button .msh-chevron{margin-left:2px}
.detail .msh-chevron{margin-left:3px}

/* Registered customer details are immutable; corrections use a separate approval request. */
.account-locked input[readonly]{background:#f5f8fd!important;color:#394e6a;cursor:default;border-color:#dbe4f0}
.account-locked input[readonly]:focus{border-color:#dbe4f0;box-shadow:none}
.account-lock-note{margin-bottom:12px}
.account-change-form{margin-top:18px;padding:18px;border:1px solid #dce6f6;border-radius:12px;background:#fbfdff}
.account-change-form .section-h{margin-top:0}
@media(max-width:550px){.account-change-form{padding:14px}.account-change-form .actions>.button{width:100%}}


/* MyStationHub customer navigation — Option 5: icon + dropdown top menu. */
.customer-header{position:sticky;top:0;z-index:80;background:#fff;box-shadow:0 2px 13px rgba(22,44,83,.035);height:78px}
.customer-header .header-inner{max-width:1510px;gap:18px;padding-inline:clamp(16px,2vw,30px)}
.customer-header .brand{flex:0 0 auto;white-space:nowrap;font-size:clamp(21px,1.65vw,25px);letter-spacing:-.055em}
.customer-header .header-nav{flex:0 0 auto;gap:14px}
.customer-header .header-nav .button{padding:8px 15px;min-height:40px;font-size:12px;box-shadow:none}
.customer-plans-link{font-size:12px}
.customer-top-nav{display:flex;flex:1 1 auto;align-items:center;justify-content:center;min-width:0;gap:3px;font-size:12px;font-weight:730;letter-spacing:0}
.customer-top-nav .account-nav-home,.customer-top-nav .account-nav-dropdown>summary{display:flex;align-items:center;gap:7px;min-height:43px;padding:9px 10px;border-radius:9px;color:#445878;white-space:nowrap;cursor:pointer;list-style:none}
.customer-top-nav .account-nav-home:hover,.customer-top-nav .account-nav-dropdown>summary:hover,.customer-top-nav .account-nav-dropdown[open]>summary,.customer-top-nav .account-nav-home.is-current{color:#0857f8;background:#ecf3ff}
.customer-top-nav .account-nav-home:focus-visible,.customer-top-nav summary:focus-visible,.customer-top-nav .account-nav-panel a:focus-visible,.account-menu-toggle:focus-visible{outline:2px solid #4f8af6;outline-offset:2px}
.customer-top-nav .account-nav-dropdown{position:relative;min-width:0}
.customer-top-nav summary::-webkit-details-marker{display:none}
.customer-top-nav summary::marker{content:""}
.customer-top-nav .account-nav-icon,.account-menu-toggle .account-nav-icon{width:17px;height:17px;flex:0 0 17px}
.customer-top-nav .account-nav-chevron{width:13px;height:13px;flex-basis:13px;opacity:.65;transition:transform .15s}
.customer-top-nav details[open] .account-nav-chevron{transform:rotate(180deg)}
.customer-top-nav .account-nav-panel{position:absolute;top:calc(100% + 11px);left:0;width:max-content;min-width:242px;max-width:min(340px,90vw);padding:7px;border:1px solid #dce6f5;background:#fff;border-radius:13px;box-shadow:0 18px 36px rgba(19,41,80,.14);z-index:90}
.customer-top-nav .account-nav-panel a{display:block;padding:11px 12px;border-radius:8px;line-height:1.4;color:#425571;font-weight:650;white-space:normal}
.customer-top-nav .account-nav-panel a:hover{color:#0754dc;background:#f0f5ff}
.account-menu-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid #d4e1f2;border-radius:10px;background:#fff;color:#1559c8;cursor:pointer}
.customer-header #customerNav[hidden],.customer-header #accountMenuToggle[hidden]{display:none!important}
#dashboard,#account-details,#station-information,#changeReviewStatus,#add-station,#support-center,#support-history,#installation-policy,#account-plan-panel{scroll-margin-top:105px}
@media(max-width:1120px){
 .customer-header{height:72px}
 .customer-header .header-inner{gap:12px}
 .customer-header .brand{margin-right:auto;font-size:23px}
 .account-menu-toggle:not([hidden]){display:inline-flex}
 .customer-header .customer-top-nav{display:none;position:absolute;top:calc(100% + 1px);left:12px;right:12px;max-height:calc(100vh - 94px);overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;padding:12px;border:1px solid #dfe8f6;background:white;border-radius:0 0 16px 16px;box-shadow:0 22px 42px rgba(10,33,71,.17);font-size:13px}
 .customer-header .customer-top-nav.is-open{display:flex}
 .customer-top-nav .account-nav-dropdown{width:100%}
 .customer-top-nav .account-nav-home,.customer-top-nav .account-nav-dropdown>summary{width:100%;min-height:46px;padding:12px}
 .customer-top-nav .account-nav-dropdown>summary .account-nav-chevron{margin-left:auto}
 .customer-top-nav .account-nav-panel{position:static;min-width:0;max-width:none;width:100%;margin:2px 0 6px;border:0;border-left:2px solid #dce8ff;border-radius:0;box-shadow:none;background:#fbfdff;padding:3px 5px 3px 12px}
 .customer-top-nav .account-nav-panel a{padding:11px 12px}
}
@media(max-width:550px){
 .customer-header .header-inner{padding-inline:12px;gap:9px}
 .customer-header .brand{font-size:20px}
 .customer-header .customer-plans-link{display:none}
 .customer-header .header-nav .button{padding:7px 10px;font-size:12px;min-height:37px}
 .account-menu-toggle{height:38px;width:38px;flex:0 0 38px}
 #dashboard,#account-details,#station-information,#changeReviewStatus,#add-station,#support-center,#support-history,#installation-policy,#account-plan-panel{scroll-margin-top:91px}
}


/* Customer workspace: separate, native-keyboard-accessible accordion cards. */
.account-accordion{margin-top:20px;padding:0;overflow:hidden}
.account-accordion-header{display:flex;align-items:center;gap:14px;min-height:75px;padding:22px 26px;cursor:pointer;list-style:none;color:#142740}
.account-accordion-header::-webkit-details-marker{display:none}
.account-accordion-header::marker{content:""}
.account-accordion-header:hover{background:#f8fbff}
.account-accordion-header:focus-visible{outline:3px solid rgba(8,87,248,.55);outline-offset:-4px;border-radius:17px}
.account-accordion[open]>.account-accordion-header{background:#f9fbff;border-bottom:1px solid #e6edf7}
.account-accordion-title{font-size:18px;font-weight:820;letter-spacing:-.025em;line-height:1.35;flex:1 1 auto;min-width:0}
.account-accordion-meta{font-size:11px;font-weight:750;color:#59759b;background:#eff5ff;border-radius:30px;padding:5px 10px;white-space:nowrap}
.account-accordion-chevron{flex:0 0 20px;color:#4c698e;transition:transform .18s ease}
.account-accordion[open] .account-accordion-chevron{transform:rotate(180deg)}
.account-accordion-content{padding:22px 26px 26px}
.account-accordion-content>.sub{margin-bottom:18px}
.account-accordion-content .formgrid{margin-top:0}
.account-accordion-content #stationList{margin-top:0}
.account-accordion-content #supportHistory{min-width:0;overflow-wrap:anywhere}
@media(max-width:550px){
 .account-accordion-header{padding:17px 16px;min-height:68px;gap:9px}
 .account-accordion-title{font-size:16px}
 .account-accordion-meta{font-size:10px;padding:4px 8px}
 .account-accordion-content{padding:18px 16px 20px}
}
@media(max-width:380px){.account-accordion-meta{display:none}}


/* MyStationHub Ver001: match “Monthly monitoring pricing” heading + section icons.
   Existing HTML markup and accordion behavior are unchanged. */
.account-accordion-title {
  font-family:inherit;
  font-size:18px;
  font-weight:700;
  letter-spacing:inherit;
  line-height:inherit;
  color:var(--ink);
}
.account-accordion > .account-accordion-header::before {
  content:"";
  display:block;
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:11px;
  background-color:#eef4ff;
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px 22px;
}
#station-information > .account-accordion-header::before {
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230857f8%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2216%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%207h2m4%200h2M8%2011h2m4%200h2M10%2021v-6h4v6%22%2F%3E%3C%2Fsvg%3E");
}
#add-station > .account-accordion-header::before {
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230857f8%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h11M5%2021V8l5-4%205%204v5M8%2012h4%22%2F%3E%3Cpath%20d%3D%22M19%2015v7M15.5%2018.5h7%22%2F%3E%3C%2Fsvg%3E");
}
#support-center > .account-accordion-header::before {
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230857f8%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2013v-1a8%208%200%200%201%2016%200v1%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2212%22%20width%3D%224%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M20%2019a4%204%200%200%201-4%204h-3%22%2F%3E%3C%2Fsvg%3E");
}

@media(max-width:550px) {
  .account-accordion > .account-accordion-header::before {
    flex-basis:36px;
    width:36px;
    height:36px;
    border-radius:10px;
    background-size:20px 20px;
  }
  .account-accordion-title {font-size:18px;}
}


/* MyStationHub Ver005 - EXACT typography parity with Monthly monitoring pricing.
   This rule applies identical computed font family, weight, size, character
   spacing, text color and line height to the sidebar h3 and accordion titles.
   It overrides the old 820-weight/-0.025em title and mobile 16px override. */
.side .panel h3,
.account-accordion > .account-accordion-header .account-accordion-title {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .012em;
  line-height: 1.55;
  color: #0c1729;
}
/* Icon boxes use the existing Ver001 SVGs; position before the panel title. */
.account-accordion > .account-accordion-header::before {
  flex-shrink: 0;
  align-self: center;
}
.account-accordion > .account-accordion-header .account-accordion-title {
  overflow-wrap: anywhere;
}
/* Keep typography identical, including on mobile rather than shrinking
   only the accordion headings. The titles may wrap at narrow widths. */
@media (max-width:550px) {
 .side .panel h3,
 .account-accordion > .account-accordion-header .account-accordion-title {
   font-family: Inter, "Segoe UI", Arial, sans-serif;
   font-size:18px;
   font-weight:700;
   letter-spacing:.012em;
   line-height:1.55;
   color:#0c1729;
 }
 .account-accordion-header {gap:10px}
}

/* Ver007 — deep-linked approved account corrections stay below sticky header. */
#accountChangeForm{scroll-margin-top:105px}
@media(max-width:550px){#accountChangeForm{scroll-margin-top:91px}}

/* Ver008: screen-centered customer menu; right-side controls do not move it. */
@media (min-width:1121px){
  .customer-header .header-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);
    align-items:center;
    column-gap:0!important;
    justify-content:initial!important;
  }
  .customer-header .brand{grid-column:1;justify-self:start;margin:0!important}
  .customer-header .customer-top-nav{
    grid-column:2;justify-self:center;
    margin:0!important;flex:none!important;width:max-content;
  }
  .customer-header .customer-header-actions{
    grid-column:3;justify-self:end;
    margin:0!important;flex:none!important;
  }
  .customer-header .account-menu-toggle{display:none!important}
}
@media (max-width:1120px){
  .customer-header .header-inner{
    display:flex!important;align-items:center;
    justify-content:space-between!important;
  }
}


/* Ver009: iPhone Safari stable viewport and content-width guards.
   iOS Safari may automatically zoom a page when a focused text field uses
   a computed font size below 16px. The old account form inherited 15px.
   Keep pinch-to-zoom available; prevent unintended tap/double-tap zoom
   and horizontal expansion without using maximum-scale or user-scalable=no.
*/
@media (max-width:1120px){
  html,body{
    width:100%;max-width:100%;min-width:0;
    overflow-x:clip;
    -webkit-text-size-adjust:100%;text-size-adjust:100%;
    touch-action:manipulation;
  }
  body{margin-inline:0;position:relative}
  .main,.main>.top-row,#accountContent,
  #accountContent>.grid,#accountContent>.grid>div,
  #accountContent>.grid>.side,
  .panel,.account-accordion,.account-accordion-content,
  .account-change-form,.station-item,.cardnote,
  .formgrid,.formfield,.top-row{
    box-sizing:border-box;
    min-width:0;
    max-width:100%;
  }
  #accountContent>.grid{grid-template-columns:minmax(0,1fr)}
  .formgrid{grid-template-columns:minmax(0,1fr)}
  .formgrid>*{min-width:0}
  .customer-header,.customer-header .header-inner{max-width:100%;min-width:0}
  .account-accordion-title,.cardnote,.station-item,.small,
  .account-locked .formfield,.account-change-form .formfield,
  .account-accordion-content{
    overflow-wrap:anywhere;
  }
  /* Tap controls must not change visualViewport scale on iPhone. */
  .formfield input:not([type="checkbox"]),
  .formfield select,.formfield textarea,
  .account-locked input[readonly],
  #accountChangeForm input,
  #accountChangeForm select,#accountChangeForm textarea{
    font-size:16px!important;
    min-width:0;
    max-width:100%;
  }
  button,a,summary,input,select,textarea{touch-action:manipulation}
  .mini-table{max-width:100%}
  .mini-table td{overflow-wrap:anywhere}
}
@media (max-width:550px){
  .section-h{flex-wrap:wrap;min-width:0}
  .top-row>.pill{max-width:100%;white-space:normal}
  .customer-header .customer-header-actions{min-width:0}
  .account-accordion-header{min-width:0;max-width:100%}
}


/* Ver015: authenticated owner identity, without moving center navigation. */
.customer-header .msh-owner-chip {
  min-width:0;max-width:170px;display:inline-flex;align-items:center;gap:7px;
  color:#405675;font-size:12px;font-weight:750;line-height:1.3;
}
.customer-header .msh-owner-chip svg {flex:0 0 16px}
.customer-header .msh-owner-name {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.customer-header .msh-owner-subline {display:none!important;color:#60748f!important;font-size:11px!important;font-weight:650!important;letter-spacing:0!important;line-height:1.15!important;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1439px) {
  .customer-header .msh-owner-chip {display:none!important}
  .customer-header a.brand {display:block;min-width:0;max-width:calc(100vw - 165px);overflow:hidden}
  .customer-header a.brand .msh-owner-subline {display:block!important}
}
@media (max-width:550px) {
  .customer-header a.brand {font-size:20px!important;max-width:calc(100vw - 157px);flex:0 1 auto}
  .customer-header a.brand .msh-owner-subline {font-size:10px!important}
}
@media (max-width:375px) {
  .customer-header a.brand {font-size:18px!important;max-width:calc(100vw - 148px)}
  .customer-header a.brand .msh-owner-subline {font-size:9.5px!important}
}

/* Ver017 — signed-in customer identity on Dashboard, My Account and Plans. */
.customer-header .msh-owner-subline{color:#3d6380!important;line-height:1.2!important}
.customer-header .msh-owner-chip{max-width:195px}
.customer-header .msh-owner-name{font-size:11px}
.customer-header .msh-account-reference input[readonly]{font-size:13px;letter-spacing:.015em;overflow:hidden;text-overflow:ellipsis}
@media(max-width:550px){.customer-header .msh-owner-subline{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}}

/* MyStationHub Ver018 — account business name is the ONLY customer identity
   control in the center navigation. Sign Out is inside this same dropdown. */
.customer-header .msh-owner-chip,
.customer-header .msh-owner-subline{display:none!important}
.customer-header .customer-top-nav .msh-business-account-menu,
.msh-customer-header .msh-top-nav .msh-business-account-menu{min-width:0}
.customer-header .msh-business-account-menu>summary .msh-business-account-name{
  display:block;min-width:0;max-width:155px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font:inherit;
}
.customer-header .msh-business-account-menu .msh-business-account-divider{
  height:1px;margin:5px 7px;background:#e2eaf5;
}
.customer-header .msh-business-account-menu .msh-business-signout{
  display:block!important;width:100%;height:auto;min-height:42px;
  padding:11px 12px!important;margin:0!important;text-align:left!important;
  border:none!important;border-radius:8px!important;box-shadow:none!important;
  background:transparent!important;color:#bc334c!important;
  font:700 12px/1.4 Inter,"Segoe UI",Arial,sans-serif!important;
  cursor:pointer;white-space:normal;
}
.customer-header .msh-business-account-menu .msh-business-signout:hover{
  background:#fff1f4!important;color:#a92741!important;
}
.customer-header .msh-business-account-menu .msh-business-signout:focus-visible{
  outline:2px solid #568af8;outline-offset:1px;
}
/* Desktop identity is fixed inside the middle menu; the left and right tracks
   remain independent, preventing re-centering as control labels change. */
@media(min-width:1121px) and (max-width:1375px){
  .customer-header .msh-business-account-menu>summary .msh-business-account-name{max-width:110px}
}
@media(max-width:1120px){
  .customer-header .msh-business-account-menu>summary .msh-business-account-name{
    max-width:none;white-space:normal;overflow-wrap:anywhere;line-height:1.4;
  }
  .customer-header .msh-business-account-menu .msh-business-signout{font-size:14px!important}
}
@media(max-width:550px){
  .customer-header a.brand{max-width:calc(100vw - 82px);overflow:visible}
  .customer-header .msh-business-account-menu>summary .msh-business-account-name{font-size:14px}
}

/* Account changes is a top-level matching accordion, not part of verified details. */
#account-change-panel{scroll-margin-top:105px}
#account-change-panel .account-accordion-content #changeReviewStatus{margin-top:0}
#account-change-panel .account-accordion-content #showChangeRequest{margin-top:16px}
#account-change-panel > .account-accordion-header::before{content:"";font-size:0;font-weight:normal;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230857f8%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.12%202.12%200%200%201%203%203L9%2017l-4%201%201-4Z%22%2F%3E%3C%2Fsvg%3E");background-position:center;background-repeat:no-repeat;background-size:23px 23px}
@media(max-width:550px){#account-change-panel{scroll-margin-top:91px}}

/* Station draft acknowledgment: checkbox and first text line share a baseline.
   Scoped to this form, leaving registration consent and validation untouched. */
#addStationForm label.checkrow{
 display:grid;grid-template-columns:18px minmax(0,1fr);
 align-items:start;gap:0 12px;width:100%;margin:0;padding:0;
 line-height:22px;text-align:left;
}
#addStationForm label.checkrow > input[type="checkbox"]{
 grid-column:1;align-self:start;justify-self:start;
 width:18px;height:18px;min-width:18px;min-height:18px;
 max-width:18px;max-height:18px;margin:2px 0 0;padding:0;
}
#addStationForm label.checkrow > span{
 grid-column:2;display:block;min-width:0;margin:0;padding:0;
 line-height:22px;
}

/* Saved station draft cards: accessible clickable links to station details. */
#stationList a.msh-station-draft-link{
 display:block;width:100%;box-sizing:border-box;
 color:inherit;text-decoration:none;cursor:pointer;
 border:1px solid #dce6f5;border-radius:12px;
 transition:background-color .17s ease,border-color .17s ease,box-shadow .17s ease;
}
#stationList a.msh-station-draft-link:hover{
 background:#f0f6ff;border-color:#93baff;
 box-shadow:0 4px 16px rgba(8,87,248,.08);
}
#stationList a.msh-station-draft-link:focus-visible{
 background:#edf5ff;border-color:#0857f8;
 outline:3px solid rgba(8,87,248,.28);outline-offset:2px;
}
#stationList a.msh-station-draft-link strong{color:#0c1729}
@media(prefers-reduced-motion:reduce){
 #stationList a.msh-station-draft-link{transition:none}
}

/* My Account: verified subscription badge at the far right of the page heading. */
.main>.top-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.main>.top-row>.msh-account-plan-badge{margin-left:auto;flex:0 0 auto;align-self:center;max-width:230px;text-align:center;padding:7px 12px;font-size:12px}
.main>.top-row>.msh-account-plan-badge[hidden]{display:none!important}
.main>.top-row>.msh-account-plan-badge[data-plan-tone="approved"],
.main>.top-row>.msh-account-plan-badge[data-plan-tone="active"]{background:#eaf8f1;color:#146a45}
.main>.top-row>.msh-account-plan-badge[data-plan-tone="warning"]{background:#fff4e3;color:#875719}
@media(max-width:700px){
 .main>.top-row{align-items:flex-start}
 .main>.top-row>.msh-account-plan-badge{margin-left:auto;max-width:160px;font-size:11px}
}

/* Ver063: retain blue outline account-section icons without decorative tiles. */
#account-change-panel > .account-accordion-header::before,
#station-information > .account-accordion-header::before,
#add-station > .account-accordion-header::before{
 background-color:transparent!important;
 border:none!important;
 border-radius:0!important;
 box-shadow:none!important;
 background-size:24px 24px!important;
}

/* Ver064: subscription status sits directly to the right of "My account." */
.main>.top-row .heading{display:flex;align-items:baseline;justify-content:flex-start;flex-wrap:wrap;column-gap:16px;row-gap:5px}
.main>.top-row .heading>.msh-account-plan-badge{
 display:inline-block;flex:0 1 auto;align-self:baseline;margin:0;
 max-width:none;padding:0;border:0;border-radius:0;
 background:transparent!important;box-shadow:none!important;
 color:#0757e8;font:750 14px/1.5 Inter,"Segoe UI",Arial,sans-serif;
 letter-spacing:0;text-align:left;white-space:normal;
}
.main>.top-row .heading>.msh-account-plan-badge[hidden]{display:none!important}
.main>.top-row .heading>.msh-account-plan-badge[data-plan-tone="approved"],
.main>.top-row .heading>.msh-account-plan-badge[data-plan-tone="active"]{color:#146a45}
.main>.top-row .heading>.msh-account-plan-badge[data-plan-tone="warning"]{color:#875719}
@media(max-width:700px){
 .main>.top-row .heading{column-gap:10px}
 .main>.top-row .heading>.msh-account-plan-badge{font-size:12px}
}