/* ========================================================================
   Oficina Portátil V75.20 — POPUP GLASS LAB / SAME MATERIAL
   - Topbar/Sidebar continuam congeladas pelo core V75.18.
   - Aparência, Notificações, Perfil e Globo usam EXATAMENTE as mesmas vars.
   - Notificações não possui mais um segundo glass/blur.
   ======================================================================== */

:root{
  /* valores iniciais = último ajuste enviado pelo usuário */
  --op-pg-blur:3px;
  --op-pg-opacity:.08;
  --op-pg-saturation:.55;
  --op-pg-contrast:1.40;
  --op-pg-border-width:1.5px;
  --op-pg-border-high:1;
  --op-pg-border-low:.10;
  --op-pg-inner-highlight:.18;
  --op-pg-shadow-blur:13px;
  --op-pg-shadow-y:3px;
  --op-pg-shadow-opacity:.43;

  --op-pg-mirror-strength:0;
  --op-pg-mirror-band:29%;
  --op-pg-mirror-offset:-2px;
  --op-pg-mirror-compression:.68;
  --op-pg-lens-scale:1.04;
  --op-pg-lens-opacity:.18;
  --op-pg-skew:2.5deg;
  --op-pg-specular:.04;
  --op-pg-edge:.42;
  --op-pg-chromatic:3.6px;
}

html{
  --op-pg-base-rgb:255,255,255;
  --op-pg-shadow-rgb:0,22,20;
}
html[data-theme="dark"]{
  --op-pg-base-rgb:7,20,21;
  --op-pg-shadow-rgb:0,0,0;
}

/* ------------------------------------------------------------------------
   UM ÚNICO MATERIAL PARA OS QUATRO POPUPS.
   Não existe regra de blur específica para Notificações.
   ------------------------------------------------------------------------ */
html :is(
  .op-appearance-popover,
  .notification-popover,
  .op-profile-popover,
  .sap-global-overlay .sap-global-modal
){
  border-width:var(--op-pg-border-width)!important;
  border-style:solid!important;
  border-color:transparent!important;

  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(255,255,255,.12),
      transparent 44%
    ),
    radial-gradient(
      90% 70% at 100% 100%,
      color-mix(in srgb,var(--accent) 13%,transparent),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      rgba(var(--op-pg-base-rgb),var(--op-pg-opacity)),
      rgba(var(--op-pg-base-rgb),calc(var(--op-pg-opacity) * .52))
    )!important;

  -webkit-backdrop-filter:
    blur(var(--op-pg-blur))
    saturate(var(--op-pg-saturation))
    contrast(var(--op-pg-contrast))!important;
  backdrop-filter:
    blur(var(--op-pg-blur))
    saturate(var(--op-pg-saturation))
    contrast(var(--op-pg-contrast))!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,var(--op-pg-inner-highlight)),
    inset 0 -1px 0 rgba(0,0,0,calc(var(--op-pg-inner-highlight) * .18)),
    0 var(--op-pg-shadow-y) var(--op-pg-shadow-blur)
      rgba(var(--op-pg-shadow-rgb),var(--op-pg-shadow-opacity))!important;
}

