/* CamuflaAds · monochrome glass. Presentation only; never filters media or canvases. */
html[data-ui-material="glass"] {
  --glass-bg:#0b0c0e; --glass-solid:#1d1f22; --glass-surface:rgba(29,31,35,.78);
  --glass-float:rgba(25,27,30,.82); --glass-input:rgba(9,11,14,.56);
  --glass-line:rgba(255,255,255,.16); --glass-edge:rgba(255,255,255,.22);
  --glass-shine:rgba(255,255,255,.07); --glass-shine-soft:rgba(255,255,255,.015);
  --glass-hover:rgba(255,255,255,.09); --glass-shadow:0 12px 32px #00000024;
  --glass-float-shadow:0 18px 50px #00000035; --glass-fg:#f5f5f7; --glass-muted:#b7bac1;
  --glass-primary:linear-gradient(165deg,#fff,#d8dce2); --glass-primary-text:#15171b;
  --glass-ambient:radial-gradient(ellipse at 72% -18%,#686b703b,transparent 58%),radial-gradient(ellipse at 2% 64%,#a5a8b017,transparent 47%),linear-gradient(145deg,#15171b00 45%,#a1a5ae0c 70%,#090a0c00 90%);
  --glass-radius:22px; --pd-radius:22px;
}
html[data-ui-material="glass"][data-color-mode="light"] {
  --glass-bg:#eceef1; --glass-solid:#f8f9fb; --glass-surface:rgba(255,255,255,.72);
  --glass-float:rgba(250,251,253,.79); --glass-input:rgba(255,255,255,.68);
  --glass-line:rgba(76,82,92,.15); --glass-edge:rgba(255,255,255,.96);
  --glass-shine:rgba(255,255,255,.76); --glass-shine-soft:rgba(255,255,255,.12);
  --glass-hover:rgba(255,255,255,.9); --glass-shadow:0 12px 32px #3037430b;
  --glass-float-shadow:0 18px 50px #30374314; --glass-fg:#1c2027; --glass-muted:#5a626e;
  --glass-primary:linear-gradient(160deg,#3c414b,#181b21); --glass-primary-text:#fff;
  --glass-ambient:radial-gradient(ellipse at 75% -10%,#ffffffed,transparent 62%),radial-gradient(ellipse at 0 65%,#a1a9b12b,transparent 50%),linear-gradient(145deg,#e1e5eb00 40%,#ffffffb3 75%,#dce0e800);
}
html[data-ui-material="glass"] body {
  background:var(--glass-ambient),var(--glass-bg)!important;
  background-attachment:fixed!important;
}
html[data-ui-material="glass"] :is(.app-shell,.commerce-shell,.commerce-surface,.auth-layout) {background:transparent!important}
/* Only floating chrome uses backdrop blur. Content panels use inexpensive static layers. */
html[data-ui-material="glass"] :is(.sidebar,.commerce-sidebar,.topbar,.commerce-topbar,.public-topbar,.mobile-navigation,.user-menu-popover,.consent-banner) {
  background:linear-gradient(145deg,var(--glass-shine),var(--glass-shine-soft) 46%),var(--glass-float)!important;
  border:1px solid var(--glass-line)!important;
  box-shadow:inset 0 1px 0 var(--glass-edge),var(--glass-float-shadow)!important;
  -webkit-backdrop-filter:blur(22px) saturate(.65);backdrop-filter:blur(22px) saturate(.65);
}
html[data-ui-material="glass"] :is(.topbar,.commerce-topbar) {border-radius:20px;min-height:62px;height:62px;margin:12px 22px 0;padding-inline:22px;top:12px}
html[data-ui-material="glass"] :is(.sidebar .brand,.commerce-sidebar .brand-lockup) {padding-top:4px}
html[data-ui-material="glass"] :is(.workspace-label,.workspace-switch) {
  background:linear-gradient(145deg,var(--glass-shine),transparent 65%),var(--glass-input)!important;
  border-color:var(--glass-line)!important;border-radius:18px;box-shadow:inset 0 1px 0 var(--glass-edge);
}
html[data-ui-material="glass"] :is(.sidebar .nav-link,.sidebar .account-bridge-link,.commerce-nav a,.mobile-navigation .nav-link) {border-radius:14px;min-height:42px}
html[data-ui-material="glass"] :is(.sidebar .nav-link,.sidebar .account-bridge-link,.commerce-nav a,.mobile-navigation .nav-link):hover {
  background:var(--glass-hover)!important;box-shadow:inset 0 1px 0 var(--glass-line);
}
html[data-ui-material="glass"] :is(.sidebar .nav-link.active,.sidebar .account-bridge-link.active,.commerce-nav a.active,.mobile-navigation .nav-link.active) {
  background:var(--glass-primary)!important;color:var(--glass-primary-text)!important;
  border-color:transparent!important;box-shadow:inset 0 1px 0 #ffffff60,0 4px 16px #00000018!important;
}
html[data-ui-material="glass"] :is(.editor-panel,.preview-panel,.media-preview-panel,.text-card,.text-options,.panel,.metric-card,.plan-card,.integration-card,.ud-overview,.ud-usage,.ud-shortcut,.rt-panel,.rt-link-card,.rt-stat-panel,.rt-traffic-panel,.rt-domain-card,.pg-panel,.ve-project-card,.su-panel,.notify-panel,.al-panel,.al-card,.ac-panel,.ac-manage-card,.mw-panel,.trial-card,.cx-features article,.cx-install,.cx-details details) {
  background:linear-gradient(145deg,var(--glass-shine),var(--glass-shine-soft) 48%),var(--glass-surface)!important;
  border:1px solid var(--glass-line)!important;border-radius:var(--glass-radius);
  box-shadow:inset 0 1px 0 var(--glass-edge),var(--glass-shadow)!important;
}
html[data-ui-material="glass"] :is(.ud-plan,.account-hero,.auth-story,.cover-generator,.cover-admin-panel) {
  background:radial-gradient(ellipse at 0 0,var(--glass-shine),transparent 75%),var(--glass-surface)!important;
  border:1px solid var(--glass-line)!important;border-radius:24px;
  box-shadow:inset 0 1px 0 var(--glass-edge),var(--glass-shadow)!important;
}
html[data-ui-material="glass"] :is(.ud-overview-main,.ud-plan-stats,.ud-overview-footer,.panel-head) {background:transparent}
html[data-ui-material="glass"] :is(.ud-welcome h1,.page-heading h1,.pg-heading h1,.rt-heading h1) {letter-spacing:-1.25px}
html[data-ui-material="glass"] :is(.ud-usage,.ud-shortcut,.metric-card,.plan-card) {transition:border-color .18s,box-shadow .18s}
html[data-ui-material="glass"] :is(.ud-shortcut,.ve-project-card,.pg-project):hover {border-color:var(--glass-edge)!important;box-shadow:inset 0 1px 0 var(--glass-edge),0 14px 38px #0000001a!important}
html[data-ui-material="glass"] :is(.upload-card,.media-upload,.profile,.format-option,.advanced-settings,.media-advanced,.green-option,.process-panel,.cover-setup,.text-image-settings,.empty-icon,.ud-shortcut-icon) {
  background:linear-gradient(160deg,var(--glass-shine-soft),transparent),var(--glass-input)!important;
  border-color:var(--glass-line)!important;border-radius:16px;box-shadow:inset 0 1px 0 var(--glass-shine);
}
html[data-ui-material="glass"] :is(.profile,.media-profiles label,.format-option):has(input:checked) {
  background:linear-gradient(145deg,var(--glass-shine),transparent),var(--glass-surface)!important;
  border-color:var(--glass-fg)!important;box-shadow:inset 0 1px 0 var(--glass-edge)!important;
}
/* Preserve disabled/locked semantics rather than making restricted controls look active. */
html[data-ui-material="glass"] :is(.profile,.green-option,.media-profiles label)[aria-disabled="true"] {background:var(--glass-input)!important;box-shadow:none!important}
html[data-ui-material="glass"] :is(.primary-button,.button,.outline-button,.help-button,.color-mode-toggle,.pg-button,.ve-button,.rt-button,.su-button,.al-button,.ud-refresh,.ud-primary-link,.cover-primary,.cover-secondary,.ux-button,.ux-top-search) {
  border-radius:12px;box-shadow:inset 0 1px 0 var(--glass-shine);transition:background-color .16s,border-color .16s,box-shadow .16s;
}
html[data-ui-material="glass"] :is(.topbar,.commerce-topbar,.public-topbar) :is(button,.button,.avatar,.account-bridge-avatar) {border-radius:100px}
html[data-ui-material="glass"] :is(.button:not(.primary):not(.danger),.outline-button,.help-button,.color-mode-toggle,.cover-secondary,.ud-refresh,.ux-button,.ux-top-search) {
  background:linear-gradient(155deg,var(--glass-shine),transparent),var(--glass-input)!important;border-color:var(--glass-line)!important;color:var(--glass-fg)!important;
}
html[data-ui-material="glass"] :is(.primary-button,.button.primary,.pg-primary,.ve-primary,.rt-primary,.ud-primary-link,.cover-primary):not(:disabled) {
  background:var(--glass-primary)!important;color:var(--glass-primary-text)!important;border:1px solid transparent!important;
  box-shadow:inset 0 1px 0 #ffffff50,0 5px 16px #0000001a!important;border-radius:100px;
}
html[data-ui-material="glass"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea) {
  background-color:var(--glass-input)!important;border-color:var(--glass-line)!important;border-radius:12px;
  box-shadow:inset 0 1px 3px #0000000a;color:var(--glass-fg)!important;
}
html[data-ui-material="glass"] select option {background:var(--glass-solid);color:var(--glass-fg)}
html[data-ui-material="glass"] :is(input,textarea)::placeholder {color:var(--glass-muted)!important;opacity:1}
html[data-ui-material="glass"] :is(button,a,input,select,textarea):focus-visible {outline:2px solid var(--glass-fg)!important;outline-offset:3px}
html[data-ui-material="glass"] :is(.commerce-dialog,.pg-dialog,.ve-dialog,.rt-dialog,.su-dialog,.ac-dialog,.al-dialog,.ux-dialog,.es-dialog) {
  background:linear-gradient(145deg,var(--glass-shine),transparent 44%),var(--glass-float)!important;
  border:1px solid var(--glass-line)!important;border-radius:24px;box-shadow:inset 0 1px 0 var(--glass-edge),0 28px 90px #00000050;
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  scrollbar-width:thin;scrollbar-color:var(--glass-muted) transparent;
}
html[data-ui-material="glass"] dialog::backdrop {background:#07090c8f;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
html[data-ui-material="glass"] :is(.auth-panel) {background:transparent!important}
html[data-ui-material="glass"] .auth-card {padding:30px;border:1px solid var(--glass-line);border-radius:28px;background:linear-gradient(145deg,var(--glass-shine),transparent 48%),var(--glass-surface);box-shadow:inset 0 1px 0 var(--glass-edge),var(--glass-shadow);max-width:455px;width:100%}
html[data-ui-material="glass"] .auth-card .auth-description {line-height:1.7}
/* Editor chrome only. Geometry, timeline, selection handles and actual pixels stay intact. */
html[data-ui-material="glass"] :is(.ve-panel,.pg-pagebar,.pg-inspector) {background:linear-gradient(145deg,var(--glass-shine-soft),transparent),var(--glass-solid)!important;border-color:var(--glass-line)!important;border-radius:16px;box-shadow:inset 0 1px 0 var(--glass-line)}
html[data-ui-material="glass"] :is(.ve-panel-title,.ve-dock-heading,.ve-editor-heading,.pg-editor-heading,.pg-editor-toolbar,.pg-inspector-tabs) {background:linear-gradient(145deg,var(--glass-shine),transparent)!important;border-color:var(--glass-line)!important}
html[data-ui-material="glass"] body.ve-immersive .ve-surface {background:var(--glass-bg)!important}
html[data-ui-material="glass"] .pg-pagebar {border-top-right-radius:0;border-bottom-right-radius:0}
html[data-ui-material="glass"] .pg-inspector {border-top-left-radius:0;border-bottom-left-radius:0}
@media(min-width:980px){
  html[data-ui-material="glass"] :is(.sidebar,.commerce-sidebar) {top:12px;left:12px;bottom:12px;height:calc(100dvh - 24px);width:236px;border-radius:24px;padding:22px 10px 16px}
  html[data-ui-material="glass"] :is(.app-shell,.commerce-shell) {margin-left:260px}
}
@media(max-width:979px){
  html[data-ui-material="glass"] .app-shell {margin-left:0}
  html[data-ui-material="glass"] :is(.topbar,.commerce-topbar) {margin:8px 12px 0;top:8px;border-radius:18px;height:58px;min-height:58px;padding-inline:16px}
  html[data-ui-material="glass"] .mobile-navigation {border-radius:24px 24px 0 0}
  html[data-ui-material="glass"] .auth-card {padding:26px;max-width:460px}
}
/* The ADMIN drawer changes at 760px; the Studio sidebar changes at 980px. */
@media(min-width:760px) and (max-width:979px){
  html[data-ui-material="glass"] .commerce-shell {margin-left:220px}
  html[data-ui-material="glass"] .commerce-sidebar {width:220px}
}
@media(max-width:759px){html[data-ui-material="glass"] .commerce-shell {margin-left:0}}
@media(max-width:600px){
  html[data-ui-material="glass"] {--glass-radius:18px}
  html[data-ui-material="glass"] body {background-attachment:scroll!important}
  html[data-ui-material="glass"] :is(.topbar,.commerce-topbar) {margin-inline:8px;padding-inline:12px}
  html[data-ui-material="glass"] .auth-card {padding:23px;margin-block:18px}
  html[data-ui-material="glass"] :is(.commerce-dialog,.pg-dialog,.ve-dialog,.rt-dialog,.su-dialog,.ac-dialog,.al-dialog,.ux-dialog) {border-radius:20px}
}
/* Accessibility and slower rendering paths keep the same hierarchy without blur. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html[data-ui-material="glass"] {--glass-float:var(--glass-solid);--glass-surface:var(--glass-solid)}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html[data-ui-material="glass"] {--glass-float:var(--glass-solid);--glass-surface:var(--glass-solid);--glass-input:var(--glass-solid);--glass-line:var(--glass-muted);--glass-ambient:none;--glass-shine:transparent}
  html[data-ui-material="glass"] :is(.sidebar,.commerce-sidebar,.topbar,.commerce-topbar,.public-topbar,.mobile-navigation,.user-menu-popover,.consent-banner,dialog) {-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html[data-ui-material="glass"] dialog::backdrop {-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
html[data-ui-material="glass"].ux-heavy :is(.sidebar,.commerce-sidebar,.topbar,.commerce-topbar) {background:var(--glass-solid)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
@media(prefers-reduced-motion:reduce){html[data-ui-material="glass"] :is(.ud-usage,.ud-shortcut,.metric-card,.plan-card,button,a,input,select,textarea){transition:none!important}}
@media(forced-colors:active){html[data-ui-material="glass"] :is(.sidebar,.commerce-sidebar,.topbar,.commerce-topbar,.panel,.metric-card,.ud-overview,.ud-plan,.ud-usage,.ud-shortcut,dialog,button,input,select,textarea){background:Canvas!important;color:CanvasText!important;border-color:ButtonText!important;box-shadow:none!important;backdrop-filter:none!important}}

/* Cards need their own spacing: do not retain the old joined-panel frame. */
html[data-ui-material="glass"] .cx-center {color:var(--glass-fg)}
html[data-ui-material="glass"] .cx-features {gap:18px;border:0;border-radius:0;overflow:visible;grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-ui-material="glass"] .cx-features article {min-width:0;padding:28px}
html[data-ui-material="glass"] .cx-features h2 {margin:12px 0 10px}
html[data-ui-material="glass"] .cx-install {padding:32px;gap:clamp(24px,4vw,60px);grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start}
html[data-ui-material="glass"] .cx-install h2 {margin:12px 0 18px}
html[data-ui-material="glass"] .cx-install ol {min-width:0;padding-left:22px}
html[data-ui-material="glass"] .cx-install li {padding-left:8px}
html[data-ui-material="glass"] .cx-details {display:grid;gap:12px;border:0}
html[data-ui-material="glass"] .cx-details details {padding:20px 24px;min-width:0}
html[data-ui-material="glass"] .cx-details summary {line-height:1.6;font-weight:600;overflow-wrap:anywhere}
html[data-ui-material="glass"] .cx-details p {margin-top:14px}
html[data-ui-material="glass"] .cx-center :is(.cx-eyebrow,.cx-features article>span,.cx-features p,.cx-install p,.cx-details p,.cx-hero>div>p:not(.cx-eyebrow)) {color:var(--glass-muted)}
html[data-ui-material="glass"] #cx-status {margin-top:12px}
html[data-ui-material="glass"] .cx-card-preview {color:var(--glass-fg);background:linear-gradient(145deg,var(--glass-shine),transparent),var(--glass-surface);border-color:var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-edge),var(--glass-shadow);border-radius:22px}
html[data-ui-material="glass"] .cx-center .cx-card-preview>strong {color:var(--glass-fg)!important}
html[data-ui-material="glass"] .cx-card-preview>span,html[data-ui-material="glass"] .cx-preview-line span {color:var(--glass-muted)}
html[data-ui-material="glass"] .cx-preview-line {border-color:var(--glass-line);flex-wrap:wrap;gap:8px 18px}
html[data-ui-material="glass"][data-color-mode="light"] .cx-card-preview img {filter:brightness(.22)}
html[data-ui-material="glass"] .cx-actions .secondary-button {border-radius:100px;background:var(--glass-input);border-color:var(--glass-line)}
html[data-ui-material="glass"] .cx-actions :is(a,button) {white-space:normal;text-align:center}
html[data-ui-material="glass"] .media-preview-label {background:transparent!important;color:var(--glass-muted)!important}
html[data-ui-material="glass"] :is(.sidebar,.commerce-sidebar) {scrollbar-color:var(--glass-muted) transparent;scroll-padding-block:24px}
/* The account bridge also appends its footer button inside module pagination.
   Keep the existing control in the application footer; hide only those duplicates. */
html[data-ui-material="glass"] #studio-commerce .bridge-privacy-button {display:none!important}
html[data-ui-material="glass"] :is(.commerce-nav a.active,.sidebar .nav-link.active,.mobile-navigation .nav-link.active) :is(.icon,.c-icon) {color:inherit!important}
html[data-ui-material="glass"] .mobile-navigation {scrollbar-width:thin;scrollbar-color:var(--glass-muted) transparent}
@media(max-width:850px){
  html[data-ui-material="glass"] .cx-features {grid-template-columns:1fr;gap:14px}
  html[data-ui-material="glass"] .cx-install {grid-template-columns:1fr;padding:24px;gap:24px;margin-block:32px}
  html[data-ui-material="glass"] .cx-features article {padding:24px}
}
@media(max-width:600px){
  html[data-ui-material="glass"] .cx-hero {padding-top:8px;padding-bottom:28px}
  html[data-ui-material="glass"] .cx-card-preview {width:100%;padding:24px}
  html[data-ui-material="glass"] .cx-features article,html[data-ui-material="glass"] .cx-install {padding:22px}
  html[data-ui-material="glass"] .cx-details details {padding:18px 20px}
  html[data-ui-material="glass"] .cx-install h2 {font-size:28px}
  html[data-ui-material="glass"] .cx-center code {word-break:break-word}
}

/* Keep the native scrollbar inside the glass panel's rounded corners.
   Standard non-auto scrollbar values override WebKit pseudo styling in Chromium. */
@supports selector(::-webkit-scrollbar) {
  html[data-ui-material="glass"] :is(.sidebar,.commerce-sidebar) {
    scrollbar-width:auto;scrollbar-color:auto;
  }
  html[data-ui-material="glass"] :is(.sidebar,.commerce-sidebar)::-webkit-scrollbar {
    width:12px;height:12px;background:transparent;
  }
  html[data-ui-material="glass"] :is(.sidebar,.commerce-sidebar)::-webkit-scrollbar-track {
    margin-block:22px;background:transparent;
  }
  html[data-ui-material="glass"] :is(.sidebar,.commerce-sidebar)::-webkit-scrollbar-thumb {
    border:4px solid transparent;border-radius:100px;
    background:var(--glass-muted);background-clip:padding-box;min-height:36px;
  }
  html[data-ui-material="glass"] :is(.sidebar,.commerce-sidebar)::-webkit-scrollbar-thumb:hover {
    background-color:var(--glass-fg);
  }
  html[data-ui-material="glass"] :is(.sidebar,.commerce-sidebar)::-webkit-scrollbar-button {
    display:none;width:0;height:0;
  }
  html[data-ui-material="glass"] :is(.sidebar,.commerce-sidebar)::-webkit-scrollbar-corner {
    background:transparent;
  }
}
