/* User preference: blend backgrounds, never apply opacity to content. */
.profile-appearance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.profile-menu-panel:has(.profile-appearance){width:380px}
.profile-appearance label{min-width:0}
.profile-transparency-label output{font-size:12px;color:var(--muted);white-space:nowrap}
.profile-transparency-label input[type=range]{width:100%;min-height:44px;padding:0;margin:0;border:0;box-shadow:none;background:transparent;accent-color:var(--accent);cursor:pointer}
.profile-transparency-label small{display:block;font-size:11px;line-height:1.4;font-weight:400}
@media screen{
 /* Tables keep an opaque theme surface, independently of panel transparency. */
 .application-frame .table-wrap>table{background:var(--panel);}
 /* The summary is a layout grid; only its four cards paint a surface. */
 .payment-register-summary{background:transparent}
 :root[data-translucent=true] .application-frame :is(.app-sidebar,.panel,.card,.record-tile,.notice,.payment-register-summary>div){
  background:color-mix(in srgb,var(--panel) var(--fact-surface-opacity),transparent)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
 }
 :root[data-translucent=true] .application-frame :is(.reservation-timeline,.reservation-day){
  background-color:color-mix(in srgb,var(--panel) var(--fact-surface-opacity),transparent);
 }
}