/* ============================================
   ⬢⬢⬢ MAX科技感增强样式 v3.1.4 ⬢⬢⬢
   赛博朋克 / HUD / Terminal / Holographic
   ============================================ */

/* ====== 1. 顶部HUD状态栏 ====== */
.hud-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    z-index: 9998;
    background: linear-gradient(180deg, rgba(0,20,40,0.95) 0%, rgba(0,10,20,0.85) 100%);
    border-bottom: 1px solid rgba(0, 212, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), inset 0 -1px 0 rgba(0, 212, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: #00d4ff;
    backdrop-filter: blur(8px);
    pointer-events: none;
}
.hud-top-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(0,212,255,0.08) 50%, transparent 100%),
        repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(0,212,255,0.03) 2px, rgba(0,212,255,0.03) 3px);
    pointer-events: none;
}
.hud-top-left, .hud-top-center, .hud-top-right {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1;
}
.hud-top-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    text-shadow: 0 0 10px #00d4ff, 0 0 20px rgba(0, 212, 255, 0.5);
    font-size: 13px;
}
.hud-text {
    color: #00d4ff;
    text-shadow: 0 0 4px rgba(0, 212, 255, 0.6);
}
.hud-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ff88, 0 0 16px rgba(0, 255, 136, 0.6);
    animation: hud-pulse 1.5s ease-in-out infinite;
}
@keyframes hud-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}
.hud-blink {
    color: #00ff88;
    animation: hud-blink 1s steps(2) infinite;
}
@keyframes hud-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0.2; }
}
.hud-divider {
    color: rgba(0, 212, 255, 0.3);
}

/* ====== 2. 启动自检序列 ====== */
.boot-sequence {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(ellipse at center, #0a1530 0%, #000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', 'Consolas', monospace;
    transition: opacity 0.8s ease;
}
.boot-sequence.boot-done {
    opacity: 0;
    pointer-events: none;
}
.boot-content {
    text-align: left;
    color: #00d4ff;
    font-size: 14px;
    line-height: 1.8;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
    min-width: 480px;
    padding: 20px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    background: rgba(0, 10, 30, 0.6);
    box-shadow: 0 0 60px rgba(0, 212, 255, 0.2), inset 0 0 30px rgba(0, 212, 255, 0.05);
    position: relative;
    overflow: hidden;
}
.boot-content::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
    animation: boot-scan 2s linear infinite;
}
@keyframes boot-scan {
    0% { left: -100%; }
    100% { left: 100%; }
}
.boot-line {
    opacity: 0;
    animation: boot-typing 0.3s ease forwards;
}
.boot-line:nth-child(1) { animation-delay: 0.1s; }
.boot-line:nth-child(2) { animation-delay: 0.4s; }
.boot-line:nth-child(3) { animation-delay: 0.7s; }
.boot-line:nth-child(4) { animation-delay: 1.0s; }
.boot-line:nth-child(5) { animation-delay: 1.3s; }
.boot-line:nth-child(6) { animation-delay: 1.6s; }
.boot-line:nth-child(7) { animation-delay: 1.9s; }
.boot-line:nth-child(8) { animation-delay: 2.2s; }
@keyframes boot-typing {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}
.boot-header {
    color: #00ff88;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
    font-size: 16px;
}
.boot-success {
    color: #00ff88;
    text-shadow: 0 0 12px #00ff88;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 255, 136, 0.3);
}
.boot-ok {
    color: #00ff88;
    text-shadow: 0 0 6px #00ff88;
}

/* ====== 3. 赛博朋克网格地板 ====== */
.cyber-grid-floor {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50vh;
    z-index: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.4) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(500px) rotateX(60deg);
    transform-origin: bottom;
    mask-image: linear-gradient(to top, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
    animation: grid-move 4s linear infinite;
    pointer-events: none;
}
@keyframes grid-move {
    0% { background-position: 0 0; }
    100% { background-position: 0 60px; }
}

/* ====== 4. 增强现有元素的科技感 ====== */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 2px,
        rgba(0, 212, 255, 0.025) 2px,
        rgba(0, 212, 255, 0.025) 3px
    );
    animation: scanline-down 8s linear infinite;
}
@keyframes scanline-down {
    0% { background-position: 0 0; }
    100% { background-position: 0 100vh; }
}

