:root {
  --bg: #E8E5DD;
  --card-bg: #F2F0EA;
  --card-bg-hover: #EDEBE3;
  --border: #D3D1C7;
  --border-light: #E0DDD4;
  --text: #3A3833;
  --text-secondary: #888580;
  --text-tertiary: #A09D94;
  --accent: #7A8B6F;
  --accent-light: #9DAA92;
  --accent-bg: #E8EDE3;
  --featured: #8A7340;
  --featured-bg: #E8DCC4;
  --coral: #B07B5E;
  --coral-light: #C49A82;
  --danger: #A67B6E;
  --radius: 12px;
  --radius-sm: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* === 站点隐藏模式 === */
/* SITE_HIDDEN=true 时 body 加 .site-hidden 类，隐藏以下所有元素 */
/* 恢复时只需在 app.js 中将 SITE_HIDDEN 设为 false */
body.site-hidden .eng-title,
body.site-hidden .cn-title,
body.site-hidden .btn-create,
body.site-hidden .create-form,
body.site-hidden .poll-list,
body.site-hidden .pagination { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 36px 20px 48px;
  min-height: 100vh;
}

header { text-align: center; margin-bottom: 28px; }
.header-tag { font-size: 11px; color: var(--text-tertiary); letter-spacing: 2px; margin-bottom: 8px; }
header h1 { font-size: 26px; font-weight: 600; letter-spacing: 2px; margin-bottom: 6px; color: var(--text); }
.subtitle { font-size: 13px; color: var(--text-secondary); }

.auth-area {
  margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.user-greeting { font-size: 12px; color: var(--text-secondary); }
.user-greeting strong { color: var(--accent); font-weight: 500; }
.btn-auth-small {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 14px; font-size: 12px; color: var(--text-secondary);
  cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.btn-auth-small:hover { color: var(--text); border-color: var(--text-secondary); }

.auth-hint {
  font-size: 12px; color: var(--coral); margin-bottom: 12px; padding: 8px 12px;
  background: rgba(176,123,94,0.08); border-radius: var(--radius-sm);
}
.form-subtitle { font-size: 12px; color: var(--text-tertiary); margin-bottom: 14px; }
.form-subtitle strong { color: var(--accent); font-weight: 500; }
.auth-switch { font-size: 12px; color: var(--text-tertiary); margin-top: 12px; text-align: center; }
.auth-switch a { color: var(--accent); text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

.poll-author { color: var(--accent); font-weight: 500; }

.btn-create {
  width: 100%; background: var(--card-bg); border: 1px solid #C8C5BC;
  border-radius: var(--radius-sm); padding: 14px; font-size: 14px;
  color: var(--text-secondary); cursor: pointer; font-family: inherit;
  font-weight: 500; transition: all 0.2s; margin-bottom: 20px;
}
.btn-create:hover { background: var(--card-bg-hover); border-color: var(--border); }

.create-form {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 20px;
}
.create-form h3 { font-size: 14px; font-weight: 500; margin-bottom: 16px; color: var(--text); }
.create-form input, .create-form textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px;
  color: var(--text); font-family: inherit; margin-bottom: 10px; resize: vertical;
}
.create-form input:focus, .create-form textarea:focus { outline: none; border-color: var(--accent); }
.create-form input::placeholder, .create-form textarea::placeholder { color: var(--text-tertiary); }
.option-row { display: flex; gap: 8px; margin-bottom: 10px; }
.option-row input { margin-bottom: 0; }
.option-remove {
  background: none; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  padding: 0 12px; cursor: pointer; color: var(--text-tertiary); font-size: 18px;
  transition: all 0.2s; line-height: 1;
}
.option-remove:hover { color: var(--danger); border-color: var(--danger); }
.btn-add-option {
  background: none; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  padding: 9px; width: 100%; font-size: 12px; color: var(--text-tertiary);
  cursor: pointer; font-family: inherit; margin-bottom: 14px; transition: all 0.2s;
}
.btn-add-option:hover { color: var(--accent); border-color: var(--accent); }
.form-actions { display: flex; gap: 10px; }
.btn-submit {
  flex: 1; background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 11px; font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: inherit; transition: opacity 0.2s;
}
.btn-submit:hover { opacity: 0.85; }
.btn-cancel {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 20px; font-size: 13px; color: var(--text-secondary);
  cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.btn-cancel:hover { background: var(--card-bg-hover); }

.poll-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
}
.featured-badge {
  display: inline-block; background: var(--featured-bg); color: var(--featured);
  font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; margin-bottom: 8px;
}
.poll-question { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.poll-meta { font-size: 11px; color: var(--text-tertiary); margin-bottom: 14px; }

.vote-option {
  border: 1px solid #C8C5BC; border-radius: var(--radius-sm); padding: 11px 14px;
  margin-bottom: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer;
  background: var(--card-bg-hover); transition: all 0.15s;
}
.vote-option:hover { border-color: var(--accent); color: var(--text); background: var(--accent-bg); }
.vote-option:last-child { margin-bottom: 0; }

.result-row { margin-bottom: 10px; }
.result-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.result-label .opt-text { color: var(--text); }
.result-label .opt-pct { color: var(--accent); font-weight: 500; }
.result-label .opt-pct.chosen { color: var(--coral); }
.result-label .opt-votes { font-size: 11px; font-weight: 400; color: var(--text-tertiary); margin-left: 4px; }
.result-bar { height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden; }
.result-bar-fill { height: 100%; background: var(--accent-light); border-radius: 3px; transition: width 0.5s ease; }
.result-bar-fill.chosen { background: var(--coral-light); }

footer { text-align: center; padding: 24px 0 0; margin-top: 8px; }
footer p { font-size: 11px; color: var(--text-tertiary); margin-bottom: 4px; }
.footer-copy { color: #B8B5AC !important; }
.footer-icp { margin-top: 4px; }
.footer-icp a { font-size: 11px; color: var(--text-tertiary); text-decoration: none; }
.footer-icp a:hover { color: var(--text-secondary); text-decoration: underline; }
.admin-link { margin-top: 12px; }
.admin-link a { font-size: 11px; color: var(--text-tertiary); text-decoration: none; }
.admin-link a:hover { color: var(--text-secondary); }

.empty { text-align: center; padding: 48px 20px; color: var(--text-tertiary); font-size: 13px; }

.logo-wrap { display: flex; justify-content: center; margin-bottom: 10px; }
.logo-sloth { animation: sloth-sway 5s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes sloth-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}

.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px; margin-top: 24px; padding-bottom: 8px;
}
.page-btn {
  background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 6px;
  padding: 6px 14px; font-size: 12px; color: var(--text-secondary);
  cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.page-btn:hover { background: var(--card-bg-hover); border-color: var(--border); color: var(--text); }
.page-current {
  display: inline-block; background: var(--accent); color: #fff;
  border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 500;
}
.page-info { font-size: 11px; color: var(--text-tertiary); margin-left: 8px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 10px 20px;
  border-radius: var(--radius-sm); font-size: 13px; z-index: 100;
  animation: toast-in 0.3s ease; max-width: 90%; text-align: center;
}
.toast-undo {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
}
.toast-undo-msg { flex: 1; }
.toast-undo-btn {
  background: transparent; border: 1px solid var(--bg); color: var(--bg);
  padding: 4px 12px; border-radius: var(--radius-sm); font-size: 12px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.toast-undo-btn:hover { background: rgba(255,255,255,0.15); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Contribution area in poll cards */
.contribute-area {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-light);
}
.contribute-input-row { display: flex; gap: 8px; margin-bottom: 6px; }
.contribute-input {
  flex: 1; background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px;
  color: var(--text); font-family: inherit;
}
.contribute-input:focus { outline: none; border-color: var(--accent); }
.contribute-input::placeholder { color: var(--text-tertiary); }
.btn-contribute {
  background: none; border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 8px 16px; font-size: 12px; color: var(--accent);
  cursor: pointer; font-family: inherit; transition: all 0.2s; white-space: nowrap;
}
.btn-contribute:hover { background: var(--accent-bg); }
.contribute-done {
  font-size: 12px; color: var(--text-tertiary); font-style: italic;
}
.contribute-full {
  font-size: 12px; color: var(--text-tertiary); font-style: italic;
}
.contribute-count {
  font-size: 11px; color: var(--text-tertiary); margin-top: 4px;
}

/* "网友贡献" tag on options */
.opt-contributed-tag {
  display: inline-block; font-size: 10px; color: var(--coral);
  background: rgba(176,123,94,0.1); padding: 1px 5px; border-radius: 3px;
  vertical-align: middle; margin-left: 2px; font-weight: 400;
}

/* Contribution checkbox in create form */
.contribution-check {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm);
}
.contribution-check input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; margin: 0;
}
.contribution-check label {
  font-size: 12px; color: var(--text-secondary); cursor: pointer;
}

/* Admin option management */
.admin-options-list {
  margin-bottom: 14px; border-top: 1px solid var(--border-light); padding-top: 6px;
}
.admin-option-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.admin-option-row:last-child { border-bottom: none; }
.admin-option-text {
  flex: 1; font-size: 12px; color: var(--text);
}
.admin-option-tag {
  font-size: 10px; color: var(--coral); background: rgba(176,123,94,0.1);
  padding: 1px 6px; border-radius: 3px; white-space: nowrap;
}
.admin-option-votes {
  font-size: 11px; color: var(--text-tertiary); white-space: nowrap;
}
.btn-option-del {
  background: none; border: 1px solid var(--border-light); border-radius: 4px;
  padding: 3px 10px; font-size: 11px; color: var(--danger);
  cursor: pointer; font-family: inherit; transition: all 0.2s; white-space: nowrap;
}
.btn-option-del:hover { background: rgba(166,123,110,0.1); border-color: var(--danger); }
.admin-contribution-info {
  font-size: 11px; color: var(--coral); margin-left: 4px;
}

/* Admin edit poll */
.btn-edit {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 11px 18px; font-size: 13px; color: var(--text-secondary);
  cursor: pointer; font-family: inherit; transition: all 0.2s; white-space: nowrap;
}
.btn-edit:hover { background: var(--card-bg-hover); border-color: var(--accent); color: var(--accent); }
.edit-label {
  display: block; font-size: 12px; color: var(--text-tertiary);
  margin: 14px 0 6px; font-weight: 500;
}
.edit-question-input {
  width: 100%; padding: 10px 14px; font-size: 15px; font-weight: 500;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-bg); color: var(--text); font-family: inherit; box-sizing: border-box;
}
.edit-question-input:focus { outline: none; border-color: var(--accent); }
.edit-options-list { display: flex; flex-direction: column; gap: 8px; }
.edit-option-row {
  display: flex; align-items: center; gap: 10px;
}
.edit-option-input {
  flex: 1; padding: 8px 12px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card-bg); color: var(--text); font-family: inherit;
}
.edit-option-input:focus { outline: none; border-color: var(--accent); }
.edit-option-meta {
  font-size: 11px; color: var(--text-tertiary); white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.btn-add-option {
  margin-top: 10px; padding: 8px 16px;
  background: transparent; border: 1px dashed var(--accent);
  color: var(--accent); font-size: 13px; border-radius: 8px;
  cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.btn-add-option:hover { background: var(--accent-bg); }
.edit-option-new .edit-option-input-new {
  border-color: var(--accent); border-style: dashed;
}
.edit-option-controls { display: flex; flex-direction: column; gap: 2px; }
.btn-reorder {
  width: 24px; height: 18px; line-height: 1; font-size: 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-secondary); cursor: pointer; padding: 0;
  transition: all 0.15s; font-family: inherit;
}
.btn-reorder:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-reorder:disabled { opacity: 0.3; cursor: not-allowed; }
.featured-badge.hidden { display: none; }

/* ==================== COMMENTS ==================== */

.comment-toggle {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-light);
  cursor: pointer; font-size: 12px; color: var(--text-tertiary);
  transition: color 0.2s; user-select: none;
}
.comment-toggle:hover { color: var(--accent); }
.comment-toggle-icon { font-size: 13px; }

.comment-section { margin-top: 10px; }
.comment-list { }
.comment-loading { text-align: center; padding: 16px; color: var(--text-tertiary); font-size: 12px; }
.comment-empty { text-align: center; padding: 20px 16px; color: var(--text-tertiary); font-size: 12px; }

.comment-item {
  display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.comment-item:last-child { border-bottom: none; }
.comment-reply { padding-left: 44px; }

.comment-avatar {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 500; flex-shrink: 0;
}
.comment-reply .comment-avatar { width: 26px; height: 26px; font-size: 12px; }

.comment-body { flex: 1; min-width: 0; }
.comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.comment-username { font-size: 12px; font-weight: 500; color: var(--accent); }
.comment-time { font-size: 10px; color: var(--text-tertiary); }
.comment-content { font-size: 13px; color: var(--text); line-height: 1.5; word-break: break-word; }
.comment-actions { display: flex; gap: 14px; margin-top: 4px; }
.comment-action {
  font-size: 11px; color: var(--text-tertiary); text-decoration: none; cursor: pointer;
}
.comment-action:hover { color: var(--accent); }
.comment-action.comment-like.liked { color: var(--coral); }
.comment-action.comment-del:hover { color: var(--danger); }

.reply-form { margin-top: 8px; }
.reply-input-row { display: flex; gap: 6px; align-items: center; }
.btn-cancel-reply {
  background: none; border: none; font-size: 11px; color: var(--text-tertiary);
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.btn-cancel-reply:hover { color: var(--text-secondary); }

.comment-input-area {
  display: flex; gap: 8px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.comment-input {
  flex: 1; background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px;
  color: var(--text); font-family: inherit;
}
.comment-input:focus { outline: none; border-color: var(--accent); }
.comment-input::placeholder { color: var(--text-tertiary); }
.btn-comment-send {
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 8px 16px; font-size: 12px; font-weight: 500; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: opacity 0.2s;
}
.btn-comment-send:hover { opacity: 0.85; }
.comment-input-hint {
  margin-top: 12px; padding: 10px 12px; text-align: center;
  font-size: 12px; color: var(--text-tertiary); background: var(--bg);
  border-radius: var(--radius-sm);
}

.link-inline { color: var(--accent); text-decoration: none; cursor: pointer; }
.link-inline:hover { text-decoration: underline; }
.link-msg { font-size: 11px; color: var(--coral); text-decoration: none; margin-left: 6px; cursor: pointer; }
.link-msg:hover { text-decoration: underline; }

/* ==================== MESSAGES ==================== */

.msg-btn { position: relative; }
.msg-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.4); z-index: 200; display: flex;
  align-items: center; justify-content: center;
}
.msg-modal {
  background: var(--card-bg); border-radius: var(--radius); width: 90%;
  max-width: 480px; max-height: 80vh; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.msg-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border-light);
  font-size: 14px; font-weight: 500; color: var(--text);
}
.msg-back {
  background: none; border: none; font-size: 16px; color: var(--text-secondary);
  cursor: pointer; font-family: inherit; padding: 0 4px;
}
.msg-back:hover { color: var(--text); }
.msg-close {
  background: none; border: none; font-size: 22px; color: var(--text-tertiary);
  cursor: pointer; font-family: inherit; line-height: 1; padding: 0;
}
.msg-close:hover { color: var(--text); }
.msg-content { flex: 1; overflow-y: auto; padding: 0; }
.msg-footer {
  display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-light);
  align-items: center;
}
.msg-input {
  flex: 1; background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px;
  color: var(--text); font-family: inherit;
}
.msg-input:focus { outline: none; border-color: var(--accent); }
.btn-msg-send {
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 9px 18px; font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: opacity 0.2s;
}
.btn-msg-send:hover { opacity: 0.85; }
.btn-msg-admin {
  background: none; border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 8px 16px; font-size: 12px; color: var(--accent);
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.btn-msg-admin:hover { background: var(--accent-bg); }

.convo-list { }
.convo-item {
  display: flex; gap: 12px; padding: 12px 18px; cursor: pointer;
  border-bottom: 1px solid var(--border-light); transition: background 0.2s;
}
.convo-item:hover { background: var(--card-bg-hover); }
.convo-avatar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 500;
}
.convo-info { flex: 1; min-width: 0; }
.convo-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.convo-name { font-size: 13px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 6px; }
.convo-time { font-size: 10px; color: var(--text-tertiary); }
.convo-preview { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--coral); color: #fff; font-size: 10px; font-weight: 500;
  border-radius: 10px; min-width: 18px; height: 18px; padding: 0 5px;
}

