.cp-pay-btn {
display:         flex;
justify-content: center;
align-items:     center;
gap:             8px;
padding:         14px 28px;
background:      #2A85FF;
color:           #fff;
border:          none;
border-radius:   10px;
font-size:       16px;
font-weight:     600;
cursor:          pointer;
transition:      background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
box-shadow:      none;
letter-spacing:  0.01em;
user-select:     none;
}
.cp-pay-btn:hover {
background:  #1a70e0;
box-shadow:  none;
transform:   translateY(-1px);
}
.cp-pay-btn:active {
transform:   translateY(0);
box-shadow:  0 2px 8px rgba(42, 133, 255, 0.3);
}
.cp-btn-icon {
font-size: 18px;
line-height: 1;
} .cp-pay-btn.btn-gold {
background: linear-gradient(135deg, #f6a623, #e8860a);
box-shadow: 0 4px 14px rgba(246, 166, 35, 0.4);
}
.cp-pay-btn.btn-gold:hover {
background: linear-gradient(135deg, #e8a020, #d4780a);
box-shadow: 0 6px 20px rgba(246, 166, 35, 0.5);
}
.cp-pay-btn.btn-green {
background: linear-gradient(135deg, #34C759, #28a548);
box-shadow: 0 4px 14px rgba(52, 199, 89, 0.4);
}
.cp-pay-btn.btn-green:hover {
background: linear-gradient(135deg, #28a548, #1e8f3c);
box-shadow: 0 6px 20px rgba(52, 199, 89, 0.5);
}
.cp-pay-btn.btn-dark {
background: linear-gradient(135deg, #1c1c1e, #3a3a3c);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.cp-pay-btn.btn-dark:hover {
background: linear-gradient(135deg, #2c2c2e, #4a4a4c);
} .cp-notice {
position:      fixed;
bottom:        30px;
right:         30px;
z-index:       999999;
display:       flex;
align-items:   center;
gap:           12px;
padding:       16px 20px;
border-radius: 12px;
font-size:     15px;
font-weight:   500;
box-shadow:    0 8px 30px rgba(0, 0, 0, 0.15);
animation:     cpSlideIn 0.3s ease;
max-width:     360px;
}
@keyframes cpSlideIn {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}
.cp-notice--success {
background: #f0fdf4;
color:      #166534;
border:     1px solid #bbf7d0;
}
.cp-notice--error {
background: #fef2f2;
color:      #991b1b;
border:     1px solid #fecaca;
}
.cp-notice-close {
background:  none;
border:      none;
font-size:   20px;
cursor:      pointer;
color:       inherit;
opacity:     0.6;
padding:     0;
line-height: 1;
margin-left: auto;
flex-shrink: 0;
}
.cp-notice-close:hover {
opacity: 1;
} @media (max-width: 480px) {
.cp-pay-btn {
width:           100%;
justify-content: center;
padding:         16px 20px;
}
.cp-notice {
bottom:    16px;
right:     16px;
left:      16px;
max-width: none;
}
} #cp-email-modal {
position:        fixed;
inset:           0;
z-index:         1000000;
display:         none;
align-items:     center;
justify-content: center;
}
#cp-email-overlay {
position: absolute;
inset:    0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(3px);
}
#cp-email-box {
position:      relative;
z-index:       1;
background:    #212121;
border:        1px solid #FFDD2D7A;
font-family:   "Roboto";
border-radius: 16px;
padding:       36px 32px 32px;
width:         100%;
max-width:     420px;
box-shadow:    0 24px 60px rgba(0, 0, 0, 0.18);
animation:     cpFadeUp 0.25s ease;
}
@keyframes cpFadeUp {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: translateY(0); }
}
#cp-email-close {
position:   absolute;
top:        14px;
right:      16px;
background: none;
border:     none;
font-size:  22px;
line-height: 1;
cursor:     pointer;
color:      #9ca3af;
padding:    4px 6px;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
}
#cp-email-close:hover {
color:      #374151;
background: #f3f4f6;
}
#cp-email-title {
margin:      0 0 6px;
font-size:   20px;
font-weight: 700;
color:       #fff;
}
#cp-email-desc {
margin:    0 0 20px;
font-size: 14px;
line-height: 1.4;
color:     #fff;
opacity:   .8;
}
#cp-email-input {
display:       block;
width:         100%;
box-sizing:    border-box;
padding:       12px 16px;
border:        2px solid #e5e7eb;
border-radius: 10px;
font-size:     16px;
outline:       none;
transition:    border-color 0.2s;
margin-bottom: 6px;
}
#cp-email-input:focus {
border-color: #FFDD2D7A;
}
#cp-email-input.cp-error {
border-color: #ef4444;
}
#cp-email-error {
display:     none;
color:       #FF6636;
font-size:   14px;
margin-bottom: 10px;
padding-left: 14px;
margin-top: -5px;
font-weight: 500;
}
#cp-email-submit {
margin-top:    16px;
display:       block;
width:         100%;
padding:       13px;
background:    #FFDD2D;
color:         #000;
font-family:   "Roboto";
border:        none;
border-radius: 10px;
font-size:     15px;
font-weight:   600;
cursor:        pointer;
transition:    background 0.2s;
}
#cp-email-submit:hover {
background: #e1c326;
} .cp-notice-body {
display:        flex;
flex-direction: column;
gap:            4px;
flex: 1;
}
.cp-notice-title {
font-size:   16px;
font-weight: 700;
display:     block;
}
.cp-notice-text {
font-size: 14px;
opacity:   0.9;
display:   block;
}
@media (max-width: 480px) {
#cp-email-box {
margin:  0 16px;
padding: 28px 20px 24px;
}
} #cp-skeleton {
position:        fixed;
inset:           0;
z-index:         2147483647;
display:         none;
align-items:     center;
justify-content: center;
pointer-events:  all;
background:      rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
#cp-skeleton.cp-skeleton--visible {
display:   flex;
animation: cpSkFadeIn 0.2s ease;
}
#cp-skeleton.cp-skeleton--hiding {
animation: cpSkFadeOut 0.3s ease forwards;
}
@keyframes cpSkFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cpSkFadeOut { from { opacity: 1; } to { opacity: 0; } }
.preloader {
width:           140px;
height:          140px;
position:        relative;
display:         flex;
align-items:     center;
justify-content: center;
}
.circle-bg {
position:      absolute;
width:         110px;
height:        110px;
border-radius: 50%;
background:    #1c1c1c;
}
.spinner-svg {
position:  absolute;
top:       0;
left:      0;
width:     140px;
height:    140px;
animation: cpSpinRotate 2s linear infinite;
}
@keyframes cpSpinRotate {
from { transform: rotate(-90deg); }
to   { transform: rotate(270deg); }
}
.arc {
fill:              none;
stroke:            #f0c020;
stroke-width:      6;
stroke-linecap:    round;
stroke-dasharray:  30 372;
stroke-dashoffset: 0;
animation:         cpArcStretch 1.6s ease-in-out infinite;
}
@keyframes cpArcStretch {
0%   { stroke-dasharray:  30 372; stroke-dashoffset:    0; }
50%  { stroke-dasharray: 280 122; stroke-dashoffset:  -80; }
100% { stroke-dasharray:  30 372; stroke-dashoffset: -402; }
}
.p-letter {
position:    relative;
z-index:     10;
color:       #f0c020;
font-family: 'Trebuchet MS', Georgia, serif;
font-size:   62px;
font-weight: 500;
line-height: 1;
user-select: none;
margin-top:  4px;
} #cp-email-modal {
display:         none;
position:        fixed;
inset:           0;
z-index:         1000000;
align-items:     center;
justify-content: center;
}
#cp-email-modal.cp-modal--visible {
display: flex;
}
#cp-email-warning {
display:       none;
margin-top:    16px;
padding:       12px 14px;
background:    #fffbeb;
border:        1px solid #fde68a;
border-radius: 8px;
font-size:     13px;
line-height:   1.5;
color:         #000;
}
#cp-email-warning a { color: #b45309; text-decoration: underline; font-size: 12px; }