/* =========================================
   🌌 终极科幻 HUD 仪表盘 (Sci-Fi Dashboard)
   ========================================= */
:root {
    --bg-dark: #040914; /* 极深蓝黑背景 */
    --panel-bg: rgba(10, 25, 50, 0.65); /* 面板半透明深蓝 */
    --neon-cyan: #00d2ff; /* 核心发光青色 */
    --neon-green: #00e676; /* 发光绿 */
    --neon-red: #ff3b30; /* 发光红 */
    --neon-orange: #f28c28; /* 发光橙 */
    --text-main: #d8f8ff; /* 泛蓝白字 */
    --border-glow: 0 0 15px rgba(0, 210, 255, 0.2), inset 0 0 15px rgba(0, 210, 255, 0.05);
}

body {
    margin: 0;
    font-family: "Noto Sans JP", -apple-system, sans-serif;
    background-color: var(--bg-dark);
    /* 科技感网格背景 */
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(0, 100, 200, 0.15) 0%, transparent 60%),
        linear-gradient(rgba(0, 210, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 255, 0.04) 1px, transparent 1px);
    background-size: 100% 100%, 30px 30px, 30px 30px;
    color: var(--text-main);
}

/* =========================================
   🖥️ 顶部与侧边栏 (全息投影)
   ========================================= */
.topbar {
    background: rgba(4, 12, 24, 0.9) !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.4) !important;
    box-shadow: 0 2px 20px rgba(0, 210, 255, 0.15) !important;
    color: var(--neon-cyan) !important;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
    padding: 15px 20px;
    font-size: 20px;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 100;
}

.container { display: flex; min-height: 100vh; flex-direction: row; }

.sidebar {
    width: 220px;
    background: rgba(4, 12, 24, 0.9) !important;
    border-right: 1px solid rgba(0, 210, 255, 0.2) !important;
    box-shadow: 2px 0 15px rgba(0, 210, 255, 0.1);
    padding-top: 20px;
    flex-shrink: 0; 
    z-index: 90;
}

.sidebar a {
    display: block;
    color: #8ab4f8 !important;
    padding: 15px 20px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.05) !important;
    transition: all 0.3s ease;
    font-size: 14px;
    background: transparent !important;
}

.sidebar a:hover {
    background: rgba(0, 210, 255, 0.1) !important;
    color: var(--neon-cyan) !important;
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.8);
    padding-left: 25px;
}

/* 侧边栏选中状态：青色发光 */
.sidebar a[style*="border-left"] {
    border-left: 4px solid var(--neon-cyan) !important;
    border-bottom: none !important;
    background: linear-gradient(90deg, rgba(0,210,255,0.2) 0%, transparent 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px var(--neon-cyan);
}

.content { flex: 1; padding: 30px; overflow-y: auto; }

/* =========================================
   🔮 核心卡片面板
   ========================================= */
.card, .clock-card, .word-paper {
    background: var(--panel-bg) !important; 
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 210, 255, 0.4) !important;
    border-radius: 12px !important;
    box-shadow: var(--border-glow) !important;
    padding: 25px;
    margin-bottom: 25px;
    color: var(--text-main) !important;
}

h2, .paper-header h2 {
    color: #ffffff !important;
    text-shadow: 0 0 10px var(--neon-cyan) !important;
    border-left: 4px solid var(--neon-cyan) !important;
    padding-left: 12px;
    margin-top: 0;
    border-bottom: none !important;
}

/* =========================================
   ⏰ 打卡/表单专属样式
   ========================================= */
.time-display {
    font-size: 55px !important;
    font-family: 'Courier New', Courier, monospace !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan) !important;
    margin-bottom: 25px;
    text-align: center;
}

.photo-upload-box, .doc-group {
    background: rgba(0, 210, 255, 0.05) !important;
    border: 1px dashed rgba(0, 210, 255, 0.3) !important;
    border-radius: 8px !important;
    padding: 20px;
    margin-bottom: 20px;
    color: var(--text-main) !important;
}

