/* Scoped CSS frosted surfaces, promoted from the approved visual prototype.
 * No Glass-HQ/WebGPU dependency; theme.css supplies dark and accessibility overrides. */
.utility-bar {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 26px;
  padding-inline: 22px;
  background:
    radial-gradient(ellipse at 2% 0%, rgba(207, 236, 197, .68), transparent 55%),
    linear-gradient(125deg, rgba(255, 255, 255, .86), rgba(250, 253, 249, .60) 55%, rgba(229, 241, 229, .60));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.64),
    0 9px 28px rgba(30, 59, 43, .07), 0 1px 2px rgba(30, 59, 43, .08);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
}
.utility-bar .button-ghost {
  background: linear-gradient(145deg, rgba(255,255,255,.83), rgba(255,255,255,.29));
  border-color: rgba(255,255,255,.98);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(26,49,37,.09);
}
.utility-bar .button-ghost:hover {
  background: rgba(255,255,255,.94);
  border-color: rgba(22,112,78,.30);
}
.utility-bar .notification-bell[aria-expanded="true"] {
  background: linear-gradient(145deg, #edf9eb, #d9eddf);
  border-color: rgba(22,112,78,.26);
}
.notification-panel {
  padding: 21px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.97);
  background: linear-gradient(140deg, rgba(255,255,255,.92), rgba(239,247,239,.80));
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  backdrop-filter: blur(28px) saturate(130%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.72),
    0 24px 64px rgba(24,48,34,.16), 0 3px 12px rgba(24,48,34,.08);
}
.notification-panel::before {
  background: #f9fcf7;
  border-color: rgba(255,255,255,.95);
}
.notification-panel:focus-visible {
  outline: 2px solid rgba(22,112,78,.35);
  outline-offset: 3px;
}
.notification-panel .notification-row {
  border: 1px solid rgba(24,48,34,.09);
  border-radius: 15px;
  background: rgba(255,255,255,.83);
  margin-bottom: 8px;
}
.notification-panel .notification-row.unread {
  background: rgba(252,242,237,.95);
  border-left: 3px solid #ad4034;
}
.notification-panel .mini-button,
.notification-panel .icon-button {
  background: rgba(255,255,255,.85);
  border-color: rgba(30,56,42,.18);
  box-shadow: inset 0 1px 0 white;
}
.notification-panel .notification-section-title {
  margin-block: 14px 12px;
}
.selection-bar {
  border: 1px solid rgba(255,255,255,.98);
  border-radius: 23px;
  padding: 16px 18px 16px 23px;
  background:
    radial-gradient(ellipse at 0 0, rgba(223,244,211,.85), transparent 55%),
    linear-gradient(125deg, rgba(255,255,255,.86), rgba(231,244,233,.70));
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.72),
    0 12px 32px rgba(20,53,35,.12), 0 2px 4px rgba(20,53,35,.06);
}
.selection-bar strong { color: #182f25; }
.selection-bar small { color: #455c4e; }
.selection-bar .button-dark {
  background: #173d2c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 12px rgba(23,61,44,.16);
}
.selection-bar .button-dark:hover { background: #24543d; }
@media (max-width: 620px) {
  .utility-bar { padding-inline: 12px; border-radius: 20px; }
  .notification-panel { padding: 16px; border-radius: 22px; }
  .selection-bar { padding: 13px 14px; border-radius: 20px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .utility-bar, .notification-panel, .selection-bar { background: #f5f8f1; }
}
@media (prefers-reduced-transparency: reduce) {
  .utility-bar, .notification-panel, .selection-bar {
    background: #f5f8f1;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  .utility-bar, .notification-panel, .selection-bar {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}