/* 顶部导航：加扫描线 + 边框光带 */
.top-nav {
    border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.2), inset 0 -1px 0 rgba(0, 212, 255, 0.1) !important;
    position: relative;
    overflow: hidden;
}
.top-nav::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.15), transparent);
    animation: nav-scan 4s linear infinite;
    pointer-events: none;
}
@keyframes nav-scan {
    0% { left: -50%; }
    100% { left: 150%; }
}
.nav-brand {
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.6), 0 0 16px rgba(0, 212, 255, 0.3) !important;
    letter-spacing: 2px;
}

/* Hero 标题：加 glitch 双层 */
.hero-title {
    position: relative;
    text-shadow:
        0 0 10px rgba(0, 212, 255, 0.8),
        0 0 20px rgba(0, 212, 255, 0.4),
        0 0 40px rgba(0, 212, 255, 0.2) !important;
}
.hero-title::before, .hero-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0.7;
    pointer-events: none;
}
.hero-title::before {
    color: #ff006e;
    transform: translate(-2px, 0);
    mix-blend-mode: screen;
    animation: glitch-1 2.5s infinite linear alternate-reverse;
}
.hero-title::after {
    color: #00fff0;
    transform: translate(2px, 0);
    mix-blend-mode: screen;
    animation: glitch-2 2.7s infinite linear alternate-reverse;
}
@keyframes glitch-1 {
    0%, 90% { transform: translate(0, 0); }
    92% { transform: translate(-3px, 1px); }
    94% { transform: translate(2px, -1px); }
    96%, 100% { transform: translate(0, 0); }
}
@keyframes glitch-2 {
    0%, 88% { transform: translate(0, 0); }
    90% { transform: translate(3px, -1px); }
    93% { transform: translate(-2px, 1px); }
    95%, 100% { transform: translate(0, 0); }
}

/* 欢迎语：增强 */
.hero-welcome {
    background: linear-gradient(90deg, #00d4ff 0%, #00ff88 50%, #00d4ff 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: text-shimmer 3s linear infinite !important;
    filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.6));
}
@keyframes text-shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* 数字时钟：加更猛的辉光 + 字符分裂效果 */
.digital-clock {
    text-shadow:
        0 0 8px #00d4ff,
        0 0 16px #00d4ff,
        0 0 24px rgba(0, 212, 255, 0.6),
        0 0 40px rgba(0, 212, 255, 0.3) !important;
    position: relative;
    display: inline-block;
    padding: 0 12px;
}
.digital-clock::before {
    content: '';
    position: absolute;
    inset: -8px -16px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 4px;
    pointer-events: none;
    box-shadow: inset 0 0 12px rgba(0, 212, 255, 0.15);
}

/* 卡片：升级到全息HUD风 */
.card {
    position: relative !important;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 1;
}
.card:hover::before {
    left: 100%;
}
.card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(0, 212, 255, 0.7) !important;
    box-shadow:
        0 12px 40px rgba(0, 212, 255, 0.3),
        0 0 30px rgba(0, 212, 255, 0.2),
        inset 0 0 20px rgba(0, 212, 255, 0.1) !important;
}
.card-corner {
    background: #00d4ff !important;
    box-shadow: 0 0 8px #00d4ff !important;
}
.card-icon {
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.6) !important;
}

/* 功能面板：扫描线入场 */
.panel {
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    box-shadow:
        0 0 40px rgba(0, 212, 255, 0.15),
        inset 0 0 30px rgba(0, 212, 255, 0.05) !important;
    position: relative;
    overflow: hidden;
}
.panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
    animation: panel-scan 3s linear infinite;
    pointer-events: none;
}
@keyframes panel-scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* 每日关注卡片：3D 倾斜 + 边框光带 */
.focus-card {
    position: relative !important;
    overflow: hidden;
}
.focus-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent, var(--card-accent, #00d4ff), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.focus-card:hover::after {
    opacity: 1;
}
.focus-card:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 24px var(--card-accent, rgba(0, 212, 255, 0.4)) !important;
}

/* 按钮：发光 + 扫光 */
.btn {
    position: relative;
    overflow: hidden;
}
.btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}
.btn:hover::after {
    left: 100%;
}
.btn-primary {
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.4) !important;
}
.btn-primary:hover {
    box-shadow: 0 0 24px rgba(0, 212, 255, 0.7), 0 0 48px rgba(0, 212, 255, 0.3) !important;
}