/* O conteúdo interno das notificações não ganha nenhum segundo material. */
.notification-popover > header,
.notification-popover > section{
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.notification-popover > section > button{
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}

.notification-popover > section > button.unread{
  background:color-mix(in srgb,var(--accent) 5%,transparent)!important;
}
.notification-popover > section > button:hover{
  background:color-mix(in srgb,var(--accent) 7%,transparent)!important;
}

/* Neutraliza regras antigas de mobile-liquid / accent-tone especificamente. */
html[data-theme="dark"] .notification-popover,
html[data-accent-enabled="true"] .notification-popover,
html[data-accent-enabled="true"][data-accent-tone] .notification-popover{
  border-width:var(--op-pg-border-width)!important;
  border-color:transparent!important;
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.12),transparent 44%),
    radial-gradient(90% 70% at 100% 100%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 52%),
    linear-gradient(145deg,
      rgba(var(--op-pg-base-rgb),var(--op-pg-opacity)),
      rgba(var(--op-pg-base-rgb),calc(var(--op-pg-opacity) * .52))
    )!important;
  -webkit-backdrop-filter:
    blur(var(--op-pg-blur))
    saturate(var(--op-pg-saturation))
    contrast(var(--op-pg-contrast))!important;
  backdrop-filter:
    blur(var(--op-pg-blur))
    saturate(var(--op-pg-saturation))
    contrast(var(--op-pg-contrast))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,var(--op-pg-inner-highlight)),
    inset 0 -1px 0 rgba(0,0,0,calc(var(--op-pg-inner-highlight) * .18)),
    0 var(--op-pg-shadow-y) var(--op-pg-shadow-blur)
      rgba(var(--op-pg-shadow-rgb),var(--op-pg-shadow-opacity))!important;
}

/* ------------------------------------------------------------------------
   NOTIFICAÇÕES E O BACKDROP ROOT DA TOPBAR
   Ao abrir Notificações:
   1) o glass da topbar real é suspenso;
   2) um clone VISUAL do glass fica no BODY atrás da topbar;
   3) Notificações passa a enxergar o site sem blur duplicado.
   ------------------------------------------------------------------------ */
.op-notification-topbar-glass{
  position:fixed;
  pointer-events:none;
  box-sizing:border-box;
  z-index:11;

  border-width:var(--op-lg-border-width);
  border-style:solid;
  border-color:transparent;
  border-bottom-color:color-mix(in srgb,var(--text) 14%,transparent);

  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(255,255,255,calc(var(--op-lg-refraction-alpha) + .02)),
      transparent 44%
    ),
    radial-gradient(
      90% 70% at 100% 100%,
      color-mix(in srgb,var(--accent) calc(var(--op-lg-refraction) * 1%),transparent),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      rgba(var(--op-lg-base-rgb),var(--op-lg-opacity)),
      rgba(var(--op-lg-base-rgb),calc(var(--op-lg-opacity) * .52))
    );

  -webkit-backdrop-filter:
    blur(var(--op-lg-blur))
    saturate(var(--op-lg-saturation))
    contrast(var(--op-lg-contrast));
  backdrop-filter:
    blur(var(--op-lg-blur))
    saturate(var(--op-lg-saturation))
    contrast(var(--op-lg-contrast));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,var(--op-lg-inner-highlight)),
    inset 0 -1px 0 rgba(0,0,0,calc(var(--op-lg-inner-highlight) * .18)),
    0 var(--op-lg-shadow-y) var(--op-lg-shadow-blur)
      rgba(var(--op-lg-shadow-rgb),var(--op-lg-shadow-opacity));
}

html.op-notification-direct-backdrop .app-shell > .workspace > .topbar{
  background:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;

  border-top-color:transparent!important;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important;
}

/* ------------------------------------------------------------------------
   ÓPTICA EXPERIMENTAL
   Fica FORA do popup, logo não está presa ao Backdrop Root do próprio glass.
   O LAB ligado = óptica ativa. Não existe mais segundo interruptor.
   ------------------------------------------------------------------------ */
.op-pg-optical-shell{
  position:fixed;
  pointer-events:none;
  overflow:hidden;
  box-sizing:border-box;
  contain:paint;
  transform:translateZ(0);
}

.op-pg-optical-layer{
  position:absolute;
  pointer-events:none;
}

