.notification-section{
  background:linear-gradient(180deg,#f7fbff,#fff);
}
.notification-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:28px;
}
.notification-card{
  position:relative;
  border:1px solid #d9e6f7;
  background:#fff;
  border-radius:22px;
  padding:22px;
  box-shadow:0 12px 28px rgba(29,86,165,.07);
  overflow:hidden;
}
.notification-preview,
.duo-preview{
  position:relative;
  width:100%;
  border-radius:18px;
  overflow:hidden;
  margin-bottom:16px;
}
.notification-preview{
  aspect-ratio:16/10;
  background:linear-gradient(135deg,#f2f8ff,#e4f0ff 50%,#ffffff);
  border:1px solid #dce9fb;
  padding:14px;
}
.notification-preview.has-upload,
.duo-preview.has-upload{
  padding:0;
  background:#fff;
  border:1px solid rgba(255,255,255,.16);
}
.notification-preview.has-upload img,
.duo-preview.has-upload img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.notif-bubble{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid #dce9fb;
  border-radius:14px;
  padding:10px 11px;
  box-shadow:0 10px 18px rgba(14,76,159,.08);
}
.notif-bubble + .notif-bubble{margin-top:10px}
.notif-bubble span{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:12px;
  background:linear-gradient(135deg,#0b6ff5,#59d8ff);
  box-shadow:0 10px 18px rgba(11,111,245,.22);
}
.notif-bubble b{display:block;font-size:13px;color:#0b2246;line-height:1.3}
.notif-bubble small{display:block;font-size:11px;color:#73839a;margin-top:2px}
.notif-bubble.two{max-width:92%;margin-left:auto}
.notif-mini-chart{
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin-top:12px;
  height:40px;
}
.notif-mini-chart i{
  display:block;
  width:12px;
  border-radius:999px 999px 4px 4px;
  background:linear-gradient(180deg,#6ccfff,#0d6efd);
}
.notif-mini-chart i:nth-child(1){height:45%}
.notif-mini-chart i:nth-child(2){height:82%}
.notif-mini-chart i:nth-child(3){height:62%}
.notification-visual{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#edf5ff;
  color:#0b6ff5;
  font-size:20px;
  margin-bottom:16px;
}
.notification-visual.has-image{overflow:hidden;background:#fff}
.notification-visual.has-image img{width:100%;height:100%;object-fit:contain}
.notification-card h3{margin:0 0 8px;font-size:18px}
.notification-card p{font-size:13px;line-height:1.5;margin:0 0 8px}
.notification-card small{display:block;color:#708097;font-size:11px;line-height:1.4;min-height:30px}
.notification-card strong{display:block;margin-top:15px;color:#096cf2;font-size:17px}
.notification-badge,
.duo-badge{
  position:absolute;
  right:14px;
  top:14px;
  border-radius:999px;
  background:#edf5ff;
  color:#1268de;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
  padding:6px 8px;
}
.section-note{margin-top:18px;color:#687891;font-size:12px}

.duo-section{
  background:linear-gradient(145deg,#061631,#0a2855);
  color:#fff;
}
.duo-section .tag{color:#65d7ff}
.duo-section h2,
.duo-section .center h2,
.duo-section .narrow h2{
  color:#fff !important;
}
.duo-section .center > p,
.duo-section .narrow > p,
.duo-section .section-note{
  color:#dce9f8 !important;
}
.duo-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  max-width:980px;
  margin:30px auto 0;
}
.duo-card{
  position:relative;
  border:1px solid rgba(120,180,255,.25);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(10px);
  border-radius:24px;
  padding:24px;
  overflow:hidden;
}
.duo-preview{
  aspect-ratio:16/10;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(124,183,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.duo-preview-browser{
  height:100%;
  display:flex;
  flex-direction:column;
}
.duo-preview-top{
  height:34px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:6px;
  color:#9fc5ff;
  font-size:11px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.duo-preview-top i{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.38);
}
.duo-preview-top span{margin-left:auto;opacity:.95}
.duo-preview-body{
  flex:1;
  display:grid;
  grid-template-columns:96px 1fr;
  min-height:0;
}
.duo-preview-body aside{
  padding:14px 12px;
  border-right:1px solid rgba(255,255,255,.08);
  background:rgba(4,22,48,.28);
}
.duo-preview-body aside b{
  display:block;
  font-size:11px;
  color:#fff;
  margin-bottom:12px;
}
.duo-preview-body aside span{
  display:block;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  margin-bottom:10px;
}
.duo-preview-body main{padding:14px}
.duo-switch{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.duo-switch b,
.duo-switch em{
  font-style:normal;
  font-size:11px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
}
.duo-switch b{background:#fff;color:#0b2246}
.duo-switch em{background:rgba(255,255,255,.08);color:#b9d8ff}
.duo-cards{display:grid;gap:10px}
.duo-cards p{
  margin:0;
  height:34px;
  border-radius:12px;
  background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(95,177,255,.12));
  border:1px solid rgba(255,255,255,.08);
}
.duo-cards p:nth-child(2){width:82%}
.duo-cards p:nth-child(3){width:68%}
.duo-head{display:flex;gap:14px;align-items:flex-start}
.duo-visual{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#126ff8,#11c5f5);
  font-size:20px;
  color:#fff;
}
.duo-visual.has-image{overflow:hidden}
.duo-visual.has-image img{width:100%;height:100%;object-fit:contain}
.duo-card h3{margin:0 0 7px;font-size:23px;color:#fff}
.duo-card p{margin:0;color:#c4d2e3;font-size:13px;line-height:1.5}
.duo-card ul{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.duo-card li{font-size:12px;color:#e8f1fb}
.duo-card li span{color:#55d6ff;margin-right:7px}
.duo-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.12);padding-top:16px}
.duo-bottom strong{font-size:15px;color:#fff}
.duo-bottom .btn{min-height:40px;padding:0 14px;font-size:11px;background:#fff}
.duo-badge{background:rgba(31,132,255,.18);color:#72d9ff;border:1px solid rgba(105,205,255,.22)}

.hp-field{display:none !important}

@media(max-width:760px){
  .notification-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .notification-card{padding:15px;border-radius:17px}
  .notification-preview,
  .duo-preview{border-radius:15px;margin-bottom:12px}
  .notification-preview{padding:10px}
  .notif-bubble{padding:8px 9px;border-radius:12px;gap:8px}
  .notif-bubble span{width:28px;height:28px;flex-basis:28px;border-radius:10px}
  .notif-bubble b{font-size:11px}
  .notif-bubble small{font-size:9px}
  .notif-mini-chart{height:28px;margin-top:10px}
  .notif-mini-chart i{width:10px}
  .notification-visual{width:38px;height:38px;border-radius:11px;margin-bottom:11px}
  .notification-card h3{font-size:14px}
  .notification-card p{font-size:10.5px}
  .notification-card small{font-size:9px;min-height:0}
  .notification-card strong{font-size:13px;margin-top:10px}
  .notification-badge{font-size:6px;right:9px;top:9px;padding:4px 5px}
  .duo-grid{grid-template-columns:1fr;gap:11px;margin-top:22px}
  .duo-card{padding:17px;border-radius:18px}
  .duo-head{gap:10px}
  .duo-preview-top{height:28px;padding:0 10px;font-size:9px}
  .duo-preview-body{grid-template-columns:72px 1fr}
  .duo-preview-body aside{padding:10px}
  .duo-preview-body main{padding:10px}
  .duo-switch b,.duo-switch em{font-size:9px;padding:6px 8px}
  .duo-cards p{height:28px;border-radius:10px}
  .duo-visual{width:39px;height:39px;flex-basis:39px;border-radius:11px}
  .duo-card h3{font-size:18px}
  .duo-card p{font-size:11px}
  .duo-card ul{gap:7px 10px;margin:14px 0}
  .duo-card li{font-size:10px}
  .duo-bottom strong{font-size:12px}
  .duo-bottom .btn{min-height:36px;font-size:10px}
  .duo-badge{font-size:6px;right:10px;top:10px}
}