* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: "Noto Sans SC", "Microsoft YaHei UI", "PingFang SC", "Segoe UI", sans-serif;
    color: #f4f1e9;
    background-color: #080b0d;
    line-height: 1.72;
    font-weight: 400;
    letter-spacing: 0;
    padding: 0;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out;
}
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 8, 10, 0.42);
    backdrop-filter: blur(1.5px);
    z-index: -1;
    pointer-events: none;
}
.apple-blog {
    max-width: 1200px;
    width: 100%;
    padding: 40px 24px 60px;
    position: relative;
    z-index: 1;
}
.blog-header { margin-bottom:30px; padding:0 12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.blog-header h1 { font-size:36px; font-weight:600; letter-spacing:0; line-height:1.2; color:#ffffff; margin-right:20px; flex:1 1 auto; text-shadow:0 2px 10px rgba(0,0,0,0.3); }
.blog-header h1 .thin { font-weight:400; color:rgba(255,255,255,0.8); display:block; font-size:24px; margin-top:4px; }
.search-wrapper { position:relative; max-width:320px; width:100%; flex-shrink:0; }
.search-container { display:flex; align-items:center; background-color:rgba(10,15,18,0.54); backdrop-filter:blur(16px); border-radius:8px; padding:8px 14px; border:1px solid rgba(233,229,216,0.18); width:100%; transition:box-shadow 0.2s ease, background-color 0.2s ease; }
.search-container:focus-within { box-shadow:0 0 0 4px rgba(10,132,255,0.3); background-color:rgba(80,80,90,0.4); }
.search-icon { font-size:20px; color:rgba(255,255,255,0.8); margin-right:12px; cursor:pointer; }
.search-input { flex:1; border:none; background:transparent; font-size:17px; font-weight:400; color:#ffffff; outline:none; font-family:inherit; min-width:150px; }
.search-input::placeholder { color:rgba(255,255,255,0.5); }
.clear-btn { font-size:18px; color:rgba(255,255,255,0.8); cursor:pointer; padding:0 6px; visibility:hidden; }
.search-container.has-text .clear-btn { visibility:visible; }
.clear-btn:hover { color:#ffffff; }
.suggestions { position:absolute; top:100%; left:0; right:0; background:rgba(10,15,18,0.92); backdrop-filter:blur(16px); border-radius:8px; margin-top:8px; padding:8px 0; border:1px solid rgba(233,229,216,0.18); max-height:300px; overflow-y:auto; z-index:1000; display:none; box-shadow:0 18px 54px rgba(0,0,0,0.34); }
.suggestion-item { padding:10px 18px; color:#e5e5e7; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:15px; transition:background 0.1s; }
.suggestion-item:hover, .suggestion-item.selected { background:rgba(255,255,255,0.1); }
.suggestion-item .suggestion-date { font-size:13px; color:rgba(255,255,255,0.5); margin-left:12px; white-space:nowrap; }
.suggestion-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
.suggestion-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suggestion-excerpt { max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:rgba(255,255,255,0.52); }
.back-link { display:inline-flex; align-items:center; gap:8px; margin-bottom:20px; color:rgba(244,241,233,0.82); text-decoration:none; font-size:16px; background:rgba(255,252,244,0.075); backdrop-filter:blur(12px); padding:8px 14px; border-radius:8px; border:1px solid rgba(233,229,216,0.18); transition:background-color 0.2s; }
.back-link:hover { background:rgba(80,80,90,0.4); }
.article-layout { display:flex; gap:30px; align-items:flex-start; }
.main-column { flex:2; min-width:0; }
.side-column { flex:1; min-width:240px; background:rgba(10,15,18,0.42); backdrop-filter:blur(16px); border-radius:8px; padding:24px 20px; border:1px solid rgba(233,229,216,0.18); box-shadow:0 20px 54px rgba(0,0,0,0.28); }
.article-card { background:rgba(10,15,18,0.42); backdrop-filter:blur(16px); border-radius:8px; padding:40px; border:1px solid rgba(233,229,216,0.18); box-shadow:0 28px 80px rgba(0,0,0,0.34); }
.article-title { font-size:42px; font-weight:600; color:#ffffff; margin-bottom:16px; line-height:1.2; text-shadow:0 2px 10px rgba(0,0,0,0.3); }
.article-meta { display:flex; gap:16px; font-size:17px; color:rgba(255,255,255,0.6); margin-bottom:30px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1); }
/* 文章内容区域 - 自动换行核心样式 */
.article-content {
    color: rgba(255,255,255,0.9);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}
.article-content p {
    margin-bottom: 1.2em;
}
/* 确保文章内的图片、表格等元素不会溢出 */
.article-content img {
    max-width: 100%;
    height: auto;
}
.article-content table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}
.article-content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.password-overlay { text-align:center; padding:40px; background:rgba(10,15,18,0.86); backdrop-filter:blur(16px); border-radius:8px; margin-bottom:30px; }
.password-input { background:rgba(255,255,255,0.06); border:1px solid rgba(233,229,216,0.18); color:#f4f1e9; border-radius:8px; padding:12px 16px; font-size:16px; width:min(100%, 300px); margin:12px auto 20px; display:block; }
.password-btn { background:rgba(139,185,210,0.18); color:white; border:1px solid rgba(139,185,210,0.42); border-radius:8px; padding:12px 24px; font-size:16px; cursor:pointer; }
.error-message { color:#ff6b6b; margin-top:10px; }
.side-title { font-size:20px; font-weight:600; color:#ffffff; margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.1); }
.related-list { list-style:none; }
.related-item { margin-bottom:16px; padding-bottom:12px; border-bottom:0.5px solid rgba(255,255,255,0.1); }
.related-item:last-child { border-bottom:none; }
.related-link { display:flex; justify-content:space-between; align-items:center; text-decoration:none; color:rgba(255,255,255,0.9); transition:background-color 0.2s; padding:8px 10px; border-radius:12px; margin:-8px -10px; }
.related-link:hover { background-color:rgba(255,255,255,0.1); }
.related-title { font-size:16px; font-weight:450; max-width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.related-date { font-size:14px; color:rgba(255,255,255,0.6); background:transparent; padding:2px 0; border-radius:0; border:0; }
.no-related { color:rgba(255,255,255,0.5); font-style:italic; text-align:center; padding:20px 0; }
.nav-buttons { display:flex; justify-content:space-between; margin-top:30px; gap:20px; }
.nav-button { background:rgba(255,252,244,0.075); backdrop-filter:blur(12px); border:1px solid rgba(233,229,216,0.18); color:white; padding:12px 20px; border-radius:8px; text-decoration:none; font-size:16px; transition:background 0.2s; flex:1; text-align:center; min-width:120px; }
.nav-button:hover:not(.disabled) { background:rgba(80,80,90,0.4); }
.nav-button.disabled { opacity:0.3; pointer-events:none; background:rgba(40,40,45,0.2); }
@media (max-width:800px) { .article-layout { flex-direction:column; } .main-column, .side-column { width:100%; } .side-column { margin-top:30px; } }
@media (max-width:600px) { .article-card { padding:30px 20px; } .article-title { font-size:32px; } }