.op-pg-optical-lens{
  inset:4px;
  border-radius:inherit;
  opacity:var(--op-pg-lens-opacity);
  background:rgba(255,255,255,.001);

  -webkit-backdrop-filter:
    blur(calc(var(--op-pg-blur) * .10))
    saturate(calc(var(--op-pg-saturation) * 1.10))
    contrast(calc(var(--op-pg-contrast) * 1.06));
  backdrop-filter:
    blur(calc(var(--op-pg-blur) * .10))
    saturate(calc(var(--op-pg-saturation) * 1.10))
    contrast(calc(var(--op-pg-contrast) * 1.06));

  transform:scale(var(--op-pg-lens-scale));
  transform-origin:center;

  -webkit-mask-image:radial-gradient(
    ellipse at center,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.35) 56%,
    rgba(0,0,0,.08) 80%,
    transparent 100%
  );
  mask-image:radial-gradient(
    ellipse at center,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.35) 56%,
    rgba(0,0,0,.08) 80%,
    transparent 100%
  );
}

.op-pg-optical-mirror{
  left:-5%;
  width:110%;
  height:var(--op-pg-mirror-band);
  opacity:var(--op-pg-mirror-strength);
  background:rgba(255,255,255,.001);

  -webkit-backdrop-filter:
    blur(calc(var(--op-pg-blur) * .08))
    saturate(calc(var(--op-pg-saturation) * 1.22))
    contrast(calc(var(--op-pg-contrast) * 1.14));
  backdrop-filter:
    blur(calc(var(--op-pg-blur) * .08))
    saturate(calc(var(--op-pg-saturation) * 1.22))
    contrast(calc(var(--op-pg-contrast) * 1.14));

  will-change:transform;
}

.op-pg-optical-mirror.top{
  top:-1px;
  transform-origin:center top;
  transform:
    translateY(var(--op-pg-mirror-offset))
    scaleX(var(--op-pg-lens-scale))
    scaleY(calc(-1 * var(--op-pg-mirror-compression)))
    skewX(var(--op-pg-skew));

  -webkit-mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,.96),
    rgba(0,0,0,.72) 35%,
    rgba(0,0,0,.18) 76%,
    transparent
  );
  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,.96),
    rgba(0,0,0,.72) 35%,
    rgba(0,0,0,.18) 76%,
    transparent
  );
}

.op-pg-optical-mirror.bottom{
  bottom:-1px;
  transform-origin:center bottom;
  transform:
    translateY(calc(-1 * var(--op-pg-mirror-offset)))
    scaleX(var(--op-pg-lens-scale))
    scaleY(calc(-1 * var(--op-pg-mirror-compression)))
    skewX(calc(-1 * var(--op-pg-skew)));

  -webkit-mask-image:linear-gradient(
    to top,
    rgba(0,0,0,.90),
    rgba(0,0,0,.58) 38%,
    rgba(0,0,0,.10) 78%,
    transparent
  );
  mask-image:linear-gradient(
    to top,
    rgba(0,0,0,.90),
    rgba(0,0,0,.58) 38%,
    rgba(0,0,0,.10) 78%,
    transparent
  );
}

.op-pg-optical-shine{
  inset:0;
  border-radius:inherit;

  background:
    linear-gradient(
      118deg,
      rgba(255,255,255,calc(var(--op-pg-specular) * .96)) 0%,
      rgba(255,255,255,calc(var(--op-pg-specular) * .24)) 13%,
      transparent 31%,
      transparent 68%,
      rgba(255,255,255,calc(var(--op-pg-specular) * .12)) 88%,
      rgba(255,255,255,calc(var(--op-pg-specular) * .46)) 100%
    );

  box-shadow:
    inset var(--op-pg-chromatic) 0 0
      rgba(58,190,255,calc(var(--op-pg-edge) * .20)),
    inset calc(-1 * var(--op-pg-chromatic)) 0 0
      rgba(255,70,158,calc(var(--op-pg-edge) * .16)),
    inset 0 1px 0 rgba(255,255,255,var(--op-pg-edge)),
    inset 0 -1px 0 rgba(255,255,255,calc(var(--op-pg-edge) * .15));

  mix-blend-mode:screen;
}

/* ------------------------------------------------------------------------
   LAB ADMIN
   ------------------------------------------------------------------------ */