/* 状态指标：等宽数字 */
.metric-value, .metric-label {
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
}

/* 浮窗按钮：HUD 圆环 */
.floating-btn {
    border: 1px solid rgba(0, 212, 255, 0.4) !important;
    background: rgba(10, 14, 39, 0.8) !important;
    backdrop-filter: blur(6px);
}
.floating-btn:hover {
    border-color: #00d4ff !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.6) !important;
}

/* ====== 5. Section 计数器 ====== */
.section-counter {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 28px 0;
    padding: 0 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 3px;
    color: #00d4ff;
    text-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
}
.sc-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
    opacity: 0.6;
}
.sc-text {
    padding: 4px 14px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    background: rgba(0, 20, 40, 0.4);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.15), inset 0 0 8px rgba(0, 212, 255, 0.05);
}

/* ====== 6. 页脚 HUD ====== */
.footer-hud {
    text-align: center;
    padding: 20px 0 10px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(0, 212, 255, 0.6);
    margin-bottom: 8px;
}
.fh-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
    margin: 10px 0;
}
.fh-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.fh-stat {
    color: #00ff88;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
    font-weight: 700;
}
.footer-text {
    color: rgba(0, 212, 255, 0.5);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    font-size: 12px;
}
.footer-cursor {
    color: #00d4ff;
    text-shadow: 0 0 6px #00d4ff;
    animation: cursor-blink 1s steps(1) infinite;
}
@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* ====== 7. 全息全局光晕 ====== */
.hero, .panel, .card, .focus-card, .pet-window, .top-nav {
    backdrop-filter: blur(2px);
}

/* 进度条条状装饰 */
.bar-bg {
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    box-shadow: inset 0 0 6px rgba(0, 212, 255, 0.1);
}
.bar-fill {
    box-shadow: 0 0 8px currentColor;
}

/* 装饰六边形 */
.hex-deco {
    position: fixed;
    pointer-events: none;
    z-index: 9997;
    font-family: monospace;
    color: rgba(0, 212, 255, 0.3);
    font-size: 12px;
    letter-spacing: 4px;
}

/* 增强输入框科技感 */
input, textarea, select {
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    background: rgba(0, 20, 40, 0.5) !important;
    font-family: 'Courier New', monospace !important;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}
input:focus, textarea:focus, select:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.4), inset 0 0 8px rgba(0, 212, 255, 0.1) !important;
    outline: none;
}

/* 日历表格科技感 */
.calendar-grid, .schedule-table {
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.05);
}
.calendar-day, .schedule-table td, .schedule-table th {
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    transition: all 0.2s ease;
}
.calendar-day:hover, .schedule-table td:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    box-shadow: inset 0 0 8px rgba(0, 212, 255, 0.2);
}

/* 链接样式 */
a {
    color: #00d4ff;
    text-shadow: 0 0 4px rgba(0, 212, 255, 0.5);
    transition: all 0.2s ease;
}
a:hover {
    text-shadow: 0 0 8px #00d4ff, 0 0 16px rgba(0, 212, 255, 0.5);
}

/* scrollbar 赛博风 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 20, 40, 0.5);
    border: 1px solid rgba(0, 212, 255, 0.1);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00d4ff, #0099cc);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00ff88, #00d4ff);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
}

/* 选择高亮 */
::selection {
    background: rgba(0, 212, 255, 0.4);
    color: #fff;
    text-shadow: 0 0 4px #00d4ff;
}

/* ====== 8. 侧边菱形装饰 ====== */
body::after {
    content: '';
    position: fixed;
    top: 30%;
    left: 10px;
    width: 20px;
    height: 20px;
    border: 1px solid #00d4ff;
    transform: rotate(45deg);
    z-index: 9990;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.5), inset 0 0 6px rgba(0, 212, 255, 0.3);
    pointer-events: none;
    animation: hex-spin 8s linear infinite;
}
@keyframes hex-spin {
    0% { transform: rotate(45deg) scale(1); opacity: 0.6; }
    50% { transform: rotate(225deg) scale(1.2); opacity: 1; }
    100% { transform: rotate(405deg) scale(1); opacity: 0.6; }
}

/* 状态条升级 */
.status-bar span {
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    text-shadow: 0 0 4px rgba(0, 212, 255, 0.4);
}