:root{
  --qsN-bg:#ffffff;
  --qsN-text:#0f172a;
  --qsN-muted:#667085;
  --qsN-border:rgba(0, 51, 102, 0.10);
  --qsN-border-strong:rgba(0, 51, 102, 0.16);
  --qsN-primary:#0094ff;
  --qsN-primary-strong:#003366;
  --qsN-surface:#f7fbff;
  --qsN-surface-soft:#eef7ff;
  --qsN-shadow:0 18px 40px rgba(0, 24, 58, 0.16);
  --qsN-shadow-soft:0 10px 26px rgba(0, 24, 58, 0.10);
}

/* Overlay */
.qs-notif-overlay{
  position:fixed;
  inset:0;
  background:rgba(6, 24, 44, 0.34);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .20s ease;
  z-index:10060;
}
.qs-notif-overlay.open{
  opacity:1;
  pointer-events:auto;
}

body.qs-modal-open{ overflow:hidden; }

/* Panel */
.qs-notif-panel{
  position:fixed;
  top:64px;
  right:16px;
  width:clamp(340px, 29vw, 412px);
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - 88px);
  background:linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,251,255,0.98));
  border:1px solid var(--qsN-border);
  border-radius:22px;
  box-shadow:var(--qsN-shadow);
  overflow:hidden;
  opacity:0;
  transform:translateY(-8px) scale(.985);
  pointer-events:none;
  transition:opacity .20s ease, transform .20s ease;
  z-index:10061;
}
.qs-notif-panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:82px;
  background:linear-gradient(180deg, rgba(0,148,255,0.10), rgba(0,148,255,0));
  pointer-events:none;
}
.qs-notif-panel.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.qs-notif-panel[data-has-embed-close="1"] .qsN-fixed-close{
  display:none;
}

.qsN-fixed-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
}

.qsN-content{
  position:relative;
  height:100%;
}

/* States */
.qsN-loading,
.qsN-error{
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:28px 22px 24px;
  text-align:center;
  color:var(--qsN-text);
}

.qsN-loading-card,
.qsN-error-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(237,247,255,0.96));
  border:1px solid var(--qsN-border);
  box-shadow:var(--qsN-shadow-soft);
  color:var(--qsN-primary-strong);
}
.qsN-loading-card{
  gap:6px;
}
.qsN-loading-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(0,148,255,0.9), rgba(0,51,102,0.85));
  animation:qsN-bounce 1s infinite ease-in-out;
}
.qsN-loading-dot:nth-child(2){ animation-delay:.12s; }
.qsN-loading-dot:nth-child(3){ animation-delay:.24s; }

.qsN-loading-label{
  color:var(--qsN-muted);
  font-size:14px;
  font-weight:700;
}

.qsN-error-icon{
  font-weight:900;
  font-size:24px;
}
.qsN-error-title{
  font-weight:850;
  font-size:16px;
}
.qsN-error-text{
  color:var(--qsN-muted);
  font-weight:600;
  line-height:1.45;
  max-width:28ch;
}
.qsN-error-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.qsN-retry{
  appearance:none;
  border:1px solid var(--qsN-border);
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(237,247,255,0.96));
  color:var(--qsN-primary-strong);
  border-radius:12px;
  min-height:42px;
  padding:0 14px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  box-shadow:var(--qsN-shadow-soft);
}
.qsN-retry:hover{
  background:rgba(237,247,255,0.96);
}

/* Embed content */
.qsN-root{
  position:relative;
  z-index:1;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--qsN-text);
  display:flex;
  flex-direction:column;
  min-height:min(520px, calc(100vh - 88px));
}
.qsN-root--visitor .qsN-title-row .qsN-unread-badge{
  background:rgba(0, 51, 102, 0.06);
}

.qsN-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 12px;
}
.qsN-top-main{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.qsN-icon-bubble{
  width:44px;
  height:44px;
  border-radius:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(237,247,255,0.96));
  border:1px solid var(--qsN-border);
  box-shadow:var(--qsN-shadow-soft);
  color:var(--qsN-primary-strong);
  flex:0 0 auto;
}
.qsN-title-icon{
  width:21px;
  height:21px;
  display:block;
}
.qsN-heading{
  min-width:0;
}
.qsN-eyebrow{
  font-size:11px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--qsN-muted);
  font-weight:800;
  margin-bottom:4px;
}
.qsN-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.qsN-title{
  font-weight:900;
  font-size:18px;
  line-height:1.15;
  color:var(--qsN-primary-strong);
}
.qsN-unread-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(0, 51, 102, 0.05);
  border:1px solid rgba(0, 51, 102, 0.08);
  color:var(--qsN-muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.qsN-unread-badge.is-active{
  background:rgba(0, 148, 255, 0.12);
  border-color:rgba(0, 148, 255, 0.22);
  color:var(--qsN-primary-strong);
}
.qsN-sub{
  margin-top:6px;
  color:var(--qsN-muted);
  font-size:13px;
  line-height:1.4;
  font-weight:600;
}

.qsN-close{
  appearance:none;
  border:1px solid var(--qsN-border);
  background:rgba(255,255,255,0.94);
  color:var(--qsN-primary-strong);
  border-radius:12px;
  width:40px;
  height:40px;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(0, 24, 58, 0.10);
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.qsN-close:hover,
.qsN-close:focus-visible{
  background:rgba(237,247,255,0.98);
  border-color:var(--qsN-border-strong);
  transform:translateY(-1px);
  outline:none;
}

.qsN-actions{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:0 18px 14px;
  flex-wrap:wrap;
}
.qsN-actions .inline{
  margin:0;
}
.qsN-btn{
  appearance:none;
  border:1px solid var(--qsN-border);
  background:rgba(255,255,255,0.98);
  color:var(--qsN-primary-strong);
  border-radius:12px;
  min-height:42px;
  padding:0 14px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  box-shadow:0 8px 18px rgba(0, 24, 58, 0.06);
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.qsN-btn:hover,
.qsN-btn:focus-visible{
  background:rgba(237,247,255,0.98);
  border-color:var(--qsN-border-strong);
  transform:translateY(-1px);
  outline:none;
}
.qsN-btn--primary{
  background:linear-gradient(180deg, rgba(0,148,255,0.14), rgba(0,148,255,0.10));
  border-color:rgba(0, 148, 255, 0.26);
}
.qsN-btn--ghost{
  background:rgba(0, 51, 102, 0.04);
  box-shadow:none;
}


.qsN-tab-rail{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:0 18px 14px;
}
.qsN-tab-rail::before,
.qsN-tab-rail::after{
  content:"";
  position:absolute;
  top:0;
  bottom:14px;
  width:28px;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.qsN-tab-rail::before{
  left:52px;
  background:linear-gradient(90deg, rgba(247,251,255,0.98), rgba(247,251,255,0));
}
.qsN-tab-rail::after{
  right:52px;
  background:linear-gradient(270deg, rgba(247,251,255,0.98), rgba(247,251,255,0));
}
.qsN-tab-rail:not(.is-start)::before{ opacity:1; }
.qsN-tab-rail:not(.is-end)::after{ opacity:1; }

.qsN-tab-scroll{
  appearance:none;
  border:1px solid var(--qsN-border);
  background:rgba(255,255,255,0.98);
  color:var(--qsN-primary-strong);
  width:38px;
  height:38px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(0, 24, 58, 0.06);
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}
.qsN-tab-scroll svg{
  width:18px;
  height:18px;
  display:block;
}
.qsN-tab-scroll:hover,
.qsN-tab-scroll:focus-visible{
  background:rgba(237,247,255,0.98);
  border-color:var(--qsN-border-strong);
  transform:translateY(-1px);
  outline:none;
}
.qsN-tab-scroll[disabled]{
  opacity:.42;
  cursor:default;
  transform:none;
}
.qsN-tab-scroll[hidden]{
  display:none;
}

.qsN-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  min-width:0;
  padding:0 2px 2px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
}
.qsN-tabs::-webkit-scrollbar{ display:none; }
.qsN-tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--qsN-border);
  background:rgba(255,255,255,0.96);
  color:var(--qsN-primary-strong);
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
  text-decoration:none;
  scroll-snap-align:start;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.qsN-tab:hover,
.qsN-tab:focus-visible{
  background:rgba(237,247,255,0.98);
  border-color:var(--qsN-border-strong);
  transform:translateY(-1px);
  outline:none;
}
.qsN-tab.active{
  background:linear-gradient(180deg, rgba(0,148,255,0.14), rgba(0,148,255,0.08));
  border-color:rgba(0, 148, 255, 0.26);
  box-shadow:0 10px 18px rgba(0, 148, 255, 0.10);
}
.qsN-tab__label{
  display:inline-flex;
  align-items:center;
}
.qsN-tab__count{
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(0, 51, 102, 0.08);
  color:var(--qsN-primary-strong);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
}
.qsN-tab.active .qsN-tab__count{
  background:rgba(255,255,255,0.78);
}

.qsN-list{
  padding:0 18px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
  min-height:0;
  max-height:calc(100vh - 260px);
}

.qsN-item{
  position:relative;
  border:1px solid var(--qsN-border);
  border-radius:18px;
  padding:14px;
  display:grid;
  gap:12px;
  background:rgba(255,255,255,0.96);
  box-shadow:0 8px 18px rgba(0, 24, 58, 0.05);
}
.qsN-item::before{
  content:"";
  position:absolute;
  left:10px;
  top:14px;
  bottom:14px;
  width:4px;
  border-radius:999px;
  background:transparent;
}
.qsN-item.unread{
  border-color:rgba(0, 148, 255, 0.22);
  box-shadow:0 14px 26px rgba(0, 148, 255, 0.08);
}
.qsN-item.unread::before{
  background:linear-gradient(180deg, rgba(0,148,255,0.92), rgba(0,51,102,0.88));
}
.qsN-item.read{
  background:rgba(255,255,255,0.90);
}
.qsN-item-main{
  padding-left:10px;
  display:grid;
  gap:10px;
}
.qsN-copy{
  display:grid;
  gap:6px;
}
.qsN-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.qsN-pill{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--qsN-border);
  background:rgba(0, 51, 102, 0.04);
  color:var(--qsN-primary-strong);
  font-size:12px;
  font-weight:850;
}
.qsN-pill--orders{ background:rgba(0,148,255,0.10); }
.qsN-pill--payments{ background:rgba(34,197,94,0.10); }
.qsN-pill--system{ background:rgba(0,51,102,0.06); }
.qsN-pill--security{ background:rgba(245,158,11,0.14); }
.qsN-pill--marketplace{ background:rgba(168,85,247,0.12); }

.qsN-date{
  color:var(--qsN-muted);
  font-size:12px;
  font-weight:700;
}

.qsN-item-title{
  font-weight:900;
  font-size:15px;
  line-height:1.3;
  color:var(--qsN-primary-strong);
}
.qsN-body{
  color:#334155;
  font-size:13px;
  line-height:1.5;
  font-weight:500;
}

.qsN-item-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.qsN-done{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(0, 51, 102, 0.05);
  color:var(--qsN-muted);
  font-weight:800;
  font-size:13px;
}

.qsN-empty{
  border:1px dashed rgba(0, 51, 102, 0.16);
  border-radius:18px;
  padding:26px 18px;
  text-align:center;
  color:var(--qsN-muted);
  background:rgba(255,255,255,0.94);
  display:grid;
  gap:10px;
}
.qsN-empty__icon{
  width:52px;
  height:52px;
  margin:0 auto;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(237,247,255,0.96));
  border:1px solid var(--qsN-border);
  box-shadow:var(--qsN-shadow-soft);
  color:var(--qsN-primary-strong);
}
.qsN-empty__icon svg{
  width:22px;
  height:22px;
  display:block;
}
.qsN-empty__title{
  font-size:16px;
  font-weight:900;
  color:var(--qsN-primary-strong);
}
.qsN-empty__text{
  font-size:13px;
  line-height:1.5;
  font-weight:600;
}

