/* HELIUM UI V1.7.2 — frosted porcelain foundation (single owner of light card material)
   Keep this file LAST in all public app pages. No background image switching. */
:root{
 --he-canvas:var(--he-p-BCD7E6);
 --he-system-canvas:var(--he-p-F7F7F6);
 --he-frosted-rgb:255,255,255;
 --he-frost-opacity:.90;
 --he-frost-bg:rgba(var(--he-frosted-rgb),var(--he-frost-opacity));
 --he-frost-blur:18px;
 --he-frost-shadow:0 14px 30px -29px var(--he-p-042A3A33);
 --he-focus:var(--he-p-153D7A);
}
html{font-size:16px!important}
body{font-size:16px!important;line-height:1.52}
/* Separate system canvas from dashboard canvas; never use photographic page backgrounds. */
html body :is(.finance-main,.health-main,.screen.desktop-page,.hm-main>main){background-color:var(--he-canvas)!important;background-image:none!important}
html body .portal .content>main{background-color:var(--he-system-canvas)!important;background-image:none!important}
html body :is(.finance-main,.health-main,.screen.desktop-page,.hm-main>main,.portal .content>main)::before{
  /* Old background image overlays are entirely disabled, not merely hidden by an opaque card. */
  background-image:none!important;
}
/* White, functional, non-glass card family. Explicitly EXCLUDES brightly coloured Materials cards.
   Frostened white remains 90% opaque, keeps typography crisp and never has visible strokes. */
html body :is(
 .stat-card,.forecast-card,.lower-card,.results-card,.small-biomarker,.product-card,
 .health-action-card:not(.heart-action),.subscription-card,.health-timeline,
 .category-item,.health-mini-button,.mini-tile,.txn,.coin-item,
 .screen .stat.quiet,.screen .panel.quiet,.screen .quiet,
 .demo-panel,.ru-card,.he-rare-card,.material.porcelain,.mat-box.edge,
 .hero-b,.rail-box,.screen-tile:not(.hm-surface):not(.he-dark-material),
 .wallet-actions button,.search-results button,.sa-card--porcelain,
 .biomarker-section .see-all,.supplements-section .see-all
 ){
 background:var(--he-frost-bg)!important;
 background-color:var(--he-frost-bg)!important;
 -webkit-backdrop-filter:blur(var(--he-frost-blur)) saturate(1.05)!important;
 backdrop-filter:blur(var(--he-frost-blur)) saturate(1.05)!important;
 border:0!important;
 outline:0 solid transparent;
 box-shadow:var(--he-frost-shadow)!important;
}
/* Native contained light: subtly shifts the opacity, never elevates the surface. */
html body :is(.stat-card,.forecast-card,.lower-card,.results-card,.small-biomarker,.product-card,.category-item,.coin-item,.txn,.mini-tile,.screen .quiet,.screen .panel.quiet,.hero-b,.screen-tile:not(.hm-surface)):hover{
 background-color:var(--he-p-FFFFFFED)!important;
 box-shadow:var(--he-frost-shadow)!important;
 transform:none!important;
}
/* Forms keep opaque fill, never nested glass over frosted white. */
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select,.sa-select-trigger,.sa-control){
 background-color:var(--he-p-F4F8F9)!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select,.sa-select-trigger):is(:hover,:focus-visible){background-color:var(--he-p-FFFFFF)!important;color:var(--he-p-102647)!important}
