:root {
--ma-bg: #1e1e2e;
--ma-bg-elevated: #241935;
--ma-bg-input: #12121a;
--ma-bg-modal: #1a1a28;
--ma-overlay: rgba(0, 0, 0, 0.75);
--ma-border: #2a2a3e;
--ma-border-focus: #bb86fc;
--ma-text: #e0e0e0;
--ma-text-muted: #666680;
--ma-text-dim: #888;
--ma-accent: #bb86fc;
--ma-accent-hover: #d4a5ff;
--ma-accent-text: #000;
--ma-accent-soft: rgba(187, 134, 252, 0.12);
--ma-success: #4CAF50;
--ma-error: #f44336;
--ma-warning: #FF9800;
--ma-radius: 14px;
--ma-radius-sm: 8px;
--ma-radius-xs: 6px;
--ma-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
--ma-shadow-glow: 0 0 24px rgba(187, 134, 252, 0.15);
--ma-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
} .mangaauth-overlay {
position: fixed;
inset: 0;
background: var(--ma-overlay);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
opacity: 0;
transition: opacity 0.25s ease;
font-family: var(--ma-font);
box-sizing: border-box;
}
.mangaauth-overlay * { box-sizing: border-box; }
.mangaauth-overlay.mangaauth-visible { opacity: 1; }
.mangaauth-modal {
background: var(--ma-bg-modal);
border: 1px solid var(--ma-border);
border-radius: var(--ma-radius);
width: 100%;
max-width: 420px;
max-height: 92vh;
overflow-y: auto;
overflow-x: hidden;
position: relative;
padding: 22px 18px;
color: var(--ma-text);
font-size: 14px;
transform: translateY(20px) scale(0.96);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--ma-shadow); scrollbar-width: thin;
scrollbar-color: var(--ma-border) transparent;
}
.mangaauth-modal::-webkit-scrollbar { width: 6px; }
.mangaauth-modal::-webkit-scrollbar-track { background: transparent; }
.mangaauth-modal::-webkit-scrollbar-thumb { background: var(--ma-border); border-radius: 3px; }
.mangaauth-visible .mangaauth-modal { transform: translateY(0) scale(1); }
.mangaauth-close {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.04);
border: none;
color: var(--ma-text);
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.18s;
z-index: 2;
font-family: var(--ma-font);
}
.mangaauth-close:hover, .mangaauth-close:active {
background: rgba(255, 255, 255, 0.1);
transform: rotate(90deg);
} .mangaauth-form-container { display: none; animation: maFade 0.3s ease; }
.mangaauth-form-container.active { display: block; }
@keyframes maFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.mangaauth-header {
text-align: center;
margin-bottom: 18px;
}
.mangaauth-logo-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--ma-accent) 0%, #8b5cf6 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
color: #fff;
box-shadow: var(--ma-shadow-glow);
}
.mangaauth-logo-icon svg { width: 26px; height: 26px; }
.mangaauth-header h2 {
margin: 0 0 4px;
color: var(--ma-text);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
}
.mangaauth-subtitle {
margin: 0;
color: var(--ma-text-muted);
font-size: 13px;
} .mangaauth-notification {
padding: 10px 14px;
border-radius: var(--ma-radius-sm);
margin-bottom: 14px;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
animation: maFade 0.25s ease;
}
.mangaauth-notification.mangaauth-notif-success {
background: rgba(76, 175, 80, 0.12);
color: var(--ma-success);
border: 1px solid rgba(76, 175, 80, 0.3);
}
.mangaauth-notification.mangaauth-notif-error {
background: rgba(244, 67, 54, 0.12);
color: var(--ma-error);
border: 1px solid rgba(244, 67, 54, 0.3);
}
.mangaauth-notification.mangaauth-notif-warning,
.mangaauth-notification.mangaauth-notif-info {
background: var(--ma-accent-soft);
color: var(--ma-accent);
border: 1px solid rgba(187, 134, 252, 0.3);
}
.mangaauth-notif-icon { font-size: 16px; flex-shrink: 0; }
.mangaauth-notif-text { flex: 1; word-break: break-word; } .mangaauth-oauth-buttons {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
}
.mangaauth-oauth-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 11px 16px;
background: var(--ma-bg-input);
border: 1px solid var(--ma-border);
border-radius: var(--ma-radius-sm);
color: var(--ma-text);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: all 0.18s;
cursor: pointer;
font-family: var(--ma-font);
}
.mangaauth-oauth-btn:hover, .mangaauth-oauth-btn:active {
background: rgba(255, 255, 255, 0.04);
border-color: var(--ma-accent);
transform: translateY(-1px);
}
.mangaauth-discord-btn:hover { border-color: #5865F2; }
.mangaauth-oauth-btn svg { flex-shrink: 0; } .mangaauth-divider {
display: flex;
align-items: center;
margin: 14px 0;
color: var(--ma-text-muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.mangaauth-divider::before,
.mangaauth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--ma-border);
}
.mangaauth-divider span { padding: 0 12px; } .mangaauth-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.mangaauth-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.mangaauth-field label {
color: var(--ma-text-muted);
font-size: 12px;
font-weight: 600;
margin-left: 2px;
}
.mangaauth-input-wrap {
position: relative;
display: flex;
align-items: center;
background: var(--ma-bg-input);
border: 1px solid var(--ma-border);
border-radius: var(--ma-radius-sm);
transition: border-color 0.18s, background 0.18s;
overflow: hidden;
}
.mangaauth-input-wrap:focus-within {
border-color: var(--ma-border-focus);
background: rgba(187, 134, 252, 0.03);
}
.mangaauth-input-icon {
position: absolute;
left: 12px;
color: var(--ma-text-muted);
pointer-events: none;
flex-shrink: 0;
transition: color 0.18s;
}
.mangaauth-input-wrap:focus-within .mangaauth-input-icon {
color: var(--ma-accent);
}
.mangaauth-input-wrap input {
flex: 1;
width: 100%;
padding: 11px 14px 11px 40px;
background: transparent;
border: none;
color: var(--ma-text);
font-size: 14px;
outline: none;
font-family: var(--ma-font);
}
.mangaauth-input-wrap input::placeholder {
color: var(--ma-text-muted);
}
.mangaauth-toggle-pw {
position: absolute;
right: 10px;
background: none;
border: none;
color: var(--ma-text-muted);
cursor: pointer;
padding: 6px;
border-radius: 4px;
transition: color 0.18s;
display: flex;
align-items: center;
}
.mangaauth-toggle-pw:hover { color: var(--ma-accent); } .mangaauth-pw-strength {
margin-top: 4px;
}
.mangaauth-pw-bar {
height: 4px;
background: var(--ma-bg-input);
border-radius: 2px;
overflow: hidden;
margin-bottom: 4px;
}
.mangaauth-pw-fill {
height: 100%;
width: 0;
background: var(--ma-error);
transition: width 0.25s, background 0.25s;
border-radius: 2px;
}
.mangaauth-pw-fill.pw-weak { background: var(--ma-error); width: 25%; }
.mangaauth-pw-fill.pw-fair { background: var(--ma-warning); width: 50%; }
.mangaauth-pw-fill.pw-good { background: #fdcb6e; width: 75%; }
.mangaauth-pw-fill.pw-strong { background: var(--ma-success); width: 100%; }
.mangaauth-pw-strength { display: none; }
.mangaauth-pw-strength.active { display: block; }
.mangaauth-pw-label {
font-size: 11px;
color: var(--ma-text-muted);
margin-left: 2px;
} .mangaauth-extras {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: -2px 0 4px;
}
.mangaauth-remember {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
color: var(--ma-text-muted);
font-size: 12px;
user-select: none;
}
.mangaauth-remember input[type="checkbox"] {
width: 14px;
height: 14px;
accent-color: var(--ma-accent);
cursor: pointer;
}
.mangaauth-forgot-link {
color: var(--ma-accent);
text-decoration: none;
font-size: 12px;
transition: color 0.18s;
}
.mangaauth-forgot-link:hover { color: var(--ma-accent-hover); text-decoration: underline; } .mangaauth-recaptcha-wrap {
display: flex;
justify-content: center;
margin: 4px 0;
min-height: 0;
transform: scale(0.92);
transform-origin: center;
}
@media (max-width: 360px) {
.mangaauth-recaptcha-wrap { transform: scale(0.82); transform-origin: center; }
} .mangaauth-submit-btn {
background: var(--ma-accent);
color: var(--ma-accent-text);
border: none;
padding: 12px 16px;
border-radius: var(--ma-radius-sm);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.18s;
margin-top: 4px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
font-family: var(--ma-font);
letter-spacing: 0.01em;
}
.mangaauth-submit-btn:hover:not(:disabled),
.mangaauth-submit-btn:active:not(:disabled) {
background: var(--ma-accent-hover);
transform: translateY(-1px);
box-shadow: var(--ma-shadow-glow);
}
.mangaauth-submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.mangaauth-btn-loading { display: none; }
.mangaauth-submit-btn.loading .mangaauth-btn-text { display: none; }
.mangaauth-submit-btn.loading .mangaauth-btn-loading { display: flex; align-items: center; gap: 6px; }
.mangaauth-spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(0, 0, 0, 0.2);
border-top-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
animation: maSpin 0.7s linear infinite;
display: inline-block;
}
@keyframes maSpin { to { transform: rotate(360deg); } } .mangaauth-switch {
text-align: center;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--ma-border);
color: var(--ma-text-muted);
font-size: 13px;
}
.mangaauth-switch-link {
color: var(--ma-accent);
text-decoration: none;
font-weight: 600;
margin-left: 4px;
cursor: pointer;
transition: color 0.18s;
}
.mangaauth-switch-link:hover { color: var(--ma-accent-hover); text-decoration: underline; } .mangaauth-hp-wrap {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
opacity: 0 !important;
pointer-events: none !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
} @media (min-width: 640px) {
.mangaauth-overlay { padding: 24px; }
.mangaauth-modal {
max-width: 440px;
padding: 28px 24px;
}
.mangaauth-header h2 { font-size: 24px; }
.mangaauth-subtitle { font-size: 14px; }
.mangaauth-logo-icon { width: 60px; height: 60px; margin-bottom: 14px; }
.mangaauth-input-wrap input { padding: 12px 14px 12px 42px; font-size: 14px; }
.mangaauth-submit-btn { padding: 13px 18px; min-height: 48px; } .mangaauth-oauth-buttons {
flex-direction: row;
}
.mangaauth-oauth-btn {
flex: 1;
padding: 10px 12px;
font-size: 13px;
}
}
@media (min-width: 900px) {
.mangaauth-modal { max-width: 460px; }
} @media (prefers-reduced-motion: reduce) {
.mangaauth-overlay,
.mangaauth-modal,
.mangaauth-form-container,
.mangaauth-notification,
.mangaauth-oauth-btn,
.mangaauth-submit-btn,
.mangaauth-close { transition: none !important; animation: none !important; }
.mangaauth-spinner { animation: maSpin 1.5s linear infinite; }
} .mangaauth-overlay button:focus-visible,
.mangaauth-overlay a:focus-visible,
.mangaauth-overlay input:focus-visible {
outline: 2px solid var(--ma-accent);
outline-offset: 2px;
}