/*
Theme Name: 安全登录
Description: 高度还原设计稿，包含毛玻璃质感、主题切换，并隐藏 WP 默认路径防爆破。
Author: QuanYibao.com
Version: 2.0
*/

:root {
    --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.132 0 .263 .003 .393 .008a7.5 7.5 0 0 0 8.599 8.599A9 9 0 1 1 12 3z'/%3E%3C/svg%3E");
    --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7'/%3E%3C/svg%3E");
    --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");
    --icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0'/%3E%3Cpath d='M8 11v-4a4 4 0 1 1 8 0v4'/%3E%3C/svg%3E");
    --icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0'/%3E%3Cpath d='M21 12c-2.4 4 -5.4 6 -9 6s-6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6s6.6 2 9 6'/%3E%3C/svg%3E");
    --icon-shield-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 4v5c0 5 -3 8 -7 9c-4 -1 -7 -4 -7 -9v-5z'/%3E%3Cpath d='M9 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z'/%3E%3Cpath d='M10 12v-2a2 2 0 1 1 4 0v2'/%3E%3C/svg%3E");
    --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 18l6 -6'/%3E%3Cpath d='M13 6l6 6'/%3E%3C/svg%3E");
}

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: var(--icon) center / contain no-repeat;
    -webkit-mask: var(--icon) center / contain no-repeat;
    flex: 0 0 auto;
}
.icon-moon { --icon: var(--icon-moon); }
.icon-sun { --icon: var(--icon-sun); }
.icon-user { --icon: var(--icon-user); }
.icon-lock { --icon: var(--icon-lock); }
.icon-eye { --icon: var(--icon-eye); }
.icon-shield-lock { --icon: var(--icon-shield-lock); }
.icon-arrow-right { --icon: var(--icon-arrow-right); }

:root[data-theme="dark"] {
    --bg-color: #0b0e14;
    --bg-gradient: radial-gradient(circle at 50% 100%, #2a1b54 0%, #0b0e14 60%);
    --card-bg: rgba(22, 27, 38, 0.7);
    --card-border: rgba(255, 255, 255, 0.05);
    --text-main: #ffffff;
    --text-muted: #8892b0;
    --input-bg: rgba(15, 19, 26, 0.8);
    --input-border: rgba(255, 255, 255, 0.08);
    --primary-btn: linear-gradient(90deg, #5c6cf2 0%, #4a54e1 100%);
    --toggle-bg: rgba(255, 255, 255, 0.05);
    --toggle-active: rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] {
    --bg-color: #f4f6f8;
    --bg-gradient: radial-gradient(circle at 50% 100%, #dbe4ff 0%, #f4f6f8 60%);
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-border: rgba(0, 0, 0, 0.05);
    --text-main: #111827;
    --text-muted: #6b7280;
    --input-bg: #ffffff;
    --input-border: #e5e7eb;
    --primary-btn: linear-gradient(90deg, #4f46e5 0%, #3b82f6 100%);
    --toggle-bg: #e5e7eb;
    --toggle-active: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: HarmonyOS_Regular, PingFang SC, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Hiragino Sans GB, Microsoft YaHei, Arial, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji", sans-serif; }

body {
    background-color: var(--bg-color);
    background-image: var(--bg-gradient);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: background 0.5s ease;
}

.wave-bg {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 30vh;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(92, 108, 242, 0.15)" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
    background-size: cover;
    z-index: 1; pointer-events: none;
}

.theme-toggle-pill {
    position: absolute;
    top: 30px; right: 40px;
    display: flex;
    background: var(--toggle-bg);
    border: 1px solid var(--card-border);
    border-radius: 30px;
    padding: 4px;
    z-index: 10;
    backdrop-filter: blur(10px);
}
.theme-btn {
    display: flex; align-items: center; gap: 6px;
    background: transparent; border: none; color: var(--text-muted);
    padding: 8px 16px; border-radius: 20px; font-size: 13px;
    cursor: pointer; transition: all 0.3s;
}
.theme-btn.active { background: var(--toggle-active); color: var(--text-main); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.theme-btn .icon { width: 14px; height: 14px; }

.login-wrapper { z-index: 2; width: 100%; max-width: 400px; padding: 20px; text-align: center; }
.brand { margin-bottom: 30px; }
.brand-icon { width: 148px; max-width: 70%; height: auto; margin-bottom: 15px; display: inline-block; }
.brand p { font-size: 14px; color: var(--text-muted); }

.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.form-group { margin-bottom: 24px; }
.form-group label { display: block; font-size: 13px; color: var(--text-main); margin-bottom: 10px; }
.input-wrapper { position: relative; }
.input-wrapper .icon-left { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); }
.input-wrapper .icon-right { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); cursor: pointer; transition: color 0.3s; }
.input-wrapper .icon-right:hover { color: var(--text-main); }

.form-control {
    width: 100%; padding: 14px 16px 14px 44px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px; color: var(--text-main); font-size: 14px;
    transition: border 0.3s, box-shadow 0.3s; outline: none;
}
.form-control:focus { border-color: #5c6cf2; box-shadow: 0 0 0 2px rgba(92, 108, 242, 0.2); }

.options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; font-size: 13px; }
.custom-checkbox { display: flex; align-items: center; cursor: pointer; color: var(--text-main); }
.custom-checkbox input { display: none; }
.checkmark { width: 18px; height: 18px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 4px; margin-right: 8px; position: relative; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.custom-checkbox input:checked + .checkmark { background: #5c6cf2; border-color: #5c6cf2; }
.custom-checkbox input:checked + .checkmark::after { content: ''; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-bottom: 2px; }
.forgot-link { color: #5c6cf2; text-decoration: none; transition: opacity 0.3s; }
.forgot-link:hover { opacity: 0.8; }

.btn { width: 100%; padding: 14px; border: none; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; transition: opacity 0.3s, transform 0.1s; }
.btn .icon { width: 18px; height: 18px; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary-btn); color: white; box-shadow: 0 4px 15px rgba(92, 108, 242, 0.3); }
.btn-primary:hover { opacity: 0.9; }

.error-msg { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #ef4444; padding: 12px; border-radius: 8px; font-size: 13px; margin-bottom: 20px; text-align: center; }
.success-msg { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); color: #22c55e; padding: 12px; border-radius: 8px; font-size: 13px; margin-bottom: 20px; text-align: center; }
.form-footer-link { margin-top: 18px; text-align: center; font-size: 13px; }
.form-footer-link a { color: #5c6cf2; text-decoration: none; }
.form-footer-link a:hover { opacity: 0.8; }

.footer { position: absolute; bottom: 20px; text-align: center; width: 100%; font-size: 12px; color: var(--text-muted); z-index: 2; }