.msg-thread { padding: 14px 18px; }
.admin-msg-thread { max-height: 400px; overflow-y: auto; }
.msg-bubble-wrap { margin-bottom: 10px; display: flex; flex-direction: column; }
.msg-bubble-wrap.me { align-items: flex-end; }
.msg-bubble {
  max-width: 75%; padding: 9px 14px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.5; word-break: break-word;
  background: var(--bg); color: var(--text);
}
.msg-bubble.me {
  background: var(--accent); color: #fff;
}
.msg-time { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }
.msg-bubble-wrap.me .msg-time { text-align: right; }

/* ==================== ADMIN TABS ==================== */

.admin-tabs {
  display: flex; gap: 4px; margin-bottom: 20px; padding: 4px;
  background: var(--bg); border-radius: var(--radius-sm);
}
.admin-tab {
  flex: 1; background: none; border: none; border-radius: 6px;
  padding: 10px; font-size: 13px; color: var(--text-tertiary);
  cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.admin-tab:hover { color: var(--text-secondary); }
.admin-tab.active { background: var(--card-bg); color: var(--text); font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* Visits tab */
.visits-stats { display: flex; gap: 20px; margin: 30px 0; }
.visits-card {
  flex: 1; text-align: center; padding: 36px 20px;
  background: var(--card-bg); border-radius: 12px;
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.visits-label { font-size: 14px; color: var(--text-tertiary); margin-bottom: 12px; }
.visits-number { font-size: 42px; font-weight: 700; color: var(--accent); line-height: 1.2; }
.visits-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }
.visits-note { text-align: center; font-size: 12px; color: var(--text-tertiary); padding: 8px 0 20px; }

/* Danger zone in data stats tab */
.danger-zone {
  margin: 24px 0; padding: 20px; border: 1px solid #d4574a; border-radius: 10px;
  background: rgba(212,87,74,0.05);
}
.danger-zone-title { font-size: 15px; font-weight: 700; color: #d4574a; margin-bottom: 8px; }
.danger-zone-desc { font-size: 12px; color: var(--text-tertiary); margin-bottom: 14px; line-height: 1.6; }
.btn-danger {
  background: #d4574a; color: #fff; border: none; padding: 10px 22px;
  border-radius: var(--radius-sm); font-size: 13px; cursor: pointer;
  font-family: inherit; font-weight: 600;
}
.btn-danger:hover { background: #c04a3e; }
@media (max-width: 560px) {
  .visits-stats { flex-direction: column; gap: 12px; }
  .visits-card { padding: 24px 16px; }
  .visits-number { font-size: 34px; }
}

.admin-comment-count { font-size: 12px; color: var(--text-tertiary); margin-bottom: 12px; }
.admin-comment-item {
  display: flex; gap: 10px; padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}
.admin-comment-item:last-child { border-bottom: none; }
.admin-comment-body { flex: 1; min-width: 0; }
.admin-comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.admin-reply-tag {
  font-size: 10px; color: var(--coral); background: rgba(176,123,94,0.1);
  padding: 1px 5px; border-radius: 3px;
}
.admin-comment-meta {
  display: flex; gap: 12px; margin-top: 4px; font-size: 11px; color: var(--text-tertiary);
}
.admin-comment-poll { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-comment-likes { white-space: nowrap; }
.admin-convo-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-size: 14px; font-weight: 500; color: var(--text);
}

/* ==================== ENGLISH / CHINESE TITLE ==================== */

.eng-title {
  font-size: 36px; font-weight: 800; letter-spacing: 4px;
  color: var(--text); margin-bottom: 4px; line-height: 1.1;
  font-family: 'Georgia', 'Times New Roman', serif;
}
.cn-title {
  font-size: 22px; font-weight: 700; letter-spacing: 2px;
  color: var(--text); margin-bottom: 6px;
  font-family: 'SimHei', 'Heiti SC', 'Microsoft YaHei', sans-serif;
}

/* ==================== LEADERBOARD ==================== */

.leaderboard-section { margin-bottom: 20px; }

.leaderboard-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; overflow: hidden;
}
.leaderboard-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.leaderboard-season {
  font-size: 13px; font-weight: 600; color: var(--text);
  letter-spacing: 1px;
}
.leaderboard-reset-hint {
  font-size: 10px; color: var(--text-tertiary); font-style: italic;
}

.leaderboard-podium {
  display: flex; gap: 8px; justify-content: center; align-items: stretch;
}
.podium-item {
  flex: 1; text-align: center; padding: 14px 6px; border-radius: var(--radius-sm);
  background: var(--bg); transition: transform 0.2s; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.podium-item.rank-1 {
  background: linear-gradient(135deg, #FAF3E2, #F2EAD0);
  transform: scale(1.05); border: 1px solid rgba(212,168,67,0.4);
  order: 2; z-index: 2;
  box-shadow: 0 6px 20px rgba(212,168,67,0.2);
}
.podium-item.rank-2 {
  background: linear-gradient(135deg, #F1F0F4, #E8E6EE);
  border: 1px solid rgba(154,154,171,0.3);
  order: 1;
}
.podium-item.rank-3 {
  background: linear-gradient(135deg, #F2E5DC, #EAD8C9);
  border: 1px solid rgba(184,131,90,0.3);
  order: 3;
}
.podium-logo {
  display: flex; justify-content: center; align-items: center;
  margin-bottom: 8px; min-height: 100px; width: 100%;
}
.podium-img {
  display: block; max-width: 100%; max-height: 100%;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15));
}
.rank-1 .podium-logo { height: 100px; }
.rank-2 .podium-logo,
.rank-3 .podium-logo { height: 84px; }
.rank-1 .podium-img { max-height: 100px; }
.rank-2 .podium-img,
.rank-3 .podium-img { max-height: 84px; }
.podium-honor-name {
  font-size: 13px; font-weight: 700; margin-bottom: 6px; letter-spacing: 2px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.rank-2 .podium-honor-name,
.rank-3 .podium-honor-name { font-size: 12px; }
.podium-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.podium-vacant {
  font-size: 13px; font-weight: 700; margin-bottom: 4px; letter-spacing: 1px;
  color: var(--text-secondary); font-style: italic;
  border: 1px dashed var(--border); border-radius: 6px;
  padding: 3px 8px; display: inline-block;
}
.rank-2 .podium-vacant,
.rank-3 .podium-vacant { font-size: 12px; padding: 2px 6px; }
.podium-nearby {
  margin-bottom: 4px; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.podium-nearby-label {
  font-size: 10px; color: var(--text-tertiary); letter-spacing: 0.5px;
}
.podium-nearby .podium-name-link {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.rank-2 .podium-nearby .podium-name-link,
.rank-3 .podium-nearby .podium-name-link { font-size: 11px; }
.podium-points {
  font-size: 12px; color: var(--text-secondary); font-weight: 500;
}
.rank-2 .podium-points,
.rank-3 .podium-points { font-size: 11px; }

/* ==================== TITLE BADGES ==================== */

.title-badge {
  display: inline-block; font-size: 10px; padding: 1px 6px;
  border-radius: 3px; font-weight: 500; margin-left: 4px;
  vertical-align: middle; white-space: nowrap; letter-spacing: 0.5px;
}
.title-badge.title-seasonal {
  color: #fff; font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.title-badge.title-seasonal.rank-1 {
  background: #D4A843 !important;
}
.title-badge.title-seasonal.rank-2 {
  background: #9A9AAB !important;
}
.title-badge.title-seasonal.rank-3 {
  background: #B8835A !important;
}
.title-badge.title-tier {
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid var(--accent-light);
}

/* ==================== IMAGE OPTIONS ==================== */

.opt-img {
  display: block; width: 100%; max-height: 200px; object-fit: cover;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: 6px;
}
.opt-img-thumb {
  display: inline-block; width: 36px; height: 36px; object-fit: cover;
  border-radius: 4px; vertical-align: middle; margin-right: 6px;
}
.vote-option-image {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.vote-option-image .option-text {
  padding: 8px 14px 10px; display: block;
}
.vote-option:hover .opt-img { opacity: 0.92; }

/* Create form image upload */
.option-image-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: var(--bg);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 15px; flex-shrink: 0; transition: all 0.2s;
}
.option-image-btn:hover {
  border-color: var(--accent); background: var(--accent-bg);
}
.option-row {
  flex-wrap: wrap; align-items: center;
}
.option-row .option-input { flex: 1; min-width: 0; }
.option-image-preview {
  flex-basis: 100%; display: none; margin-top: 6px; margin-bottom: 4px;
  position: relative;
}
.preview-img {
  display: block; max-width: 100%; max-height: 120px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-light);
}
.option-image-remove {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.5); color: #fff; border: none;
  border-radius: 4px; padding: 3px 8px; font-size: 11px;
  cursor: pointer; font-family: inherit; transition: background 0.2s;
}
.option-image-remove:hover { background: rgba(0,0,0,0.7); }

.form-hint {
  font-size: 11px; color: var(--text-tertiary); margin-bottom: 12px;
  padding: 6px 10px; background: var(--bg); border-radius: var(--radius-sm);
}

/* Admin: image option indicator */
.admin-option-img-tag {
  font-size: 10px; color: var(--accent); background: var(--accent-bg);
  padding: 1px 6px; border-radius: 3px; white-space: nowrap;
}

/* ==================== ADMIN TITLE BADGE ==================== */

.admin-title-badge {
  display: inline-block; font-size: 10px; padding: 1px 6px;
  border-radius: 3px; font-weight: 500; margin-left: 4px;
  vertical-align: middle; color: #fff; letter-spacing: 0.5px;
}

@media (max-width: 480px) {
  .container { padding: 24px 16px 40px; }
  .eng-title { font-size: 26px; letter-spacing: 2px; }
  .cn-title { font-size: 18px; }
  header h1 { font-size: 22px; }
  .admin-option-row { flex-wrap: wrap; }
  .admin-option-text { flex-basis: 100%; margin-bottom: 4px; }
  .comment-reply { padding-left: 28px; }
  .msg-modal { max-height: 90vh; }
  .msg-bubble { max-width: 85%; }
  .leaderboard-podium { flex-direction: column; align-items: stretch; gap: 8px; }
  .podium-item.rank-1 { transform: none; order: 1; }
  .podium-item.rank-2 { order: 2; }
  .podium-item.rank-3 { order: 3; }
  .rank-1 .podium-logo { height: 88px; }
  .rank-2 .podium-logo,
  .rank-3 .podium-logo { height: 72px; }
  .rank-1 .podium-img { max-height: 88px; }
  .rank-2 .podium-img,
  .rank-3 .podium-img { max-height: 72px; }
  .profile-modal { max-height: 95vh; }
  .profile-info-grid { grid-template-columns: 1fr; }
  .profile-stats-row { flex-direction: column; gap: 8px; }
}

/* ==================== USER PROFILE ==================== */

.profile-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.4); z-index: 200; display: flex;
  align-items: center; justify-content: center;
  animation: toast-in 0.2s ease;
}
.profile-modal {
  background: var(--card-bg); border-radius: var(--radius);
  width: 90%; max-width: 480px; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.profile-header {
  position: relative; text-align: center; padding: 24px 18px 16px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(180deg, var(--bg) 0%, var(--card-bg) 100%);
}
.profile-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 22px;
  color: var(--text-tertiary); cursor: pointer; font-family: inherit;
  line-height: 1; padding: 0; transition: color 0.2s;
}
.profile-close:hover { color: var(--text); }
.profile-avatar {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px; font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.profile-name {
  font-size: 17px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.profile-actions {
  margin-top: 12px; display: flex; gap: 8px; justify-content: center;
}
.btn-edit-profile, .btn-profile-msg {
  background: none; border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 6px 18px; font-size: 12px; color: var(--accent);
  cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.btn-edit-profile:hover, .btn-profile-msg:hover { background: var(--accent-bg); }
.btn-profile-msg { border-color: var(--coral); color: var(--coral); }
.btn-profile-msg:hover { background: rgba(176,123,94,0.08); }

.profile-body { flex: 1; overflow-y: auto; padding: 18px; }

.profile-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px;
}
.profile-info-item {
  background: var(--bg); border-radius: var(--radius-sm); padding: 10px 12px;
}
.profile-info-label {
  display: block; font-size: 10px; color: var(--text-tertiary);
  letter-spacing: 1px; margin-bottom: 4px;
}
.profile-info-value {
  display: block; font-size: 13px; color: var(--text); font-weight: 500;
}

.profile-section-title {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 10px; letter-spacing: 0.5px;
}

.profile-bio-section { margin-bottom: 18px; }
.profile-bio {
  font-size: 13px; color: var(--text); line-height: 1.6;
  padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm);
  font-style: italic;
}

.profile-current-season { margin-bottom: 18px; }
.profile-stats-row { display: flex; gap: 10px; }
.profile-stat-item {
  flex: 1; text-align: center; padding: 14px 8px;
  background: var(--bg); border-radius: var(--radius-sm);
}
.profile-stat-value {
  display: block; font-size: 18px; font-weight: 600; color: var(--accent);
  margin-bottom: 2px;
}
.profile-stat-label {
  display: block; font-size: 11px; color: var(--text-tertiary);
}

.profile-honors { }
.profile-no-honor {
  text-align: center; padding: 16px; color: var(--text-tertiary);
  font-size: 12px; font-style: italic; background: var(--bg);
  border-radius: var(--radius-sm);
}
.honor-item {
  display: flex; gap: 12px; padding: 12px 14px; margin-bottom: 8px;
  background: var(--bg); border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent); align-items: flex-start;
}
.honor-badge {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
}
.honor-info { flex: 1; min-width: 0; }
.honor-name {
  font-size: 14px; font-weight: 600; margin-bottom: 2px;
}
.honor-en {
  font-size: 11px; font-weight: 400; opacity: 0.7;
}
.honor-detail {
  font-size: 11px; color: var(--text-tertiary); margin-bottom: 2px;
}
.honor-desc {
  font-size: 11px; color: var(--text-secondary); font-style: italic;
}

/* Profile edit form */
.profile-edit-title {
  font-size: 16px; font-weight: 600; color: var(--text);
}
.profile-edit-field { margin-bottom: 14px; }
.profile-edit-label {
  display: block; font-size: 12px; color: var(--text-secondary);
  margin-bottom: 6px; font-weight: 500;
}
.profile-edit-select, .profile-edit-textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px;
  color: var(--text); font-family: inherit; resize: vertical;
}
.profile-edit-select:focus, .profile-edit-textarea:focus {
  outline: none; border-color: var(--accent);
}
.profile-edit-textarea::placeholder { color: var(--text-tertiary); }

/* Clickable name styles */
.poll-author { color: var(--accent); font-weight: 500; text-decoration: none; cursor: pointer; }
.poll-author:hover { text-decoration: underline; }
.comment-username { font-size: 12px; font-weight: 500; color: var(--accent); text-decoration: none; cursor: pointer; }
.comment-username:hover { text-decoration: underline; }
.podium-name-link { color: inherit; text-decoration: none; cursor: pointer; }
.podium-name-link:hover { text-decoration: underline; color: var(--accent); }
.user-greeting-link { text-decoration: none; cursor: pointer; }
.user-greeting-link:hover { text-decoration: underline; }

/* Form select (registration) */
.form-select {
  width: 100%; background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px;
  color: var(--text); font-family: inherit; margin-bottom: 10px;
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888580' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 10px center;
  background-size: 14px; padding-right: 32px;
}
.form-select:focus { outline: none; border-color: var(--accent); }