.sp-widget{position:fixed;bottom:20px;left:20px;z-index:99999;font:14px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#24324a}.sp-toggle{background:linear-gradient(135deg,#2478d2,#35a5ea);color:#fff;border:0;border-radius:25px;padding:11px 17px;font-weight:750;cursor:pointer;box-shadow:0 8px 18px #2478d244}.sp-panel{position:absolute;bottom:54px;left:0;width:330px;max-width:calc(100vw - 40px);background:#fff;border:1px solid #dbe6f4;border-radius:14px;box-shadow:0 12px 38px #1b497f22;overflow:hidden}.sp-panel[hidden]{display:none}.sp-head{background:linear-gradient(135deg,#2478d2,#35a5ea);color:#fff;padding:15px 17px;display:flex;justify-content:space-between;font-weight:800}.sp-close{background:none;color:#fff;border:0;cursor:pointer;font-size:17px}.sp-body{padding:17px}.sp-body p{margin:0 0 13px;line-height:1.5;color:#536780}.sp-topic{display:flex;gap:9px;align-items:center;margin:10px 0;cursor:pointer}.sp-topic input{margin:0;accent-color:#287ed5}.sp-submit{background:linear-gradient(135deg,#2478d2,#35a5ea);color:#fff;border:0;border-radius:9px;padding:11px 14px;width:100%;font-weight:800;cursor:pointer;margin-top:13px}.sp-submit:disabled{background:#9ca3af;cursor:default}.sp-error{color:#b91c1c;margin-top:8px}
.sp-foreground {
  position: fixed; right: 22px; bottom: 22px; top: auto; left: auto; z-index: 100000;
  box-sizing: border-box; display: grid; grid-template-columns: 46px minmax(0, 1fr) 24px;
  column-gap: 14px; row-gap: 5px; align-items: start;
  width: min(390px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
  padding: 18px; overflow: hidden; border: 1px solid #d4e5f6; border-radius: 18px;
  background: linear-gradient(145deg, #fff 55%, #f3f9ff); color: #24324a;
  box-shadow: 0 18px 45px rgba(22,64,115,.2), 0 3px 12px rgba(22,64,115,.08);
  font: 14px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  animation: sp-rise .3s ease-out;
}
.sp-foreground .sp-notification-thumb {
  box-sizing: border-box; grid-column: 1; grid-row: 1 / 4; width: 46px; height: 46px;
  border: 1px solid #cce5fb; border-radius: 13px; background: #e6f3ff;
  object-fit: contain; box-shadow: 0 2px 6px rgba(22,64,115,.08);
}
.sp-foreground strong, .sp-foreground span {
  display: block; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: normal;
  white-space: normal;
}
.sp-foreground strong {grid-column: 2; grid-row: 1; color: #172b4d; font-size: 16px; line-height: 1.3; font-weight: 800;}
.sp-foreground span {grid-column: 2; grid-row: 2; color: #536780; line-height: 1.45;}
.sp-foreground a {grid-column: 2; grid-row: 3; justify-self: start; margin-top: 5px; padding: 7px 12px; border-radius: 8px; background: #e7f3ff; color: #176db4; font-weight: 800; text-decoration: none;}
.sp-foreground a:hover {background: #d4eaff;}
.sp-foreground button {grid-column: 3; grid-row: 1; background: transparent; border: 0; color: #7990aa; font-size: 17px; line-height: 1; cursor: pointer;}
.sp-foreground button:hover {color: #172b4d;}
@keyframes sp-rise {from {opacity: 0; transform: translateY(16px)} to {opacity: 1; transform: translateY(0)}}
@media (max-width: 480px) {.sp-foreground {right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); padding: 15px;}}