/* Approved customer presentation: no admin styling and no financial changes. */
html[data-front-experience=station] body:not([data-customer-shell=admin]){
  font-size:14px;line-height:1.65;--customer-sidebar-width:204px;
}
html[data-front-experience=station] body:not([data-customer-shell=admin]) :is(button,.btn,input,select,textarea){
  font-size:14px;line-height:1.5;
}
html[data-front-experience=station] body:not([data-customer-shell=admin]) :is(table,td){font-size:13px;line-height:1.6}
html[data-front-experience=station] body:not([data-customer-shell=admin]) :is(th,.field>span,.notice,.check,td small){font-size:12px}
html[data-front-experience=station] body:not([data-customer-shell=admin]) :is(.panel-head h2,.panel>header h2){font-size:17px}
html[data-front-experience=station] body:not([data-customer-shell=admin]) :is(a,button,summary,[role=button]){
  transition:background-color .18s ease,border-color .18s ease,box-shadow .2s ease,transform .2s ease,color .18s ease;
}
html[data-front-experience=station] body:not([data-customer-shell=admin]) :is(a,button,summary,[role=button]):focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;
}
html[data-front-experience=station] body:not([data-customer-shell=admin]) :is(button:not(:disabled),.btn,summary):active{transform:translateY(1px) scale(.985)}
html[data-front-experience=station] body[data-customer-shell=public] #app{padding-top:var(--customer-header-height,68px)}
html[data-front-experience=station] body:is([data-customer-shell=workspace],[data-customer-shell=public]) .topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;min-height:68px;height:auto;
  padding:10px 24px;box-sizing:border-box;box-shadow:0 2px 12px #1b365208;
}
html[data-front-experience=station] body .topbar .nav{font-size:13px;gap:10px}
html[data-front-experience=station] body .topbar .nav>a{font-size:13px}
html[data-front-experience=station] body .topbar .identity-link{font-size:13px;padding:7px 10px;max-width:155px}
html[data-front-experience=station] body .topbar .identity-link>span[data-no-i18n]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-front-experience=station] body .customer-account-menu[hidden]{display:none!important}
html[data-front-experience=station] body .topbar :is(.chrome-button,.theme-btn){width:40px;height:40px;min-height:40px;flex:0 0 40px}
html[data-front-experience=station] body .topbar .chrome-button svg{width:23px;height:23px}
html[data-front-experience=station] body[data-customer-shell=workspace]{height:100dvh;overflow:hidden}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-front{
  height:100dvh;padding-top:var(--customer-header-height,68px);box-sizing:border-box;overflow:hidden;
}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-layout{
  display:grid;grid-template-columns:var(--customer-sidebar-width) minmax(0,1fr);
  height:100%;min-height:0;overflow:hidden;
}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-sidebar{
  position:relative;inset:auto;width:auto;height:100%;min-height:0;box-sizing:border-box;
  padding:22px 12px 16px;border-right:1px solid var(--border);border-bottom:0;
  display:flex;flex-direction:column;background:var(--surface);overflow:hidden;
}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-sidebar>nav{
  display:block;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:0 2px 12px;
}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-sidebar-title{font-size:14px;padding:0 8px 18px}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-sidebar-title small{font-size:11px}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-nav-links{display:flex;flex-direction:column;gap:4px;overflow:visible}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-nav-group{display:block}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-nav-links a{
  min-height:40px;padding:9px 10px;font-size:13px;gap:9px;border-radius:10px;
}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-nav-group h2{font-size:11px;margin:16px 10px 6px}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-main{
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;min-width:0;min-height:0;height:100%;max-width:none;
  margin:0;padding:28px 30px 40px;box-sizing:border-box;scrollbar-gutter:stable;
}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-page-heading{margin-bottom:24px;gap:12px}
html[data-front-experience=station] body[data-customer-shell=workspace] .customer-page-heading h1{font-size:25px;line-height:1.35}
html[data-front-experience=station] body[data-customer-shell=workspace] :is(.customer-account,.customer-breadcrumb){font-size:11px}
html[data-front-experience=station] body .customer-front .customer-usage :is(td,button,.usage-fee.usage-detail-trigger){font-size:13px}
html[data-front-experience=station] body .customer-front .customer-usage .field :is(input,select){font-size:14px}
html[data-front-experience=station] body .customer-front :is(.pg-welcome p,.pg-composer>textarea){font-size:15px}
html[data-front-experience=station] body .customer-front .pg-welcome h2{font-size:26px}
html[data-front-experience=station] body .customer-front .pg-prompts button{font-size:14px;min-height:44px;padding:10px 16px}
html[data-front-experience=station] body .account-overview .co-welcome p{font-size:14px}
html[data-front-experience=station] body .account-overview .co-card-head h2{font-size:16px}
html[data-front-experience=station] body .account-overview .co-stat{padding:20px;color:var(--ink);text-decoration:none}
html[data-front-experience=station] body .account-overview .co-stat>strong{font-size:clamp(23px,1.8vw,29px)}
html[data-front-experience=station] body .account-overview a.co-stat{cursor:pointer}
html[data-front-experience=station] body .account-overview .co-stat .co-text-link{color:var(--accent);margin-top:auto}
html[data-front-experience=station] body .account-overview .co-stat .co-card-arrow{display:inline-block;transition:transform .2s ease}
html[data-front-experience=station] body .account-overview .co-model-name{display:inline-flex;align-items:center;gap:8px;color:var(--ink);overflow-wrap:anywhere}
html[data-front-experience=station] body .account-overview .co-model-name .model-icon{flex:0 0 21px;width:21px;height:21px}
html[data-front-experience=station] body .account-overview .co-chart{position:relative;outline-offset:4px;cursor:crosshair;touch-action:pan-y}
html[data-front-experience=station] body .account-overview [data-co-crosshair]{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4;pointer-events:none}
html[data-front-experience=station] body .account-overview [data-co-dot]{fill:var(--surface);stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}
html[data-front-experience=station] body .account-overview .co-trend-tooltip{
  position:absolute;z-index:8;pointer-events:none;white-space:pre-line;max-width:calc(100% - 8px);
  width:max-content;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--ink);box-shadow:0 6px 20px #10203920;
  font-size:12px;line-height:1.7;font-variant-numeric:tabular-nums;
}
html[data-front-experience=station] body .lp-shell[data-login-audience=customer] .lp-header{position:sticky;top:0;z-index:40}
.customer-nav-toggle,.customer-nav-backdrop{display:none}
@media(hover:hover){
  html[data-front-experience=station] body:not([data-customer-shell=admin]) :is(button:not(:disabled),.btn,summary):hover{
    box-shadow:0 4px 10px #1b365212;
  }
  html[data-front-experience=station] body .account-overview a.co-stat:hover{
    transform:translateY(-4px);border-color:var(--accent);
    box-shadow:0 10px 26px #1b365216;
  }
  html[data-front-experience=station] body .account-overview a.co-stat:hover .co-card-arrow{transform:translateX(4px)}
  html[data-front-experience=station] body .customer-sidebar a:hover{transform:translateX(3px)}
}
@media(max-width:1100px){
  html[data-front-experience=station] body .topbar .nav>a:not(.btn){display:none}
  html[data-front-experience=station] body .topbar .public-menu{display:block}
}
@media(max-width:920px){
  html[data-front-experience=station] body:is([data-customer-shell=workspace],[data-customer-shell=public]) .topbar{padding:10px 14px;gap:10px;flex-wrap:wrap}
  html[data-front-experience=station] body .topbar .brand{font-size:14px;gap:8px}
  html[data-front-experience=station] body .topbar .nav{margin-left:auto;gap:6px;flex-wrap:wrap}
  html[data-front-experience=station] body[data-customer-shell=workspace] .customer-layout{display:block}
  html[data-front-experience=station] body[data-customer-shell=workspace] .customer-sidebar{
    position:fixed;left:0;top:var(--customer-header-height,68px);bottom:0;width:232px;
    height:calc(100dvh - var(--customer-header-height,68px));z-index:42;
    transform:translateX(-100%);visibility:hidden;transition:transform .22s ease,visibility .22s ease;
  }
  html[data-front-experience=station] body[data-customer-menu-open=true] .customer-sidebar{transform:none;visibility:visible}
  html[data-front-experience=station] body[data-customer-menu-open=true] .customer-nav-backdrop{
    display:block;position:fixed;inset:var(--customer-header-height,68px) 0 0;z-index:41;
    width:100%;height:auto;border:0;border-radius:0;padding:0;background:#10203965;
  }
  html[data-front-experience=station] body .customer-nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;
    width:40px;height:40px;min-height:40px;padding:9px;border:1px solid var(--border);
    border-radius:10px;background:var(--surface);color:var(--ink);
  }
  .customer-nav-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
  html[data-front-experience=station] body[data-customer-shell=workspace] .customer-main{padding:22px 18px 30px}
  html[data-front-experience=station] body[data-customer-shell=workspace] .customer-page-heading h1{font-size:23px}
}
@media(max-width:560px){
  html[data-front-experience=station] body .topbar .brand{margin-right:auto;max-width:calc(100vw - 205px);overflow:hidden;white-space:nowrap}
  html[data-front-experience=station] body .topbar .nav{width:100%;justify-content:space-between;gap:4px}
  html[data-front-experience=station] body .topbar .customer-account-picker{position:absolute;right:14px;top:10px}
  html[data-front-experience=station] body .topbar .identity-link{max-width:140px}
  html[data-front-experience=station] body[data-customer-shell=workspace] .customer-main{padding:20px 12px 28px}
  html[data-front-experience=station] body .account-overview .co-stat{padding:14px 12px}
  html[data-front-experience=station] body .account-overview .co-stat>strong{font-size:22px}
  html[data-front-experience=station] body :is(input,select,textarea){font-size:16px}
}
/* Existing native customer pages keep their forms/portals and receive the same scale. */
html[data-front-experience=embedded] body{font-size:14px;line-height:1.6}
html[data-front-experience=embedded] :is(button,input,select,textarea,[role=combobox]){font-size:14px}
html[data-front-experience=embedded] :is(table,td){font-size:13px}
html[data-front-experience=embedded] :is(th,label){font-size:12px}
html[data-front-experience=embedded] :is(a,button,[role=button],[role=combobox]){
  transition:background-color .18s ease,border-color .18s ease,box-shadow .2s ease,transform .2s ease;
}
@media(prefers-reduced-motion:reduce){
  html[data-front-experience] body:not([data-customer-shell=admin]) *,
  html[data-front-experience] body:not([data-customer-shell=admin]) *:before,
  html[data-front-experience] body:not([data-customer-shell=admin]) *:after{
    transition:none!important;animation:none!important;scroll-behavior:auto!important;
  }
  html[data-front-experience=station] body .account-overview a.co-stat:hover,
  html[data-front-experience=station] body .customer-sidebar a:hover{transform:none}
}
