/* ===== base.css - Shared styles (all pages) ===== */\n

  /* Fonts */
  /* Keyframes */
  @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); }}
  .fade-in { will-change: transform, opacity; }

  /* Utility classes */
  .d-none { display: none !important; }
  .w-full { width: 100%; }
  .text-center { text-align: center; }
  .text-small { font-size: 13px; }
  .text-tertiary { color: var(--text-tertiary); }
  .text-danger { color: var(--danger); }
  .mt-12 { margin-top: 12px; }
  .mb-8 { margin-bottom: 8px; }
  .mx-4 { margin-left: 4px; margin-right: 4px; }
  .p-20 { padding: 20px; }
  .mw-400 { max-width: 400px; }
  .msg-error { font-size: 13px; color: var(--danger); min-height: 20px; }
  .link-accent { color: var(--accent); }
  .link-muted { color: var(--text-tertiary); }
  .footer-text { font-size: 12px; color: var(--text-tertiary); text-align: center; margin-top: 12px; }
  .fg-agree { font-size: 12px; color: var(--text-tertiary); margin: 8px 0; }
  .login-success { display: none; text-align: center; padding: 20px 0; }
  .success-title { font-size: 16px; font-weight: 600; margin: 10px 0 4px; }
  .success-desc { font-size: 13px; color: var(--text-tertiary); }
  .text-underline { text-decoration: underline; }
  .empty-table { text-align: center; padding: 24px; color: var(--text-tertiary); font-size: 14px; }
  .err-msg { color: var(--danger); font-size: 13px; padding: 6px 10px; margin-bottom: 8px; background: var(--danger-light,#FDF2F1); border-radius: 6px; }
  .notif-modal-content { max-width: 420px; }
  .notif-empty { padding: 32px 24px; text-align: center; font-size: 13px; color: var(--text-tertiary); }
  .notif-bar { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: right; }
  .notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
  .notif-item.unread { background: var(--accent-light); }
  .notif-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
  .notif-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
  .notif-time { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
  .notif-time2 { font-size: 12px; color: var(--text-tertiary); margin-bottom: 12px; }
  .notif-body { font-size: 14px; line-height: 1.8; white-space: pre-wrap; color: var(--text-primary); }
  .reg-link { color: var(--accent); font-weight: 600; }
  .panel-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.8; padding: 8px 0; }
  .tbl-h { padding: 6px 10px; border: 1px solid var(--border-light); font-weight: 600; }
  .tbl-c { padding: 6px 10px; border: 1px solid var(--border-light); }
  .code-block { background: var(--bg-secondary); padding: 8px; border-radius: 6px; font-size: 12px; line-height: 1.5; }
  .notif-viewer { background: var(--bg-secondary); border: 2px solid var(--border-light); border-radius: 10px; padding: 16px; font-size: 14px; line-height: 1.8; white-space: pre-wrap; color: var(--text-primary); min-height: 120px; }
  .notif-meta { display: flex; gap: 16px; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); }
  .login-box-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; }
  .login-h { margin: 0 0 16px; }
  .admin-subtitle { font-weight: 400; color: var(--text-tertiary); margin-left: 4px; font-size: 15px; }
  .section-title { font-weight: 600; font-size: 15px; margin-bottom: 14px; }
  .section-title-sm { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
  .msg-success { font-size: 13px; color: var(--success); }
  .msg-success-sm { font-size: 12px; color: var(--success); margin-left: 4px; }
  .subtitle-tertiary { font-weight: 400; font-size: 12px; color: var(--text-tertiary); }
  .desc-tertiary { font-size: 12px; color: var(--text-tertiary); margin-bottom: 12px; }
  .desc-tertiary-sm { font-size: 12px; color: var(--text-tertiary); margin-left: 4px; }
  .text-tertiary-note { font-size: 12px; color: var(--text-tertiary); }
  .guide-editor-bg { background: var(--bg-secondary); }
  .grid-admins { grid-template-columns: 1fr 1fr 1fr 1fr auto; margin-bottom: 0; }
  .grid-limits { grid-template-columns: 1fr 1fr auto; }
  .user-detail { font-size: 14px; line-height: 2; }
  .sub-desc { font-size: 13px; line-height: 1.6; padding: 8px 0; color: var(--text-secondary); }
  .mb-640 { max-width: 640px; }
  .mb-420 { max-width: 420px; }
  .mb-500 { max-width: 500px; }
  .pwd-desc { margin-bottom: 14px; font-size: 13px; color: var(--text-secondary); }
  .pwd-msg { margin-top: 10px; font-size: 13px; }
  .icon-grid-item { display: flex; flex-direction: column; gap: 3px; padding: 6px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--input-bg); }
  .flex-row { display: flex; align-items: center; }
  .fs-15 { font-size: 15px; }
  .text-tertiary-sm { font-size: 11px; color: var(--text-tertiary); }
  .chart-box { width: 100%; height: 305px; }
  .m-0 { margin: 0; }
  .toggle-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-tertiary); cursor: pointer; flex-shrink: 0; }
  .toggle-knob { width: 12px; height: 12px; border-radius: 50%; background: var(--text-tertiary); transition: all .2s; position: absolute; top: 2px; left: 2px; }
  .stat-input { width: 100px; padding: 4px 8px; border: 2px solid var(--border-light); border-radius: 6px; background: var(--input-bg); font-size: 12px; }
  .notif-textarea { flex: 1; min-height: 140px; resize: none; overflow-y: auto; }
  .notif-select { height: 36px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 2px solid var(--border-light); border-radius: 8px; padding: 0 14px; font-size: 13px; background: var(--input-bg); color: var(--text-primary); min-width: 150px; }
  .auto-reply-ta { flex: 1; min-height: 60px; background: var(--bg-secondary); border: 2px solid var(--border-light); border-radius: 8px; padding: 10px; font-size: 13px; resize: none; overflow-y: auto; }
  .fw-400 { font-weight: 400; }
  .text-tertiary-clr { color: var(--text-tertiary); }
  .text-secondary-clr { color: var(--text-secondary); }
  .mb-14 { margin-bottom: 14px; }
  .gap-4 { gap: 4px; }
  .fs-12 { font-size: 12px; }
  .p-0 { padding: 0; }
  .space-between { justify-content: space-between; }
  .edit-trigger { cursor: pointer; -webkit-user-select: none; position: relative; text-align: left; }
  .info-box { font-size: 12px; color: var(--text-tertiary); padding: 6px 14px; margin-bottom: 12px; border: 2px solid var(--border-light); border-radius: 8px; }
  .mb-12 { margin-bottom: 12px; }
  .mb-6 { margin-bottom: 6px; }
  .text-tertiary-sm { font-size: 12px; color: var(--text-tertiary); cursor: pointer; flex-shrink: 0; }
  .toggle-track { width: 36px; height: 20px; border-radius: 10px; border: 2px solid var(--border-light); background: var(--bg-secondary); display: inline-block; position: relative; vertical-align: middle; transition: background .2s; }
  .ai-textarea { font-size: 13px; line-height: 1.7; background: var(--bg-secondary); border: 2px solid var(--border-light); border-radius: 8px; padding: 10px; width: 100%; resize: vertical; font-family: inherit; }
  .h-100 { min-height: 100px; }
  .h-200 { min-height: 200px; }
  .ai-example { background: var(--bg-secondary); border: 2px solid var(--border-light); border-radius: 8px; padding: 10px; font-size: 13px; line-height: 1.7; min-height: 80px; white-space: pre-wrap; font-family: monospace; }
  .icon-section-title { font-weight: 600; font-size: 14px; color: var(--text-secondary); margin: 12px 0 8px; padding: 4px 0; border-bottom: 1px solid var(--border-light); }
  .icon-grid-flex { display: flex; flex-wrap: wrap; gap: 4px; }
  .modal-head-flex { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .modal-h3 { margin: 0; }
  .kb-version-note { margin: 8px 0 12px; }
  .horse-mb-8 { margin-bottom: 8px; }
  .valign-middle { vertical-align: middle; }
  .mr-4 { margin-right: 4px; }
  .login-input { width: 100%; padding: 8px 12px; border-radius: 8px; border: 2px solid var(--border); font-size: 13px; }
  .login-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-primary); z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
  .login-title { font-size: 24px; font-weight: 700; color: var(--text-primary); }
  .login-sub { font-size: 14px; color: var(--text-tertiary); }
  .login-box-inner { background: var(--bg-primary); border-radius: 16px; padding: 24px; width: 360px; }
  .logo-img-ad { height: 50px; width: auto; border-radius: 0; }
  .icon-btn { flex-shrink: 0; display: block; }
  .tbl-h-adm { padding: 6px 10px; border: 1px solid var(--border-light); text-align: left; }
  .w-22 { width: 22%; }
  .w-39 { width: 39%; }
  .tbl-h-sm { padding: 4px 8px; border: 1px solid var(--border-light); text-align: left; }
  .tbl-c-sm { padding: 4px 8px; border: 1px solid var(--border-light); }
  .readonly-bg { background: var(--bg-secondary); }
  .no-border-top { border-top: none; padding-top: 0; }
  .limit-input { width: 80px; background: var(--bg-secondary); }
  .flex-col { flex: 1; display: flex; flex-direction: column; }
  .flex-col-0 { margin: 0; }
  .gap-18 { gap: 18px; }
  .gap-6 { gap: 6px; }
  .gap-8 { gap: 8px; }
  .gap-10 { gap: 10px; }
  .gap-12 { gap: 12px; }
  .gap-14 { gap: 14px; }
  .mt-14 { margin-top: 14px; }
  .mt-10 { margin-top: 10px; }
  .mt-8 { margin-top: 8px; }
  .mt-4 { margin-top: 4px; }
  .mb-4 { margin-bottom: 4px; }
  .mb-0 { margin-bottom: 0; }
  .pb-6 { padding-bottom: 6px; }
  .mb-18 { margin-bottom: 18px; }
  .max-h-300 { max-height: 300px; }
  .vis-hidden { visibility: hidden; }
  .align-end { align-self: flex-end; }
  .pos-relative { position: relative; }
  .select-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
  .guide-select { padding: 4px 10px; border-radius: 6px; border: 2px solid var(--border); background: var(--input-bg); font-size: 13px; color: var(--text-primary); outline: none; }
  .text-secondary-sm { font-size: 13px; color: var(--text-secondary); }
  .flex-row { display: flex; }
  .flex-row.gap-10 { align-items: center; }
  .flex-row.gap-12 { align-items: flex-end; }
  .valign-middle { vertical-align: middle; }
  .mr-4 { margin-right: 4px; }
  .bg-secondary { background: var(--bg-secondary); }
  .grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .btn-action { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; font-size: 13px; border-radius: 8px; gap: 4px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
  .toggle-wrap { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; padding: 4px 10px; font-weight: 500; border: 1px solid var(--border-light); border-radius: 6px; }
  .tbl-full { width: 100%; border-collapse: collapse; font-size: 13px; }
  .mt-6 { margin-top: 6px; }
  .flex-1 { flex: 1; }
  .gap-8 { gap: 8px; }
  .text-primary-clr { color: var(--text-primary); }
  .text-tertiary-clr { color: var(--text-tertiary); }

  /* Root Body */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root, [data-theme="light"] {
 --bg-primary: #FFF9F0; --bg-secondary: #FFF3E6; --bg-tertiary: #F5E8D8;
 --text-primary: #1D1D1F; --text-secondary: #5C5855; --text-tertiary: #8A8580; --text-placeholder: #B0AAA4;
 --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
 --border: #1D1D1F; --border-light: #D4CEC6;
 --accent: #1D1D1F; --accent-light: #F0ECE6; --accent-hover: #3D3D40;
 --orange: #C0783A; --orange-light: #FDF5ED;
 --teal: #3A8B7A; --teal-light: #EDF7F3;
 --amber: #B8863C; --amber-light: #FDF7ED;
 --coral: #C4554C; --coral-light: #FDF2F1;
 --green-tag: #4A8B5C; --green-tag-bg: #F0F7F2;
 --nav-bg: #FFF9F0;
 --card-shadow: 2px 2px 0 rgba(80,65,55,0.55); --card-shadow-hover: 3px 3px 0 rgba(80,65,55,0.65);
 --dropdown-shadow: 3px 3px 0 rgba(80,65,55,0.55); --input-bg: #FFFFFF;
 --tooltip-bg: #FDF8EE; --tooltip-text: #5D4E37;
 --sidebar-bg: #F0ECE6; --warn: #B8863C; --warn-light: #FDF7ED; --danger-light: #F5D0D0; --bg-elevated: #FFFFFF; }
  [data-theme="dark"] {
 --bg-primary: #1A1714; --bg-secondary: #221F1B; --bg-tertiary: #2C2824;
 --text-primary: #EDE5DA; --text-secondary: #B0A898; --text-tertiary: #8A8278; --text-placeholder: #6E685E;
 --border: #3C3630; --border-light: #2E2A24;
 --accent: #EDE5DA; --accent-light: #2E2A24; --accent-hover: #FFFFFF;
 --orange: #DD9A52; --orange-light: #2E2216;
 --teal: #54B496; --teal-light: #16221C;
 --amber: #D0A048; --amber-light: #2A2216;
 --coral: #D06E66; --coral-light: #2A1A18;
 --green-tag: #62A670; --green-tag-bg: #18261A;
 --nav-bg: #1A1714;
 --card-shadow: none; --card-shadow-hover: 3px 3px 0 rgba(40,35,28,0.5);
 --dropdown-shadow: 3px 3px 0 rgba(40,35,28,0.5); --input-bg: #1E1B17;
 --tooltip-bg: #2E241A; --tooltip-text: #D8C8A0;
 --sidebar-bg: #221F1B; --warn: #D0A048; --warn-light: #2A2216; --danger-light: #2A1A18; --bg-elevated: #2C2824; }

  /* Dark mode overrides */
  .nav-tab.active { border-color: var(--accent); border-bottom-color: var(--accent); }
  .nav-tab:hover { border-color: #EDEDEF; }
  .rec-tag:hover, .rec-tag.selected { border-color: var(--accent); }
  .rec-tag.selected { background: var(--accent); color: var(--bg-primary); }
  .search-box, .search-box:focus { border-color: #EDEDEF; }
  .btn-primary { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }
  .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg-primary); }
  .btn-sm { background: var(--accent); border-color: var(--accent); color: var(--bg-primary); }
  .btn-sm:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  [data-theme="dark"] .logo-img { filter: brightness(0) invert(1); }
  [data-theme="dark"] .rec-cat-label svg, [data-theme="dark"] .tip-card-icon svg { filter: brightness(0) invert(1); }
  body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; font-size:14px; -webkit-font-smoothing: antialiased; transition: background 0.3s, color 0.3s; margin: 0; background-image: radial-gradient(circle, var(--border-light) 0.5px, transparent 0.5px); background-size: 3px 3px; background-repeat: repeat;
}

  .btn { padding: 8px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; border: 2px solid var(--border); transition: all 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-align: center; }
  .btn-ghost { background: var(--input-bg); color: var(--text-primary); border: 2px solid var(--border); }
  .btn-ghost:hover { background: var(--accent-light); color: var(--text-primary); border-color: var(--accent); }
  [data-theme="light"] .btn-primary { background: #3D3028; color: var(--bg-primary); border-color: #5C5855; transition: all 0.2s ease; }
  [data-theme="light"] .btn-primary:hover { background: #2A1F18; border-color: #2A1F18; transform: translate(-1px,-1px); }
  .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 2px solid var(--border); }
  .btn-secondary:hover { border-color: var(--text-tertiary); }
  .btn-copy { padding: 8px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; border: 2px solid var(--border); background: var(--input-bg); color: var(--text-secondary); transition: all 0.15s; display: inline-flex; align-items: center; gap: 5px; }
  .btn-copy:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
  .btn-copy:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
  [data-theme="light"] .btn-sm { padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 2px solid #5C5855; transition: all 0.15s; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; background: #3D3028; color: var(--bg-primary); }
  [data-theme="light"] .btn-sm:hover { background: #2A1F18; border-color: #2A1F18; transform: translate(-1px,-1px); }
  .nav-signup { padding: 7px 20px; }