:root{
  --ch-primary:#168bdc;
  --ch-primary-hover:#0875bd;
  --ch-primary-soft:#eaf6fe;
  --ch-navy:#13213a;
  --ch-danger:#dc2626;
  --ch-success:#059669;
  --ch-border:#dce5ef;
  --ch-radius:10px;
  --ch-shadow:0 8px 20px rgba(22,139,220,.16)
}
html{scrollbar-gutter:stable;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit}
:where(button,a,input,select,textarea):focus-visible{outline:3px solid rgba(22,139,220,.25);outline-offset:2px}

/* One reusable button language for customer and administration screens. */
body :is(.website-portal-content,.admin-main,.auth-card) :is(button,.primary,a.primary,.profile-save,.invoice-open-button,.customer-action){
  display:inline-flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:0;
  padding:10px 16px;
  border:1px solid transparent;
  border-radius:var(--ch-radius);
  background:var(--ch-primary);
  color:#fff;
  box-shadow:var(--ch-shadow);
  font-size:12px;
  font-weight:750;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease
}
body :is(.website-portal-content,.admin-main,.auth-card) :is(button,.primary,a.primary,.profile-save,.invoice-open-button,.customer-action):hover{
  background:var(--ch-primary-hover);
  color:#fff;
  box-shadow:0 10px 24px rgba(22,139,220,.22);
  transform:translateY(-1px)
}
body :is(.website-portal-content,.admin-main,.auth-card) :is(button,.primary,a.primary,.profile-save,.invoice-open-button,.customer-action):active{transform:none;box-shadow:0 4px 10px rgba(22,139,220,.14)}
body :is(.website-portal-content,.admin-main,.auth-card) button:disabled{background:#cbd5e1;color:#64748b;box-shadow:none;cursor:not-allowed;transform:none}
body :is(.website-portal-content,.admin-main) :is(.secondary,a.secondary,.cancel-button){border-color:var(--ch-border);background:#fff;color:#334155;box-shadow:none}
body :is(.website-portal-content,.admin-main) :is(.secondary,a.secondary,.cancel-button):hover{border-color:#9fd5f6;background:#f5fbff;color:var(--ch-primary-hover)}
body :is(.website-portal-content,.admin-main) :is(.danger-button,.delete-button,.customer-delete-button){border-color:#fecaca;background:#fff;color:var(--ch-danger);box-shadow:none}
body :is(.website-portal-content,.admin-main) :is(.danger-button,.delete-button,.customer-delete-button):hover{border-color:var(--ch-danger);background:#fff1f2;color:#b91c1c}

/* Stable controls and predictable responsive tables. */
:where(.website-portal-content,.admin-main) :where(input:not([type=checkbox]):not([type=radio]),select,textarea){max-width:100%;border-color:#cbd8e6;border-radius:9px;background:#fff}
:where(.website-portal-content,.admin-main) :where(input:not([type=checkbox]):not([type=radio]),select){min-height:42px}
:where(.website-portal-content,.admin-main) textarea{resize:vertical}
.panel{min-height:0}
.table-wrap{max-width:100%;overscroll-behavior-inline:contain;scrollbar-gutter:stable}
.table-wrap table{min-width:680px}
.module-links,.customer-row-actions,.invoice-actions,.service-hero-actions,.support-submit,.admin-form-actions,.invoice-action-main{flex-wrap:wrap}

/* Reserve website chrome dimensions before fonts and scripts finish. */
.website-topbar{min-height:30px}
.website-logo-row .website-container{min-height:102px}
.website-logo{display:block;width:min(300px,60vw);aspect-ratio:25/6}
.website-logo img{width:100%;height:100%;object-fit:contain;object-position:left center}
.website-main-nav>.website-container{min-height:54px}
.website-account-nav>.website-container{min-height:49px}
.website-footer img{aspect-ratio:260/63;object-fit:contain;object-position:left center}
.website-footer{content-visibility:auto;contain-intrinsic-size:auto 420px}

/* Impersonation state follows the same brand and no longer uses shifting inline styles. */
.impersonation-banner{position:sticky;z-index:110;top:0;display:flex;min-height:56px;align-items:center;justify-content:space-between;gap:16px;padding:9px max(18px,calc((100% - 1170px)/2));background:var(--ch-navy);color:#fff;box-shadow:0 6px 18px rgba(15,23,42,.12)}
.impersonation-banner strong{font-size:13px}.impersonation-banner form{margin:0}
.impersonation-banner button{min-height:38px!important;padding:8px 13px!important;border:1px solid rgba(255,255,255,.28)!important;background:#fff!important;color:var(--ch-navy)!important;box-shadow:none!important}
.impersonation-banner button:hover{background:var(--ch-primary-soft)!important;color:var(--ch-primary-hover)!important}

/* Notifications stay visible without colliding with the viewport edge. */
#cho-notifications:not(.admin-notifications) .notification-bell{top:40px;right:max(16px,calc((100vw - 1240px)/2));width:44px;height:44px;border-color:var(--ch-border);border-radius:12px;color:var(--ch-navy)}
#cho-notifications:not(.admin-notifications) .notification-panel{top:92px;right:max(16px,calc((100vw - 1240px)/2))}

@media(max-width:800px){
  .website-logo-row .website-container{min-height:82px}
  .website-logo{width:min(260px,58vw)}
  .website-main-nav>.website-container{min-height:0}
  .website-account-nav>.website-container{min-height:46px}
  .impersonation-banner{position:relative;align-items:flex-start;padding:12px 16px;flex-direction:column}
  .impersonation-banner form,.impersonation-banner button{width:100%}
  #cho-notifications:not(.admin-notifications) .notification-bell{top:38px;right:12px}
  #cho-notifications:not(.admin-notifications) .notification-panel{top:88px;right:12px}
}
@media(max-width:640px){
  :where(.website-portal-content,.admin-main) :where(.page-title,.section-heading,.panel-head){align-items:flex-start;gap:12px;flex-direction:column}
  :where(.website-portal-content,.admin-main) :where(.page-title,.section-heading,.panel-head)>.primary{width:100%}
  .module-links>*{flex:1 1 145px}
  .invoice-actions>*{flex:1 1 100%}
  .service-hero-actions>*{flex:1 1 100%}
  .support-submit{display:grid!important;grid-template-columns:1fr}
  .support-submit button{width:100%}
  .website-footer{contain-intrinsic-size:auto 760px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Joined domain search: compact outer corners and one continuous control. */
body .secure-domain-search .domain-search-control{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:0;
  overflow:visible;
  border-radius:2px;
  filter:drop-shadow(0 8px 18px rgba(15,23,42,.08));
}
body .secure-domain-search .domain-search-control i{
  left:18px;
  color:#12213d;
  font-size:23px;
  line-height:1;
}
body .secure-domain-search .domain-search-control input[type="search"]{
  width:100%;
  height:58px;
  min-width:0;
  padding:0 48px 0 54px;
  border:1px solid #cbd8e6;
  border-right:0;
  border-radius:2px 0 0 2px;
  background:#fff;
  box-shadow:none;
  color:#0f172a;
  font-size:16px;
  font-weight:600;
  outline:0;
}
body .secure-domain-search .domain-search-control button[data-domain-search]{
  min-width:132px;
  min-height:58px;
  margin:0;
  padding:0 26px;
  border:1px solid var(--ch-primary);
  border-radius:0 2px 2px 0;
  background:var(--ch-primary);
  box-shadow:none;
  color:#fff;
  font-size:15px;
  font-weight:750;
}
body .secure-domain-search .domain-search-control:focus-within input[type="search"]{
  position:relative;
  z-index:1;
  border-color:var(--ch-primary);
  box-shadow:inset 0 0 0 1px var(--ch-primary);
}
body .secure-domain-search .domain-search-control button[data-domain-search]:hover{
  border-color:var(--ch-primary-hover);
  background:var(--ch-primary-hover);
}
@media(max-width:640px){
  body .secure-domain-search .domain-search-control{grid-template-columns:minmax(0,1fr) auto}
  body .secure-domain-search .domain-search-control input[type="search"]{height:52px;border-radius:2px 0 0 2px}
  body .secure-domain-search .domain-search-control button[data-domain-search]{width:auto;min-width:92px;min-height:52px;height:52px;margin:0;padding:0 16px;border-radius:0 2px 2px 0}
}