.op-pg20-lab{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.op-pg20-lab > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:48px;
  user-select:none;
}
.op-pg20-lab > summary::-webkit-details-marker{display:none}
.op-pg20-lab > summary > span{display:grid;gap:1px}
.op-pg20-lab > summary small{
  color:var(--accent);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}
.op-pg20-lab > summary strong{font-size:13px}
.op-pg20-lab > summary em{
  color:var(--muted);
  font-size:9px;
  font-style:normal;
  font-weight:850;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:999px;
}
.op-pg20-lab > summary::after{
  content:"⌄";
  color:var(--muted);
  font-size:18px;
}

.op-pg20-body{
  display:grid;
  gap:10px;
  padding-top:8px;
}

.op-pg20-note,
.op-pg20-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:color-mix(in srgb,var(--panel-solid) 38%,transparent);
}
.op-pg20-note > div,
.op-pg20-toggle > span{
  min-width:0;
  display:grid;
  gap:2px;
}
.op-pg20-note strong,
.op-pg20-toggle strong{font-size:11px}
.op-pg20-note small,
.op-pg20-toggle small{
  color:var(--muted);
  font-size:9px;
  line-height:1.35;
}

.op-pg20-switch{
  flex:0 0 auto;
  width:43px;
  height:25px;
  padding:3px;
  border:0;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--muted) 28%,transparent)!important;
}
.op-pg20-switch::before{
  content:"";
  display:block;
  width:19px;
  height:19px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 7px rgba(0,0,0,.24);
  transition:transform .18s ease;
}
.op-pg20-switch[aria-pressed="true"]{
  background:var(--accent)!important;
}
.op-pg20-switch[aria-pressed="true"]::before{
  transform:translateX(18px);
}

.op-pg20-lock{
  padding:8px 10px;
  border-radius:12px;
  color:var(--muted);
  background:color-mix(in srgb,var(--panel-solid) 32%,transparent);
  font-size:9px;
  line-height:1.4;
}
.op-pg20-lock strong{color:var(--text)}