/* Mobile drawer */
@media (max-width: 768px){
  .qs-notif-panel{
    top:0;
    right:0;
    bottom:0;
    width:min(420px, 100vw);
    max-width:100vw;
    max-height:100vh;
    height:100dvh;
    border-radius:28px 0 0 28px;
    border-right:0;
    transform:translateX(100%);
    opacity:1;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .qs-notif-panel::before{
    height:96px;
  }
  .qs-notif-panel.open{
    transform:translateX(0);
  }
  .qsN-root{
    min-height:100dvh;
  }
  .qsN-top{
    padding-top:calc(18px + env(safe-area-inset-top));
  }
  .qsN-list{
    max-height:none;
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 520px){
  .qsN-top,
  .qsN-actions,
  .qsN-tab-rail,
  .qsN-list{
    padding-left:14px;
    padding-right:14px;
  }
  .qsN-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .qsN-actions .inline,
  .qsN-actions .qsN-btn{
    width:100%;
  }
  .qsN-actions .inline .qsN-btn{
    width:100%;
  }
  .qsN-tab-scroll{
    width:34px;
    height:34px;
  }
  .qsN-tab{
    min-height:36px;
    padding:0 11px;
  }
  .qsN-item{
    padding:13px;
  }
  .qsN-item-main{
    padding-left:8px;
  }
}

@keyframes qsN-bounce{
  0%, 80%, 100%{ transform:translateY(0); opacity:.45; }
  40%{ transform:translateY(-4px); opacity:1; }
}


/* E5 micro-polish: modal header + action alignment */
.qsN-top{
  align-items:flex-start;
  gap:16px;
}
.qsN-top-main{
  flex:1 1 auto;
}
.qsN-heading{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.qsN-title-row{
  justify-content:flex-start;
}
.qsN-sub{
  max-width:34ch;
  text-align:left;
}

.qsN-close{
  flex:0 0 42px;
  min-width:42px;
  width:42px;
  height:42px;
  aspect-ratio:1 / 1;
  padding:0;
  border-radius:14px;
  align-self:flex-start;
  font-size:22px;
  font-weight:700;
  line-height:1;
}

.qsN-actions{
  align-items:flex-start;
  justify-content:space-between;
  gap:12px 14px;
  padding:2px 18px 14px;
}
.qsN-actions-copy{
  min-width:0;
  flex:1 1 220px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.qsN-actions-title{
  color:var(--qsN-primary-strong);
  font-size:14px;
  font-weight:850;
  line-height:1.25;
}
.qsN-actions-meta{
  color:var(--qsN-muted);
  font-size:12px;
  line-height:1.35;
  font-weight:600;
  text-align:left;
}
.qsN-actions-controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:10px;
  flex:0 0 auto;
}

@media (max-width: 640px){
  .qsN-top{
    gap:12px;
  }
  .qsN-close{
    flex-basis:40px;
    min-width:40px;
    width:40px;
    height:40px;
  }
  .qsN-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .qsN-actions-controls{
    width:100%;
    justify-content:stretch;
  }
  .qsN-actions-controls .inline,
  .qsN-actions-controls .qsN-btn{
    flex:1 1 auto;
  }
}


/* Embed / Drawer finish */
.qs-notif-panel .qsN-root{
  height:100%;
  min-height:0;
}
.qs-notif-panel .qsN-list{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
}

.qsN-embed-context{
  margin:0 18px 14px;
  padding:15px 16px;
  border-radius:18px;
  border:1px solid var(--qsN-border);
  background:linear-gradient(180deg, rgba(245,250,255,0.98), rgba(255,255,255,0.96));
  box-shadow:var(--qsN-shadow-soft);
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  align-items:start;
}
.qsN-embed-context__main{
  min-width:0;
  display:grid;
  gap:6px;
}
.qsN-embed-context__eyebrow{
  font-size:11px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--qsN-muted);
  font-weight:800;
}
.qsN-embed-context__title{
  font-size:20px;
  line-height:1.08;
  font-weight:900;
  color:var(--qsN-primary-strong);
}
.qsN-embed-context__text{
  color:var(--qsN-muted);
  font-size:13px;
  line-height:1.45;
  font-weight:600;
}
.qsN-embed-context__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.qsN-embed-context__pill,
.qsN-action-scope{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(0, 51, 102, 0.05);
  border:1px solid rgba(0, 51, 102, 0.08);
  color:var(--qsN-primary-strong);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.qsN-embed-context__pill--status.is-active{
  background:rgba(0, 148, 255, 0.12);
  border-color:rgba(0, 148, 255, 0.22);
}

.qsN-actions-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.qsN-actions--embed{
  margin:0 18px 14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid var(--qsN-border);
  background:rgba(255,255,255,0.96);
  box-shadow:var(--qsN-shadow-soft);
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  align-items:start;
}
.qsN-actions-copy--embed{
  min-width:0;
  display:grid;
  gap:6px;
}
.qsN-actions-controls--embed{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.qsN-actions-controls--embed .inline{
  margin:0;
}
.qsN-actions-controls--embed .qsN-btn{
  min-width:154px;
}

@media (max-width: 700px){
  .qsN-top{
    padding:16px 16px 10px;
  }
  .qsN-top-main{
    gap:10px;
  }
  .qsN-embed-context,
  .qsN-actions--embed{
    margin:0 16px 12px;
    padding:14px;
  }
  .qsN-embed-context,
  .qsN-actions--embed{
    grid-template-columns:1fr;
  }
  .qsN-embed-context__meta,
  .qsN-actions-controls--embed{
    justify-content:flex-start;
  }
  .qsN-actions-controls--embed .qsN-btn{
    min-width:0;
    flex:1 1 100%;
  }
  .qsN-tab-rail{
    padding:0 16px 12px;
  }
  .qsN-list{
    padding:0 16px 16px;
  }
}

@media (max-width: 420px){
  .qsN-title-row{
    gap:8px;
  }
  .qsN-embed-context__title{
    font-size:18px;
  }
  .qsN-sub,
  .qsN-embed-context__text,
  .qsN-actions-meta{
    font-size:12px;
  }
}



/* G3 repair: calmer rounded drawer hierarchy */
.qs-notif-panel{
  border-radius:28px;
}
.qs-notif-panel::before{
  height:96px;
}
.qsN-content{
  padding:10px;
}
.qs-notif-panel .qsN-root{
  min-height:0;
  height:100%;
  gap:0;
}
.qsN-top{
  padding:18px 18px 10px;
  gap:14px;
}
.qsN-top-main{
  gap:12px;
}
.qsN-heading{
  display:grid;
  gap:4px;
}
.qsN-title{
  font-size:17px;
}
.qsN-sub{
  color:var(--qsN-muted);
  font-size:14px;
  font-weight:700;
  line-height:1.35;
}
.qsN-close{
  background:rgba(255,255,255,0.96);
  box-shadow:var(--qsN-shadow-soft);
}

.qsN-embed-hero{
  margin:0 18px 12px;
  padding:16px;
  border-radius:24px;
  border:1px solid var(--qsN-border);
  background:linear-gradient(180deg, rgba(247,251,255,0.98), rgba(255,255,255,0.98));
  box-shadow:var(--qsN-shadow-soft);
  display:grid;
  gap:14px;
}
.qsN-embed-hero__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:start;
}
.qsN-embed-hero__main{
  min-width:0;
  display:grid;
  gap:6px;
}
.qsN-embed-hero__eyebrow{
  font-size:11px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--qsN-muted);
  font-weight:900;
}
.qsN-embed-hero__title{
  font-size:28px;
  line-height:1.02;
  font-weight:900;
  color:var(--qsN-primary-strong);
}
.qsN-embed-hero__text{
  color:var(--qsN-muted);
  font-size:13px;
  line-height:1.5;
  font-weight:600;
}
.qsN-embed-hero__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.qsN-embed-hero__actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding-top:12px;
  border-top:1px solid rgba(0, 51, 102, 0.08);
}
.qsN-actions-copy--embed{
  display:grid;
  gap:5px;
}
.qsN-actions-copy--embed .qsN-actions-title{
  font-size:15px;
}
.qsN-actions-copy--embed .qsN-actions-meta{
  max-width:30ch;
}
.qsN-actions-controls--embed{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.qsN-actions-controls--embed .qsN-btn{
  min-width:144px;
}
.qsN-tab-rail{
  padding-top:2px;
}
.qs-notif-panel .qsN-tab-rail{
  padding-left:18px;
  padding-right:18px;
}
.qs-notif-panel .qsN-list{
  padding-top:2px;
  padding-bottom:18px;
}
.qs-notif-panel .qsN-empty{
  border-radius:22px;
  padding:28px 18px;
}

@media (max-width: 768px){
  .qs-notif-panel{
    border-radius:28px 0 0 28px;
  }
  .qsN-content{
    padding:8px 8px 0;
  }
  .qsN-top{
    padding-top:calc(18px + env(safe-area-inset-top));
  }
  .qsN-embed-hero{
    margin:0 10px 12px;
    padding:15px 14px;
    border-radius:22px;
  }
  .qsN-embed-hero__head,
  .qsN-embed-hero__actions{
    grid-template-columns:1fr;
  }
  .qsN-embed-hero__meta,
  .qsN-actions-controls--embed{
    justify-content:flex-start;
  }
  .qsN-actions-controls--embed .inline,
  .qsN-actions-controls--embed .qsN-btn{
    width:100%;
    min-width:0;
  }
  .qs-notif-panel .qsN-tab-rail{
    padding-left:10px;
    padding-right:10px;
  }
  .qs-notif-panel .qsN-list{
    padding:2px 10px calc(16px + env(safe-area-inset-bottom));
  }
}


/* B1 finish: unified overview + filter cards */
.qs-notif-panel{
  width:clamp(360px, 30vw, 440px);
  max-height:calc(100vh - 72px);
}

.qsN-top{
  padding:18px 18px 10px;
}

.qsN-top .qsN-unread-badge{
  min-height:30px;
  padding:0 12px;
}

.qsN-overview{
  border:1px solid var(--qsN-border);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(247,251,255,0.98), rgba(255,255,255,0.98));
  box-shadow:var(--qsN-shadow-soft);
}

.qsN-overview__stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.qsN-overview-stat{
  min-width:0;
  border:1px solid rgba(0, 51, 102, 0.08);
  border-radius:18px;
  background:rgba(255,255,255,0.88);
  padding:12px 13px;
  display:grid;
  gap:3px;
}

.qsN-overview-stat__label{
  font-size:11px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--qsN-muted);
  font-weight:900;
}