.photo-upload-box label, .doc-label {
    color: var(--neon-cyan) !important;
    text-shadow: 0 0 5px rgba(0,210,255,0.5);
    border-left: 3px solid var(--neon-cyan) !important;
    padding-left: 8px;
    font-weight: bold;
}

.doc-input, .doc-textarea {
    background: rgba(4, 12, 24, 0.8) !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
    color: var(--neon-cyan) !important;
    border-radius: 6px !important;
    width: 100%; 
    padding: 12px;
    box-sizing: border-box;
}

.doc-input:focus, .doc-textarea:focus {
    box-shadow: 0 0 15px rgba(0,210,255,0.4) !important;
    border-color: var(--neon-cyan) !important;
    outline: none;
}

/* =========================================
   🔘 霓虹发光按钮 (统一尺寸、强制对齐)
   ========================================= */
.btn, .btn-submit, .btn-checkin, .btn-checkout {
    border: none !important;
    color: #fff !important;
    text-shadow: 0 0 5px rgba(255,255,255,0.8);
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    /* 强制统一尺寸和居中 */
    padding: 16px 20px !important;
    width: 100% !important;
    max-width: 320px !important;
    font-size: 18px !important;
    display: block !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* 按钮单独发光特效 */
.btn, .btn-submit {
    background: linear-gradient(135deg, rgba(0,210,255,0.6), rgba(0,150,255,0.8)) !important;
    box-shadow: 0 0 15px rgba(0,210,255,0.4) !important;
    border: 1px solid rgba(0,210,255,0.8) !important;
}
.btn:hover, .btn-submit:hover { box-shadow: 0 0 25px rgba(0,210,255,0.8) !important; transform: translateY(-2px); }

.btn-checkin {
    background: linear-gradient(135deg, rgba(0,230,118,0.6), rgba(0,200,83,0.8)) !important;
    box-shadow: 0 0 15px rgba(0,230,118,0.4) !important;
    border: 1px solid rgba(0,230,118,0.8) !important;
}
.btn-checkin:hover { box-shadow: 0 0 25px rgba(0,230,118,0.8) !important; transform: translateY(-2px); }

.btn-checkout {
    background: linear-gradient(135deg, rgba(255,59,48,0.6), rgba(220,53,69,0.8)) !important;
    box-shadow: 0 0 15px rgba(255,59,48,0.4) !important;
    border: 1px solid rgba(255,59,48,0.8) !important;
}
.btn-checkout:hover { box-shadow: 0 0 25px rgba(255,59,48,0.8) !important; transform: translateY(-2px); }

/* =========================================
   📱 手机端适配 (底部悬浮导航)
   ========================================= */
@media screen and (max-width: 768px) {
    .topbar { text-align: center; font-size: 18px; padding: 12px; }
    .container { flex-direction: column; padding-bottom: 70px; }
    .content { padding: 15px; width: 100%; box-sizing: border-box; }

    .sidebar {
        width: 100%;
        height: 60px;
        padding-top: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        background: rgba(4, 12, 24, 0.95) !important;
        backdrop-filter: blur(15px);
        border-top: 1px solid rgba(0, 210, 255, 0.3) !important;
        box-shadow: 0 -5px 20px rgba(0, 210, 255, 0.2) !important;
        z-index: 999;
    }
    .sidebar::-webkit-scrollbar { display: none; }
    
    .sidebar a {
        flex: 1;
        min-width: max-content;
        text-align: center;
        padding: 0 15px;
        border-bottom: none !important;
        border-right: 1px solid rgba(0, 210, 255, 0.1) !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 13px;
    }

    .sidebar a[style*="border-left"] {
        border-bottom: 3px solid var(--neon-cyan) !important;
        border-left: none !important;
        background: rgba(0,210,255,0.1) !important;
    }
    
    .time-display { font-size: 42px !important; }
}