.op-pg20-scopes{
  margin:0;
  padding:8px;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  border:1px solid var(--line);
  border-radius:13px;
}
.op-pg20-scopes legend{
  padding:0 5px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.op-pg20-scopes label{position:relative;cursor:pointer}
.op-pg20-scopes input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.op-pg20-scopes span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background:color-mix(in srgb,var(--panel-solid) 35%,transparent);
  font-size:9px;
  font-weight:850;
}
.op-pg20-scopes input:checked + span{
  color:var(--on-accent,#fff);
  border-color:var(--accent);
  background:var(--accent);
}

.op-pg20-section{
  display:grid;
  gap:7px;
}
.op-pg20-title{
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
  margin:2px 2px 0;
}

.op-pg20-control{
  display:grid;
  gap:5px;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--panel-solid) 30%,transparent);
}
.op-pg20-control-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.op-pg20-control-head > span{
  display:grid;
  gap:1px;
}
.op-pg20-control strong{font-size:10px}
.op-pg20-control small{color:var(--muted);font-size:8px}
.op-pg20-control output{
  color:var(--accent);
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
.op-pg20-control input[type="range"]{
  width:100%;
  accent-color:var(--accent);
}

.op-pg20-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1.25fr;
  gap:6px;
}
.op-pg20-actions button{
  min-height:36px;
  border:1px solid var(--line);
  border-radius:12px!important;
  color:var(--text);
  background:color-mix(in srgb,var(--panel-solid) 38%,transparent);
  font-size:9px;
  font-weight:850;
}
.op-pg20-actions button[data-pg20-copy]{
  color:var(--on-accent,#fff);
  border-color:var(--accent);
  background:var(--accent);
}
.op-pg20-status{
  min-height:13px;
  color:var(--muted);
  text-align:center;
  font-size:8px;
}

.op-appearance-popover:has(.op-pg20-lab[open]){
  max-height:calc(100dvh - 24px)!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

@media(max-width:820px){
  .op-pg20-actions{grid-template-columns:1fr 1fr}
  .op-pg20-actions button[data-pg20-copy]{grid-column:1/-1}
}


/* ========================================================================
   V75.21 HOTFIX — NOTIFICAÇÕES NÃO TOCAM MAIS NA TOPBAR
   ======================================================================== */

/*
 * V75.20 usava um "topbar bridge" enquanto Notificações estava aberta.
 * Isso foi removido. Mesmo que algum cache mantenha um nó antigo, ele some.
 */
.op-notification-topbar-glass{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/*
 * Nunca permita que o estado de Notificações desative/reconfigure o glass
 * original da Topbar. Estes valores são os do CORE V75.18 aprovado.
 */
html.op-notification-direct-backdrop .app-shell > .workspace > .topbar{
  border-width:var(--op-lg-border-width)!important;
  border-style:solid!important;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-top-color:transparent!important;
  border-bottom-color:color-mix(in srgb,var(--text) 14%,transparent)!important;

  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(255,255,255,calc(var(--op-lg-refraction-alpha) + .02)),
      transparent 44%
    ),
    radial-gradient(
      90% 70% at 100% 100%,
      color-mix(in srgb,var(--accent) calc(var(--op-lg-refraction) * 1%),transparent),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      rgba(var(--op-lg-base-rgb),var(--op-lg-opacity)),
      rgba(var(--op-lg-base-rgb),calc(var(--op-lg-opacity) * .52))
    )!important;

  -webkit-backdrop-filter:
    blur(var(--op-lg-blur))
    saturate(var(--op-lg-saturation))
    contrast(var(--op-lg-contrast))!important;
  backdrop-filter:
    blur(var(--op-lg-blur))
    saturate(var(--op-lg-saturation))
    contrast(var(--op-lg-contrast))!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,var(--op-lg-inner-highlight)),
    inset 0 -1px 0 rgba(0,0,0,calc(var(--op-lg-inner-highlight) * .18)),
    0 var(--op-lg-shadow-y) var(--op-lg-shadow-blur)
      rgba(var(--op-lg-shadow-rgb),var(--op-lg-shadow-opacity))!important;
}

/*
 * Notificações permanece no MESMO material dos demais popups.
 * Regra final com alta especificidade para vencer mobile-liquid-v67.css.
 */
html body .notification-popover,
html[data-theme="dark"] body .notification-popover,
html[data-accent-enabled="true"] body .notification-popover,
html[data-accent-enabled="true"][data-accent-tone] body .notification-popover{
  border-width:var(--op-pg-border-width)!important;
  border-style:solid!important;
  border-color:transparent!important;

  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(255,255,255,.12),
      transparent 44%
    ),
    radial-gradient(
      90% 70% at 100% 100%,
      color-mix(in srgb,var(--accent) 13%,transparent),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      rgba(var(--op-pg-base-rgb),var(--op-pg-opacity)),
      rgba(var(--op-pg-base-rgb),calc(var(--op-pg-opacity) * .52))
    )!important;

  -webkit-backdrop-filter:
    blur(var(--op-pg-blur))
    saturate(var(--op-pg-saturation))
    contrast(var(--op-pg-contrast))!important;
  backdrop-filter:
    blur(var(--op-pg-blur))
    saturate(var(--op-pg-saturation))
    contrast(var(--op-pg-contrast))!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,var(--op-pg-inner-highlight)),
    inset 0 -1px 0 rgba(0,0,0,calc(var(--op-pg-inner-highlight) * .18)),
    0 var(--op-pg-shadow-y) var(--op-pg-shadow-blur)
      rgba(var(--op-pg-shadow-rgb),var(--op-pg-shadow-opacity))!important;
}


/* ========================================================================
   V75.22 — NOTIFICAÇÕES = MESMO BACKDROP ROOT DE APARÊNCIA
   ======================================================================== */

