/* ==========================================
   赛博朋克风格 - 完整样式表 v2.1
   适用：登录/注册页 + 仪表盘
   修复：登录注册卡片大小一致、密码强度条不再像多余横线
   ========================================== */

/* ---------- 全局重置 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #0a0a15;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ---------- 全屏粒子背景 ---------- */
#tsparticles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ---------- 霓虹网格背景 ---------- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    pointer-events: none;
    animation: gridMove 15s linear infinite;
}
@keyframes gridMove {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

/* ---------- 光晕球体 ---------- */
.glow-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}
.glow-orb.orb-1 {
    width: 500px; height: 500px;
    background: rgba(0, 243, 255, 0.12);
    top: -150px; left: -150px;
    animation: orbFloat1 12s ease-in-out infinite alternate;
}
.glow-orb.orb-2 {
    width: 400px; height: 400px;
    background: rgba(255, 0, 110, 0.10);
    bottom: -100px; right: -100px;
    animation: orbFloat2 10s ease-in-out infinite alternate;
}
@keyframes orbFloat1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(80px, 60px) scale(1.2); }
}
@keyframes orbFloat2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-60px, -40px) scale(1.15); }
}

/* ---------- 扫描线 ---------- */
.scanline {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
    z-index: 9999;
    pointer-events: none;
}

/* ========== 登录页 ========== */
.main-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* 🔧 修复1：卡片统一最小高度，消除大小差异 */
.auth-card {
    width: 100%;
    min-height: 440px;               /* ← 关键：登录/注册共用统一高度 */
    background: rgba(10, 20, 40, 0.8);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 243, 255, 0.3);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: min-height 0.3s ease;  /* 平滑过渡 */
}

/* 🔧 修复2：旋转边框改为更柔和，避免产生"横线"错觉 */
.auth-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 60deg,
        rgba(0, 243, 255, 0.15) 90deg,
        transparent 120deg,
        transparent 180deg,
        rgba(255, 0, 110, 0.15) 210deg,
        transparent 240deg,
        transparent 300deg,
        rgba(0, 243, 255, 0.15) 330deg,
        transparent 360deg
    );
    animation: borderSpin 6s linear infinite;  /* 变慢，更柔和 */
    z-index: -1;
    border-radius: 20px;
}
@keyframes borderSpin {
    100% { transform: rotate(360deg); }
}