.qsN-overview-stat__value{
  font-size:18px;
  line-height:1.1;
  color:var(--qsN-primary-strong);
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.qsN-overview-stat__sub{
  font-size:12px;
  line-height:1.45;
  color:var(--qsN-muted);
  font-weight:700;
}

.qsN-overview__body{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  align-items:center;
  padding-top:14px;
  border-top:1px solid rgba(0, 51, 102, 0.08);
}

.qsN-overview__copy{
  min-width:0;
  display:grid;
  gap:5px;
}

.qsN-overview__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.qsN-filter-card{
  border:1px solid var(--qsN-border);
  border-radius:22px;
  background:rgba(255,255,255,0.96);
  box-shadow:var(--qsN-shadow-soft);
}

.qsN-filter-card__head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:14px;
  align-items:start;
}

.qsN-filter-card__copy{
  min-width:0;
  display:grid;
  gap:6px;
}

.qsN-filter-card__eyebrow{
  font-size:11px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--qsN-muted);
  font-weight:900;
}

.qsN-filter-card__title{
  font-size:22px;
  line-height:1.05;
  font-weight:900;
  color:var(--qsN-primary-strong);
}

.qsN-filter-card__text{
  color:var(--qsN-muted);
  font-size:13px;
  line-height:1.5;
  font-weight:600;
}

.qsN-filter-card__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.qsN-filter-summary{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-top:14px;
  margin-top:14px;
  border-top:1px solid rgba(0, 51, 102, 0.08);
}

.qsN-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(0, 51, 102, 0.08);
  background:rgba(0, 51, 102, 0.04);
  color:var(--qsN-primary-strong);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.qsN-filter-chip strong{
  font-size:11px;
  font-weight:900;
}

.qsN-filter-chip.is-active{
  background:rgba(0, 148, 255, 0.12);
  border-color:rgba(0, 148, 255, 0.20);
}

.qsN-quicklinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.qsN-quicklinks__label{
  font-size:12px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--qsN-muted);
  font-weight:900;
}

.qsN-quicklink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(0, 51, 102, 0.10);
  background:rgba(255,255,255,0.96);
  color:var(--qsN-primary-strong);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.qsN-quicklink:hover,
.qsN-quicklink:focus-visible{
  background:rgba(237,247,255,0.98);
  border-color:var(--qsN-border-strong);
  transform:translateY(-1px);
  outline:none;
}

.qsN-empty{
  min-height:220px;
  align-content:center;
}

.qsN-empty__text{
  max-width:34ch;
  margin:0 auto;
}

.qsN-overview--embed{
  margin:0 18px 12px;
  padding:16px;
  display:grid;
  gap:14px;
}

.qsN-filter-card--embed{
  margin:0 18px 12px;
  padding:15px 16px;
}

.qsN-actions-controls--embed .qsN-btn{
  min-width:148px;
}

.qs-notif-panel .qsN-tab-rail{
  padding-top:2px;
}

.qs-notif-panel .qsN-list{
  padding-top:2px;
  padding-bottom:18px;
}

.qs-notif-panel .qsN-item{
  border-radius:20px;
}

