:root {
--oksp-c1: #36A2EB;
--oksp-c2: #4BC0C0;
--oksp-c3: #FF5C26;
}
#oksp-container {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 999999;
max-width: 320px;
width: calc(100% - 48px);
pointer-events: none;
}
#oksp-container.oksp-pos-right {
left: auto;
right: 24px;
}   .oksp-widget {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px 13px 18px;
background: #ffffff;
color: #1a1a1a;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.07);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.1),
0 1px 4px rgba(0, 0, 0, 0.06);
pointer-events: all;
position: relative;
overflow: hidden; opacity: 0;
transform: translateY(16px);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.oksp-widget.oksp-visible {
opacity: 1;
transform: translateY(0);
}
.oksp-widget.oksp-hiding {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.3s ease, transform 0.3s ease;
} .oksp-widget::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--oksp-c1), var(--oksp-c2), var(--oksp-c3));
border-radius: 12px 0 0 12px;
}   .oksp-icon {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 10px;
background: linear-gradient(135deg, #eef7fd, #e6f7f7);
border: 1px solid rgba(75, 192, 192, 0.2);
display: flex;
align-items: center;
justify-content: center;
}   .oksp-body {
flex: 1;
min-width: 0;
} .oksp-line1 {
font-size: 12px;
font-weight: 400;
line-height: 1.4;
color: #4b5563;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oksp-line1 strong {
font-weight: 700;
color: #111827;
} .oksp-line2 {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: var(--oksp-c2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
} .oksp-meta {
margin-top: 5px;
display: flex;
align-items: center;
gap: 8px;
}
.oksp-time {
font-size: 11px;
color: #9ca3af;
line-height: 1;
display: flex;
align-items: center;
gap: 4px;
} .oksp-time::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--oksp-c3);
flex-shrink: 0;
}
.oksp-amount {
font-size: 11px;
color: var(--oksp-c2);
font-weight: 600;
line-height: 1;
}   .oksp-close {
position: absolute;
top: 7px;
right: 9px;
background: none;
border: none;
padding: 2px 4px;
font-size: 14px;
line-height: 1;
cursor: pointer;
color: #d1d5db;
border-radius: 4px;
transition: color 0.15s ease, background 0.15s ease;
}
.oksp-close:hover {
color: #6b7280;
background: #f3f4f6;
}   @media (max-width: 480px) {
#oksp-container {
bottom: 12px;
left: 12px;
width: calc(100% - 24px);
max-width: 100%;
}
#oksp-container.oksp-pos-right {
left: 12px;
right: 12px;
}
}