/* 卡片顶部三个点 */
.card-header {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}
.dot:nth-child(1) { background: #ff006e; }
.dot:nth-child(2) { background: #ffb700; }
.dot:nth-child(3) { background: #00f3ff; }

/* 登录/注册切换 */
.form-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    gap: 30px;
    font-size: 14px;
    letter-spacing: 2px;
}
.form-toggle span {
    cursor: pointer;
    padding-bottom: 5px;
    color: #666;
    transition: 0.3s;
    border-bottom: 2px solid transparent;
}
.form-toggle span.active {
    color: #00f3ff;
    border-bottom-color: #00f3ff;
}

/* 🔧 修复3：表单容器自适应，保持居中 */
.auth-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.hidden {
    display: none !important;
}

/* 输入框组 */
.input-group {
    position: relative;
    margin-bottom: 20px;
}
.input-group input {
    width: 100%;
    padding: 12px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #3a3a5a;
    color: #fff;
    outline: none;
    font-size: 14px;
    font-family: 'Orbitron', sans-serif;
    transition: border-color 0.3s;
}
.input-group label {
    position: absolute;
    top: 12px; left: 0;
    pointer-events: none;
    font-size: 11px;
    color: #666;
    letter-spacing: 1px;
    transition: 0.3s;
}
.input-group input:focus ~ label,
.input-group input:valid ~ label {
    top: -15px;
    font-size: 9px;
    color: #00f3ff;
}
.input-group input:focus {
    border-bottom-color: #00f3ff;
    box-shadow: 0 5px 10px -8px #00f3ff;
    animation: inputGlitch 2s infinite;
}

/* 🔧 修复4：密码强度条 - 改为圆角胶囊样式，明确视觉意图 */
.strength-bar {
    height: 4px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    margin-top: -10px;       /* 紧贴密码输入框下方 */
    margin-bottom: 6px;      /* 与下一个输入框保持间距 */
    overflow: hidden;
    /* 🔧 默认隐藏，有内容时再显示 */
    opacity: 0;
    transition: opacity 0.3s;
}
.strength-bar.has-value {
    opacity: 1;
}
.strength-bar span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 10px;
    background: #ff4d6d;
    transition: width 0.3s, background 0.3s;
}
.strength-bar span.strength-weak   { width: 25%; background: #ff4d6d; }
.strength-bar span.strength-medium { width: 50%; background: #ffb700; }
.strength-bar span.strength-strong { width: 75%; background: #00c9a7; }
.strength-bar span.strength-very-strong { width: 100%; background: #00f3ff; box-shadow: 0 0 10px #00f3ff; }

/* 记住我 */
.remember-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
    color: #aaa;
}
.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0; width: 0;
}
.checkmark {
    height: 16px; width: 16px;
    border: 1px solid #555;
    border-radius: 3px;
    margin-right: 8px;
    transition: 0.2s;
    background: transparent;
    position: relative;
}
.checkbox-container input:checked ~ .checkmark {
    background: #00f3ff;
    border-color: #00f3ff;
    box-shadow: 0 0 8px #00f3ff;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 4px; top: 1px;
    width: 5px; height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}
.remember-text {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.5px;
}

/* 按钮 */
.btn-primary {
    background: linear-gradient(135deg, #00f3ff, #7209b7);
    border: none;
    color: #fff;
    padding: 14px;
    font-size: 14px;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 30px;
    margin-top: 10px;
    transition: 0.3s;
    text-transform: uppercase;
}
.btn-primary:hover {
    box-shadow: 0 0 20px #00f3ff;
    transform: translateY(-2px);
}

.btn-logout {
    display: inline-block;
    padding: 8px 18px;
    background: transparent;
    border: 1px solid #ff4d6d;
    color: #ff4d6d;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 20px;
    transition: 0.3s;
}
.btn-logout:hover {
    background: rgba(255,77,109,0.2);
    box-shadow: 0 0 10px #ff4d6d;
}

.btn-secondary {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid #3a86ff;
    color: #3a86ff;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 20px;
    transition: 0.3s;
    font-family: 'Orbitron', sans-serif;
}
.btn-secondary:hover {
    background: rgba(58,134,255,0.2);
    box-shadow: 0 0 10px #3a86ff;
}

/* 消息 */
.error-msg {
    color: #ff4d6d;
    font-size: 11px;
    margin-top: 10px;
    text-align: center;
}
.success-msg {
    color: #00c9a7;
    font-size: 11px;
    margin-top: 10px;
    text-align: center;
}

/* 欢迎区 */
.welcome-box { text-align: center; }
.auto-login-notice {
    color: #00f3ff;
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.status {
    color: #00c9a7;
    font-size: 12px;
    margin: 10px 0 20px;
}
.btn-group {
    display: flex;
    gap: 10px;
    margin: 15px 0;
    flex-wrap: wrap;
    justify-content: center;
}

/* 设置面板 */
.settings-panel {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,243,255,0.2);
    text-align: left;
}
.settings-panel h3 {
    font-size: 14px;
    color: #00f3ff;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.pwd-form .input-group { margin-bottom: 14px; }
.pwd-form .input-group input { font-size: 13px; padding: 10px 0; }
.pwd-form .btn-primary { font-size: 13px; padding: 10px; }

/* ========== 仪表盘 ========== */
.dashboard {
    position: relative;
    z-index: 10;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px;
    min-height: 100vh;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background: rgba(10,20,40,0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,243,255,0.2);
    border-radius: 15px;
    margin-bottom: 25px;
}
.top-bar .logo {
    font-size: 1.2rem;
    letter-spacing: 3px;
}
.top-bar .user-info {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
}
.user-level {
    font-size: 10px;
    color: #00f3ff;
    border: 1px solid #00f3ff;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 1px;
}

.welcome-banner {
    text-align: center;
    padding: 30px;
    margin-bottom: 25px;
    background: rgba(10,20,40,0.5);
    border-radius: 15px;
    border: 1px solid rgba(0,243,255,0.1);
}
.welcome-banner h1 {
    font-size: 2rem;
    background: linear-gradient(90deg, #00f3ff, #ff006e, #ffb700, #00f3ff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: holoShine 3s linear infinite;
}
.welcome-banner p {
    color: #666;
    font-size: 12px;
    letter-spacing: 1px;
    margin-top: 8px;
}

/* 卡片网格 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.cyber-card {
    background: rgba(10,20,40,0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,243,255,0.15);
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s;
    min-height: 160px;
}
.cyber-card:hover {
    border-color: rgba(0,243,255,0.5);
    box-shadow: 0 0 25px rgba(0,243,255,0.1);
    transform: translateY(-3px);
}
.cyber-card h3 {
    font-size: 13px;
    color: #00f3ff;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.cyber-card .value {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
}
.cyber-card .sub {
    font-size: 10px;
    color: #666;
    margin-top: 5px;
}

/* 状态条 */
.status-bar {
    height: 4px;
    background: rgba(0,243,255,0.1);
    border-radius: 2px;
    margin-top: 15px;
    overflow: hidden;
}
.status-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #00f3ff, #ff006e);
    border-radius: 2px;
    animation: statusPulse 2s ease-in-out infinite alternate;
}
@keyframes statusPulse {
    from { width: 60%; }
    to   { width: 95%; }
}

/* 天气 */
.weather-panel {
    display: flex;
    align-items: center;
    gap: 20px;
}
.weather-icon {
    font-size: 3rem;
    filter: drop-shadow(0 0 15px rgba(0,243,255,0.6));
}
.weather-temp {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #00f3ff, #ffb700);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.weather-detail {
    font-size: 11px;
    color: #aaa;
    letter-spacing: 1px;
}

/* 终端 */
.terminal-wrapper { margin-top: 20px; }
.terminal {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(0,243,255,0.2);
    border-radius: 10px;
    padding: 20px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #00f3ff;
}
.terminal-input-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.terminal-prompt {
    color: #00ff88;
    font-weight: bold;
    white-space: nowrap;
    font-size: 12px;
    font-family: 'Share Tech Mono', monospace;
}
#terminalInput {
    flex: 1;
    background: transparent;
    border: none;
    color: #00f3ff;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 12px;
    outline: none;
    caret-color: #00f3ff;
}
#terminalOutput {
    max-height: 250px;
    overflow-y: auto;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.6;
}
#terminalOutput::-webkit-scrollbar { width: 3px; }
#terminalOutput::-webkit-scrollbar-thumb {
    background: rgba(0,243,255,0.3);
    border-radius: 3px;
}
.terminal-success { color: #00ff88; }
.terminal-warning { color: #ffb700; }
.terminal-error   { color: #ff4d6d; }
.terminal-info    { color: #00f3ff; }
.terminal-dim     { color: #555; }

/* ========== 视觉特效 ========== */

/* 故障 Glitch */
@keyframes glitchText {
    0%,100% { text-shadow: 2px 0 #ff006e, -2px 0 #00f3ff; }
    25%     { text-shadow: -2px 0 #ff006e, 2px 0 #00f3ff; }
    50%     { text-shadow: 1px -1px #ffb700, -1px 1px #ff006e; }
    75%     { text-shadow: -1px -1px #00f3ff, 1px 1px #ffb700; }
}
.glitch-active  { animation: glitchText 0.3s ease-in-out; }
.glitch-hover:hover { animation: glitchText 0.2s ease-in-out 3; }

/* RGB 分裂 */
@keyframes rgbSplit {
    0%,100% { filter: none; }
    50%     { filter: drop-shadow(3px 0 #ff006e) drop-shadow(-3px 0 #00f3ff); }
}
.rgb-split { animation: rgbSplit 0.15s ease-in-out; }

/* 全息 */
@keyframes holoShimmer {
    0%   { background-position: -200% 50%; }
    100% { background-position: 200% 50%; }
}
.holo-text {
    background: linear-gradient(90deg,
        transparent,
        rgba(0,243,255,0.8),
        transparent,
        rgba(255,0,110,0.8),
        transparent);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: holoShimmer 3s linear infinite;
}

/* 3D 翻转 */
.card-3d-wrapper { perspective: 1000px; position: relative; }
.card-3d-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.card-3d-wrapper:hover .card-3d-inner { transform: rotateY(180deg); }
.card-3d-front, .card-3d-back {
    backface-visibility: hidden;
    border-radius: 15px;
}
.card-3d-back {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform: rotateY(180deg);
    background: rgba(10,20,40,0.9);
    border: 1px solid rgba(255,0,110,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}

/* 鼠标倾斜 */
.tilt-card {
    transition: transform 0.15s ease-out;
    transform-style: preserve-3d;
    cursor: pointer;
}

/* 霓虹脉冲 */
@keyframes neonPulseBorder {
    0%,100% {
        border-color: rgba(0,243,255,0.3);
        box-shadow: 0 0 5px rgba(0,243,255,0.2);
    }
    50% {
        border-color: rgba(0,243,255,1);
        box-shadow: 0 0 20px rgba(0,243,255,0.5), 0 0 40px rgba(0,243,255,0.2);
    }
}
.neon-pulse { animation: neonPulseBorder 2s ease-in-out infinite; }

/* 数据雨 */
#matrixRain {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
}
#matrixRain.active { opacity: 0.3; }

/* 音乐按钮 */
.music-toggle {
    position: fixed;
    bottom: 25px; right: 25px;
    z-index: 10000;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(10,20,40,0.8);
    border: 2px solid rgba(0,243,255,0.5);
    color: #00f3ff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
}
.music-toggle:hover {
    border-color: #ff006e;
    color: #ff006e;
    box-shadow: 0 0 25px rgba(255,0,110,0.3);
}
.music-toggle.playing {
    border-color: #00ff88;
    color: #00ff88;
    animation: neonPulseBorder 2s ease-in-out infinite;
}

/* 音频可视 */
@keyframes audioWave {
    0%,100% { height: 5px; }
    50%     { height: 20px; }
}
.audio-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 20px;
    margin-right: 10px;
}
.audio-visualizer span {
    display: block;
    width: 3px;
    background: #00f3ff;
    border-radius: 2px;
    animation: audioWave 0.8s ease-in-out infinite;
}
.audio-visualizer span:nth-child(1) { animation-delay: 0s; }
.audio-visualizer span:nth-child(2) { animation-delay: 0.1s; }
.audio-visualizer span:nth-child(3) { animation-delay: 0.2s; }
.audio-visualizer span:nth-child(4) { animation-delay: 0.3s; }
.audio-visualizer span:nth-child(5) { animation-delay: 0.4s; }
.audio-visualizer span:nth-child(6) { animation-delay: 0.5s; }
.audio-visualizer span:nth-child(7) { animation-delay: 0.6s; }
.audio-visualizer span:nth-child(8) { animation-delay: 0.7s; }

/* CRT 开机 */
body.crt-on { animation: crtOn 0.6s ease-out; }
@keyframes crtOn {
    0%   { transform: scaleY(0.01) scaleX(0); opacity: 0; filter: brightness(10); }
    40%  { transform: scaleY(0.01) scaleX(1); opacity: 1; filter: brightness(2); }
    100% { transform: scaleY(1) scaleX(1); opacity: 1; filter: brightness(1); }
}

/* 输入框故障闪烁 */
@keyframes inputGlitch {
    0%,100% { box-shadow: 0 0 5px rgba(0,243,255,0.2); }
    95%     { box-shadow: 0 0 5px rgba(0,243,255,0.2); }
    96%     { box-shadow: 0 0 20px rgba(255,0,110,0.6), 0 0 40px rgba(0,243,255,0.4); }
    97%     { box-shadow: 0 0 5px rgba(0,243,255,0.2); }
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .dashboard { padding: 15px 10px; }
    .card-grid { grid-template-columns: 1fr; }
    .top-bar { flex-direction: column; gap: 10px; text-align: center; }
    .top-bar .user-info { flex-wrap: wrap; justify-content: center; }
    .weather-temp { font-size: 1.8rem; }
    .welcome-banner h1 { font-size: 1.5rem; }
    .auth-card { padding: 20px; min-height: 400px; }
}