:root {
--mangaauth-primary: #6c5ce7;
--mangaauth-secondary: #a29bfe;
--mangaauth-bg: #1a1a2e;
--mangaauth-card-bg: #16213e;
--mangaauth-text: #e0e0e0;
--mangaauth-accent: #e94560;
--mangaauth-input-bg: #0f1529;
--mangaauth-border: #2a2a4a;
--mangaauth-success: #00b894;
--mangaauth-error: #e94560;
--mangaauth-warning: #fdcb6e;
} .mangaauth-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
padding: 20px;
}
.mangaauth-overlay.mangaauth-visible {
opacity: 1;
} .mangaauth-modal {
background: var(--mangaauth-card-bg);
border-radius: 16px;
padding: 36px 32px;
width: 100%;
max-width: 420px;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
transform: translateY(20px) scale(0.95);
transition: transform 0.3s ease;
}
.mangaauth-overlay.mangaauth-visible .mangaauth-modal {
transform: translateY(0) scale(1);
} .mangaauth-modal::-webkit-scrollbar {
width: 6px;
}
.mangaauth-modal::-webkit-scrollbar-track {
background: transparent;
}
.mangaauth-modal::-webkit-scrollbar-thumb {
background: var(--mangaauth-border);
border-radius: 3px;
} .mangaauth-close {
position: absolute;
top: 12px;
right: 16px;
background: none;
border: none;
color: var(--mangaauth-text);
font-size: 28px;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.2s, transform 0.2s;
line-height: 1;
padding: 4px;
z-index: 10;
}
.mangaauth-close:hover {
opacity: 1;
transform: rotate(90deg);
} .mangaauth-header {
text-align: center;
margin-bottom: 24px;
}
.mangaauth-logo-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 16px;
background: linear-gradient(135deg, var(--mangaauth-primary), var(--mangaauth-secondary));
color: #fff;
margin-bottom: 16px;
}
.mangaauth-header h2 {
color: #fff;
font-size: 24px;
font-weight: 700;
margin: 0 0 6px;
}
.mangaauth-subtitle {
color: var(--mangaauth-text);
opacity: 0.6;
font-size: 14px;
margin: 0;
} .mangaauth-notification {
padding: 12px 16px;
border-radius: 10px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
animation: mangaauth-slideDown 0.3s ease;
}
.mangaauth-notification.mangaauth-notif-success {
background: rgba(0, 184, 148, 0.15);
border: 1px solid rgba(0, 184, 148, 0.3);
color: var(--mangaauth-success);
}
.mangaauth-notification.mangaauth-notif-error {
background: rgba(233, 69, 96, 0.15);
border: 1px solid rgba(233, 69, 96, 0.3);
color: var(--mangaauth-error);
}
.mangaauth-notification.mangaauth-notif-warning {
background: rgba(253, 203, 110, 0.15);
border: 1px solid rgba(253, 203, 110, 0.3);
color: var(--mangaauth-warning);
}
@keyframes mangaauth-slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
} .mangaauth-oauth-buttons {
display: flex;
gap: 12px;
margin-bottom: 20px;
}
.mangaauth-oauth-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 16px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
border: 1px solid var(--mangaauth-border);
}
.mangaauth-google-btn {
background: #fff;
color: #333;
}
.mangaauth-google-btn:hover {
background: #f0f0f0;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.mangaauth-discord-btn {
background: #5865F2;
color: #fff;
border-color: #5865F2;
}
.mangaauth-discord-btn:hover {
background: #4752C4;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
} .mangaauth-divider {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
color: var(--mangaauth-text);
opacity: 0.4;
font-size: 13px;
}
.mangaauth-divider::before,
.mangaauth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--mangaauth-border);
} .mangaauth-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.mangaauth-field label {
display: block;
color: var(--mangaauth-text);
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
}
.mangaauth-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.mangaauth-input-icon {
position: absolute;
left: 14px;
color: var(--mangaauth-text);
opacity: 0.4;
pointer-events: none;
transition: opacity 0.2s;
}
.mangaauth-input-wrap input {
width: 100%;
padding: 12px 14px 12px 42px;
background: var(--mangaauth-input-bg);
border: 1.5px solid var(--mangaauth-border);
border-radius: 10px;
color: #fff;
font-size: 15px;
transition: all 0.2s ease;
outline: none;
}
.mangaauth-input-wrap input:focus {
border-color: var(--mangaauth-primary);
box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
}
.mangaauth-input-wrap input:focus ~ .mangaauth-input-icon,
.mangaauth-input-wrap input:focus + .mangaauth-input-icon {
opacity: 0.8;
}
.mangaauth-input-wrap input::placeholder {
color: var(--mangaauth-text);
opacity: 0.3;
} .mangaauth-toggle-pw {
position: absolute;
right: 12px;
background: none;
border: none;
color: var(--mangaauth-text);
opacity: 0.4;
cursor: pointer;
padding: 4px;
transition: opacity 0.2s;
}
.mangaauth-toggle-pw:hover {
opacity: 0.8;
} .mangaauth-pw-strength {
margin-top: 8px;
display: none;
}
.mangaauth-pw-strength.active {
display: block;
}
.mangaauth-pw-bar {
height: 4px;
background: var(--mangaauth-border);
border-radius: 2px;
overflow: hidden;
}
.mangaauth-pw-fill {
height: 100%;
width: 0%;
border-radius: 2px;
transition: width 0.3s ease, background 0.3s ease;
}
.mangaauth-pw-label {
display: block;
font-size: 12px;
margin-top: 4px;
opacity: 0.7;
}
.mangaauth-pw-strength.pw-weak .mangaauth-pw-fill { width: 25%; background: var(--mangaauth-error); }
.mangaauth-pw-strength.pw-weak .mangaauth-pw-label { color: var(--mangaauth-error); }
.mangaauth-pw-strength.pw-fair .mangaauth-pw-fill { width: 50%; background: var(--mangaauth-warning); }
.mangaauth-pw-strength.pw-fair .mangaauth-pw-label { color: var(--mangaauth-warning); }
.mangaauth-pw-strength.pw-good .mangaauth-pw-fill { width: 75%; background: #55efc4; }
.mangaauth-pw-strength.pw-good .mangaauth-pw-label { color: #55efc4; }
.mangaauth-pw-strength.pw-strong .mangaauth-pw-fill { width: 100%; background: var(--mangaauth-success); }
.mangaauth-pw-strength.pw-strong .mangaauth-pw-label { color: var(--mangaauth-success); } .mangaauth-extras {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: -4px;
}
.mangaauth-remember {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--mangaauth-text);
cursor: pointer;
opacity: 0.7;
}
.mangaauth-remember input[type="checkbox"] {
accent-color: var(--mangaauth-primary);
width: 16px;
height: 16px;
}
.mangaauth-forgot-link {
font-size: 13px;
color: var(--mangaauth-primary);
text-decoration: none;
transition: color 0.2s;
}
.mangaauth-forgot-link:hover {
color: var(--mangaauth-secondary);
} .mangaauth-submit-btn {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, var(--mangaauth-primary), var(--mangaauth-secondary));
color: #fff;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 4px;
}
.mangaauth-submit-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(108, 92, 231, 0.35);
}
.mangaauth-submit-btn:active {
transform: translateY(0);
}
.mangaauth-submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
} .mangaauth-switch {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: var(--mangaauth-text);
opacity: 0.7;
}
.mangaauth-switch-link {
color: var(--mangaauth-primary);
text-decoration: none;
font-weight: 600;
transition: color 0.2s;
}
.mangaauth-switch-link:hover {
color: var(--mangaauth-secondary);
} .mangaauth-hp-wrap {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
} .mangaauth-form-container {
animation: mangaauth-fadeIn 0.3s ease;
}
@keyframes mangaauth-fadeIn {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
} @media (max-width: 480px) {
.mangaauth-modal {
padding: 28px 20px;
border-radius: 12px;
max-height: 95vh;
}
.mangaauth-header h2 {
font-size: 20px;
}
.mangaauth-oauth-buttons {
flex-direction: column;
}
.mangaauth-extras {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
} .mangaauth-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 20px;
background: var(--mangaauth-primary);
color: #fff !important;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none !important;
cursor: pointer;
transition: all 0.2s ease;
}
.mangaauth-trigger:hover {
background: var(--mangaauth-secondary);
transform: translateY(-1px);
}