html body :is(input,textarea,button,select,a):focus-visible{outline:2px solid var(--he-focus)!important;outline-offset:3px!important}
/* Avoid border-plus-focus double rings for mouse input; keep accessible keyboard focus. */
html body :is(input,textarea):not(:focus-visible):focus{outline:none!important}
/* Allow white cards to participate in the original squircle system without a second border. */
html body :is(.small-biomarker,.product-card,.stat-card,.forecast-card,.lower-card,.results-card,.coin-item,.txn,.mini-tile,.hero-b){corner-shape:squircle}
html body :is(.small-biomarker,.product-card,.stat-card,.forecast-card,.lower-card,.results-card,.coin-item,.txn,.mini-tile,.hero-b)::after{border-color:transparent!important}
/* Preserve actual coloured and dark Materials, and their original internal hover animation. */
html body :is(.biomarker-gradient,.challenge-card,.material.aurora,.material.solid,.mat-box.darkbg,.he-dark-material,.hm-surface,.hero-a,.heart-action,.phone-hero,.he-job-feature,.he-material){
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
/* Don't make bottom-lit Materials move like physical floating cards. */
html body :is(.material,.biomarker-gradient,.he-material,.he-dark-material,.hm-surface):hover{transform:none!important}
/* Health sidebar: stable icon | flexible title | status column. */
html body.health-page .health-aside{overflow-y:auto;overflow-x:hidden;scrollbar-width:none!important;-ms-overflow-style:none!important}
html body.health-page .health-aside::-webkit-scrollbar{display:none!important;width:0!important}
html body.health-page .category-list{gap:10px!important;min-width:0!important}
html body.health-page .category-item{
 display:grid!important;grid-template-columns:19px minmax(0,1fr) auto!important;
 align-items:center!important;column-gap:12px!important;min-height:52px!important;
 padding:11px 15px!important;white-space:normal!important;overflow:visible!important;
 background:var(--he-p-FFFFFFE6)!important;transition:background-color .20s ease,color .20s ease!important;
}
html body.health-page .category-item>i,html body.health-page .category-item>i svg{width:19px!important;height:19px!important;display:grid;place-items:center;flex:none}
html body.health-page .category-item>span{min-width:0!important;font-size:clamp(14px,.3vw + 11px,16px)!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:normal!important;font-weight:500!important;color:var(--he-p-11284A)!important}
html body.health-page .category-item>small{
 margin-left:0!important;justify-self:end!important;flex:none!important;white-space:nowrap!important;
 font-size:12px!important;line-height:1.3!important;padding:5px 9px!important;
 border:0!important;color:var(--he-p-345565)!important;background:var(--he-p-FFFFFFD1)!important;
}
html body.health-page .category-item:is(:hover,:focus-visible){background:var(--he-p-E6F0F4F5)!important;color:var(--he-p-0B3B50)!important}
html body.health-page .category-item.selected{background:var(--he-p-D9E8EEF0)!important;color:var(--he-p-02222F)!important}
/* Dashboard content stays visible against the neutral canvas. */
html body.health-page .health-aside{background-color:var(--he-p-EDF0F5)!important}
html body.health-page .health-dashboard{min-width:0!important;grid-template-columns:minmax(328px,340px) minmax(0,1fr)!important}
html body.health-page .health-main{min-width:0!important}
html body.health-page .health-lower-grid{min-width:0!important}
html body.health-page :is(.small-biomarker,.product-card,.results-card){color:var(--he-p-11284A)!important}
html body.health-page .small-biomarker>span,html body.health-page .product-card>span:not(.bestseller),html body.health-page .section-head p{color:var(--he-p-426372)!important}
/* Small cards keep their existing light-field visuals, but sufficient inner spacing. */
html body .stat-card{padding:clamp(24px,2vw,35px)!important}
html body.health-page :is(.small-biomarker,.product-card){padding:clamp(17px,1.35vw,25px)!important}
html body.health-page .health-action-card:not(.heart-action){background:var(--he-p-FFFFFFE6)!important}
/* Portal material notes and text hierarchy */
html body .portal .material.porcelain{color:var(--he-p-102444)!important}
html body .portal .hero-b{background:var(--he-p-FFFFFFE6)!important}
html body :is(.health-main,.finance-main,.screen.desktop-page) .page-heading p{color:var(--he-p-425C67)!important}
/* Slim, quiet custom scrollbar wherever scrolling must actually remain visible. */
html body :is(.finance-main,.health-main,.screen,.modal-backdrop .dialog,.modal-backdrop .modal-inner,.he-floating-menu){scrollbar-color:var(--he-p-2D4A7661) transparent;scrollbar-width:thin}
html body :is(.finance-main,.health-main,.screen,.modal-backdrop .dialog,.modal-backdrop .modal-inner,.he-floating-menu)::-webkit-scrollbar{width:6px;height:6px}
html body :is(.finance-main,.health-main,.screen,.modal-backdrop .dialog,.modal-backdrop .modal-inner,.he-floating-menu)::-webkit-scrollbar-thumb{background:var(--he-p-2D4A7659);border-radius:8px}
/* Phones/tablets: sidebar becomes horizontal category strip, without clipping badges. */
@media(max-width:920px){
 html body.health-page .health-dashboard{grid-template-columns:minmax(0,1fr)!important}
 html body.health-page .health-aside{overflow-x:auto!important;scrollbar-width:none!important}
 html body.health-page .category-list{min-width:max-content!important;gap:8px!important}
 html body.health-page .category-item{min-width:165px!important;max-width:225px!important}
}
@media(max-width:620px){
 html body.health-page .category-item{min-width:152px!important;max-width:210px!important;padding:10px 12px!important;column-gap:8px!important}
 html body.health-page .category-item>span{font-size:14px!important}
 html body.health-page .health-main{padding-inline:16px!important}
}
@media(prefers-reduced-transparency:reduce){
 html body :is(.stat-card,.forecast-card,.lower-card,.results-card,.small-biomarker,.product-card,.category-item,.coin-item,.txn,.mini-tile,.hero-b){background:var(--he-p-FFFFFFF5)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
@media(min-width:921px){html body.health-page .category-item>span{white-space:nowrap!important;font-size:15px!important}}
/* Finance companion field: the prompt never needs to be clipped by its send control. */
html body.finance-page .side-composer{min-width:0!important;display:flex!important;gap:8px!important}
html body.finance-page .side-composer input{min-width:0!important;flex:1 1 0!important;width:0!important;text-overflow:ellipsis!important;padding:9px 2px!important}
html body.finance-page .side-composer button{flex:0 0 46px!important;min-width:46px!important}