.profile-action-panel {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.profile-action-panel.open { opacity: 1; visibility: visible; }

.profile-action-card {
  position: relative;
  width: min(430px, 100%);
  padding: 34px;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(18, 42, 78, .22);
  transform: translateY(12px) scale(.98);
  transition: transform .25s cubic-bezier(.22, .8, .24, 1);
}

.profile-action-panel.open .profile-action-card { transform: translateY(0) scale(1); }
.profile-action-kicker { color: #0868ed; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.profile-action-card h2 { margin: 8px 0; color: #07183b; }
.profile-action-card p { color: #5e7098; line-height: 1.55; }
.profile-action-ok { width: 100%; margin-top: 10px; }
.profile-action-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: #526b92; font-size: 27px; cursor: pointer; }
.profile-action-close:hover { color: #0868ed; }
.notification-card { width: min(620px, 100%); padding: 28px; }
.notification-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-top:8px; }
.notification-heading h2 { margin:0 0 4px; }
.notification-heading p { margin:0 0 18px; font-size:13px; }
.notification-read-all { border:1px solid #cfe0f5; background:#f7fbff; color:#0868ed; border-radius:8px; padding:9px 12px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; }
.notification-read-all:hover { background:#eaf4ff; }
.notification-list { max-height:360px; overflow:auto; border:1px solid #e1eaf5; border-radius:12px; }
.notification-row { display:flex; gap:12px; padding:15px; border-bottom:1px solid #edf2f8; background:#fff; }
.notification-row:last-child { border-bottom:0; }
.notification-row.unread { background:#f4f9ff; }
.notification-icon { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#e5f1ff; color:#0868ed; font-weight:800; }
.notification-row strong { display:block; color:#102755; font-size:13px; }
.notification-row p { margin:4px 0; color:#5e7098; font-size:12px; line-height:1.4; }
.notification-row small { color:#8a99b2; font-size:10px; }
.notification-empty,.notification-loading { margin:0; padding:34px 24px; color:#71809a; text-align:center; font-size:13px; }
.notification-empty h3 { margin:14px 0 5px; color:#102755; font-size:17px; }
.notification-empty p { max-width:390px; margin:0 auto 8px; line-height:1.5; }
.notification-empty small { color:#91a0b7; font-size:10px; }
.notification-empty-art { position:relative; display:block; width:74px; height:62px; margin:0 auto; border-radius:22px 22px 18px 18px; background:linear-gradient(145deg,#e8f3ff,#f7fbff); border:1px solid #d7e8fb; box-shadow:0 10px 20px rgba(8,104,237,.08); }
.notification-empty-art::before { content:""; position:absolute; left:25px; top:14px; width:24px; height:25px; border:3px solid #0868ed; border-radius:14px 14px 8px 8px; }
.notification-empty-art::after { content:""; position:absolute; left:20px; top:39px; width:34px; height:3px; border-radius:3px; background:#0868ed; }
.notification-empty-art i,.notification-empty-art b,.notification-empty-art em { position:absolute; display:block; border-radius:50%; background:#9ac8ff; }
.notification-empty-art i { width:5px; height:5px; left:10px; top:12px; }.notification-empty-art b { width:4px; height:4px; right:10px; top:24px; }.notification-empty-art em { width:3px; height:3px; right:17px; top:10px; }
@media (max-width:600px) { .notification-heading { display:block; } .notification-read-all { margin-bottom:14px; } }