/* === 1. CSS 变量系统 === */
:root {
    --primary-color: #3498db;
    --bg-body: #f4f6f9;
    --bg-card: #ffffff;
    --bg-header: linear-gradient(135deg, #2c3e50, #1a2530);
    --text-main: #2c3e50;
    --text-secondary: #606f7b;
    --text-header: #ffffff;
    --border-color: #e2e8f0;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    --card-hover-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    --border-radius: 12px;
    --transition: all 0.3s ease;
    
    /* 终端变量 */
    --term-bg: #1e1e1e;
    --term-header: #2d2d2d;
    --term-text: #a9b7c6;
    --term-green: #629755;
    --term-blue: #61afef;
    --term-red: #e06c75;
}

html.dark-mode {
    --primary-color: #5dade2;
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --bg-header: linear-gradient(135deg, #1a1a1a, #000000);
    --text-main: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-header: #cccccc;
    --border-color: #333333;
    --card-shadow: none;
    --card-hover-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}

/* === 2. 全局设置 === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; min-height: 100%; }

body { 
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; 
    line-height: 1.6; 
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.3s, color 0.3s;
    min-height: 100vh;
    display: flex; flex-direction: column;
}

a { color: var(--primary-color); text-decoration: none; transition: var(--transition); }
a:hover { text-decoration: underline; }

.container { width: 92%; max-width: 1200px; margin: 0 auto; }

/* === 3. Header === */
header {
    background: var(--bg-header);
    color: var(--text-header);
    text-align: center;
    padding: 60px 0;
    margin-bottom: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
header h1 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 700; }
header p { opacity: 0.9; font-size: 1.1rem; }

.social-links { margin-top: 20px; display: flex; justify-content: center; gap: 20px; }
.social-links a { 
    color: rgba(255,255,255,0.7); 
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    transition: all 0.2s;
}
.social-links a:hover { color: #fff; background: var(--primary-color); transform: translateY(-3px); }

#theme-toggle {
    position: absolute; top: 20px; right: 20px;
    background: rgba(255,255,255,0.15);
    border: none; color: white; 
    font-size: 1.2rem; cursor: pointer;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
#theme-toggle:hover { background: rgba(255,255,255,0.3); transform: rotate(15deg); }

/* === 4. 布局 (Layout) === */
.layout-wrapper {
    display: flex; gap: 40px; 
    flex: 1;
    align-items: flex-start;
}
.main-content { flex: 3; min-width: 0; }
.sidebar { flex: 1.2; min-width: 300px; display: flex; flex-direction: column; gap: 30px; }

h2, h3 { 
    color: var(--text-main); margin-bottom: 15px; font-weight: 700; 
    display: flex; align-items: center; font-size: 1.3rem; 
}
h2::before, h3::before {
    content: ''; display: inline-block;
    width: 5px; height: 20px; background: var(--primary-color);
    margin-right: 12px; border-radius: 3px;
}

/* === 5. 卡片系统 === */
.project-card, .sidebar-card, .news-item {
    background-color: var(--bg-card);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    transition: var(--transition);
}

/* --- 项目网格 (PC强制2列) --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.project-card { padding: 20px; position: relative; overflow: hidden; height: 100%; }
.project-card:hover { 
    transform: translateY(-5px); 
    box-shadow: var(--card-hover-shadow); border-color: var(--primary-color);
}
.project-card::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--primary-color), #2ecc71);
    opacity: 0; transition: opacity 0.3s;
}
.project-card:hover::after { opacity: 1; }

.card-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

.project-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.project-card h4 { font-size: 1.1rem; color: var(--text-main); margin: 0; padding-right: 10px; }
.update-time { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; opacity: 0.7; }

.project-card p { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 20px; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.project-footer {
    padding-top: 15px; border-top: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem;
}
.lang-badge { display: flex; align-items: center; gap: 6px; color: var(--text-main); font-weight: 600; }
.lang-dot { width: 8px; height: 8px; border-radius: 50%; }

.project-stats { display: flex; gap: 12px; color: var(--text-secondary); }
.project-stats span { display: flex; align-items: center; gap: 4px; }

/* --- 技术新闻 (PC强制2列) --- */
.tech-news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.news-item { padding: 20px; }
.news-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--primary-color);
}
.news-item a { font-weight: 600; display: block; margin-bottom: 8px; font-size: 1.05rem; color: var(--text-main); line-height: 1.4; }
.news-item a:hover { color: var(--primary-color); text-decoration: none; }
.news-item p { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.6; }
.news-item small { font-size: 0.8rem; color: var(--text-secondary); opacity: 0.8; display: block; margin-top: auto;}

/* --- 侧边栏 --- */
.sidebar-card { padding: 20px; }

.tech-stack-icons { display: flex; flex-wrap: wrap; gap: 8px; }

.snake-card { 
    padding: 0 !important; 
    overflow: hidden; 
    border: 1px solid var(--border-color);
}
.snake-img, .stats-img { width: 100%; display: block; }

.snake-dark, .dark-stats { display: none; }
html.dark-mode .snake-light, html.dark-mode .light-stats { display: none; }
html.dark-mode .snake-dark, html.dark-mode .dark-stats { display: block; }

/* === 创意功能: Web 终端 === */
.terminal-window {
    background-color: var(--term-bg);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    font-family: 'Consolas', 'Monaco', monospace;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #333;
}

.terminal-header {
    background-color: var(--term-header);
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333;
}

.term-btn {
    width: 12px; height: 12px; border-radius: 50%;
    margin-right: 8px;
}
.term-btn.red { background-color: #ff5f56; }
.term-btn.yellow { background-color: #ffbd2e; }
.term-btn.green { background-color: #27c93f; }

.term-title {
    margin-left: auto; margin-right: auto;
    color: #999; font-size: 0.85rem;
    transform: translateX(-24px); /* 修正视觉中心 */
}

.terminal-body {
    padding: 15px;
    color: var(--term-text);
    font-size: 0.95rem;
    max-height: 300px;
    overflow-y: auto;
}

.cmd-highlight { color: var(--term-blue); font-weight: bold; }
.user-cmd { color: var(--term-green); margin-top: 5px; }
.system-response { color: var(--term-text); margin-bottom: 10px; white-space: pre-wrap; }
.error-msg { color: var(--term-red); margin-bottom: 10px; }

.terminal-input-area {
    padding: 0 15px 15px;
    display: flex;
    align-items: center;
}
.prompt { color: var(--term-green); margin-right: 10px; font-weight: bold; }

#terminal-input {
    background: transparent;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: inherit;
    flex-grow: 1;
    outline: none;
    caret-color: var(--term-blue); /* 光标颜色 */
}

/* Footer */
footer {
    text-align: center; color: var(--text-secondary); padding: 40px 0; 
    border-top: 1px solid var(--border-color); margin-top: 40px;
}

@media (max-width: 900px) {
    .layout-wrapper { flex-direction: column; }
    .sidebar { width: 100%; }
}

/* === 滚动渐入动画 === */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.tool-btn {
    width: 100%; /* 让它撑满 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-body);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: monospace;
}

.tool-btn:hover {
    background: var(--bg-card);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
}