@media (max-width: 768px){
  .qs-notif-panel{
    width:min(430px, 100vw);
    max-height:100vh;
  }

  .qsN-overview--embed{
    margin:0 10px 12px;
    padding:15px 14px;
    border-radius:22px;
  }

  .qsN-filter-card--embed{
    margin:0 10px 12px;
    padding:14px;
  }

  .qs-notif-panel .qsN-tab-rail{
    padding-left:10px;
    padding-right:10px;
  }

  .qs-notif-panel .qsN-list{
    padding:2px 10px calc(16px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 700px){
  .qsN-overview__body,
  .qsN-filter-card__head{
    grid-template-columns:1fr;
  }

  .qsN-overview__actions,
  .qsN-filter-card__meta{
    justify-content:flex-start;
  }

  .qsN-actions-controls--embed .inline,
  .qsN-actions-controls--embed .qsN-btn{
    width:100%;
    min-width:0;
  }
}

@media (max-width: 420px){
  .qsN-title{
    font-size:16px;
  }

  .qsN-overview__stats{
    grid-template-columns:1fr;
  }

  .qsN-overview-stat{
    padding:11px 12px;
  }

  .qsN-filter-card__title{
    font-size:18px;
  }

  .qsN-filter-chip{
    min-height:30px;
  }
}


/* C1 final repair: compact modal + real small-screen sheet */
.qs-notif-panel{
  width:clamp(320px, 25vw, 392px);
  max-width:calc(100vw - 28px);
  max-height:min(640px, calc(100vh - 92px));
  border-radius:24px;
}

.qsN-content{
  height:100%;
  overflow:auto;
  overscroll-behavior:contain;
}

.qsN-root--embed{
  min-height:0;
}

.qsN-top{
  padding:16px 16px 10px;
  gap:12px;
}

.qsN-top-main{
  gap:10px;
}

.qsN-icon-bubble{
  width:42px;
  height:42px;
  border-radius:14px;
}

.qsN-eyebrow{
  margin-bottom:2px;
}

.qsN-title{
  font-size:17px;
}

.qsN-sub{
  max-width:30ch;
  font-size:13px;
}

.qsN-close{
  position:relative;
  width:42px;
  min-width:42px;
  height:42px;
  padding:0;
  font-size:0;
  line-height:0;
  display:grid;
  place-items:center;
}
.qsN-close::before{
  content:"×";
  display:block;
  font-size:24px;
  line-height:1;
  font-weight:700;
  transform:translateY(1px);
}

.qsN-overview--embed{
  margin:0 16px 10px;
  padding:14px;
  border-radius:20px;
  gap:12px;
}

.qsN-overview__stats--embed{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:9px;
}

.qsN-overview--embed .qsN-overview-stat{
  padding:11px 12px;
  gap:2px;
}

.qsN-overview--embed .qsN-overview-stat__value{
  font-size:17px;
}

.qsN-overview__body--embed{
  gap:10px;
  align-items:flex-start;
}

.qsN-actions-title{
  font-size:13px;
}

.qsN-actions-meta{
  font-size:12px;
  line-height:1.45;
}

.qsN-actions-controls--embed{
  width:100%;
}
.qsN-actions-controls--embed .inline{
  flex:1 1 0;
}
.qsN-actions-controls--embed .qsN-btn{
  width:100%;
  min-width:0;
}

.qs-notif-panel .qsN-tab-rail{
  padding:0 16px 10px;
}
.qs-notif-panel .qsN-tab-rail::before{
  left:48px;
}
.qs-notif-panel .qsN-tab-rail::after{
  right:48px;
}
.qs-notif-panel .qsN-list{
  padding:0 16px 16px;
  max-height:none;
}
.qs-notif-panel .qsN-item{
  border-radius:18px;
  padding:13px;
  gap:10px;
}
.qs-notif-panel .qsN-item-main{
  gap:8px;
}
.qs-notif-panel .qsN-empty{
  min-height:170px;
  padding:20px 16px;
  gap:8px;
}
.qs-notif-panel .qsN-empty__text{
  max-width:28ch;
}

.qsN-fixed-close{
  top:12px;
  right:12px;
}

@media (max-width: 768px){
  .qs-notif-panel{
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0;
    width:100vw;
    max-width:100vw;
    height:auto;
    max-height:min(78dvh, 640px);
    border-radius:26px 26px 0 0;
    border-right:1px solid var(--qsN-border);
    border-left:1px solid var(--qsN-border);
    border-bottom:0;
    transform:translateY(100%);
    padding-bottom:env(safe-area-inset-bottom);
  }

  .qs-notif-panel::before{
    height:74px;
  }

  .qs-notif-panel.open{
    transform:translateY(0);
  }

  .qsN-root--embed{
    min-height:0;
  }

  .qsN-top{
    padding:14px 14px 10px;
    padding-top:max(14px, calc(12px + env(safe-area-inset-top)));
  }

  .qsN-overview--embed{
    margin:0 14px 10px;
    padding:13px;
  }

  .qsN-overview__stats--embed{
    grid-template-columns:1fr 1fr;
  }

  .qsN-overview__body--embed{
    grid-template-columns:1fr;
  }

  .qsN-actions-controls--embed{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .qs-notif-panel .qsN-tab-rail{
    padding:0 14px 10px;
  }

  .qs-notif-panel .qsN-list{
    padding:0 14px calc(14px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 520px){
  .qs-notif-panel{
    max-height:min(74dvh, 560px);
    border-radius:24px 24px 0 0;
  }

  .qsN-top{
    gap:10px;
  }

  .qsN-title{
    font-size:16px;
  }

  .qsN-overview__stats--embed{
    grid-template-columns:1fr;
  }

  .qsN-actions-controls--embed{
    grid-template-columns:1fr;
  }

  .qs-notif-panel .qsN-tab-rail{
    padding:0 10px 9px;
    gap:8px;
  }

  .qs-notif-panel .qsN-list{
    padding:0 10px calc(12px + env(safe-area-inset-bottom));
  }

  .qsN-tab-scroll{
    width:34px;
    height:34px;
  }

  .qsN-tab{
    min-height:36px;
  }

  .qs-notif-panel .qsN-empty{
    min-height:150px;
    padding:18px 14px;
  }
}


/* D1 final repair: compact notifications modal with real small-screen sheet */
.qs-notif-panel{
  width:min(380px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  max-height:min(72vh, 620px);
  border-radius:24px;
}
.qs-notif-panel::before{
  height:72px;
}
.qsN-content{
  height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.qs-notif-panel .qsN-root--embed{
  display:flex;
  flex-direction:column;
  min-height:0;
  height:100%;
}
.qs-notif-panel .qsN-loading,
.qs-notif-panel .qsN-error{
  min-height:180px;
  padding:22px 18px;
}

.qs-notif-panel .qsN-top{
  padding:16px 24px 10px 16px;
  align-items:flex-start;
  gap:12px;
}
.qs-notif-panel .qsN-top-main{
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}
.qs-notif-panel .qsN-icon-bubble{
  width:42px;
  height:42px;
  border-radius:14px;
}
.qs-notif-panel .qsN-heading{
  min-width:0;
}
.qs-notif-panel .qsN-eyebrow{
  margin-bottom:2px;
}
.qs-notif-panel .qsN-title{
  font-size:17px;
  line-height:1.12;
}
.qs-notif-panel .qsN-sub{
  margin-top:2px;
  max-width:30ch;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
}
.qs-notif-panel .qsN-title-row{
  gap:8px;
}

.qs-notif-panel .qsN-close,
.qs-notif-panel .qsN-fixed-close{
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:0;
  line-height:0;
}
.qs-notif-panel .qsN-close::before,
.qs-notif-panel .qsN-fixed-close::before{
  content:"×";
  display:block;
  font-size:22px;
  line-height:1;
  font-weight:700;
  transform:none;
}
.qs-notif-panel .qsN-fixed-close{
  top:12px;
  right:12px;
}

.qsN-embed-bar{
  margin:0 16px 10px;
  padding:12px 14px;
  border:1px solid rgba(0, 51, 102, 0.10);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(247,251,255,0.98), rgba(255,255,255,0.98));
  box-shadow:0 10px 22px rgba(0, 24, 58, 0.07);
  display:grid;
  gap:10px;
}
.qsN-embed-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.qsN-embed-chip{
  min-width:0;
  border:1px solid rgba(0, 51, 102, 0.08);
  border-radius:16px;
  background:rgba(255,255,255,0.90);
  padding:10px 12px;
  display:grid;
  gap:3px;
}
.qsN-embed-chip__label{
  font-size:11px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--qsN-muted);
  font-weight:900;
}
.qsN-embed-chip__value{
  font-size:17px;
  line-height:1.1;
  font-weight:900;
  color:var(--qsN-primary-strong);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.qsN-embed-bar__sub{
  color:var(--qsN-muted);
  font-size:12px;
  line-height:1.4;
  font-weight:700;
}
.qsN-embed-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.qsN-embed-actions .inline{
  margin:0;
}
.qsN-embed-actions .qsN-btn{
  width:100%;
  min-width:0;
  min-height:39px;
  box-sizing:border-box;
}
.qsN-embed-actions .inline .qsN-btn{
  width:100%;
}

.qs-notif-panel .qsN-tab-rail{
  padding:0 16px 8px;
  gap:8px;
}
.qs-notif-panel .qsN-tab-rail::before{
  left:44px;
  bottom:8px;
}
.qs-notif-panel .qsN-tab-rail::after{
  right:44px;
  bottom:8px;
}
.qs-notif-panel .qsN-tab-scroll{
  width:34px;
  height:34px;
}
.qs-notif-panel .qsN-tab{
  min-height:34px;
  padding:0 11px;
  font-size:12px;
}
.qs-notif-panel .qsN-tab__count{
  min-width:18px;
  height:18px;
  font-size:11px;
}

.qs-notif-panel .qsN-list{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  padding:0 16px 16px;
  gap:10px;
  overflow:auto;
  overscroll-behavior:contain;
}
.qs-notif-panel .qsN-item{
  border-radius:16px;
  padding:12px;
  gap:10px;
}
.qs-notif-panel .qsN-item::before{
  left:8px;
  top:12px;
  bottom:12px;
}
.qs-notif-panel .qsN-item-main{
  padding-left:8px;
  gap:8px;
}
.qs-notif-panel .qsN-copy{
  gap:5px;
}
.qs-notif-panel .qsN-item-title{
  font-size:14px;
  line-height:1.35;
}
.qs-notif-panel .qsN-body,
.qs-notif-panel .qsN-date{
  font-size:12px;
  line-height:1.4;
}
.qs-notif-panel .qsN-item-actions{
  gap:8px;
  justify-content:stretch;
}
.qs-notif-panel .qsN-item-actions .inline,
.qs-notif-panel .qsN-item-actions .qsN-btn,
.qs-notif-panel .qsN-item-actions .qsN-done{
  flex:1 1 0;
}
.qs-notif-panel .qsN-item-actions .inline .qsN-btn{
  width:100%;
}
.qs-notif-panel .qsN-item-actions .qsN-btn,
.qs-notif-panel .qsN-item-actions .qsN-done{
  min-height:38px;
}
.qs-notif-panel .qsN-empty{
  min-height:132px;
  padding:18px 14px;
  gap:8px;
  border-radius:18px;
}
.qs-notif-panel .qsN-empty__icon{
  width:46px;
  height:46px;
  border-radius:14px;
}
.qs-notif-panel .qsN-empty__icon svg{
  width:20px;
  height:20px;
}
.qs-notif-panel .qsN-empty__title{
  font-size:15px;
}
.qs-notif-panel .qsN-empty__text{
  font-size:12px;
  line-height:1.45;
  max-width:28ch;
  margin:0 auto;
}

@media (max-width: 768px){
  .qs-notif-panel{
    left:8px !important;
    right:8px !important;
    top:auto !important;
    bottom:8px;
    width:auto;
    max-width:none;
    max-height:min(68dvh, 560px);
    border-radius:24px;
    border:1px solid var(--qsN-border);
    border-bottom:1px solid var(--qsN-border);
    transform:translateY(calc(100% + 18px));
    padding-bottom:max(8px, env(safe-area-inset-bottom));
  }
  .qs-notif-panel::before{
    height:64px;
  }
  .qs-notif-panel.open{
    transform:translateY(0);
  }
  .qs-notif-panel .qsN-top{
    padding:14px 14px 8px;
  }
  .qsN-embed-bar{
    margin:0 14px 8px;
    padding:11px 12px;
  }
  .qs-notif-panel .qsN-tab-rail{
    padding:0 14px 8px;
  }
  .qs-notif-panel .qsN-list{
    padding:0 14px calc(14px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 540px){
  .qs-notif-panel{
    max-height:min(64dvh, 520px);
    border-radius:22px;
  }
  .qs-notif-panel .qsN-title{
    font-size:16px;
  }
  .qs-notif-panel .qsN-sub{
    max-width:none;
  }
  .qsN-embed-meta{
    grid-template-columns:1fr 1fr;
  }
  .qsN-embed-actions{
    grid-template-columns:1fr;
  }
  .qs-notif-panel .qsN-tab-rail{
    padding:0 10px 8px;
    gap:6px;
  }
  .qs-notif-panel .qsN-tab-scroll{
    width:30px;
    height:30px;
  }
  .qs-notif-panel .qsN-tab{
    min-height:32px;
    padding:0 10px;
    font-size:11px;
  }
  .qs-notif-panel .qsN-list{
    padding:0 10px calc(12px + env(safe-area-inset-bottom));
  }
  .qs-notif-panel .qsN-item-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .qs-notif-panel .qsN-item-actions .inline,
  .qs-notif-panel .qsN-item-actions .qsN-btn,
  .qs-notif-panel .qsN-item-actions .qsN-done{
    width:100%;
  }
}

@media (max-width: 420px){
  .qs-notif-panel{
    left:6px !important;
    right:6px !important;
    bottom:6px;
    max-height:min(62dvh, 500px);
  }
  .qsN-embed-meta{
    grid-template-columns:1fr;
  }
  .qsN-embed-bar{
    gap:8px;
  }
  .qs-notif-panel .qsN-top{
    padding:13px 12px 8px;
  }
  .qs-notif-panel .qsN-tab-rail{
    padding:0 8px 8px;
  }
  .qs-notif-panel .qsN-list{
    padding:0 8px calc(10px + env(safe-area-inset-bottom));
  }
}


/* Milestone 3: robustes Close-Icon für Notification-Modal */
.qsN-close::before,
.qsN-fixed-close::before{
  content:none !important;
}

.qsN-close,
.qsN-fixed-close{
  overflow:hidden;
}

.qsN-close .qsN-close-icon,
.qsN-fixed-close .qsN-close-icon{
  width:16px;
  height:16px;
  display:block;
  flex:0 0 16px;
  color:currentColor;
  pointer-events:none;
}

.qsN-close .qsN-close-icon svg,
.qsN-fixed-close .qsN-close-icon svg{
  width:100%;
  height:100%;
  display:block;
}


/* Milestone 1 – Notification drawer: saubere Badge-, Scroll- und Card-Action-Logik */
.qs-notif-panel{
  display:flex;
  flex-direction:column;
}

.qs-notif-panel .qsN-content{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden !important;
}

.qs-notif-panel .qsN-root,
.qs-notif-panel .qsN-root--embed{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  height:100%;
  overflow:hidden;
}

.qs-notif-panel .qsN-top,
.qs-notif-panel .qsN-embed-bar,
.qs-notif-panel .qsN-tab-rail{
  flex:0 0 auto;
}

.qs-notif-panel .qsN-list{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:0 16px 24px;
  scroll-padding-bottom:20px;
}

.qs-notif-panel .qsN-list::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.qs-notif-panel .qsN-list::after{
  content:"";
  display:block;
  flex:0 0 auto;
  min-height:14px;
  height:14px;
}

.qs-notif-panel .qsN-item{
  padding:14px 14px 14px 16px;
}

.qs-notif-panel .qsN-item-main{
  padding-left:10px;
}

.qs-notif-panel .qsN-item-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  align-items:stretch;
  justify-content:stretch;
  padding-left:10px;
}

.qs-notif-panel .qsN-item-actions .inline{
  display:block;
  margin:0;
}

.qs-notif-panel .qsN-item-actions .inline .qsN-btn,
.qs-notif-panel .qsN-item-actions > .qsN-btn,
.qs-notif-panel .qsN-item-actions > .qsN-done{
  width:100%;
  min-width:0;
}

.qs-notif-panel .qsN-item-actions .qsN-btn,
.qs-notif-panel .qsN-item-actions .qsN-done{
  min-height:40px;
}

.qs-notif-panel .qsN-unread-badge{
  min-height:30px;
  padding:0 11px;
  border-color:rgba(0, 148, 255, 0.18);
}

@media (max-width: 768px){
  .qs-notif-panel .qsN-top{
    padding:14px 14px 8px;
  }

  .qs-notif-panel .qsN-list{
    padding:0 14px calc(24px + env(safe-area-inset-bottom));
  }

  .qs-notif-panel .qsN-list::after{
    min-height:16px;
    height:16px;
  }
}

@media (max-width: 540px){
  .qs-notif-panel .qsN-item-actions{
    grid-template-columns:1fr;
  }

  .qs-notif-panel .qsN-list{
    padding:0 10px calc(20px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px){
  .qs-notif-panel .qsN-list{
    padding:0 8px calc(18px + env(safe-area-inset-bottom));
  }
}


/* --- Milestone: Notifications vereinheitlichen --- */
.qsN-tab-rail{
  overflow:visible;
  padding-top:4px;
  padding-bottom:16px;
}
.qsN-tab-rail::before,
.qsN-tab-rail::after{
  top:4px;
  bottom:16px;
}
.qsN-tabs{
  padding:4px 3px 4px;
  overflow-y:visible;
}
.qsN-tab{
  min-height:40px;
  padding:0 14px;
  line-height:1;
  border-radius:999px;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.qsN-tab__label{
  line-height:1;
}
.qsN-tab__count{
  min-width:22px;
  height:22px;
  padding:0 7px;
  line-height:1;
  border-radius:999px;
  border:1px solid transparent;
  background:rgba(0, 51, 102, 0.06);
  box-shadow:none;
}
.qsN-tab.active{
  background:linear-gradient(180deg, rgba(0,148,255,0.16), rgba(0,148,255,0.10));
  border-color:rgba(0, 148, 255, 0.28);
  box-shadow:0 12px 22px rgba(0, 148, 255, 0.12);
}
.qsN-tab.active .qsN-tab__count{
  background:rgba(255,255,255,0.90);
  border-color:rgba(0, 148, 255, 0.18);
}
.qsN-item.read{
  border-color:rgba(0, 51, 102, 0.08);
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,249,255,0.94));
  box-shadow:0 10px 18px rgba(0, 24, 58, 0.04);
}
.qsN-item.read::before{
  background:linear-gradient(180deg, rgba(111, 149, 197, 0.55), rgba(152, 179, 213, 0.40));
}
.qsN-item.read .qsN-item-title{
  color:#234a74;
}
.qsN-item.read .qsN-body{
  color:#51657f;
}
.qsN-item.read .qsN-btn--ghost{
  background:rgba(0, 51, 102, 0.035);
  border-color:rgba(0, 51, 102, 0.10);
  box-shadow:none;
}
.qsN-item-actions{
  gap:10px;
}
.qsN-item-actions.is-read{
  align-items:center;
}
.qsN-done{
  min-height:40px;
  padding:0 14px;
  border:1px solid rgba(0, 51, 102, 0.10);
  background:rgba(0, 51, 102, 0.045);
  color:#37506e;
  font-weight:850;
  white-space:nowrap;
  box-shadow:none;
}
@media (max-width: 520px){
  .qsN-tab-rail{
    padding-top:4px;
    padding-bottom:16px;
  }
  .qsN-tab-rail::before,
  .qsN-tab-rail::after{
    top:4px;
    bottom:16px;
  }
}


/* -------------------------------------------------- */
/* QS Notifications final polish — Milestone 1       */
/* -------------------------------------------------- */
.qsN-content{
  overflow:hidden;
}

.qsN-content.is-switching .qsN-root,
.qsN-content.is-switching .qsN-loading,
.qsN-content.is-switching .qsN-error{
  opacity:.74;
  transform:translateY(2px);
  transition:opacity .16s ease, transform .16s ease;
}

.qsN-icon-bubble{
  width:48px;
  height:48px;
  border-radius:16px;
}

.qsN-title-icon{
  width:24px;
  height:24px;
}

.qsN-tab-rail{
  overflow:visible;
  padding-top:6px;
  padding-bottom:16px;
}

.qsN-tab-rail::before,
.qsN-tab-rail::after{
  top:6px;
  bottom:16px;
}

.qsN-tabs{
  overflow:visible;
  padding-top:4px;
  padding-bottom:6px;
}

.qsN-tab{
  position:relative;
  overflow:visible;
  isolation:isolate;
  min-height:40px;
  padding:0 14px;
  line-height:1;
  box-shadow:none;
}

.qsN-tab__label,
.qsN-tab__count{
  position:relative;
  z-index:1;
}

.qsN-tab.active,
.qsN-tab[aria-current="page"]{
  background:linear-gradient(180deg, rgba(0,148,255,0.16), rgba(0,148,255,0.09));
  border-color:rgba(0, 148, 255, 0.28);
  box-shadow:0 0 0 1px rgba(0,148,255,0.06), 0 12px 22px rgba(0, 148, 255, 0.10);
}

.qsN-tab__count{
  min-width:22px;
  height:22px;
  padding:0 7px;
}

.qsN-tab.active .qsN-tab__count,
.qsN-tab[aria-current="page"] .qsN-tab__count{
  background:rgba(255,255,255,0.94);
  color:var(--qsN-primary-strong);
  box-shadow:inset 0 0 0 1px rgba(0, 148, 255, 0.14);
}

.qsN-item-actions{
  gap:10px;
  align-items:stretch;
}

.qsN-item-actions .qsN-btn,
.qsN-item-actions .qsN-done{
  min-height:38px;
}

.qsN-btn--done,
.qsN-done{
  cursor:default;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,51,102,0.05), rgba(0,51,102,0.03));
  border:1px solid rgba(0, 51, 102, 0.08);
  color:var(--qsN-muted);
  box-shadow:none;
}

.qs-notif-panel .qsN-item-actions .inline{
  margin:0;
  flex:1 1 0;
}

.qs-notif-panel .qsN-item-actions .qsN-btn,
.qs-notif-panel .qsN-item-actions .qsN-done{
  flex:1 1 0;
}

.qs-notif-panel .qsN-list{
  padding-bottom:22px;
}

.qs-notif-panel .qsN-list::after{
  content:"";
  display:block;
  min-height:20px;
  height:20px;
}

@media (max-width: 700px){
  .qsN-tab-rail{
    padding-top:4px;
    padding-bottom:14px;
  }

  .qsN-tab-rail::before,
  .qsN-tab-rail::after{
    top:4px;
    bottom:14px;
  }

  .qsN-tabs{
    padding-top:3px;
    padding-bottom:5px;
  }

  .qsN-icon-bubble{
    width:46px;
    height:46px;
  }

  .qsN-title-icon{
    width:23px;
    height:23px;
  }
}


/* E6 notifications final-pass: larger bell, stable open, clipped tab rail */
.qsN-icon-bubble{
  width:52px;
  height:52px;
  border-radius:17px;
}

.qsN-title-icon{
  width:26px;
  height:26px;
}

.qs-notif-panel{
  contain:layout paint style;
  will-change:transform, opacity;
}

.qsN-content{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.qs-notif-panel .qsN-root{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.qsN-tab-rail{
  grid-template-columns:38px minmax(0, 1fr) 38px;
  overflow:hidden;
}

.qsN-tab-rail > .qsN-tabs{
  min-width:0;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
}

.qsN-tab-rail .qsN-tab-scroll{
  position:relative;
  z-index:2;
}

.qsN-tabs{
  min-width:0;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
}

.qsN-tab{
  max-width:100%;
}

@media (max-width: 700px){
  .qsN-icon-bubble{
    width:50px;
    height:50px;
  }

  .qsN-title-icon{
    width:25px;
    height:25px;
  }

  .qsN-tab-rail{
    grid-template-columns:36px minmax(0, 1fr) 36px;
  }
}

@media (max-width: 520px){
  .qsN-tab-rail{
    gap:8px;
  }

  .qsN-tab-rail > .qsN-tabs{
    padding-left:0;
    padding-right:0;
  }
}


/* -------------------------------------------------- */
/* QS Notifications fix pass — modal rail stability   */
/* -------------------------------------------------- */
.qsN-fixed-close{
  top:18px;
  right:max(18px, calc(env(safe-area-inset-right) + 18px));
}

.qsN-content.is-switching .qsN-root,
.qsN-content.is-switching .qsN-loading,
.qsN-content.is-switching .qsN-error{
  opacity:1;
  transform:none;
  transition:none;
}

.qs-notif-panel{
  contain:layout paint;
}

.qs-notif-panel .qsN-tab-rail{
  overflow:hidden;
  grid-template-columns:38px minmax(0, 1fr) 38px;
  gap:8px;
  padding:6px 14px 14px;
}

.qs-notif-panel .qsN-tab-rail::before{
  left:52px;
}

.qs-notif-panel .qsN-tab-rail::after{
  right:52px;
}

.qs-notif-panel .qsN-tab-scroll{
  position:relative;
  z-index:2;
  width:36px;
  height:36px;
  background:rgba(255,255,255,0.98);
  opacity:1;
}

.qs-notif-panel .qsN-tab-scroll[disabled]{
  opacity:.42;
}

.qs-notif-panel .qsN-tabs{
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:auto;
  padding:0;
}

.qs-notif-panel .qsN-tab{
  overflow:hidden;
  min-height:38px;
  padding:0 13px;
  box-shadow:none;
}

.qs-notif-panel .qsN-item-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:stretch;
  gap:10px;
}

.qs-notif-panel .qsN-item-actions .inline,
.qs-notif-panel .qsN-item-actions .qsN-btn,
.qs-notif-panel .qsN-item-actions .qsN-done{
  width:100%;
  min-width:0;
}

.qs-notif-panel .qsN-item-actions .inline{
  display:block;
  flex:none;
}

.qs-notif-panel .qsN-item-actions .qsN-btn,
.qs-notif-panel .qsN-item-actions .qsN-done{
  justify-content:center;
  text-align:center;
  flex:none;
}

.qs-notif-panel .qsN-btn--done,
.qs-notif-panel .qsN-done{
  background:rgba(0, 51, 102, 0.05);
  border:1px solid rgba(0, 51, 102, 0.08);
  box-shadow:none;
}

@media (max-width: 768px){
  .qs-notif-panel{
    transition:transform .16s ease;
  }

  .qs-notif-panel .qsN-tab-rail{
    padding-left:12px;
    padding-right:12px;
  }

  .qs-notif-panel .qsN-tab-rail::before{
    left:48px;
  }

  .qs-notif-panel .qsN-tab-rail::after{
    right:48px;
  }
}


/* -------------------------------------------------- */
/* Milestone 1 — Notifications Modal-Shell stabilisieren */
/* -------------------------------------------------- */
.qs-notif-panel{
  transform-origin:top right;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:opacity, transform;
  transition:opacity .18s ease, transform .18s ease;
}

.qs-notif-panel:not(.open){
  transform:translate3d(0, -6px, 0) scale(.992);
}

.qs-notif-panel.is-preparing{
  opacity:0;
  transform:translate3d(0, -4px, 0) scale(.994);
  pointer-events:none;
}

.qs-notif-panel .qsN-fixed-close{
  top:16px;
  right:max(20px, calc(env(safe-area-inset-right) + 20px));
}

@media (max-width: 768px){
  .qs-notif-panel .qsN-fixed-close{
    top:16px;
    right:max(18px, calc(env(safe-area-inset-right) + 18px));
  }
}


/* -------------------------------------------------- */
/* Milestone 2 — Notifications Modal tab rail         */
/* -------------------------------------------------- */
.qs-notif-panel .qsN-tab-rail{
  position:relative;
  grid-template-columns:36px minmax(0, 1fr) 36px;
  align-items:center;
  gap:8px;
  padding:6px 14px 14px;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
  isolation:isolate;
}

.qs-notif-panel .qsN-tab-rail::before,
.qs-notif-panel .qsN-tab-rail::after{
  z-index:2;
  bottom:14px;
}

.qs-notif-panel .qsN-tab-rail::before{
  left:50px;
}

.qs-notif-panel .qsN-tab-rail::after{
  right:50px;
}

.qs-notif-panel .qsN-tab-scroll{
  position:relative;
  z-index:4;
  flex:0 0 36px;
  width:36px;
  height:36px;
  opacity:1;
}

.qs-notif-panel .qsN-tabs{
  position:relative;
  z-index:1;
  min-width:0;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0 1px 2px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:auto;
  overscroll-behavior-x:contain;
  contain:paint;
  -webkit-overflow-scrolling:touch;
}

.qs-notif-panel .qsN-tab{
  flex:0 0 auto;
  max-width:100%;
}

@media (max-width: 768px){
  .qs-notif-panel .qsN-tab-rail{
    padding-left:12px;
    padding-right:12px;
  }

  .qs-notif-panel .qsN-tab-rail::before{
    left:46px;
  }

  .qs-notif-panel .qsN-tab-rail::after{
    right:46px;
  }
}


/* -------------------------------------------------- */
/* Milestone 3 — Notifications Modal card actions     */
/* -------------------------------------------------- */
.qs-notif-panel .qsN-item-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:stretch;
  justify-content:stretch;
  gap:10px;
  width:100%;
  padding-left:0;
  box-sizing:border-box;
}

.qs-notif-panel .qsN-item-actions > *{
  min-width:0;
  margin:0;
}

.qs-notif-panel .qsN-item-actions > :only-child{
  grid-column:1 / -1;
}

.qs-notif-panel .qsN-item-actions .inline{
  display:block;
  width:100%;
  min-width:0;
  margin:0;
}

.qs-notif-panel .qsN-item-actions .qsN-btn,
.qs-notif-panel .qsN-item-actions .qsN-done,
.qs-notif-panel .qsN-item-actions .inline .qsN-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:40px;
  margin:0;
  box-sizing:border-box;
  text-align:center;
  box-shadow:none;
  overflow:hidden;
}

.qs-notif-panel .qsN-item-actions .qsN-btn{
  border-radius:14px;
}

.qs-notif-panel .qsN-item-actions .qsN-done{
  border-radius:14px;
  cursor:default;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0, 51, 102, 0.05), rgba(0, 51, 102, 0.03));
  border:1px solid rgba(0, 51, 102, 0.08);
  color:var(--qsN-muted);
}

@media (max-width: 420px){
  .qs-notif-panel .qsN-item-actions{
    gap:8px;
  }
}


/* QS-NOTIFICATIONS MILESTONE M6A: modal rail hover-clip stabilization */
.qs-notif-panel .qsN-tab-rail{
  grid-template-columns:38px minmax(0, 1fr) 38px;
  padding-top:8px !important;
  padding-bottom:14px !important;
  overflow:hidden !important;
  isolation:isolate;
}

.qs-notif-panel .qsN-tab-rail::before,
.qs-notif-panel .qsN-tab-rail::after{
  top:8px !important;
  bottom:14px !important;
  z-index:2;
}

.qs-notif-panel .qsN-tab-rail::before{
  left:52px !important;
}

.qs-notif-panel .qsN-tab-rail::after{
  right:52px !important;
}

.qs-notif-panel .qsN-tabs{
  position:relative;
  z-index:1;
  min-width:0;
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:2px 2px 2px !important;
  margin:0;
  scroll-behavior:auto !important;
}

.qs-notif-panel .qsN-tab{
  flex:0 0 auto;
  max-width:100%;
  min-height:38px;
  transform:none !important;
}

.qs-notif-panel .qsN-tab:hover,
.qs-notif-panel .qsN-tab:focus-visible{
  transform:none !important;
}

.qs-notif-panel .qsN-tab-scroll{
  position:relative;
  z-index:3;
  flex:0 0 38px;
  width:38px;
  height:38px;
}

.qs-notif-panel .qsN-tab-scroll[hidden]{
  display:inline-flex !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

@media (max-width: 760px){
  .qs-notif-panel .qsN-tab-rail{
    grid-template-columns:36px minmax(0, 1fr) 36px;
    gap:8px;
    padding-top:8px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .qs-notif-panel .qsN-tab-rail::before{
    left:48px !important;
  }

  .qs-notif-panel .qsN-tab-rail::after{
    right:48px !important;
  }

  .qs-notif-panel .qsN-tab-scroll{
    flex-basis:36px;
    width:36px;
    height:36px;
  }
}


/* -------------------------------------------------- */
/* QS Notifications modal polish — Milestone 7        */
/* -------------------------------------------------- */
.qs-notif-panel .qsN-fixed-close{
  right:18px;
}


/* -------------------------------------------------- */
/* QS Notifications modal fine-tune — Milestone 8     */
/* -------------------------------------------------- */
.qs-notif-panel .qsN-fixed-close{
  right:34px; !important;
}

@media (max-width: 760px){
  .qs-notif-panel .qsN-fixed-close{
    right:30px; !important;
  }
}

/* HOTFIX: Mobile Notification-Modal wirklich schließen
   Ursache: spätere .qs-notif-panel:not(.open)-Regel übersteuerte die mobile
   translateY-Offscreen-Position; zusätzlich überschreibt display:flex sonst
   je nach Browser das hidden-Attribut. */
.qs-notif-overlay[hidden],
.qs-notif-panel[hidden]{
  display:none !important;
}

@media (max-width: 768px){
  .qs-notif-panel:not(.open):not(.is-preparing){
    opacity:1;
    transform:translate3d(0, calc(100% + 18px), 0) !important;
    pointer-events:none !important;
  }

  .qs-notif-panel.is-preparing{
    transform:translate3d(0, calc(100% + 18px), 0) !important;
    pointer-events:none !important;
  }

  .qs-notif-overlay:not(.open){
    pointer-events:none !important;
  }
}



/* =================================================================
   NOTIFICATIONS — MOBILE RIGHT-DRAWER FINAL POLISH
   Milestone 7.3
   Scope: Glocken-Modal auf Mobile
   Ziel:
   - Drawer öffnet sauber von rechts.
   - Obere Abstände ruhiger.
   - Gesamter Drawer-Inhalt kann scrollen.
   - Kategorien bleiben sichtbar und horizontal bedienbar.
================================================================= */

@media (max-width: 768px){
  .qs-notif-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:10060 !important;
    background:rgba(6, 24, 44, 0) !important;
    pointer-events:none !important;
    transition:background-color .2s ease, backdrop-filter .2s ease !important;
  }

  .qs-notif-overlay.open{
    background:rgba(6, 24, 44, .46) !important;
    backdrop-filter:blur(5px) !important;
    -webkit-backdrop-filter:blur(5px) !important;
    pointer-events:auto !important;
  }

  .qs-notif-panel,
  .qs-notif-panel[style]{
    position:fixed !important;
    top:calc(var(--qs-header-h, 78px) + 6px) !important;
    right:0 !important;
    bottom:calc(var(--qs-bottomnav-h, 64px) + max(6px, env(safe-area-inset-bottom, 0px))) !important;
    left:auto !important;

    width:min(92vw, 430px) !important;
    max-width:min(92vw, 430px) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    border-radius:24px 0 0 24px !important;
    border:1px solid rgba(0, 148, 255, .28) !important;
    border-right:0 !important;
    background:linear-gradient(180deg, rgba(255,255,255,.995), rgba(247,251,255,.985)) !important;
    box-shadow:-22px 0 46px rgba(0, 24, 58, .26) !important;

    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    padding:0 !important;
    z-index:10061 !important;

    opacity:1 !important;
    transform:translate3d(105%, 0, 0) !important;
    transition:transform .24s cubic-bezier(.22, .82, .28, 1), box-shadow .2s ease !important;
    pointer-events:none !important;
    will-change:transform !important;
  }

  .qs-notif-panel.open,
  .qs-notif-panel.open[style]{
    opacity:1 !important;
    transform:translate3d(0, 0, 0) !important;
    pointer-events:auto !important;
  }

  .qs-notif-panel.is-preparing,
  .qs-notif-panel:not(.open):not(.is-preparing){
    opacity:1 !important;
    transform:translate3d(105%, 0, 0) !important;
    pointer-events:none !important;
  }

  .qs-notif-panel .qsN-content{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    scrollbar-width:thin !important;
    display:block !important;
  }

  .qs-notif-panel .qsN-root,
  .qs-notif-panel .qsN-root--embed{
    display:block !important;
    min-height:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding-bottom:18px !important;
  }

  .qs-notif-panel .qsN-top{
    position:sticky !important;
    top:0 !important;
    z-index:25 !important;
    display:flex !important;
    align-items:flex-start !important;
    gap:12px !important;
    padding:18px 64px 10px 16px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.995) 0%, rgba(255,255,255,.985) 78%, rgba(255,255,255,0) 100%) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
  }

  .qs-notif-panel .qsN-close{
    position:absolute !important;
    top:14px !important;
    right:14px !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    border-radius:16px !important;
    z-index:35 !important;
  }

  .qs-notif-panel .qsN-icon-bubble{
    width:44px !important;
    height:44px !important;
    border-radius:16px !important;
    margin-top:1px !important;
  }

  .qs-notif-panel .qsN-title{
    font-size:clamp(24px, 7vw, 31px) !important;
    line-height:1.03 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
  }

  .qs-notif-panel .qsN-eyebrow{
    margin-bottom:4px !important;
    font-size:10px !important;
    letter-spacing:.14em !important;
  }

  .qs-notif-panel .qsN-unread-badge,
  .qs-notif-panel .qsN-sub{
    display:none !important;
  }

  .qs-notif-panel .qsN-embed-bar{
    margin:0 14px 10px !important;
    padding:10px !important;
    border-radius:18px !important;
    display:grid !important;
    gap:8px !important;
  }

  .qs-notif-panel .qsN-embed-meta{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  .qs-notif-panel .qsN-embed-chip{
    min-width:0 !important;
    padding:9px 10px !important;
    border-radius:15px !important;
  }

  .qs-notif-panel .qsN-embed-chip__label{
    font-size:9px !important;
    letter-spacing:.09em !important;
  }

  .qs-notif-panel .qsN-embed-chip__value{
    font-size:17px !important;
    line-height:1.05 !important;
    overflow-wrap:anywhere !important;
  }

  .qs-notif-panel .qsN-embed-bar__sub{
    margin:0 !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .qs-notif-panel .qsN-embed-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:2px !important;
  }

  .qs-notif-panel .qsN-embed-actions .inline,
  .qs-notif-panel .qsN-embed-actions .qsN-btn{
    width:100% !important;
    min-width:0 !important;
  }

  .qs-notif-panel .qsN-embed-actions .qsN-btn{
    min-height:38px !important;
    padding:0 10px !important;
    border-radius:14px !important;
    font-size:12px !important;
    line-height:1.1 !important;
    box-shadow:none !important;
  }

  .qs-notif-panel .qsN-tab-rail{
    display:block !important;
    padding:0 14px 10px !important;
    overflow:visible !important;
  }

  .qs-notif-panel .qsN-tab-scroll,
  .qs-notif-panel .qsN-tab-rail::before,
  .qs-notif-panel .qsN-tab-rail::after{
    display:none !important;
  }

  .qs-notif-panel .qsN-tabs{
    display:flex !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:2px 0 4px !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .qs-notif-panel .qsN-tabs::-webkit-scrollbar{
    display:none !important;
  }

  .qs-notif-panel .qsN-tab{
    flex:0 0 auto !important;
    min-height:34px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:12px !important;
    white-space:nowrap !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .qs-notif-panel .qsN-list{
    display:grid !important;
    gap:10px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 14px 18px !important;
    overflow:visible !important;
  }

  .qs-notif-panel .qsN-empty{
    min-height:170px !important;
    padding:22px 16px !important;
    border-radius:20px !important;
  }
}

@media (max-width: 380px){
  .qs-notif-panel,
  .qs-notif-panel[style]{
    top:calc(var(--qs-header-h, 72px) + 4px) !important;
    bottom:calc(var(--qs-bottomnav-h, 60px) + 4px + env(safe-area-inset-bottom, 0px)) !important;
    width:min(94vw, 420px) !important;
    max-width:min(94vw, 420px) !important;
    border-radius:22px 0 0 22px !important;
  }

  .qs-notif-panel .qsN-top{
    padding:15px 58px 8px 13px !important;
  }

  .qs-notif-panel .qsN-title{
    font-size:22px !important;
  }

  .qs-notif-panel .qsN-embed-meta{
    grid-template-columns:1fr 1fr !important;
  }
}


/* =================================================================
   NOTIFICATIONS — MOBILE DRAWER SIZE + SOFTER INNER CARDS
   Milestone 7.4
   Scope: Glocken-Modal auf Mobile
   Ziel:
   - Drawer nutzt mehr Höhe: oben nur kleiner Abstand, unten kein Abstand.
   - Right-Drawer bleibt seitlich wie zuvor.
   - Innere "eckige" Dashboard-Boxen wirken leichter und runder.
================================================================= */

@media (max-width: 768px){
  .qs-notif-overlay.open{
    background: rgba(6, 24, 44, .42) !important;
  }

  .qs-notif-panel,
  .qs-notif-panel[style],
  .qs-notif-panel.open,
  .qs-notif-panel.open[style]{
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    width: min(92vw, 430px) !important;
    max-width: min(92vw, 430px) !important;
    height: auto !important;
    max-height: none !important;

    border-radius: 24px 0 0 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    overflow: hidden !important;
  }

  .qs-notif-panel .qsN-content{
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .qs-notif-panel .qsN-root,
  .qs-notif-panel .qsN-root--embed{
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .qs-notif-panel .qsN-top{
    padding: 16px 62px 8px 14px !important;
    gap: 11px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.998) 0%, rgba(255,255,255,.985) 90%, rgba(255,255,255,.72) 100%) !important;
  }

  .qs-notif-panel .qsN-close{
    top: 12px !important;
    right: 12px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 17px !important;
    box-shadow: 0 8px 20px rgba(0, 24, 58, .10) !important;
  }

  .qs-notif-panel .qsN-title{
    font-size: clamp(25px, 7.2vw, 32px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.04em !important;
    max-width: calc(100vw - 155px) !important;
  }

  /* Dashboard-Box im Drawer leichter machen statt "eckiger Kasten im Kasten" */
  .qs-notif-panel .qsN-embed-bar{
    margin: 0 12px 9px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    gap: 8px !important;
  }

  .qs-notif-panel .qsN-embed-meta{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .qs-notif-panel .qsN-embed-chip{
    padding: 10px 11px !important;
    border-radius: 19px !important;
    border: 1px solid rgba(0, 51, 102, .08) !important;
    background: rgba(255,255,255,.76) !important;
    box-shadow: 0 8px 18px rgba(0, 24, 58, .045) !important;
  }

  .qs-notif-panel .qsN-embed-bar__sub{
    padding: 0 2px !important;
    color: rgba(18, 33, 54, .64) !important;
  }

  .qs-notif-panel .qsN-embed-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  .qs-notif-panel .qsN-embed-actions .qsN-btn{
    border-radius: 17px !important;
    min-height: 40px !important;
    box-shadow: none !important;
  }

  .qs-notif-panel .qsN-tab-rail{
    padding: 0 12px 9px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .qs-notif-panel .qsN-tabs{
    gap: 8px !important;
    padding: 1px 0 4px !important;
  }

  .qs-notif-panel .qsN-tab{
    min-height: 36px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.74) !important;
    box-shadow: none !important;
  }

  .qs-notif-panel .qsN-tab.is-active,
  .qs-notif-panel .qsN-tab[aria-selected="true"]{
    background: rgba(237, 247, 255, .96) !important;
  }

  .qs-notif-panel .qsN-list{
    padding: 0 12px max(22px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 10px !important;
  }

  .qs-notif-panel .qsN-empty{
    min-height: min(42dvh, 310px) !important;
    border-radius: 22px !important;
    padding: 26px 18px !important;
    background: rgba(255,255,255,.72) !important;
  }
}

@media (max-width: 380px){
  .qs-notif-panel,
  .qs-notif-panel[style],
  .qs-notif-panel.open,
  .qs-notif-panel.open[style]{
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    bottom: 0 !important;
    width: min(94vw, 420px) !important;
    max-width: min(94vw, 420px) !important;
    border-radius: 22px 0 0 0 !important;
  }

  .qs-notif-panel .qsN-top{
    padding: 14px 58px 7px 12px !important;
  }

  .qs-notif-panel .qsN-title{
    font-size: 24px !important;
    max-width: calc(100vw - 138px) !important;
  }

  .qs-notif-panel .qsN-embed-chip{
    padding: 9px 10px !important;
    border-radius: 17px !important;
  }

  .qs-notif-panel .qsN-empty{
    min-height: min(40dvh, 280px) !important;
  }
}


/* =================================================================
   NOTIFICATIONS — MOBILE DRAWER ALIGNMENT + TAB HINT
   Milestone 7.5
   Scope: Glocken-Modal auf Mobile
   Ziel:
   - Innenlayout symmetrischer ausrichten.
   - eckige/harte Innenboxen im Drawer entfernen.
   - Kategorien als horizontal scrollbare Leiste klarer erkennbar machen.
================================================================= */

@media (max-width: 768px){
  .qs-notif-panel,
  .qs-notif-panel[style],
  .qs-notif-panel.open,
  .qs-notif-panel.open[style]{
    width: min(92vw, 430px) !important;
    max-width: min(92vw, 430px) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.998), rgba(247,251,255,.992)) !important;
  }

  .qs-notif-panel .qsN-content{
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .qs-notif-panel .qsN-root,
  .qs-notif-panel .qsN-root--embed{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  /* Header nicht mehr links/rechts unruhig: Icon, Titel und Close sauber im Raster */
  .qs-notif-panel .qsN-top{
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: start !important;
    column-gap: 10px !important;
    padding: 14px 12px 8px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.998) 0%, rgba(255,255,255,.985) 86%, rgba(255,255,255,0) 100%) !important;
  }

  .qs-notif-panel .qsN-top-main{
    display: contents !important;
  }

  .qs-notif-panel .qsN-icon-bubble{
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 17px !important;
    margin: 0 !important;
  }

  .qs-notif-panel .qsN-heading{
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    padding-top: 2px !important;
    text-align: left !important;
  }

  .qs-notif-panel .qsN-close{
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    border-radius: 17px !important;
  }

  .qs-notif-panel .qsN-eyebrow{
    margin: 0 0 3px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    letter-spacing: .18em !important;
  }

  .qs-notif-panel .qsN-title-row{
    min-width: 0 !important;
    width: 100% !important;
  }

  .qs-notif-panel .qsN-title{
    max-width: 100% !important;
    font-size: clamp(22px, 6.1vw, 28px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.055em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Die harte Box im Inneren wird zu einem leichten, flachen Kontrollbereich */
  .qs-notif-panel .qsN-embed-bar{
    width: auto !important;
    margin: 2px 12px 10px !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .qs-notif-panel .qsN-embed-meta{
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .qs-notif-panel .qsN-embed-chip{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 9px 11px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0,51,102,.075) !important;
    background: rgba(255,255,255,.66) !important;
    box-shadow: none !important;
  }

  .qs-notif-panel .qsN-embed-bar__sub{
    margin: 7px 1px 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: rgba(18,33,54,.62) !important;
    text-align: center !important;
  }

  .qs-notif-panel .qsN-embed-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .qs-notif-panel .qsN-embed-actions .qsN-btn{
    min-height: 38px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  /* Kategorien: horizontaler Scroll muss sichtbar/verständlich sein */
  .qs-notif-panel .qsN-tab-rail{
    position: relative !important;
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 0 0 12px !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .qs-notif-panel .qsN-tab-rail::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 10px !important;
    opacity: 0 !important;
    background: linear-gradient(90deg, rgba(247,251,255,.98), rgba(247,251,255,0)) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  .qs-notif-panel .qsN-tab-rail::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 54px !important;
    opacity: 1 !important;
    background: linear-gradient(270deg, rgba(247,251,255,1) 20%, rgba(247,251,255,.72) 58%, rgba(247,251,255,0)) !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

  .qs-notif-panel .qsN-tabs{
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 48px 6px 0 !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .qs-notif-panel .qsN-tab-scroll{
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0,148,255,.18) !important;
    background: rgba(255,255,255,.94) !important;
    color: #003366 !important;
    box-shadow: 0 8px 18px rgba(0,24,58,.08) !important;
  }

  .qs-notif-panel .qsN-tab-scroll--prev{
    display: none !important;
  }

  .qs-notif-panel .qsN-tab-scroll--next{
    right: 10px !important;
  }

  .qs-notif-panel .qsN-tab{
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.72) !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
  }

  .qs-notif-panel .qsN-tab.active,
  .qs-notif-panel .qsN-tab.is-active,
  .qs-notif-panel .qsN-tab[aria-current="page"],
  .qs-notif-panel .qsN-tab[aria-selected="true"]{
    background: rgba(237,247,255,.98) !important;
    border-color: rgba(0,148,255,.22) !important;
  }

  .qs-notif-panel .qsN-list{
    padding: 0 12px max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Empty-State nicht mehr als harte/eckige Innenbox */
  .qs-notif-panel .qsN-empty{
    min-height: min(43dvh, 320px) !important;
    border: 1px dashed rgba(0,51,102,.11) !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.42) !important;
    box-shadow: none !important;
  }
}

@media (max-width: 380px){
  .qs-notif-panel .qsN-top{
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    column-gap: 8px !important;
    padding: 12px 10px 8px !important;
  }

  .qs-notif-panel .qsN-icon-bubble,
  .qs-notif-panel .qsN-close{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 15px !important;
  }

  .qs-notif-panel .qsN-title{
    font-size: clamp(21px, 6vw, 25px) !important;
  }

  .qs-notif-panel .qsN-embed-bar{
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  .qs-notif-panel .qsN-tab-rail{
    padding-left: 10px !important;
  }

  .qs-notif-panel .qsN-list{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
/* =================================================================
   NOTIFICATIONS — MOBILE MODAL CLEAN HEADER + TAB RAIL RESET
   Milestone 7.7
   Scope: Glocken-Modal auf Mobile
   Ziel:
   - störendes Element links oben im Drawer entfernen
   - keine harten/eckigen Innenboxen im Modal
   - Kategorien als saubere horizontale Scroll-Leiste ohne komische Einzelpfeile
================================================================= */

@media (max-width: 768px){
  .qs-notif-panel{
    background:#f7fbff !important;
  }

  .qs-notif-panel::before{
    display:none !important;
  }

  /* Das linke Icon im Modal-Header war auf Mobile unnötig und wirkte wie ein Fremdelement. */
  .qs-notif-panel .qsN-root--embed .qsN-icon-bubble{
    display:none !important;
  }

  .qs-notif-panel .qsN-top{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 42px !important;
    align-items:start !important;
    gap:10px !important;
    padding:12px 12px 8px !important;
    margin:0 !important;
  }

  .qs-notif-panel .qsN-top-main{
    grid-column:1 !important;
    min-width:0 !important;
    display:block !important;
    padding:0 !important;
    margin:0 !important;
  }

  .qs-notif-panel .qsN-heading{
    min-width:0 !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  .qs-notif-panel .qsN-close{
    grid-column:2 !important;
    align-self:start !important;
    justify-self:end !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    margin:0 !important;
    border-radius:16px !important;
  }

  .qs-notif-panel .qsN-eyebrow{
    margin:1px 0 3px !important;
    font-size:10.5px !important;
    line-height:1.1 !important;
    letter-spacing:.15em !important;
  }

  .qs-notif-panel .qsN-title-row{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
  }

  .qs-notif-panel .qsN-title{
    min-width:0 !important;
    max-width:100% !important;
    font-size:clamp(24px, 6.4vw, 28px) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .qs-notif-panel .qsN-unread-badge,
  .qs-notif-panel .qsN-sub{
    display:none !important;
  }

  /* Innere Kontrollboxen flacher machen: keine Box-in-Box-Kanten am Rand. */
  .qs-notif-panel .qsN-embed-bar{
    width:auto !important;
    margin:0 12px 10px !important;
    padding:0 !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:visible !important;
  }

  .qs-notif-panel .qsN-embed-meta{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    width:100% !important;
    margin:0 0 8px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .qs-notif-panel .qsN-embed-chip{
    min-width:0 !important;
    padding:8px 10px !important;
    border-radius:16px !important;
    border:1px solid rgba(0,51,102,.08) !important;
    background:rgba(255,255,255,.78) !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  .qs-notif-panel .qsN-embed-bar__sub{
    margin:3px 2px 8px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    text-align:left !important;
  }

  .qs-notif-panel .qsN-embed-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Modal-Tabs: keine störenden Pfeilbuttons im Drawer, nur eine saubere Scroll-Leiste. */
  .qs-notif-panel .qsN-tab-rail{
    display:block !important;
    position:relative !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 12px 9px !important;
    padding:0 !important;
    overflow:hidden !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .qs-notif-panel .qsN-tab-scroll,
  .qs-notif-panel .qsN-tab-scroll--prev,
  .qs-notif-panel .qsN-tab-scroll--next{
    display:none !important;
  }

  .qs-notif-panel .qsN-tab-rail::before{
    content:"" !important;
    position:absolute !important;
    inset:0 auto 0 0 !important;
    width:18px !important;
    background:linear-gradient(90deg, #f7fbff 0%, rgba(247,251,255,0) 100%) !important;
    opacity:0 !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  .qs-notif-panel .qsN-tab-rail::after{
    content:"" !important;
    position:absolute !important;
    inset:0 0 0 auto !important;
    width:34px !important;
    background:linear-gradient(270deg, #f7fbff 0%, rgba(247,251,255,0) 100%) !important;
    opacity:1 !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  .qs-notif-panel .qsN-tab-rail:not(.is-start)::before{
    opacity:1 !important;
  }

  .qs-notif-panel .qsN-tab-rail.is-end::after{
    opacity:0 !important;
  }

  .qs-notif-panel .qsN-tabs{
    display:flex !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:2px 24px 6px 0 !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .qs-notif-panel .qsN-tabs::-webkit-scrollbar{
    display:none !important;
  }

  .qs-notif-panel .qsN-tab{
    flex:0 0 auto !important;
    min-height:34px !important;
    padding:0 13px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(0,51,102,.09) !important;
    white-space:nowrap !important;
    scroll-snap-align:start !important;
    box-shadow:none !important;
  }

  .qs-notif-panel .qsN-tab.active,
  .qs-notif-panel .qsN-tab.is-active,
  .qs-notif-panel .qsN-tab[aria-current="page"],
  .qs-notif-panel .qsN-tab[aria-selected="true"]{
    background:#edf7ff !important;
    border-color:rgba(0,148,255,.24) !important;
    color:#003366 !important;
  }

  .qs-notif-panel .qsN-list{
    padding:0 12px max(14px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .qs-notif-panel .qsN-empty{
    min-height:min(44dvh, 330px) !important;
    margin:0 !important;
    padding:22px 14px !important;
    border:1px dashed rgba(0,51,102,.12) !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.56) !important;
    box-shadow:none !important;
  }
}

@media (max-width: 380px){
  .qs-notif-panel .qsN-top{
    grid-template-columns:minmax(0, 1fr) 38px !important;
    gap:8px !important;
    padding:11px 10px 7px !important;
  }

  .qs-notif-panel .qsN-close{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:15px !important;
  }

  .qs-notif-panel .qsN-title{
    font-size:clamp(22px, 6.1vw, 26px) !important;
  }

  .qs-notif-panel .qsN-embed-bar,
  .qs-notif-panel .qsN-tab-rail{
    margin-left:10px !important;
    margin-right:10px !important;
  }

  .qs-notif-panel .qsN-list{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}


/* =================================================================
   NOTIFICATIONS — MOBILE MODAL TAB CONTROLS RESTORE
   Milestone 7.8
   Scope: Glocken-Modal auf Mobile
   Ziel:
   - < / > im Modal wieder sichtbar machen
   - Tabs wie am Desktop klar als horizontal scrollbar zeigen
   - keine schlecht platzierten Overlay-Pfeile über den Tabs
================================================================= */
@media (max-width: 768px){
  .qs-notif-panel .qsN-tab-rail{
    display:grid !important;
    grid-template-columns:32px minmax(0, 1fr) 32px !important;
    align-items:center !important;
    gap:8px !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 12px 10px !important;
    padding:0 !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .qs-notif-panel .qsN-tab-rail::before,
  .qs-notif-panel .qsN-tab-rail::after{
    display:none !important;
    content:none !important;
  }

  .qs-notif-panel .qsN-tab-scroll,
  .qs-notif-panel .qsN-tab-scroll--prev,
  .qs-notif-panel .qsN-tab-scroll--next,
  .qs-notif-panel .qsN-tab-scroll[hidden]{
    display:inline-flex !important;
    visibility:visible !important;
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    transform:none !important;
    z-index:2 !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    padding:0 !important;
    margin:0 !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    border:1px solid rgba(0,148,255,.16) !important;
    background:rgba(255,255,255,.92) !important;
    color:#003366 !important;
    box-shadow:0 8px 18px rgba(0,24,58,.06) !important;
    opacity:1 !important;
  }

  .qs-notif-panel .qsN-tab-scroll[disabled],
  .qs-notif-panel .qsN-tab-scroll[hidden]{
    opacity:.42 !important;
    pointer-events:none !important;
  }

  .qs-notif-panel .qsN-tab-scroll svg{
    width:17px !important;
    height:17px !important;
    display:block !important;
  }

  .qs-notif-panel .qsN-tabs{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:2px 0 4px !important;
    margin:0 !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .qs-notif-panel .qsN-tabs::-webkit-scrollbar{
    display:none !important;
  }

  .qs-notif-panel .qsN-tab{
    flex:0 0 auto !important;
    min-height:34px !important;
    padding:0 13px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    scroll-snap-align:start !important;
  }
}

@media (max-width: 380px){
  .qs-notif-panel .qsN-tab-rail{
    grid-template-columns:30px minmax(0, 1fr) 30px !important;
    gap:7px !important;
    margin-left:10px !important;
    margin-right:10px !important;
  }

  .qs-notif-panel .qsN-tab-scroll,
  .qs-notif-panel .qsN-tab-scroll--prev,
  .qs-notif-panel .qsN-tab-scroll--next,
  .qs-notif-panel .qsN-tab-scroll[hidden]{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
  }

  .qs-notif-panel .qsN-tab{
    min-height:32px !important;
    padding-left:11px !important;
    padding-right:11px !important;
  }
}