/* CryptoDoc activity surfaces: carbon, mint signal and quiet document details. */
#sp-visitor-bar { position: fixed; width: fit-content; max-width: 100%; pointer-events: none; }
.cds-activity-slot { display: flex; justify-content: center; min-height: 62px; margin-bottom: 26px; }
.cds-activity-slot:empty, .cds-activity-slot[hidden] { display: none; }
#sp-visitor-bar.sp-visitor-dock { position: fixed; left: 20px; bottom: max(20px,env(safe-area-inset-bottom)); z-index: 1040; max-width: calc(100vw - 40px); }
.sp-visitor-inner {
    box-sizing: border-box; min-height: 48px; display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 10px 18px; color: #dbece8; background: linear-gradient(120deg,#1d3027f2,#0c171ff2);
    border: 1px solid #aacb985c; border-radius: 12px; backdrop-filter: blur(18px); box-shadow: 0 12px 35px #0003;
    font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.sp-visitor-brand { display: inline-grid; place-items: center; width: 23px; height: 23px; border: 1px solid #60e4ca40; border-radius: 7px; background: #41dec512; color: #8cf9de; font: 700 9px/1 monospace; letter-spacing: -.5px; }
.sp-pulse { width: 5px; height: 5px; flex: 0 0 auto; background: #62e7ba; border-radius: 50%; box-shadow: 0 0 0 4px #62e7ba0c; animation: cds-live-pulse 3s ease-in-out infinite; }
.sp-visitor-count { color: #a8ffe4; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-visitor-label { color: #96abae; font-size: 11px; }
.sp-count-up { color: #bdffe9; }
.sp-count-down { color: #8ac9db; }
.sp-flags { display: inline-flex; gap: 4px; padding-inline-start: 10px; border-inline-start: 1px solid #ffffff12; }
.sp-flag { color: #7f9ba5; font: 9px/1.5 monospace; letter-spacing: .04em; }
#sp-notif-container { position: fixed; z-index: 1050; display: flex; flex-direction: column; gap: 10px; pointer-events: none; width: min(354px, calc(100vw - 32px)); }
#sp-notif-container.sp-pos-bottom-left { bottom: max(90px, env(safe-area-inset-bottom)); left: 24px; }
#sp-notif-container.sp-pos-bottom-right { bottom: 96px; right: 24px; }
#sp-notif-container.sp-pos-top-left { top: var(--sp-popup-top, 145px); left: 24px; }
#sp-notif-container.sp-pos-top-right { top: var(--sp-popup-top, 145px); right: 24px; }
.sp-notif {
    position: relative; display: flex; align-items: flex-start; gap: 14px; box-sizing: border-box;
    padding: 20px 35px 20px 18px; overflow: hidden; border: 1px solid #65ddc332; border-radius: 16px;
    background: linear-gradient(125deg, #102128f7, #0a111bf7 75%); color: #eef8f6;
    box-shadow: 0 18px 55px #0006, inset 0 1px #ffffff06; backdrop-filter: blur(20px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    pointer-events: auto; opacity: 0; transform: translate3d(0, 18px, 0);
    transition: opacity .38s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.sp-notif::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, #9bffe37a, transparent); }
.sp-notif::after { content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, #39c5b0, #6ac9e7); transform-origin: left; animation: cds-notif-progress var(--sp-duration, 5s) linear forwards; opacity: .65; }
.sp-notif.sp-notif-glass { background: linear-gradient(125deg, #143139eb, #0b1823e8); }
.sp-notif.sp-notif-show { opacity: 1; transform: translate3d(0, 0, 0); }
.sp-notif.sp-notif-hide { opacity: 0; transform: translate3d(-12px, 8px, 0); }
.sp-notif-icon { width: 43px; height: 49px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #55d9bc3b; border-radius: 11px; background: linear-gradient(145deg, #44d8b618, #3da6d008); color: #86f0d3; }
.sp-notif-icon svg { width: 25px; height: 29px; }
.sp-notif-body { min-width: 0; flex: 1; }
.sp-notif-brand { display: flex; align-items: center; gap: 6px; color: #80c7b8; font: 600 8px/1.4 monospace; letter-spacing: .18em; margin-bottom: 7px; }
.sp-notif-brand::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #6aefca; box-shadow: 0 0 9px #6aefca44; }
.sp-notif-title { font-size: 11px; line-height: 1.6; color: #91a6ae; overflow-wrap: anywhere; }
.sp-notif-title strong { color: #ccdedf; font-weight: 500; }
.sp-notif-product { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.5; color: #effaf7; margin-top: 4px; overflow-wrap: anywhere; }
.sp-notif-time { color: #708a94; font-size: 10px; line-height: 1.5; margin-top: 8px; }
.sp-notif-close { position: absolute; inset-inline-end: 10px; top: 10px; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #78979e; cursor: pointer; font: 20px/1 Arial,sans-serif; padding: 0; }
.sp-notif-close:hover, .sp-notif-close:focus-visible { background: #ffffff08; color: #ccfff0; border-color: #5ce0c42b; outline: none; }
@keyframes cds-live-pulse { 50% { opacity: .55; box-shadow: 0 0 0 5px #62e7ba04; } }
@keyframes cds-notif-progress { to { transform: scaleX(0); } }
@media (max-width: 600px) {
    #sp-visitor-bar.sp-visitor-dock { left: 12px; bottom: max(20px,env(safe-area-inset-bottom)); max-width: calc(100vw - 108px); margin: 0; }
    .sp-visitor-inner { min-height: 38px; gap: 7px; padding: 6px 10px; }
    .sp-visitor-count { font-size: 12px; }
    .sp-visitor-label { font-size: 10px; }
    .sp-visitor-dock .sp-visitor-label { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
    .sp-visitor-dock :is(.sp-flags,.sp-visitor-brand) { display: none; }
    .sp-visitor-count { flex-shrink: 0; }
    .sp-flags { gap: 3px; padding-inline-start: 7px; }
    .sp-flag:nth-child(n+4) { display: none; }
    #sp-notif-container.sp-pos-bottom-left { left: 16px; bottom: max(96px, calc(env(safe-area-inset-bottom) + 80px)); }
    #sp-notif-container.sp-pos-bottom-right { right: 16px; bottom: max(96px, calc(env(safe-area-inset-bottom) + 80px)); }
    #sp-notif-container.sp-pos-top-left { top: var(--sp-popup-top, 135px); left: 16px; }
    #sp-notif-container.sp-pos-top-right { top: var(--sp-popup-top, 135px); right: 16px; }
    .sp-notif { padding: 17px 34px 17px 15px; gap: 12px; border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-pulse, .sp-notif::after { animation: none; }
    .sp-notif { transition: opacity .15s; transform: none !important; }
}