/*
 * O portal fica no BODY. Ele só serve de sistema de coordenadas e para
 * manter compatibilidade com o fechamento por clique fora.
 */
.notification-portal-host{
  position:fixed!important;
  inset:0!important;
  z-index:100090!important;
  width:100vw!important;
  height:100dvh!important;
  pointer-events:none!important;
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/*
 * O próprio popup é o vidro.
 * Como agora é filho do BODY, usa o MESMO backdrop root de Aparência.
 */
.notification-portal-host > .notification-popover{
  position:fixed!important;
  top:0;
  left:0;
  right:auto!important;
  z-index:1!important;
  pointer-events:auto!important;

  width:min(410px,calc(100vw - 28px))!important;
  max-height:min(620px,75dvh)!important;

  /*
   * Repetição literal do material de Aparência/Perfil/Globo.
   * Sem bridge, sem segundo blur, sem composição da Topbar.
   */
  border-width:var(--op-pg-border-width)!important;
  border-style:solid!important;
  border-color:transparent!important;

  background:
    radial-gradient(
      120% 80% at 0% 0%,
      rgba(255,255,255,.12),
      transparent 44%
    ),
    radial-gradient(
      90% 70% at 100% 100%,
      color-mix(in srgb,var(--accent) 13%,transparent),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      rgba(var(--op-pg-base-rgb),var(--op-pg-opacity)),
      rgba(var(--op-pg-base-rgb),calc(var(--op-pg-opacity) * .52))
    )!important;

  -webkit-backdrop-filter:
    blur(var(--op-pg-blur))
    saturate(var(--op-pg-saturation))
    contrast(var(--op-pg-contrast))!important;
  backdrop-filter:
    blur(var(--op-pg-blur))
    saturate(var(--op-pg-saturation))
    contrast(var(--op-pg-contrast))!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,var(--op-pg-inner-highlight)),
    inset 0 -1px 0 rgba(0,0,0,calc(var(--op-pg-inner-highlight) * .18)),
    0 var(--op-pg-shadow-y) var(--op-pg-shadow-blur)
      rgba(var(--op-pg-shadow-rgb),var(--op-pg-shadow-opacity))!important;

  transform-origin:top right;
}

/* O host jamais ganha glass por :is() / seletores antigos. */
.notification-portal-host.notification-center{
  border:0!important;
  box-shadow:none!important;
}

/* Cabeçalho com as duas ações. */
.notification-header-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:4px 10px!important;
  margin-left:auto;
}

.notification-header-actions > button{
  min-height:30px!important;
  padding:0 4px!important;
  border:0!important;
  border-radius:8px!important;
  color:var(--accent)!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:10px!important;
  font-weight:850!important;
  white-space:nowrap;
}

.notification-header-actions > button:hover{
  background:color-mix(in srgb,var(--accent) 8%,transparent)!important;
}

.notification-header-actions > .notification-clear-read{
  color:#d65353!important;
}

html[data-theme="dark"] .notification-header-actions > .notification-clear-read{
  color:#ff8585!important;
}

/* Limpeza de qualquer solução antiga em cache. */
.op-notification-topbar-glass{
  display:none!important;
}
html.op-notification-direct-backdrop .app-shell > .workspace > .topbar{
  /* Não altera a topbar. A classe é removida pelo JS também. */
}

/* Mobile: usa quase toda a largura, sem sair da viewport. */
@media(max-width:560px){
  .notification-portal-host > .notification-popover{
    width:calc(100vw - 20px)!important;
    max-height:min(680px,calc(100dvh - 92px))!important;
  }

  .notification-header-actions{
    max-width:58%;
  }

  .notification-header-actions > button{
    font-size:9px!important;
  }
}

/* V75.49.2 — LAB congelado: mantém o motor/estado do vidro, oculta somente a UI administrativa. */
.op-appearance-popover .op-pg20-lab{
  display:none !important;
}