:root {--bg:#fff5f8;--card-bg:#ffffff;--text:#333;--text-light:#666;--accent:#ff69b4;--border:#ffd1e8;--header-bg:#ff69b4;--header-text:#ffffff;--read-font-size:18px;--read-line-height:1.8;--sidebar-title-border:#e0e0e0;}
body.dark {--bg:#121014;--card-bg:#1e1b21;--text:#e8e6eb;--text-light:#b5b0bc;--accent:#ff8ac4;--border:#332836;--header-bg:#1a141f;--header-text:#f4eef6;--button-bg:#2a242e;--button-text:#e8e6eb;--button-border:#443749;--button-hover-bg:#38303b;--sidebar-title-border:#3a343f;}
* {box-sizing:border-box;}
body {margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;transition:background 0.3s,color 0.3s;overflow-x:hidden;}
a {color:var(--accent);text-decoration:none;}
header {background:var(--header-bg);color:var(--header-text);padding:0.8rem 1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.8rem;}
.site-title {font-size:1.4rem;font-weight:700;color:var(--header-text);}
nav {display:flex;gap:0.8rem;}
nav a {color:var(--header-text);white-space:nowrap;padding-top: .5rem; font-weight: 500;}
.theme-toggle {background:rgba(255,255,255,.25);border:none;color:var(--header-text);padding:6px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;}
.container {max-width:1200px;margin:1.5rem auto;padding:0 1rem;}
.search-section {margin-bottom:1.5rem;width:100%;}
.main-search-box {display:flex;gap:0.5rem;width:100%;max-width:800px;margin:0 auto 1rem;position:relative;}
.main-search-input {flex:1;padding:12px 18px;border-radius:999px;border:2px solid var(--border);background:var(--card-bg);color:var(--text);font-size:1rem;transition:all 0.3s ease;outline:none;}
.main-search-input:focus {border-color:var(--accent);box-shadow:0 0 15px rgba(255,105,180,0.3),0 0 25px rgba(255,105,180,0.15);transform:scale(1.02);}
.main-search-btn {padding:12px 24px;border-radius:999px;border:none;background:var(--accent);color:#fff;font-size:1rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;}
.main-search-btn:hover {background:#ff55a8;transform:scale(1.05);}
.hot-searches {display:flex;flex-wrap:wrap;gap:0.8rem;justify-content:center;max-width:800px;margin:0 auto;}
.hot-search-item {padding:6px 14px;background:var(--card-bg);border:1px solid var(--border);border-radius:999px;color:var(--text-light);font-size:0.9rem;cursor:pointer;transition:all 0.2s ease;}
.hot-search-item:hover {border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.layout {display:grid;grid-template-columns:1fr 320px;gap:1.4rem;}
.article-card {background:var(--card-bg);border-radius:14px;padding:1.6rem;border:1px solid var(--border);}
.article-title {font-size:1.8rem;}
.article-meta-row {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.2rem;}
.article-meta {font-size:0.85rem;color:var(--text-light);margin:0;}
.article-content img {border:1px solid var(--border);transition:transform 0.15s,box-shadow 0.15s;padding:10px;width:90%;height:auto;border-radius:10px;display:block;max-width:300px!important;margin:0 auto;}
.read-tools {display:flex;gap:10px;flex-wrap:wrap;margin:0;}
.read-tools button {border:1px solid var(--border);background:var(--card-bg);padding:6px 12px;border-radius:999px;cursor:pointer;font-size:0.85rem;color:var(--text);font-weight:500;transition:all 0.2s ease;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.read-tools button:hover {background:var(--button-hover-bg);border-color:var(--accent);color:var(--text);}
.article-content {font-size:var(--read-font-size);line-height:var(--read-line-height);}
.article-content p {margin-bottom:1.4em;}
.audio-controls {display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-bottom:1.5rem;padding:1rem;background:var(--card-bg);border-radius:14px;border:1px solid var(--border);}
.audio-controls .control-group {display:flex;flex-direction:column;gap:6px;min-width:120px;}
.audio-controls label {font-size:0.85rem;color:var(--text-light);text-align:center;}
.audio-controls select,.audio-controls input[type="range"] {width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--card-bg);color:var(--text);font-size:0.9rem;}
.audio-controls .btn-group {display:flex;gap:8px;}
.audio-btn {padding:8px 18px;border-radius:999px;border:none;cursor:pointer;background:var(--accent);color:#fff;font-size:0.9rem;transition:background 0.2s ease;display:flex;align-items:center;gap:6px;}
.action-buttons {display:flex;justify-content:center;align-items:center;margin:2rem 0;width:100%;}
.action-buttons #listenButton {padding:10px 24px;font-size:1rem;}
@media (max-width:900px) {.tags-section {padding:1rem;}
.tag-item {padding:6px 14px;font-size:0.85rem;}
.action-buttons {margin:1.5rem 0;}
.action-buttons #listenButton {width:100%;justify-content:center;}
.author-profile {flex-direction:column;text-align:center;}
.author-avatar {margin-right:0;margin-bottom:1rem;}
}
.audio-btn:hover {background:#ff55a8;}
.audio-btn:disabled {background:var(--text-light);cursor:not-allowed;opacity:0.7;}
.audio-status {font-size:0.85rem;color:var(--text-light);min-width:150px;text-align:center;}
input[type="range"] {-webkit-appearance:none;height:6px;border-radius:3px;background:var(--border);outline:none;}
input[type="range"]::-webkit-slider-thumb {-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;}
input[type="range"]::-moz-range-thumb {width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;}
.comment-box {position:relative;margin-top:2rem;}
.comment-box textarea {width:100%;min-height:100px;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--card-bg);color:var(--text);}
.comment-box button {margin-top:10px;background:var(--accent);border:none;color:#fff;padding:8px 16px;border-radius:6px;cursor:pointer;}
.comment-form-fields {display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
.comment-form-field {width:100%;}
.comment-form-field label {display:block;margin-bottom:0.5rem;color:var(--text-light);font-size:0.9rem;}
.comment-form-field input {width:100%;padding:12px 15px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);color:var(--text);font-size:1rem;transition:border-color 0.3s;}
.comment-form-field input:focus {outline:none;border-color:var(--accent);}
.rating {display:flex;gap:4px;margin-bottom:10px;cursor:pointer;}
.rating span {font-size:1.6rem;color:#ccc;}
.rating span.active {color:var(--accent);}
.comments-list {margin-top:3rem;}
.comments-list h3 {font-size:1.3rem;margin-bottom:1.5rem;color:var(--text);}
.comment-item {background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:1.2rem;margin-bottom:1rem;}
.comment-header {display:flex;align-items:center;gap:0.8rem;margin-bottom:0.8rem;}
.comment-avatar {width:40px;height:40px;border-radius:50%;object-fit:cover;}
.comment-author {font-weight:600;color:var(--text);}
.comment-rating {display:flex;gap:2px;margin-left:auto;}
.comment-rating span {font-size:1rem;color:var(--accent);}
.comment-rating span.empty {color:#ccc;}
.comment-content {color:var(--text);line-height:1.6;margin-bottom:0.8rem;padding-bottom:0.8rem;border-bottom:1px solid var(--border);}
.comment-meta {font-size:0.8rem;color:var(--text-light);margin-bottom:0.8rem;}
.comment-actions {display:flex;gap:1rem;font-size:0.85rem;}
.comment-actions button {background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font-size:0.85rem;}
.reply-form {margin-top:1rem;display:none;}
.reply-form.show {display:block;}
.reply-form textarea {width:100%;min-height:80px;padding:8px;border-radius:8px;border:1px solid var(--border);background:var(--card-bg);color:var(--text);margin-bottom:0.8rem;}
.reply-form button {background:var(--accent);border:none;color:#fff;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:0.85rem;}
.child-comments {margin-left:2rem;margin-top:1rem;}
.child-comments .comment-item {padding:1rem;margin-bottom:0.8rem;}
.sidebar .box {background:var(--card-bg);border-radius:14px;padding:1.5rem;border:1px solid var(--border);margin-bottom:1.5rem;}
.sidebar .box-title {font-size:1.2rem;font-weight:700;color:var(--text);margin:0 0 1rem 0;padding-bottom:0.8rem;border-bottom:1px solid var(--sidebar-title-border);}
.trending-list,.latest-comments-list {list-style:none;padding:0;margin:0;}
.trending-item,.comment-item-sidebar {margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);}
.trending-item:last-child,.comment-item-sidebar:last-child {margin-bottom:0;padding-bottom:0;border-bottom:none;}
.trending-title,.comment-author-sidebar {font-size:1rem;font-weight:600;color:var(--text);margin:0 0 0.5rem 0;}
.trending-excerpt,.comment-content-sidebar {font-size:0.9rem;color:var(--text-light);line-height:1.5;margin:0 0 0.6rem 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.trending-meta,.comment-meta-sidebar {font-size:0.85rem;color:var(--text-light);margin:0;}
footer {text-align:center;padding:1rem;font-size:0.9rem;color:var(--text-light);border-top:1px solid var(--border);margin-top:1rem;}
@media (max-width:900px) {.layout {grid-template-columns:1fr;}
header {justify-content:center;}
.site-title {width:100%;text-align:center;}
nav {justify-content:center;}
.child-comments {margin-left:1rem;}
.comment-header {flex-wrap:wrap;}
.comment-rating {margin-left:0;margin-top:0.5rem;width:100%;}
.comment-form-fields {grid-template-columns:1fr;}
.audio-controls {padding:0.8rem;}
.audio-controls .control-group {min-width:100%;}
.audio-controls .btn-group {width:100%;justify-content:center;}
.audio-status {min-width:100%;}
.nav-buttons {display:none !important;}
.main-search-box {flex-direction:column;gap:1rem;}
.main-search-input:focus {transform:none;}
.main-search-btn {width:100%;}
}
.nav-buttons {position:fixed;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;pointer-events:none;z-index:998;padding:0 2rem;}
.nav-button {pointer-events:auto;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--accent);color:white;font-size:1.5rem;box-shadow:0 4px 12px rgba(255,105,180,0.3);transition:all 0.2s ease;border:none;cursor:pointer;text-decoration:none;}
.nav-button:hover {background:#ff55a8;transform:scale(1.05);}
.nav-button.prev {margin-left:-1rem;}
.nav-button.next {margin-right:-1rem;}
.author-profile {display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;padding:1.2rem;margin-bottom:2rem;background-color:var(--card-bg);color:var(--text);transition:all 0.3s ease;}
.author-profile audio { width: 100%; max-width: 700px; height: 40px; border-radius: 6px; background-color: #f1f1f1; outline: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.author-avatar {width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--border);margin-right:1.5rem;}
.author-info {flex:1;}
.author-name {font-size:1.3rem;font-weight:600;color:var(--text);margin-bottom:0.3rem;}
.author-bio {font-size:0.95rem;color:var(--text-light);line-height:1.5;}
.nav-button {pointer-events:auto;background:rgba(255,105,180,0.85);color:white;border:none;border-radius:50%;width:48px;height:48px;font-size:1.6rem;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all 0.25s ease;box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.nav-button:hover,.nav-button:focus {background:#ff55a8;transform:scale(1.1);}
@media (max-width:768px) {.nav-buttons {top:auto;bottom:1.2rem;transform:none;padding:0 1.5rem;z-index:1000;}
.nav-button {width:56px;height:56px;font-size:2rem;box-shadow:0 6px 16px rgba(0,0,0,0.25);}
}
.like-btn {padding:10px 24px;font-size:1rem;border-radius:999px;border:none;cursor:pointer;background:#ffffff;color:#333;border:1px solid #ffd1e8;transition:all 0.2s ease;display:inline-flex;align-items:center;gap:8px;margin:0 5px;}
body.dark .like-btn {background:#1e1b21;color:#e8e6eb;border-color:#332836;}
.like-btn:hover {border-color:#ff69b4;color:#ff69b4;}
.like-btn.liked {background:#ff69b4;color:#fff;border-color:#ff69b4;}
.like-btn.liked:hover {background:#ff55a8;}
.like-count {font-weight:600;}
.like-feedback {position:fixed;top:20px;right:20px;padding:12px 24px;background:#ff69b4;color:white;border-radius:8px;box-shadow:0 4px 12px rgba(255,105,180,0.3);opacity:0;transition:opacity 0.3s ease;z-index:9999;}
.like-feedback.show {opacity:1;}
.comment-box {margin:3rem 0;padding:2rem;border: 1px dashed var(--border);border-radius:8px;}
.comments-list {margin:3rem 0;}
.comment-item {margin:1.5rem 0;padding:1.5rem;border:1px solid #eee;border-radius:8px;}
.no-comments {color:#666;padding:1rem;text-align:center;}
.rating {margin:1rem 0;}
.rating span {font-size:1.5rem;color:#ccc;cursor:pointer;margin-right:4px;}
.rating span.active {color:#ff69b4;}
.comment-rating span {color:#ff69b4;}
.comment-rating span.empty {color:#ccc;}
.comment-form-fields {display:flex;gap:1.5rem;margin:1rem 0;flex-wrap:wrap;}
.comment-form-field {flex:1;min-width:200px;}
.comment-form-field label {display:block;margin-bottom:0.5rem;font-weight:600;}
.comment-form-field input {width:100%;padding:0.8rem;border:1px solid #ddd;border-radius:4px;}
.required {color:#ff69b4;margin-left:4px;}
/* 回复表单字段专属样式 */.reply-fields {margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px dashed #eee;}
/* 评论内容输入框 */#comment,.reply-form-inner textarea {width:100%;padding:0.8rem;border-radius:4px;margin:1rem 0;min-height:120px;resize:vertical;}
.reply-form-inner textarea {min-height:80px;}
/* 按钮样式 */#submit-comment,.reply-form-inner button {background:#ff69b4;color:#fff;border:none;padding:0.8rem 2rem;border-radius:999px;cursor:pointer;font-size:1rem;}
#submit-comment:hover,.reply-form-inner button:hover {background:#ff55a8;}
/* 评论头部 */.comment-header {display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.comment-avatar {width:40px;height:40px;border-radius:50%;object-fit:cover;}
.comment-author {font-weight:600;font-size:1.1rem;}
.comment-meta {color:#666;font-size:0.9rem;margin-bottom:1rem;}
.moderation-note {color:#ff69b4;font-size:0.8rem;margin-left:0.5rem;}
.comment-actions {margin-top:1rem;}
.reply-btn {background:transparent;color:#ff69b4;border:1px solid #ff69b4;padding:0.5rem 1rem;border-radius:4px;cursor:pointer;}
.reply-btn:hover {background:#ff69b4;color:#fff;}
.reply-form {display:none;margin-top:1rem;padding-top:1rem;border-top:1px dashed #eee;}
.reply-form.show {display:block;}
.tags-section {margin:2rem 0;padding:1.5rem;background:var(--card-bg);border-radius:12px;border:1px dashed var(--border);}
.tags-title {font-size:1.2rem;font-weight:600;color:var(--text);margin-bottom:1rem;display:block;}
.tags-list {display:flex;flex-wrap:wrap;gap:0.8rem;}
.tag-item {padding:8px 18px;border-radius:999px;font-size:0.9rem;font-weight:500;color:white;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;border:none;text-decoration:none;text-transform:capitalize;}
.tag-item.tag-1 {background:#ff69b4;}
.tag-item.tag-2 {background:#8a2be2;}
.tag-item.tag-3 {background:#20b2aa;}
.tag-item.tag-4 {background:#ff7f50;}
.tag-item.tag-5 {background:#9370db;}
.tag-item.tag-6 {background:#32cd32;}
.tag-item::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:all 0.6s ease;}
.tag-item:hover {transform:translateY(-3px) scale(1.05);box-shadow:0 6px 15px rgba(0,0,0,0.15);}
.tag-item:hover::before {left:100%;}
.age-modal {position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:999999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.age-modal-content {background:var(--card-bg,#ffffff);color:var(--text,#333);max-width:480px;width:90%;padding:2.5rem 2rem;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.6);text-align:center;border:1px solid var(--border,#ffd1e8);}
.age-modal-content h2 {color:var(--accent,#ff69b4);margin-bottom:1.2rem;font-size:1.8rem;}
.age-modal-content p {margin-bottom:1rem;line-height:1.6;font-size:1.05rem;}
.age-modal-content ul {text-align:left;margin:1.2rem 0 1.8rem 1.5rem;font-size:1.05rem;}
.age-modal-content ul li {margin-bottom:0.6rem;}
.age-buttons {display:flex;flex-direction:column;gap:1rem;margin:2rem 0 1.5rem;}
.btn-confirm,.btn-exit {padding:1rem 2rem;font-size:1.15rem;font-weight:bold;border:none;border-radius:8px;cursor:pointer;transition:all 0.2s;}
.btn-confirm {background:var(--accent,#ff69b4);color:white;}
.btn-confirm:hover {background:var(--accent-dark,#d6408f);transform:translateY(-2px);}
.btn-exit {background:#555;color:white;text-decoration:none;display:inline-block;}
.btn-exit:hover {background:#444;}
.age-note {font-size:0.9rem;color:var(--text-light,#666);margin-top:1.5rem;line-height:1.5;}
body.dark .age-modal-content {background:var(--card-bg,#2a1a22);color:var(--text,#f0e0e8);border-color:var(--border,#4a2a3a);}
body.dark .age-modal-content h2 {color:var(--accent,#ff8ac4);}
body.dark .age-note {color:var(--text-light,#c0a0b0);}
@media (max-width:480px) {.age-modal-content {padding:2rem 1.5rem;}
.age-modal-content h2 {font-size:1.6rem;}
.btn-confirm,.btn-exit {padding:0.9rem 1.5rem;font-size:1.05rem;}
}
nav a.active { background: rgba(255, 255, 255, 0.25); border: none; color: var(--header-text); padding: 0.5rem 0.9rem; border-radius: 999px; cursor: pointer; font-size: 0.9rem; }