/* --- 全局基础 --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #f4f7f9;
    margin: 0;
    padding: 20px;
    color: #333;
    line-height: 1.8;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* --- 首页样式 --- */
.header { text-align: center; margin-bottom: 40px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; }
.card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); text-decoration: none; color: inherit; transition: 0.3s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.cover { width: 100%; height: 180px; object-fit: cover; background: #eee; }
.info { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag { font-size: 12px; padding: 3px 8px; border-radius: 4px; background: #e3f2fd; color: #1976d2; }
.title { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0 0 10px 0; color: #333; }
.date { font-size: 12px; color: #999; margin-top: auto; }

/* --- 详情页基础 --- */
.hero-image { width: 100%; height: 320px; object-fit: cover; border-radius: 12px 12px 0 0; margin: -40px -40px 30px -40px; }
.article-header { border-bottom: 1px dashed #eee; padding-bottom: 20px; margin-bottom: 30px; }
.meta-row { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; font-size: 14px; color: #666; }
.badge { padding: 4px 12px; border-radius: 20px; font-weight: 500; font-size: 12px; }
.badge-cat { background: #fff3e0; color: #e65100; }
.badge-scene { background: #e3f2fd; color: #1565c0; }
h1 { margin: 15px 0; color: #2d3436; font-size: 2.2em; letter-spacing: -0.5px; line-height: 1.3; }

/* --- 核心排版：卡片与模块 --- */

/* 1. 🎯 结论卡片 */
.target-card {
    background: #eef7ff;
    border-left: 5px solid #2196f3;
    padding: 20px;
    margin-bottom: 40px;
    border-radius: 8px;
    color: #0d47a1;
}
.card-title {
    font-weight: 800;
    font-size: 1.2em;
    margin-bottom: 10px;
    display: block;
    color: #1565c0;
}

/* 2. 🛠️ 操作标题 */
h2.action-title {
    margin-top: 50px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
    font-size: 1.8em;
    color: #2c3e50;
    font-weight: 800;
}

/* 3. 💡 避坑卡片 */
.tips-card {
    background: #fff8e1;
    border-left: 5px solid #ffc107;
    padding: 20px;
    margin-top: 50px;
    border-radius: 8px;
    color: #5d4037;
}

/* 文字与列表 */
p { margin-bottom: 1em; text-align: justify; }
ul, ol { padding-left: 20px; margin-bottom: 20px; }
li { margin-bottom: 12px; }
strong {
    color: #d63384;
    background: rgba(214, 51, 132, 0.08);
    padding: 2px 4px;
    border-radius: 4px;
}

/* --- 💻 代码块/Prompt 样式 (重点更新) --- */
.code-wrapper {
    background: #282c34; /* One Dark 背景色 */
    border-radius: 8px;
    margin: 20px 0;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    font-size: 14px;
    border: 1px solid #3e4451;
}

.code-header {
    background: #21252b;
    padding: 8px 15px;
    border-bottom: 1px solid #3e4451;
    display: flex; 
    justify-content: space-between;
    align-items: center;
    height: 32px;
}

/* 左侧标签 (PROMPT / 预算生成) */
.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lang-label {
    color: #abb2bf;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tag-badge {
    background: #3e4451;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #4b5263;
}

/* 右侧复制按钮 */
.copy-btn {
    background: transparent;
    border: 1px solid #4b5263;
    color: #abb2bf;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}
.copy-btn:hover {
    background: #98c379; /* 绿色 */
    color: #282c34;
    border-color: #98c379;
    font-weight: bold;
}
.copy-btn:active {
    transform: scale(0.95);
}

/* 代码内容区域 */
pre { 
    margin: 0; 
    padding: 20px; 
    overflow-x: auto; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    font-family: "Fira Code", Consolas, monospace;
}
code { 
    color: #98c379; /* 经典的 Prompt 绿色 */
    line-height: 1.6;
}

/* 行内代码 */
.inline-code { 
    background: #f1f1f1; 
    padding: 2px 5px; 
    border-radius: 4px; 
    color: #e83e8c; 
    font-family: monospace; 
    font-size: 0.9em; 
}

/* 图片与工具 */
img.article-img { max-width: 100%; border-radius: 8px; margin: 20px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.tools-section { background: #f8f9fa; padding: 15px; border-radius: 8px; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.tool-item { background: #fff; padding: 5px 12px; border-radius: 20px; border: 1px solid #eee; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.back-btn { display: inline-block; margin-bottom: 20px; text-decoration: none; color: #666; font-weight: 500; }
.back-btn:hover { color: #007bff; }