  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --primary: #8B4513;
      --primary-dark: #6B3410;
      --primary-light: #A0522D;
      --accent: #D4A574;
      --bg-light: #FDFBF7;
      --bg-cream: #F5F0E8;
      --text-dark: #2C2416;
      --text-gray: #5C5347;
      --text-light: #8B8073;
      --border: #E5DFD5;
      --white: #FFFFFF;
      --shadow: 0 2px 8px rgba(44, 36, 22, 0.08);
      --shadow-lg: 0 4px 20px rgba(44, 36, 22, 0.12);
      --success: #52c41a;
      --warning: #faad14;
      --danger: #ff4d4f;
    }
    body {
      font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-dark);
      line-height: 1.6;
      min-height: 100vh;
      overflow: hidden;
    }
    .app-container {
      display: flex;
      min-height: 100vh;
    }
    /* Mobile Sidebar Overlay */
    .sidebar-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 99;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .sidebar-overlay.active {
      display: block;
      opacity: 1;
    }
    /* Mobile menu toggle button */
    .mobile-menu-toggle {
      display: none;
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 101;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 8px;
      width: 40px; height: 40px;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
      flex-direction: column;
      gap: 5px;
    }
    .mobile-menu-toggle span {
      display: block;
      width: 22px; height: 2px;
      background: var(--text-dark);
      border-radius: 2px;
      transition: all 0.3s;
    }
    .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
    @media (max-width: 768px) {
      .mobile-menu-toggle { display: flex; }
      .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 100;
      }
      .sidebar.active {
        transform: translateX(0);
      }
      .main-content {
        margin-left: 0 !important;
        padding-top: 60px;
      }
    }
    /* Sidebar */
    .sidebar {
      width: 240px;
      background: var(--white);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      position: fixed;
      height: 100vh;
      overflow-y: auto;
    }
    .sidebar-header {
      padding: 24px 20px;
      border-bottom: 1px solid var(--border);
    }
    .sidebar-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }
    .sidebar-logo-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-family: 'Noto Serif SC', serif;
      font-size: 20px;
      font-weight: 700;
    }
    .sidebar-logo-text {
      font-family: 'Noto Serif SC', serif;
      font-size: 16px;
      font-weight: 600;
      color: var(--text-dark);
    }
    .sidebar-logo-text span { color: var(--primary); }
    .sidebar-nav {
      flex: 1;
      padding: 8px 12px;
    }
    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      color: var(--text-gray);
      font-size: 14px;
      margin-bottom: 2px;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }
    .nav-item:hover { background: var(--bg-cream); color: var(--primary); }
    .nav-item.active { background: var(--bg-cream); color: var(--primary); font-weight: 500; }
    .nav-item .icon { font-size: 18px; }
    .nav-divider {
      height: 1px;
      background: var(--border);
      margin: 12px 0;
    }
    .sidebar-footer {
      padding: 16px 20px;
      border-top: 1px solid var(--border);
    }
    .user-info {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }
    .user-avatar {
      width: 36px;
      height: 36px;
      background: var(--accent);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: var(--white);
      font-size: 14px;
    }
    .user-name { font-weight: 500; font-size: 14px; }
    .user-role { font-size: 12px; color: var(--text-light); }
    .btn-logout, .btn-change-pwd {
      width: 100%;
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--text-gray);
    }
    .btn-change-pwd { margin-bottom: 8px; }
    .btn-change-pwd:hover { border-color: var(--primary); color: var(--primary); }
    .btn-logout:hover { background: var(--danger); color: var(--white); border-color: var(--danger); }
    /* Main Content */
    .main-content {
      flex: 1;
      margin-left: 240px;
      padding: 24px;
      height: 100vh;
      overflow-y: auto;
      box-sizing: border-box;
    }
    .page-header {
      margin-bottom: 24px;
    }
    .page-title {
      font-family: 'Noto Serif SC', serif;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .page-subtitle { color: var(--text-light); font-size: 14px; }
    /* Stats Cards */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      margin-bottom: 16px;
    }
    .stat-card {
      background: var(--white);
      padding: 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
    }
    .stat-value { font-size: 20px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
    .stat-label { font-size: 11px; color: var(--text-light); }
    .stat-card-clickable { cursor: pointer; transition: all 0.2s; position: relative; }
    .stat-card-clickable:hover { border-color: var(--primary); box-shadow: 0 2px 12px rgba(139,69,19,0.15); transform: translateY(-1px); }
    .stat-card-clickable:active { transform: translateY(0); }
    .stat-hint { font-size: 11px; color: var(--primary); margin-top: 6px; opacity: 0.7; }
    /* Panel */
    .panel {
      background: var(--white);
      border-radius: 12px;
      border: 1px solid var(--border);
      margin-bottom: 24px;
    }
    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }
    .panel-title {
      font-weight: 600;
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .panel-body { padding: 20px; }
    /* Table */
    .data-table {
      width: 100%;
      border-collapse: collapse;
    }
    .data-table th, .data-table td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
    }
    .data-table th {
      background: var(--bg-cream);
      font-weight: 500;
      color: var(--text-gray);
    }
    .data-table tr:hover td { background: var(--bg-light); }
    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
    }
    .badge-primary { background: var(--bg-cream); color: var(--primary); }
    .badge-success { background: #f6ffed; color: var(--success); }
    .badge-warning { background: #fffbe6; color: var(--warning); }
    .badge-danger { background: #fff2f0; color: var(--danger); }
    /* Buttons */
    .btn {
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      border: none;
      font-family: inherit;
    }
    .btn-primary { background: var(--primary); color: var(--white); }
    .btn-primary:hover { background: var(--primary-dark); }
    .btn-outline { background: var(--white); border: 1px solid var(--border); color: var(--text-gray); }
    .btn-outline:hover { border-color: var(--primary); color: var(--primary); }
    .btn-sm { padding: 4px 12px; font-size: 12px; }
    .btn-xs { padding: 2px 6px; font-size: 11px; }
    /* 组合框样式 */
    .combobox-select { flex: 1; }
    .combobox-select option[value="__custom__"] { color: var(--primary); font-style: italic; border-top: 1px dashed var(--border); }
    .btn-icon { padding: 6px 10px; }
    .btn-danger { background: #dc3545; color: var(--white); }
    .btn-danger:hover { background: #c82333; }
    .btn-success { background: #28a745; color: var(--white); }
    .btn-success:hover { background: #218838; }
    /* Tab Navigation */
    .tab-nav {
      display: flex;
      gap: 4px;
      flex: 1;
    }
    .tab-btn {
      padding: 8px 16px;
      border: none;
      background: transparent;
      color: var(--text-gray);
      font-size: 14px;
      cursor: pointer;
      border-radius: 6px 6px 0 0;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .tab-btn:hover { background: var(--bg-light); color: var(--text); }
    .tab-btn.active { background: var(--white); color: var(--primary); font-weight: 500; }
    .tab-content { }
    .tab-content:not(.active) { display: none; }
    .badge-count {
      background: #dc3545;
      color: white;
      padding: 1px 6px;
      border-radius: 10px;
      font-size: 11px;
      min-width: 18px;
      text-align: center;
    }
    /* Toggle Switch */
    .toggle-switch {
      width: 44px;
      height: 24px;
      background: #ccc;
      border-radius: 12px;
      position: relative;
      transition: background 0.2s;
      flex-shrink: 0;
      cursor: pointer;
    }
    .toggle-switch.active { background: var(--success, #52c41a); }
    .toggle-switch .toggle-knob {
      width: 20px;
      height: 20px;
      background: white;
      border-radius: 50%;
      position: absolute;
      top: 2px;
      left: 2px;
      transition: left 0.2s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .toggle-switch.active .toggle-knob { left: 22px; }
    /* Modal */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }
    .modal-overlay.active { display: flex; }
    .modal {
      background: var(--white);
      border-radius: 16px;
      width: 600px;
      max-width: 95%;
      max-height: 90vh;
      overflow-y: auto;
      padding: 28px;
      position: relative;
    }
    .modal-sm { width: 400px; }
    .modal-close {
      position: absolute;
      top: 16px; right: 16px;
      width: 32px; height: 32px;
      border: none;
      background: var(--bg-cream);
      border-radius: 50%;
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .modal-close:hover { background: var(--border); }
    .modal-title {
      font-family: 'Noto Serif SC', serif;
      font-size: 20px;
      margin-bottom: 24px;
      padding-right: 32px;
    }
    /* ========== 可拖拽弹窗 ========== */
    .modal-draggable {
      position: fixed !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      max-height: 95vh !important;
      overflow: auto !important;
      cursor: default;
      display: flex;
      flex-direction: column;
    }
    .modal-draggable.member-modal {
      overflow: auto !important;
    }
    .modal-draggable .modal-title {
      cursor: move;
      user-select: none;
    }
    .modal-draggable .modal-body {
      overflow-y: visible;
    }
    /* ========== 成员表单专用样式 ========== */
    .member-modal {
      max-width: 1100px !important;
      width: 1100px !important;
      max-height: 95vh !important;
      padding: 0 !important;
      overflow: visible !important;
      display: flex;
      flex-direction: column;
    }
    .member-modal .modal-header {
      display: flex;
      align-items: center;
      padding: 18px 28px;
      background: linear-gradient(135deg, #7B3A10 0%, #9C4B20 100%);
      color: white;
      border-radius: 16px 16px 0 0;
      gap: 16px;
      flex-shrink: 0;
      cursor: move;
      user-select: none;
    }
    .member-modal .modal-header .modal-title {
      color: white;
      font-size: 20px;
      margin: 0;
      padding: 0;
      font-weight: 600;
      flex: 1;
    }
    .member-modal .modal-close {
      position: static;
      background: rgba(255,255,255,0.2);
      color: white;
      width: 28px;
      height: 28px;
      font-size: 16px;
      flex-shrink: 0;
    }
    .member-modal .modal-close:hover {
      background: rgba(255,255,255,0.35);
    }
    .member-modal .modal-body {
      padding: 18px 24px;
      overflow-y: visible;
      flex: 1;
    }
    .member-modal .form-section-title {
      font-size: 13px;
      color: #8B4513;
      margin-bottom: 8px;
      padding-bottom: 4px;
      border-bottom: 1px dashed #d4c4b0;
    }
    /* 表单紧凑行 */
    .fm-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: flex-end;
      margin-bottom: 8px;
    }
    .fm-item {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .fm-item label {
      font-size: 11px;
      color: #666;
      margin-bottom: 2px;
      white-space: nowrap;
    }
    .fm-item label .req { color: #e74c3c; }
    .fm-item label .hint { font-size: 10px; color: #999; }
    .fm-compact {
      height: 40px;
      font-size: 13px;
      padding: 4px 8px;
      line-height: 1.3;
    }
    /* 紧凑表单布局 */
    .compact-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: flex-end;
      margin-bottom: 10px;
    }
    .compact-field {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .compact-field label {
      font-size: 13px;
      color: #666;
      margin-bottom: 4px;
      white-space: nowrap;
    }
    .compact-field label .req { color: #e74c3c; }
    .compact-field label .hint { font-size: 11px; color: #999; font-weight: normal; }
    .compact-field label.deceased-label {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      font-size: 12px;
      color: #bbb;
    }
    .compact-field label.deceased-label input[type="checkbox"] {
      accent-color: #8B4513;
      width: 13px;
      height: 13px;
      margin: 0;
    }
    .compact-field label.deceased-label span {
      color: #bbb;
      font-weight: normal;
    }
    /* 分隔线 */
    .fm-divider {
      border: none;
      border-top: 1px dashed #ddd;
      margin: 6px 0;
    }
    /* 已故淡字体 */
    .deceased-label {
      font-size: 12px;
      color: #bbb;
      font-weight: 400;
    }
    .deceased-label input[type="checkbox"] {
      accent-color: #8B4513;
      width: 14px;
      height: 14px;
      vertical-align: middle;
      margin-right: 3px;
    }
    /* 配偶区域 */
    .spouse-section {
      background: #faf8f5;
      border: 1px solid #e8e0d5;
      border-radius: 8px;
      padding: 10px 12px;
      margin: 4px 0 8px;
    }
    .spouse-row {
      padding: 8px;
      background: #f8f8f8;
      border-radius: 6px;
      margin-bottom: 6px;
    }
    .form-group { margin-bottom: 16px; }
    .form-section {
      background: #faf8f5;
      border: 1px solid #e8e0d5;
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 14px;
    }
    .form-section-title {
      font-size: 13px;
      font-weight: 700;
      color: #7B3A10;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid #e0d5c8;
    }
    .form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
    .form-label-hint { font-weight: normal; font-size: 12px; color: var(--text-light); }
    .father-select-section { position: relative; }
    .form-input, .form-select, .form-textarea {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
      font-family: inherit;
      transition: border-color 0.2s;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      outline: none;
      border-color: var(--primary);
    }
    .form-textarea { resize: vertical; min-height: 100px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-actions { display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end; }
    /* 地址联动选择样式 */
    .address-linkage { background: linear-gradient(135deg, #faf8f5 0%, #f5f0eb 100%); padding: 16px; border-radius: 10px; margin-top: 8px; border: 1px solid rgba(139, 69, 19, 0.1); }
    .form-label-sub { display: block; font-size: 12px; color: var(--text-light); margin-bottom: 4px; }
    /* 父亲搜索下拉 */
    .search-results-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      max-height: 250px;
      overflow-y: auto;
      z-index: 1000;
      margin-top: 4px;
    }
    .search-result-item {
      padding: 10px 14px;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      transition: background 0.2s;
    }
    .search-result-item:last-child { border-bottom: none; }
    .search-result-item:hover { background: var(--bg-light); }
    .search-result-item .name { font-weight: 600; color: var(--text); }
    .search-result-item .info { font-size: 12px; color: var(--text-light); margin-top: 2px; }
    /* Tab */
    .tab-nav {
      display: flex;
      gap: 4px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 20px;
    }
    .tab-item {
      padding: 12px 20px;
      border: none;
      background: none;
      cursor: pointer;
      font-size: 14px;
      color: var(--text-gray);
      position: relative;
      transition: all 0.2s;
    }
    .tab-item:hover { color: var(--primary); }
    .tab-item.active { color: var(--primary); font-weight: 500; }
    .tab-item.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0; right: 0;
      height: 2px;
      background: var(--primary);
    }
    /* Empty State */
    .empty-state {
      text-align: center;
      padding: 48px 24px;
      color: var(--text-light);
    }
    .empty-state .icon { font-size: 48px; margin-bottom: 16px; }
    /* Toast */
    .toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: var(--text-dark);
      color: var(--white);
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 14px;
      z-index: 2000;
      animation: slideIn 0.3s ease;
    }
    .toast.success { background: var(--success); }
    .toast.error { background: var(--danger); }
    @keyframes slideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    /* Page Sections */
    .page-section { display: none; }
    .page-section.active { display: block; }
    /* Mobile Menu Toggle */
    .mobile-menu-toggle {
      display: none;
      position: fixed;
      top: 16px;
      left: 16px;
      z-index: 1001;
      flex-direction: column;
      gap: 5px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      padding: 10px;
      box-shadow: var(--shadow);
      transition: all 0.3s;
    }

    .mobile-menu-toggle span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--text-dark);
      transition: all 0.3s;
      border-radius: 2px;
    }

    .mobile-menu-toggle.active {
      left: 256px;
      background: var(--primary);
      border-color: var(--primary);
    }

    .mobile-menu-toggle.active span {
      background: var(--white);
    }

    .mobile-menu-toggle.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
      opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Sidebar Overlay for Mobile */
    .sidebar-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 98;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .sidebar-overlay.active {
      display: block;
      opacity: 1;
    }

    /* Responsive */
    @media (max-width: 1200px) {
      .stats-grid { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 768px) {
      .mobile-menu-toggle {
        display: flex;
      }

      .sidebar {
        transform: translateX(-100%);
        z-index: 100;
        transition: transform 0.3s ease;
        width: 240px;
      }

      .sidebar.active {
        transform: translateX(0);
      }

      .main-content {
        margin-left: 0;
        padding: 60px 16px 16px;
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 8px;
      }

      .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      .tab-nav {
        flex-wrap: wrap;
      }

      .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .btn {
        min-height: 44px;
        padding: 10px 16px;
      }

      .form-actions {
        flex-direction: column;
      }

      .form-actions .btn {
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      .stats-grid {
        grid-template-columns: 1fr;
      }

      .stat-card {
        padding: 16px;
      }

      .page-title {
        font-size: 20px;
      }

      .modal {
        padding: 24px 16px;
        width: 95%;
      }
    }
    /* ========== 移动端适配（手机登记新增宗亲） ========== */
    @media (max-width: 768px) {
      /* 整体布局 */
      .main-content { padding: 12px; }
      .panel-header { padding: 12px; }
      .page-header { padding: 12px; flex-direction: column; align-items: flex-start; gap: 8px; }
      .page-header .header-actions { width: 100%; }
      .page-header .header-actions .btn { flex: 1; text-align: center; padding: 12px 16px; font-size: 15px; }

      /* ===== 收录宗亲卡片：手机端加大触控 ===== */
      .stat-card-clickable { padding: 20px 16px; -webkit-tap-highlight-color: transparent; }
      .stat-card-clickable:active { background: var(--bg-cream); }
      .stat-hint { font-size: 12px; opacity: 0.85; }

      /* ===== 成员弹窗：全屏覆盖 ===== */
      .modal-overlay {
        align-items: stretch;
        justify-content: stretch;
      }
      .modal-draggable {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
      }
      .member-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
      }
      .member-modal .modal-header {
        border-radius: 0 !important;
        padding: 14px 16px;
        position: sticky;
        top: 0;
        z-index: 10;
      }
      .member-modal .modal-header .modal-title {
        font-size: 17px;
      }
      .member-modal .modal-body {
        padding: 12px !important;
        overflow-y: visible !important;
      }

      /* ===== compact-row：每个字段占满一行 ===== */
      .compact-row {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 8px;
      }
      .compact-field {
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
      }
      .compact-field label {
        font-size: 14px;
        margin-bottom: 5px;
      }

      /* ===== 表单输入框：加大触控区域 ===== */
      .form-input,
      .form-select,
      .fm-compact {
        height: 48px !important;
        font-size: 16px !important;
        padding: 8px 12px !important;
        border-radius: 10px;
        -webkit-appearance: none;
        appearance: none;
      }
      .form-input:focus,
      .form-select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.15);
      }
      select.form-select,
      select.fm-compact {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        padding-right: 32px !important;
      }

      /* ===== 婚配/婚嫁区域：纵向排列 ===== */
      #maleMarriageSection,
      #femaleMarriageSection {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
      }
      #maleMarriageSection > .compact-field,
      #femaleMarriageSection > .compact-field {
        width: 100% !important;
      }
      #spouseListContainer {
        width: 100% !important;
        min-width: 0 !important;
      }

      /* ===== 配偶信息行 ===== */
      .spouse-row {
        flex-direction: column !important;
        gap: 6px !important;
      }
      .spouse-row select {
        width: 100% !important;
        min-width: 0 !important;
      }

      /* ===== 父亲选择区域 ===== */
      .father-select-section > div:first-of-type {
        flex-wrap: wrap;
      }
      .father-select-section .form-select,
      .father-select-section .fm-compact {
        flex: 1 1 100%;
        min-width: 0;
      }
      .btn-xs {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px !important;
      }

      /* ===== 安葬地区域 ===== */
      #memberBurialSection {
        min-width: 0 !important;
        flex-direction: column;
        gap: 8px;
      }
      #memberBurialSection > div {
        flex-direction: column;
        gap: 8px;
      }
      #memberBurialSection input,
      #memberBurialSection select {
        width: 100% !important;
        min-width: 0 !important;
      }

      /* ===== 底部操作按钮：固定在底部 ===== */
      .form-actions {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 12px 0 !important;
        margin-top: 16px !important;
        border-top: 1px solid var(--border);
        display: flex;
        gap: 10px;
        justify-content: stretch;
        z-index: 10;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
      }
      .form-actions .btn {
        flex: 1;
        padding: 14px 16px;
        font-size: 16px;
        border-radius: 10px;
        text-align: center;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* ===== 已故复选框 ===== */
      .compact-field label.deceased-label {
        font-size: 14px;
        padding: 10px 0;
      }
      .compact-field label.deceased-label input[type="checkbox"] {
        width: 20px;
        height: 20px;
      }

      /* ===== 搜索下拉 ===== */
      .search-results-dropdown {
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        max-height: 40vh;
      }
      .search-result-item {
        padding: 14px 16px;
      }

      /* ===== 模态框关闭按钮加大 ===== */
      .member-modal .modal-close {
        width: 36px;
        height: 36px;
        font-size: 20px;
      }

      /* ===== 滚动条美化（移动端） ===== */
      .member-modal::-webkit-scrollbar {
        width: 0;
      }
    }
  </style>
  <!-- Quill 富文本编辑器（本地） -->
  <link href="/libs/quill.snow.css" rel="stylesheet">
  <script src="/libs/quill.min.js"></script>
  <style>
    /* Quill 编辑器样式适配 */
    .ql-toolbar.ql-snow { border-color: var(--border) !important; border-radius: 8px 8px 0 0; background: var(--bg-light); }
    .ql-container.ql-snow { border-color: var(--border) !important; border-radius: 0 0 8px 8px; font-family: 'Noto Sans SC', sans-serif; font-size: 14px; }
    .ql-editor { min-height: 150px; max-height: 350px; overflow-y: auto; }
    .ql-editor img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
    .ql-snow .ql-stroke { stroke: var(--text-secondary, #666) !important; }
    .ql-snow .ql-fill { fill: var(--text-secondary, #666) !important; }
    .ql-snow .ql-picker-label { color: var(--text-secondary, #666) !important; }
    .ql-snow .ql-picker-options { background: white; border-color: var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
    .modal .ql-editor { min-height: 120px; }
    .rich-editor-wrapper { margin-top: 4px; }
    /* PDF导出按钮样式 */
    .btn-pdf-export { background: #e74c3c; color: white; border: none; }
    .btn-pdf-export:hover { background: #c0392b; }
  <!-- html2canvas 和 jsPDF 库（PDF导出用） -->
  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
</head>
<body>
  <div class="app-container">
    <!-- Mobile Menu Toggle -->
    <button class="mobile-menu-toggle" onclick="toggleSidebar()" aria-label="菜单">
      <span></span>
      <span></span>
      <span></span>
    </button>

    <!-- Sidebar Overlay -->
    <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>

    <!-- Sidebar -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <a href="#" class="sidebar-logo" onclick="showSection('dashboard')">
          <div class="sidebar-logo-icon">汪</div>
          <div class="sidebar-logo-text">湖北<span>汪氏</span></div>
        </a>
      </div>
      <nav class="sidebar-nav">
        <button class="nav-item active" onclick="showSection('dashboard')">
          <span class="icon">📊</span> 工作台
        </button>
        <button class="nav-item" id="navMembers" onclick="showSection('members')">
          <span class="icon">🏠</span> 宗亲登记
        </button>
        <button class="nav-item" id="navAnnouncements" onclick="showSection('announcements')">
          <span class="icon">📰</span> 家族新闻
        </button>
        <button class="nav-item" id="navWelfare" onclick="showSection('welfare')">
          <span class="icon">📜</span> 文化档案
        </button>
        <button class="nav-item" id="navNotables" onclick="showSection('notables')">
          <span class="icon">📖</span> 家谱中心
        </button>
        <button class="nav-item" id="navGenealogySearch" onclick="showSection('genealogy-search')">
          <span class="icon">🔍</span> 寻根问祖
        </button>
        <button class="nav-item" id="navClanService" onclick="showSection('clan-service')">
          <span class="icon">🤝</span> 宗亲服务
        </button>
        <button class="nav-item" onclick="showSection('ai-fetch')">
          <span class="icon">🤖</span> AI智能采集
        </button>
        <div class="nav-divider"></div>
        <button class="nav-item" id="navGenealogy" onclick="showSection('genealogy')">
          <span class="icon">📖</span> 宗谱浏览
        </button>
        <button class="nav-item" id="navLineage" onclick="showSection('lineage')">
          <span class="icon">🌳</span> 世系浏览
        </button>
        <div class="nav-divider" id="adminNavDivider" style="display:none"></div>
        <button class="nav-item" id="navUserMgmt" style="display:none" onclick="showSection('user-management')">
          <span class="icon">👤</span> 用户管理
        </button>
        <button class="nav-item" id="navGenMgmt" style="display:none" onclick="showSection('generation-management')">
          <span class="icon">📜</span> 辈分管理
        </button>
        <button class="nav-item" id="navPubook" style="display:none" onclick="showSection('pubook')">
          <span class="icon">📚</span> 谱书制作
        </button>
      </nav>
      <div class="sidebar-footer">
        <div class="user-info">
          <div class="user-avatar" id="userAvatar">管</div>
          <div>
            <div class="user-name" id="userName">管理员</div>
            <div class="user-role" id="userRole">系统管理员</div>
          </div>
        </div>
        <button class="btn-change-pwd" onclick="openChangePwdModal()">修改密码</button>
        <button class="btn-logout" onclick="logout()">退出登录</button>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
      <!-- Dashboard -->
      <section class="page-section active" id="section-dashboard">
        <div class="page-header">
          <h1 class="page-title">工作台</h1>
          <p class="page-subtitle">欢迎使用崇阳越国文化研究中心</p>
        </div>
        <div class="stats-grid" id="statsGrid">
          <div class="stat-card stat-card-clickable" id="btnStatAddMember" onclick="openMemberModal()" title="点击新增宗亲">
            <div class="stat-value" id="statMembers">-</div>
            <div class="stat-label">收录宗亲</div>
            <div class="stat-hint">点击新增</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="statBranches">-</div>
            <div class="stat-label">世系分支</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="statPending">-</div>
            <div class="stat-label">待审核</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="statWelfare">-</div>
            <div class="stat-label">福利报名</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="statUnread">-</div>
            <div class="stat-label">未读消息</div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-header">
            <h2 class="panel-title">📋 最新公告</h2>
            <button class="btn btn-primary btn-sm" id="btnDashAnnouncement" onclick="openAnnouncementModal()">发布公告</button>
          </div>
          <div class="panel-body" id="dashboardAnnouncements">
            <div class="empty-state"><div class="icon">📭</div><p>暂无公告</p></div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-header">
            <h2 class="panel-title">📜 文化档案</h2>
            <button class="btn btn-primary btn-sm" id="btnDashWelfare" onclick="openWelfareModal()">创建活动</button>
          </div>
          <div class="panel-body" id="dashboardWelfare">
            <div class="empty-state"><div class="icon">🎁</div><p>暂无活动</p></div>
          </div>
        </div>
      </section>

      <!-- Members -->
      <section class="page-section" id="section-members">
        <div class="page-header">
          <h1 class="page-title">宗亲登记</h1>
          <p class="page-subtitle">管理系统中的宗亲信息</p>
        </div>
        <div class="panel">
          <div class="panel-header">
            <div class="tab-nav">
              <button class="tab-btn active" onclick="switchMemberTab('all')">全部宗亲</button>
              <button class="tab-btn" id="pendingTabBtn" onclick="switchMemberTab('pending')">
                待审核 <span class="badge-count" id="pendingCountBadge">0</span>
              </button>
            </div>
            <button class="btn btn-primary" id="btnMemberAdd" onclick="openMemberModal()">新增宗亲</button>
          </div>
          
          <!-- 全部宗亲列表（资料夹视图） -->
          <div class="tab-content active" id="membersTabAll">
            <div id="membersTable" style="padding: 12px;">
              <div class="empty-state"><div class="icon">👥</div><p>暂无宗亲</p></div>
            </div>
          </div>
          
          <!-- 待审核列表 -->
          <div class="tab-content" id="membersTabPending" style="display: none;">
            <div class="panel-body" style="padding: 0;">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>辈分</th>
                    <th>分支</th>
                    <th>地址</th>
                    <th>提交人</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody id="pendingMembersTable">
                  <tr><td colspan="7" class="empty-state"><div class="icon">⏳</div><p>暂无待审核宗亲</p></td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <!-- Announcements -->
      <section class="page-section" id="section-announcements">
        <div class="page-header">
          <h1 class="page-title">家族新闻</h1>
          <p class="page-subtitle">发布和管理家族新闻</p>
        </div>
        <div class="panel">
          <div class="panel-header">
            <h2 class="panel-title">公告列表</h2>
            <button class="btn btn-primary" id="btnAnnouncementAdd" onclick="openAnnouncementModal()">发布公告</button>
          </div>
          <div class="panel-body" style="padding: 0;">
            <table class="data-table">
              <thead>
                <tr>
                  <th>标题</th>
                  <th>受众</th>
                  <th>渠道</th>
                  <th>发布日期</th>
                  <th>优先级</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="announcementsTable">
                <tr><td colspan="6" class="empty-state"><div class="icon">📢</div><p>暂无公告</p></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <!-- Welfare -->
      <section class="page-section" id="section-welfare">
        <div class="page-header">
          <h1 class="page-title">文化档案</h1>
          <p class="page-subtitle">管理和发布文化档案</p>
        </div>
        <div class="panel">
          <div class="panel-header">
            <h2 class="panel-title">活动列表</h2>
            <button class="btn btn-primary" id="btnWelfareAdd" onclick="openWelfareModal()">创建活动</button>
          </div>
          <div class="panel-body" style="padding: 0;">
            <table class="data-table">
              <thead>
                <tr>
                  <th>活动名称</th>
                  <th>类别</th>
                  <th>活动时间</th>
                  <th>地点</th>
                  <th>报名/限额</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="welfareTable">
                <tr><td colspan="7" class="empty-state"><div class="icon">🎁</div><p>暂无活动</p></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <!-- Notables -->
      <section class="page-section" id="section-notables">
        <div class="page-header">
          <h1 class="page-title">家谱中心</h1>
          <p class="page-subtitle">管理和查阅家谱中心</p>
        </div>
        <div class="panel">
          <div class="panel-header">
            <h2 class="panel-title">名人列表</h2>
            <button class="btn btn-primary" id="btnNotableAdd" onclick="openNotableModal()">添加名人</button>
          </div>
          <div class="panel-body" style="padding: 0;">
            <table class="data-table">
              <thead>
                <tr>
                  <th>姓名</th>
                  <th>头衔</th>
                  <th>时代</th>
                  <th>领域</th>
                  <th>主要贡献</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="notablesTable">
                <tr><td colspan="6" class="empty-state"><div class="icon">🏆</div><p>暂无记录</p></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <!-- Chat -->
      <section class="page-section" id="section-chat">
        <div class="page-header">
          <h1 class="page-title">互动社区</h1>
          <p class="page-subtitle">宗亲交流平台</p>
        </div>
        <div class="panel">
          <div class="panel-header">
            <h2 class="panel-title">讨论区</h2>
          </div>
          <div class="panel-body" id="chatThreads">
            <div class="empty-state"><div class="icon">💬</div><p>暂无讨论区</p></div>
          </div>
        </div>
      </section>

      <!-- Genealogy Search (寻根问祖) -->
      <section class="page-section" id="section-genealogy-search">
        <div class="page-header">
          <h1 class="page-title">寻根问祖</h1>
          <p class="page-subtitle">查询家族根源，追溯先祖脉络</p>
        </div>
        <div class="panel">
          <div class="panel-body" style="padding:40px;text-align:center;color:var(--text-light);">
            <div style="font-size:48px;margin-bottom:16px;">🏯</div>
            <p style="font-size:16px;margin-bottom:8px;">功能开发中，敬请期待</p>
            <p style="font-size:13px;">将支持按姓名、地区、辈分等条件寻根查询</p>
          </div>
        </div>
      </section>

      <!-- Clan Service (宗亲服务) -->
      <section class="page-section" id="section-clan-service">
        <div class="page-header">
          <h1 class="page-title">宗亲服务</h1>
          <p class="page-subtitle">汪氏宗亲专属服务</p>
        </div>
        <div class="panel">
          <div class="panel-body" style="padding:40px;text-align:center;color:var(--text-light);">
            <div style="font-size:48px;margin-bottom:16px;">🤝</div>
            <p style="font-size:16px;margin-bottom:8px;">功能开发中，敬请期待</p>
            <p style="font-size:13px;">将提供支持咨询、活动报名、宗亲互助等服务</p>
          </div>
        </div>
      </section>

      <!-- AI Fetch -->
      <section class="page-section" id="section-ai-fetch">
        <div class="page-header">
          <h1 class="page-title">🤖 AI智能采集</h1>
          <p class="page-subtitle">自动从网络采集汪姓名人事迹（仅采集正面信息）</p>
        </div>
        
        <div class="panel">
          <div class="panel-header">
            <h2 class="panel-title">📡 搜索设置</h2>
          </div>
          <div class="panel-body">
            <div style="display: flex; gap: 16px; margin-bottom: 20px;">
              <input type="text" class="form-input" id="aiSearchKeyword" placeholder="输入关键词，如：汪姓名人、汪氏企业家" style="flex: 1;">
              <button class="btn btn-primary" onclick="aiFetchNotables()">🔍 搜索采集</button>
              <button class="btn btn-outline" onclick="aiFetchAll()">📋 采集预设列表</button>
            </div>
            <div style="color: var(--text-light); font-size: 13px; margin-bottom: 16px;">
              💡 提示：系统会自动过滤负面信息，仅收录正面事迹。支持搜索：企业家、文化名人、政治人物、科学家等。
            </div>
          </div>
        </div>

        <div class="panel">
          <div class="panel-header">
            <h2 class="panel-title">📋 搜索结果</h2>
            <span class="badge badge-primary" id="fetchResultCount">0 条结果</span>
          </div>
          <div class="panel-body" id="aiFetchResults">
            <div class="empty-state">
              <div class="icon">🤖</div>
              <p>点击上方按钮开始智能采集</p>
              <p style="font-size: 13px; margin-top: 8px;">系统将从公开资料中筛选汪氏正面人物事迹</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Genealogy -->
      <section class="page-section" id="section-genealogy">
        <div class="page-header">
          <h1 class="page-title">宗谱浏览</h1>
          <p class="page-subtitle">浏览完整的宗谱信息</p>
        </div>
        
        <!-- Stats Overview -->
        <div class="stats-grid" id="genealogyStats" style="margin-bottom: 24px;">
          <div class="stat-card">
            <div class="stat-value" id="genealogyTotalMembers">-</div>
            <div class="stat-label">宗亲总数</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="genealogyBranches">-</div>
            <div class="stat-label">分支数量</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="genealogyGenerations">-</div>
            <div class="stat-label">辈分数量</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="genealogyMale">-</div>
            <div class="stat-label">男性</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="genealogyFemale">-</div>
            <div class="stat-label">女性</div>
          </div>
        </div>

        <div class="panel">
          <div class="panel-header">
            <div style="display: flex; align-items: center; gap: 12px;">
              <h2 class="panel-title">📖 宗谱浏览</h2>
              <div class="tab-nav" style="border: none; margin: 0; padding: 0;">
                <button class="tab-item active" id="tab-card" onclick="switchGenealogyView('card')">卡片视图</button>
                <button class="tab-item" id="tab-tree" onclick="switchGenealogyView('tree')">世系图</button>
                <button class="tab-item" id="tab-generation" onclick="switchGenealogyView('generation')">辈分视图</button>
                <span id="genRangeFilter" style="display:none; margin-left: 12px;">
                  <span style="color: var(--text-light); font-size: 12px;">世系筛选：</span>
                  <select id="filterGenStart" class="form-select" style="width: 80px; font-size: 12px; padding: 2px 6px;" onchange="filterGenealogy()">
                    <option value="">起始世</option>
                  </select>
                  <span style="color: var(--text-light); font-size: 12px;">至</span>
                  <select id="filterGenEnd" class="form-select" style="width: 80px; font-size: 12px; padding: 2px 6px;" onchange="filterGenealogy()">
                    <option value="">结束世</option>
                  </select>
                  <button class="btn btn-outline btn-sm" style="padding: 2px 8px; font-size: 11px;" onclick="clearGenFilter()">清除</button>
                </span>
                <button class="tab-item" id="tab-stats" onclick="switchGenealogyView('stats')">统计分析</button>
                <button class="tab-item" id="tab-migration" onclick="switchGenealogyView('migration')">🗺️ 迁移图</button>
              </div>
            </div>
            <div style="display: flex; gap: 8px;">
              <select class="form-select" style="width: 150px;" id="filterBranch" onchange="filterGenealogy()">
                <option value="">全部分支</option>
              </select>
              <input type="text" class="form-input" placeholder="搜索宗亲" style="width: 180px;" id="searchGenealogy" oninput="filterGenealogy()">
              <button class="btn btn-outline btn-sm" onclick="exportGenealogy()">📥 导出</button>
              <button class="btn btn-pdf-export btn-sm" onclick="exportGenViewPDF()">📄 导出PDF</button>
            </div>
          </div>
          <div class="panel-body" id="genealogyTree" style="padding: 0; min-height: 600px; height: 70vh; overflow: hidden; position: relative;">
            <div class="empty-state"><div class="icon">📖</div><p>正在加载宗谱数据...</p></div>
          </div>
        </div>
      </section>

      <!-- ===== 世系浏览（独立一级页面）===== -->
      <section class="page-section" id="section-lineage">
        <div style="height:100%;display:flex;flex-direction:column;overflow:hidden;">
          <div id="lineageTree" style="flex:1;overflow:hidden;position:relative;">
            <div class="empty-state"><div class="icon">🌳</div><p>正在加载世系数据...</p></div>
          </div>
        </div>
      </section>

      <!-- ===== 用户管理（仅ADMIN）===== -->
      <section class="page-section" id="section-user-management">
        <div class="page-header">
          <h1 class="page-title">👤 用户管理</h1>
          <p class="page-subtitle">管理平台用户账号、权限与注册审批</p>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-grid" style="grid-template-columns:repeat(3,1fr);">
          <div class="stat-card">
            <div class="stat-value" id="umTotalUsers">-</div>
            <div class="stat-label">总用户数</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="umAdminCount">-</div>
            <div class="stat-label">管理员数量</div>
          </div>
          <div class="stat-card">
            <div class="stat-value" id="umGuestCount">-</div>
            <div class="stat-label">普通访客</div>
          </div>
        </div>
        <!-- 隐藏元素：供JS使用（避免报错） -->
        <span id="umPendingUsers" style="display:none;"></span>

        <!-- 功能开关（仅管理员可见） -->
        <div class="panel" id="umFeaturePanel" style="display:none;">
          <div class="panel-header">
            <span class="panel-title">⚙️ 功能开关</span>
          </div>
          <div class="panel-body">
            <div style="display:flex;align-items:center;gap:12px;padding:8px 0;">
              <label style="display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;">
                <div class="toggle-switch" id="toggleTreeClick" onclick="toggleTreeClickFeature()">
                  <div class="toggle-knob"></div>
                </div>
                <div>
                  <div style="font-weight:600;font-size:14px;">🌳 世系图双击查看资料</div>
                  <div style="font-size:12px;color:var(--text-light);">开启后，所有用户双击世系图中的人员可查看个人资料（普通用户只读，管理员可编辑）</div>
                </div>
              </label>
            </div>
          </div>
        </div>

        <!-- 待审批用户（已停用） -->
        <div class="panel" id="pendingUsersPanel" style="display:none;">
          <div class="panel-header">
            <span class="panel-title">⏳ 待审批用户 <span id="pendingUsersBadge" class="badge-count" style="display:none">0</span></span>
            <button class="btn btn-outline btn-sm" onclick="loadUserManagement()">刷新</button>
          </div>
          <div class="panel-body">
            <div id="pendingUsersTable">
              <div class="empty-state"><div class="icon">✅</div><p>暂无待审批用户</p></div>
            </div>
          </div>
        </div>

        <!-- 全部用户列表 -->
        <div class="panel">
          <div class="panel-header">
            <span class="panel-title">👥 所有用户</span>
            <div style="display:flex;gap:8px;align-items:center;">
              <input type="text" id="userSearchInput" placeholder="搜索用户名/姓名..." class="form-input" style="padding:6px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;width:200px;" oninput="filterUserTable()">
              <button class="btn btn-primary btn-sm" onclick="openCreateUserModal()">+ 新增用户</button>
            </div>
          </div>
          <div class="panel-body" style="padding:0;">
            <table class="data-table" id="allUsersTable">
              <thead>
                <tr>
                  <th>用户名</th>
                  <th>显示名称</th>
                  <th>角色</th>
                  <th>祠</th>
                  <th>门</th>
                  <th>功能权限</th>
                  <th>状态</th>
                  <th>注册时间</th>
                  <th style="min-width:220px;">操作</th>
                </tr>
              </thead>
              <tbody id="allUsersTableBody">
                <tr><td colspan="9" class="empty-state"><div class="icon">⏳</div><p>加载中...</p></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <!-- ===== 辈分管理（仅ADMIN）===== -->
      <section class="page-section" id="section-generation-management">
        <div class="page-header">
          <h1 class="page-title">📜 辈分管理</h1>
          <p class="page-subtitle">设置各世辈分（派名）名称，第1-120世</p>
        </div>

        <div class="panel">
          <div class="panel-header">
            <span class="panel-title">辈分名称列表（共120世）</span>
            <div style="display:flex;gap:8px;">
              <button class="btn btn-outline btn-sm" onclick="loadGenerationManagement()">刷新</button>
              <button class="btn btn-primary btn-sm" onclick="saveAllGenerationNames()">💾 保存全部修改</button>
            </div>
          </div>
          <div class="panel-body">
            <p style="font-size:13px;color:var(--text-light);margin-bottom:12px;">
              💡 说明：辈分名称即派名（如"颖""川""开"等），留空表示该世使用默认显示（如"第X世"）。备注可填写该辈历史典故。
            </p>
            <div id="generationNamesGrid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;">
              <div class="empty-state"><div class="icon">⏳</div><p>加载中...</p></div>
            </div>
          </div>
        </div>
      </section>

      <!-- ===== 谱书制作（仅ADMIN）===== -->
      <section class="page-section" id="section-pubook">
        <div class="page-header">
          <h1 class="page-title">📚 谱书制作</h1>
          <p class="page-subtitle">设计封面、编辑谱文，生成可导出的完整族谱书稿</p>
        </div>
        <div style="border-radius:8px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
          <iframe id="pubookFrame" src="/pubook-maker.html"
            style="width:100%;height:calc(100vh - 160px);min-height:600px;border:none;display:block;"
            allowfullscreen>
          </iframe>
        </div>
      </section>

    </main>
  </div>

  <!-- ===== 用户管理 - 新增用户弹窗 ===== -->
  <div class="modal-overlay" id="createUserModal">
    <div class="modal modal-sm">
      <button class="modal-close" onclick="closeModal('createUserModal')">×</button>
      <h2 class="modal-title">新增用户</h2>
      <form id="createUserForm" onsubmit="submitCreateUser(event)">
        <div class="form-group">
          <label class="form-label">用户名 <span style="color:#e74c3c">*</span></label>
          <input type="text" class="form-input" id="newUserUsername" required placeholder="登录用户名（字母/数字）" autocomplete="off">
        </div>
        <div class="form-group">
          <label class="form-label">显示名称 <span style="color:#e74c3c">*</span></label>
          <input type="text" class="form-input" id="newUserDisplayName" required placeholder="姓名或昵称">
        </div>
        <div class="form-group">
          <label class="form-label">初始密码 <span style="color:#e74c3c">*</span></label>
          <input type="password" class="form-input" id="newUserPassword" required placeholder="至少6位">
        </div>
        <div class="form-group">
          <label class="form-label">角色</label>
          <select class="form-input" id="newUserRole" onchange="toggleCreateBranchLineage()">
            <option value="GUEST">访客（GUEST）</option>
            <option value="LEADER">门长（LEADER）</option>
            <option value="ADMIN">管理员（ADMIN）</option>
          </select>
        </div>
        <div class="form-group" id="createBranchGroup" style="display:none;">
          <label class="form-label">祠（祠堂/分支）</label>
          <input type="text" class="form-input" id="newUserBranch" list="createBranchDatalist" placeholder="选择或输入祠名">
          <datalist id="createBranchDatalist"></datalist>
        </div>
        <div class="form-group" id="createLineageGroup" style="display:none;">
          <label class="form-label">门（门系/分支）</label>
          <input type="text" class="form-input" id="newUserLineage" list="createLineageDatalist" placeholder="选择或输入门名">
          <datalist id="createLineageDatalist"></datalist>
        </div>
        <button type="submit" class="btn btn-primary" style="width:100%;padding:12px;">创建用户</button>
      </form>
    </div>
  </div>

  <!-- ===== 用户管理 - 修改角色/显示名称弹窗 ===== -->
  <div class="modal-overlay" id="editUserModal">
    <div class="modal modal-sm">
      <button class="modal-close" onclick="closeModal('editUserModal')">×</button>
      <h2 class="modal-title">编辑用户</h2>
      <form id="editUserForm" onsubmit="submitEditUser(event)">
        <input type="hidden" id="editUserId">
        <div class="form-group">
          <label class="form-label">用户名</label>
          <input type="text" class="form-input" id="editUserUsername" disabled style="background:#f5f5f5;color:#999;">
        </div>
        <div class="form-group">
          <label class="form-label">显示名称 <span style="color:#e74c3c">*</span></label>
          <input type="text" class="form-input" id="editUserDisplayName" required placeholder="姓名或昵称">
        </div>
        <div class="form-group">
          <label class="form-label">角色权限</label>
          <select class="form-input" id="editUserRole">
            <option value="GUEST">访客（GUEST）- 只读查询</option>
            <option value="LEADER">门长（LEADER）- 可提交审核</option>
            <option value="ADMIN">管理员（ADMIN）- 全部权限</option>
          </select>
          <p style="font-size:12px;color:var(--text-light);margin-top:4px;">
            角色说明：访客只能查看；门长可提交新宗亲申请；管理员拥有全部操作权限
          </p>
        </div>
        <div class="form-group" id="editBranchGroup">
          <label class="form-label">祠（祠堂/分支）</label>
          <input type="text" class="form-input" id="editUserBranch" list="editBranchDatalist" placeholder="选择或输入祠名">
          <datalist id="editBranchDatalist"></datalist>
        </div>
        <div class="form-group" id="editLineageGroup">
          <label class="form-label">门（门系/分支）</label>
          <input type="text" class="form-input" id="editUserLineage" list="editLineageDatalist" placeholder="选择或输入门名">
          <datalist id="editLineageDatalist"></datalist>
        </div>
        <div class="form-group" id="editPermSection">
          <label class="form-label" style="margin-bottom:8px;">功能权限（细粒度控制）</label>
          <p style="font-size:12px;color:var(--text-light);margin-bottom:4px;">操作权限</p>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-bottom:12px;">
            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
              <input type="checkbox" id="editPermMemberAdd" value="member_add"> 新增宗亲
            </label>
            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
              <input type="checkbox" id="editPermMemberEdit" value="member_edit"> 编辑宗亲
            </label>
            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
              <input type="checkbox" id="editPermAnnouncement" value="announcement"> 发布公告
            </label>
            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
              <input type="checkbox" id="editPermWelfare" value="welfare"> 创建活动
            </label>
            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
              <input type="checkbox" id="editPermNotable" value="notable"> 添加名人
            </label>
            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
              <input type="checkbox" id="editPermGenealogy" value="genealogy"> 查阅宗谱
            </label>
          </div>
          <p style="font-size:12px;color:var(--text-light);margin-bottom:4px;">浏览权限（注册用户默认开放）</p>
          <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 16px;">
            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
              <input type="checkbox" id="editPermBrowseAnnouncement" value="browse_announcement"> 浏览公告
            </label>
            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
              <input type="checkbox" id="editPermBrowseWelfare" value="browse_welfare"> 浏览活动
            </label>
            <label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
              <input type="checkbox" id="editPermBrowseNotable" value="browse_notable"> 浏览名人
            </label>
          </div>
        </div>
        <button type="submit" class="btn btn-primary" style="width:100%;padding:12px;">保存修改</button>
      </form>
    </div>
  </div>

  <!-- Member Modal -->

  <div class="modal-overlay" id="memberModal">
    <div class="modal member-modal modal-draggable" id="memberModalContent">
      <div class="modal-header" style="cursor:move;">
        <h2 class="modal-title" id="memberModalTitle">新增宗亲</h2>
        <button class="modal-close" onclick="closeModal('memberModal')">×</button>
      </div>
      <div class="modal-body" style="padding:12px 16px;">
      <form id="memberForm" onsubmit="saveMember(event)">
        <input type="hidden" id="memberId">

        <!-- ===== A. 个人信息（一行显示）===== -->
        <div class="compact-row">
          <div class="compact-field" style="width:100px;">
            <label>姓名 <span class="req">*</span></label>
            <input type="text" class="form-input fm-compact" id="memberName" required placeholder="请输入">
          </div>
          <div class="compact-field" style="width:80px;">
            <label>派名</label>
            <input type="text" class="form-input fm-compact" id="memberGeneration" placeholder="辈字">
          </div>
          <div class="compact-field" style="width:65px;">
            <label>性别 <span class="req">*</span></label>
            <select class="form-select fm-compact" id="memberGender" required onchange="onGenderChange(this.value)">
              <option value="男" selected>男</option>
              <option value="女">女</option>
            </select>
          </div>
          <div class="compact-field" style="width:130px;">
            <label>出生日期</label>
            <input type="date" class="form-input fm-compact" id="memberBirth">
          </div>
          <div class="compact-field" style="width:130px;">
            <label>出生时辰</label>
            <select class="form-select fm-compact" id="memberBirthHour">
              <option value="">请选择时辰</option>
              <option value="子时">子时 (23:00-01:00)</option>
              <option value="丑时">丑时 (01:00-03:00)</option>
              <option value="寅时">寅时 (03:00-05:00)</option>
              <option value="卯时">卯时 (05:00-07:00)</option>
              <option value="辰时">辰时 (07:00-09:00)</option>
              <option value="巳时">巳时 (09:00-11:00)</option>
              <option value="午时">午时 (11:00-13:00)</option>
              <option value="未时">未时 (13:00-15:00)</option>
              <option value="申时">申时 (15:00-17:00)</option>
              <option value="酉时">酉时 (17:00-19:00)</option>
              <option value="戌时">戌时 (19:00-21:00)</option>
              <option value="亥时">亥时 (21:00-23:00)</option>
            </select>
          </div>
          <div class="compact-field" style="width:110px;">
            <label>手动输入时间</label>
            <input type="time" class="form-input fm-compact" id="memberBirthTime" onchange="onBirthTimeChange()" title="输入时间自动匹配时辰">
          </div>
          <div class="compact-field" style="width:130px;">
            <label>联系电话</label>
            <input type="tel" class="form-input fm-compact" id="memberPhone" placeholder="手机/座机">
          </div>
          <div class="compact-field" style="width:110px;">
            <label>学历</label>
            <select class="form-select fm-compact" id="memberEducation">
              <option value="">请选择</option>
              <option value="小学">小学</option>
              <option value="初中">初中</option>
              <option value="高中">高中</option>
              <option value="大专">大专</option>
              <option value="本科">本科</option>
              <option value="硕士">硕士</option>
              <option value="博士">博士</option>
              <option value="其他">其他</option>
            </select>
          </div>
          <div class="compact-field" style="flex:1;min-width:0;">
            <label>工作单位及职务</label>
            <input type="text" class="form-input fm-compact" id="memberWorkUnit" placeholder="单位名称+职务">
          </div>
          <!-- 男性婚配（移到电话右边） -->
          <div id="maleMarriageSection" style="display:none;align-items:flex-end;">
            <div class="compact-field" style="width:90px;">
              <label>婚配</label>
              <select class="form-select fm-compact" id="memberMaleMarriageType" onchange="onMaleMarriageTypeChange(this.value)">
                <option value="">-- 请选择 --</option>
                <option value="未">未婚</option>
                <option value="婚">已婚</option>
                <option value="嫁">入赘</option>
              </select>
            </div>
            <div id="spouseListContainer" style="display:none;flex:1;min-width:0;">
              <label style="font-size:10px;color:#888;margin-bottom:2px;display:block;">配偶信息 <span style="color:#999;">（省市县三级联动）</span></label>
              <div style="display:flex;gap:4px;align-items:center;">
                <div id="spousesList" style="flex:1;min-height:24px;"></div>
                <button type="button" onclick="addSpouseRow()" style="background:#8B4513;color:white;border:none;border-radius:4px;padding:2px 8px;cursor:pointer;font-size:10px;white-space:nowrap;">+ 添加</button>
              </div>
            </div>
          </div>
          <!-- 女性婚嫁（移到电话右边） -->
          <div id="femaleMarriageSection" style="display:none;align-items:flex-end;">
            <div class="compact-field" style="width:80px;">
              <label>婚嫁</label>
              <select class="form-select fm-compact" id="memberMarriageType" onchange="onMarriageTypeChange(this.value)">
                <option value="">-- 请选择 --</option>
                <option value="嫁">出嫁</option>
                <option value="婚">留族</option>
              </select>
            </div>

          </div>
        </div>

        <!-- ===== C. 祠堂辈分（一行显示）===== -->
        <div class="compact-row">
          <div class="compact-field" style="width:100px;">
            <label>县/区</label>
            <select class="form-select fm-compact" id="memberCountyBranch" onchange="onCountyBranchChange(this.value)">
              <option value="崇阳县" selected>崇阳县</option>
              <option value="">请选择县</option>
            </select>
          </div>
          <div class="compact-field" style="flex:0.448;min-width:50px;">
            <label>祠堂/分支</label>
            <select class="form-select fm-compact combobox-select" id="memberAncestralHall" onchange="onAncestralHallChange(this.value)">
              <option value="">请选择祠堂</option>
            </select>
            <input type="text" class="form-input fm-compact" id="memberAncestralHallInput" placeholder="或输入新祠堂" style="display:none;margin-top:4px;">
          </div>
          <div class="compact-field" style="flex:0.448;min-width:50px;">
            <label>门系</label>
            <select class="form-select fm-compact combobox-select" id="memberLineage" onchange="onLineageChange(this.value)">
              <option value="">请选择门系</option>
            </select>
            <input type="text" class="form-input fm-compact" id="memberLineageInput" placeholder="或输入新门系" style="display:none;margin-top:4px;">
          </div>
          <div class="compact-field" style="width:96px;">
            <label>辈分</label>
            <select class="form-select fm-compact" id="memberGenerationSelect" onchange="onGenerationSelected(this.value)">
              <option value="">-- 请选择世系 --</option>
            </select>
          </div>
          <div class="compact-field father-select-section" style="flex:1.28;min-width:140px;">
            <label>父亲 <span class="hint">(同祠同门上辈)</span></label>
            <div style="display:flex;gap:3px;">
              <select class="form-select fm-compact" id="memberFatherSelect" style="flex:1;" onchange="onFatherSelected(this)">
                <option value="">-- 先选辈分 --</option>
              </select>
              <button type="button" class="btn btn-outline btn-xs" onclick="searchFatherMembers()" style="padding:2px 5px;font-size:10px;">🔍</button>
              <button type="button" class="btn btn-outline btn-xs" onclick="clearFatherSelection()" style="padding:2px 5px;font-size:10px;">✕</button>
            </div>
            <div id="fatherSearchResults" class="search-results-dropdown" style="display:none;"></div>
            <input type="hidden" id="memberFather" value="">
            <input type="hidden" id="memberFatherId" value="">
          </div>
          <div id="motherGroup" class="compact-field" style="flex:0.64;min-width:80px;">
            <label>母亲</label>
            <select class="form-select fm-compact" id="memberMother" onchange="onMotherSelectChange(this)">
              <option value="">-- 自动首位 --</option>
            </select>
            <input type="hidden" id="memberMotherName" value="">
          </div>
        </div>

        <!-- ===== D. 详细地址（两行显示）===== -->
        <div class="compact-row">
          <div class="compact-field">
            <label>省/自治区</label>
            <select class="form-select fm-compact" id="memberProvince" onchange="onProvinceChange(this.value)">
              <option value="">请选择省份</option>
            </select>
          </div>
          <div class="compact-field">
            <label>市/自治州</label>
            <select class="form-select fm-compact" id="memberCity" onchange="onCityChange(this.value)" disabled>
              <option value="">请先选择省</option>
            </select>
          </div>
          <div class="compact-field">
            <label>县/区</label>
            <select class="form-select fm-compact" id="memberCounty" onchange="onCountyChange(this.value)" disabled>
              <option value="">请先选择市</option>
            </select>
          </div>
          <div class="compact-field">
            <label>镇/乡/街道</label>
            <input type="text" class="form-input fm-compact" id="memberTown" placeholder="镇/乡/街道">
          </div>
        </div>
        <div class="compact-row">
          <div class="compact-field" style="flex:1;">
            <label>村/社区</label>
            <input type="text" class="form-input fm-compact" id="memberVillage" placeholder="村/社区">
          </div>
          <div class="compact-field" style="flex:2;">
            <label>详细地址</label>
            <input type="text" class="form-input fm-compact" id="memberAddressDetail" placeholder="门牌号等">
          </div>
          <input type="hidden" id="memberAddress">
        </div>

        <!-- ===== E. 备注 + F. 已故（同一行）===== -->
        <div class="compact-row" style="align-items:center;">
          <div class="compact-field" style="flex:1;">
            <label>备注</label>
            <input type="text" class="form-input fm-compact" id="memberNotes" placeholder="其他备注信息">
          </div>
          <div class="compact-field" style="width:60px;">
            <label class="deceased-label">
              <input type="checkbox" id="memberDeceased" onchange="toggleMemberBurialFields(this)">
              <span style="color:#bbb;">已故</span>
            </label>
          </div>
          <div id="memberBurialSection" class="compact-field" style="display:none;flex:1;min-width:600px;">
            <label style="font-size:13px;color:#666;">逝世日期及安葬地</label>
            <div style="display:flex;gap:5px;align-items:center;flex-wrap:wrap;">
              <input type="date" class="form-input fm-compact" id="memberDeathDate" style="width:130px;font-size:13px;height:40px;" placeholder="逝世日期">
              <select class="form-select fm-compact" id="memberBurialProvince" onchange="onMemberBurialProvinceChange(this)" style="width:100px;"><option value="">省</option></select>
              <select class="form-select fm-compact" id="memberBurialCity" onchange="onMemberBurialCityChange(this)" disabled style="width:100px;"><option value="">市</option></select>
              <select class="form-select fm-compact" id="memberBurialCounty" disabled style="width:100px;"><option value="">县</option></select>
              <input type="text" class="form-input fm-compact" id="memberBurialDetail" placeholder="镇/详细" style="flex:1;min-width:104px;">
            </div>
          </div>
        </div>

        <div class="form-actions" style="margin-top:12px;padding-top:12px;border-top:1px solid #eee;">
          <button type="button" class="btn btn-outline" onclick="closeModal('memberModal')">取消</button>
          <button type="button" class="btn btn-primary" id="memberSaveBtn" onclick="document.getElementById('memberForm').dispatchEvent(new Event('submit'))">保存</button>
        </div>
      </form>
      </div>
    </div><!-- /.modal -->
  </div>

  <!-- Announcement Modal -->
  <div class="modal-overlay" id="announcementModal">
    <div class="modal">
      <button class="modal-close" onclick="closeModal('announcementModal')">×</button>
      <h2 class="modal-title" id="announcementModalTitle">发布公告</h2>
      <form id="announcementForm" onsubmit="saveAnnouncement(event)">
        <input type="hidden" id="announcementId">
        <div class="form-group">
          <label class="form-label">标题 *</label>
          <input type="text" class="form-input" id="announcementTitle" required>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">受众范围</label>
            <select class="form-select" id="announcementAudience">
              <option value="全体宗亲">全体宗亲</option>
              <option value="本省族人">本省宗亲</option>
              <option value="本县族人">本县宗亲</option>
              <option value="理事会成员">理事会成员</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">发布渠道</label>
            <select class="form-select" id="announcementChannel">
              <option value="全平台">全平台</option>
              <option value="微信群">微信群</option>
              <option value="短信">短信</option>
              <option value="公告栏">公告栏</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">发布日期</label>
            <input type="date" class="form-input" id="announcementDate">
          </div>
          <div class="form-group">
            <label class="form-label">优先级</label>
            <select class="form-select" id="announcementPriority">
              <option value="高">高</option>
              <option value="中" selected>中</option>
              <option value="低">低</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">内容 *</label>
          <div class="rich-editor-wrapper"><div id="announcementContentEditor"></div></div>
          <input type="hidden" id="announcementContent">
        </div>
        <div class="form-actions">
          <button type="button" class="btn btn-outline" onclick="closeModal('announcementModal')">取消</button>
          <button type="submit" class="btn btn-primary">发布</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 公告查看弹窗 -->
  <div class="modal-overlay" id="announcementViewModal">
    <div class="modal" style="max-width: 680px;">
      <button class="modal-close" onclick="closeModal('announcementViewModal')">×</button>
      <h2 class="modal-title" id="announcementViewTitle"></h2>
      <div style="display: flex; gap: 12px; margin-bottom: 16px; color: var(--text-light); font-size: 13px;">
        <span id="announcementViewDate"></span>
        <span id="announcementViewAudience"></span>
        <span id="announcementViewChannel"></span>
        <span class="badge" id="announcementViewPriority"></span>
      </div>
      <div id="announcementViewContent" style="line-height: 1.8; font-size: 15px; max-height: 60vh; overflow-y: auto; padding: 16px; background: var(--bg-secondary); border-radius: 8px;"></div>
/* Content images */
#announcementViewContent img,#welfareViewContent img,#notableViewContent img{max-width:100%;height:auto;display:block;margin:8px auto;border-radius:6px;}

/* ===== Quill 编辑器样式 ===== */
.ql-toolbar.ql-snow { border-color: var(--border) !important; border-radius: 8px 8px 0 0; background: var(--bg-light); }
.ql-container.ql-snow { border-color: var(--border) !important; border-radius: 0 0 8px 8px; font-family: 'Noto Sans SC', sans-serif; font-size: 14px; }
.ql-editor { min-height: 150px; max-height: 350px; overflow-y: auto; }
.ql-editor img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
.ql-snow .ql-stroke { stroke: var(--text-secondary, #666) !important; }
.ql-snow .ql-fill { fill: var(--text-secondary, #666) !important; }
.ql-snow .ql-picker-label { color: var(--text-secondary, #666) !important; }
.ql-snow .ql-picker-options { background: white; border-color: var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.modal .ql-editor { min-height: 120px; }
.rich-editor-wrapper { margin-top: 4px; }
.btn-pdf-export { background: #e74c3c; color: white; border: none; }
.btn-pdf-export:hover { background: #c0392b; }
