/* ---- 顶部装饰条 ---- */
    .hero-section {
      position: relative;
      padding: 60px 24px 48px;
      text-align: center;
      overflow: hidden;
    }
    .hero-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 30% 20%, rgba(91,135,49,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(124,175,78,0.08) 0%, transparent 40%);
      pointer-events: none;
    }
    .hero-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      border-radius: 20px;
      background: var(--noir-bg-elevated);
      backdrop-filter: blur(20px) saturate(130%);
      border: 1px solid var(--noir-border-light);
      font-size: 28px;
      margin-bottom: 16px;
      box-shadow: var(--noir-shadow-md);
      animation: noir-float 3s ease-in-out infinite;
    }
    .hero-section h1 {
      font-size: clamp(28px, 5vw, 42px);
      font-weight: 700;
      letter-spacing: -0.03em;
      background: linear-gradient(135deg, #e9e9f5 0%, #a09fb1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 8px;
    }
    .hero-sub {
      color: var(--noir-text-tertiary);
      font-size: var(--noir-font-size-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .hero-sub .count-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 14px;
      border-radius: 9999px;
      background: var(--noir-accent-subtle);
      border: 1px solid var(--noir-border-light);
      font-weight: 500;
      font-size: 13px;
    }
    /* ---- 搜索与过滤栏 ---- */
    .toolbar {
      max-width: 1024px;
      margin: 0 auto 28px;
      padding: 0 24px;
    }
    .toolbar-inner {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .search-wrap {
      flex: 1;
      min-width: 200px;
      position: relative;
    }
    .search-wrap .noir-input {
      padding-left: 40px;
      border-radius: 9999px;
      height: 44px;
    }
    .search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--noir-text-tertiary);
      font-size: 16px;
      pointer-events: none;
    }
    .filter-group {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      border-radius: 9999px;
      font-size: var(--noir-font-size-sm);
      font-weight: 500;
      background: var(--noir-bg-tertiary);
      border: 1px solid var(--noir-border-light);
      color: var(--noir-text-secondary);
      cursor: pointer;
      transition: all var(--noir-transition-base);
      user-select: none;
      white-space: nowrap;
    }
    .filter-chip:hover {
      border-color: var(--noir-border-medium);
      color: var(--noir-text-primary);
    }
    .filter-chip.active {
      background: var(--noir-accent);
      color: var(--noir-text-inverse);
      border-color: var(--noir-accent);
      box-shadow: var(--noir-shadow-sm);
    }
    /* ---- 同学卡片网格 ---- */
    .class-grid-wrap {
      max-width: 1024px;
      margin: 0 auto;
      padding: 0 24px 48px;
    }
    .class-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
    }
    /* ---- 同学卡片 ---- */
    .class-card {
      background: var(--noir-bg-elevated);
      backdrop-filter: blur(20px) saturate(130%) contrast(1.05) brightness(1.02);
      -webkit-backdrop-filter: blur(20px) saturate(130%) contrast(1.05) brightness(1.02);
      border: 1px solid var(--noir-border-light);
      border-radius: var(--noir-radius-lg);
      padding: 24px 20px 20px;
      box-shadow: var(--noir-shadow-xs), inset 0 1px 0 rgba(255,255,255,0.06);
      position: relative;
      overflow: hidden;
      transition:
        box-shadow var(--noir-transition-base),
        border-color var(--noir-transition-base),
        transform var(--noir-transition-base);
      animation: noir-fadeInUp 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .class-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(ellipse at 30% 15%, rgba(255,255,255,0.06) 0%, transparent 55%),
                  radial-gradient(ellipse at 85% 85%, rgba(255,255,255,0.02) 0%, transparent 40%);
      pointer-events: none;
      z-index: 0;
    }
    .class-card > * {
      position: relative;
      z-index: 1;
    }
    .class-card:hover {
      box-shadow: var(--noir-shadow-lg);
      border-color: var(--noir-border-medium);
      transform: translateY(-4px);
    }
    .class-card:active {
      transform: scale(0.985);
      transition: transform var(--noir-transition-fast);
    }
    /* 卡片顶部头像区 */
    .card-top {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 14px;
    }
    .card-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--noir-border-light);
      background: var(--noir-bg-tertiary);
      flex-shrink: 0;
      box-shadow: var(--noir-shadow-sm);
      transition: transform var(--noir-transition-spring), box-shadow var(--noir-transition-base);
    }
    .class-card:hover .card-avatar {
      transform: scale(1.05);
      box-shadow: var(--noir-shadow-md);
    }
    .card-name-row {
      flex: 1;
      min-width: 0;
    }
    .card-name {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--noir-text-primary);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .card-gender {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      font-size: 12px;
      flex-shrink: 0;
    }
    .card-gender.male {
      background: rgba(70,130,255,0.15);
      color: #5b9aff;
    }
    .card-gender.female {
      background: rgba(255,100,150,0.15);
      color: #ff6b9d;
    }
    .card-time {
      font-size: 12px;
      color: var(--noir-text-tertiary);
      margin-top: 2px;
    }
    /* 卡片信息行 */
    .card-info {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .card-info-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--noir-text-secondary);
    }
    .card-info-row .label {
      color: var(--noir-text-tertiary);
      font-size: 12px;
      min-width: 36px;
      flex-shrink: 0;
    }
    .card-info-row .value {
      color: var(--noir-text-primary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .card-info-row .value.motto-text {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
      font-style: italic;
      opacity: 0.85;
    }
    /* 卡片分隔装饰 */
    .card-divider {
      height: 1px;
      background: var(--noir-border-light);
      margin: 12px 0;
    }
    /* ---- 交错动画延迟 ---- */
    .class-card:nth-child(1)  { animation-delay: 0ms; }
    .class-card:nth-child(2)  { animation-delay: 60ms; }
    .class-card:nth-child(3)  { animation-delay: 120ms; }
    .class-card:nth-child(4)  { animation-delay: 180ms; }
    .class-card:nth-child(5)  { animation-delay: 240ms; }
    .class-card:nth-child(6)  { animation-delay: 300ms; }
    .class-card:nth-child(7)  { animation-delay: 360ms; }
    .class-card:nth-child(8)  { animation-delay: 420ms; }
    .class-card:nth-child(9)  { animation-delay: 480ms; }
    .class-card:nth-child(10) { animation-delay: 540ms; }
    .class-card:nth-child(11) { animation-delay: 600ms; }
    .class-card:nth-child(12) { animation-delay: 660ms; }
    .class-card:nth-child(13) { animation-delay: 720ms; }
    .class-card:nth-child(14) { animation-delay: 780ms; }
    .class-card:nth-child(15) { animation-delay: 840ms; }
    .class-card:nth-child(16) { animation-delay: 900ms; }
    .class-card:nth-child(17) { animation-delay: 960ms; }
    .class-card:nth-child(18) { animation-delay: 1020ms; }
    .class-card:nth-child(19) { animation-delay: 1080ms; }
    .class-card:nth-child(20) { animation-delay: 1140ms; }
    /* ---- 空状态 ---- */
    .empty-state {
      grid-column: 1 / -1;
      text-align: center;
      padding: 80px 24px;
      color: var(--noir-text-tertiary);
    }
    .empty-state .empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
    }
    .empty-state p {
      font-size: var(--noir-font-size-sm);
    }
    /* ---- 底部水印 ---- */
    .footer-note {
      text-align: center;
      padding: 24px;
      color: var(--noir-text-tertiary);
      font-size: 12px;
      opacity: 0.6;
    }
    /* ---- 响应式 ---- */
    @media (max-width: 640px) {
      .hero-section { padding: 40px 16px 32px; }
      .toolbar { padding: 0 16px; }
      .class-grid-wrap { padding: 0 16px 32px; }
      .class-grid { grid-template-columns: 1fr; }
      .toolbar-inner { flex-direction: column; }
      .search-wrap { width: 100%; }
      .filter-group { width: 100%; justify-content: center; }
      .card-top { gap: 12px; }
      .card-avatar { width: 52px; height: 52px; }
      .card-name { font-size: 16px; }
    }
    @media (min-width: 768px) {
      .class-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1024px) {
      .class-grid { grid-template-columns: repeat(3, 1fr); }
    }
    /* ---- 工具栏按钮补充 ---- */
    .toolbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .add-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      border-radius: 9999px;
      font-size: var(--noir-font-size-sm);
      font-weight: 500;
      background: linear-gradient(135deg, rgba(91,135,49,0.4), rgba(124,175,78,0.3));
      border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
      color: var(--noir-text-primary);
      cursor: pointer;
      transition: all var(--noir-transition-base);
      user-select: none;
      white-space: nowrap;
    }
    .add-btn:hover {
      background: linear-gradient(135deg, rgba(91,135,49,0.6), rgba(124,175,78,0.5));
      border-color: rgba(255,255,255,0.2);
      box-shadow: var(--noir-shadow-sm);
      transform: translateY(-1px);
    }
    .add-btn:active {
      transform: scale(0.97);
    }
    /* ---- 返回主页按钮 ---- */
    .home-btn {
      position: fixed;
      top: 16px;
      left: 16px;
      z-index: 100;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--noir-bg-elevated);
      backdrop-filter: blur(20px);
      border: 1px solid var(--noir-border-light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--noir-text-primary);
      text-decoration: none;
      font-size: 18px;
      transition: all var(--noir-transition-base);
      box-shadow: var(--noir-shadow-xs);
    }
    .home-btn:hover {
      box-shadow: var(--noir-shadow-md);
      transform: scale(1.08);
    }
    .home-btn:active {
      transform: scale(0.95);
    }
    /* ---- 上传弹窗表单 ---- */
    .upload-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .upload-form .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .upload-form .form-row.single {
      grid-template-columns: 1fr;
    }
    .upload-form label {
      display: block;
      font-size: var(--noir-font-size-sm);
      font-weight: 500;
      color: var(--noir-text-secondary);
      margin-bottom: 4px;
    }
    .upload-form label .required {
      color: #ff6b6b;
      margin-left: 2px;
    }
    .avatar-upload-area {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 4px;
    }
    .avatar-preview-wrap {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px dashed var(--noir-border-medium);
      background: var(--noir-bg-tertiary);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color var(--noir-transition-base);
    }
    .avatar-preview-wrap.has-image {
      border-style: solid;
      border-color: var(--noir-border-light);
    }
    .avatar-preview-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .avatar-preview-wrap .placeholder {
      font-size: 24px;
      color: var(--noir-text-tertiary);
      opacity: 0.5;
    }
    .avatar-upload-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: 9999px;
      font-size: var(--noir-font-size-xs);
      font-weight: 500;
      background: var(--noir-bg-tertiary);
      border: 1px solid var(--noir-border-light);
      color: var(--noir-text-secondary);
      cursor: pointer;
      transition: all var(--noir-transition-fast);
    }
    .avatar-upload-btn:hover {
      border-color: var(--noir-border-medium);
      color: var(--noir-text-primary);
    }
    #avatarInput {
      display: none;
    }
    .upload-form .noir-input,
    .upload-form .noir-select {
      height: 42px;
    }
    @media (max-width: 640px) {
      .upload-form .form-row {
        grid-template-columns: 1fr;
      }
    }
    /* ---- 滚动条微调 ---- */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-primary) 10%, transparent); border-radius: 10px; }
    /* ---- 圆形裁切弹窗 ---- */
    .crop-overlay {
      position: fixed; inset: 0; z-index: 2000;
      display: none; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(6px);
    }
    .crop-overlay.open { display: flex; }
    .crop-panel {
      background: var(--noir-bg-elevated);
      border: 1px solid var(--noir-border-light);
      border-radius: var(--noir-radius-lg);
      padding: 24px;
      width: 360px;
      box-shadow: var(--noir-shadow-xl);
    }
    .crop-panel h3 {
      margin: 0 0 16px;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      color: var(--noir-text-primary);
    }
    .crop-stage {
      position: relative;
      width: 280px;
      height: 280px;
      margin: 0 auto 16px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--noir-bg-elevated);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-primary) 15%, transparent), var(--noir-shadow-lg);
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
    }
    .crop-stage:active { cursor: grabbing; }
    .crop-stage img {
      position: absolute;
      top: 0; left: 0;
      pointer-events: none;
      width: auto; height: auto;
      min-width: 100%;
      min-height: 100%;
    }
    .crop-stage::after {
      content: '';
      position: absolute; inset: 0;
      border-radius: 50%;
      box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.45);
      pointer-events: none;
      z-index: 2;
    }
    .crop-hint {
      text-align: center;
      font-size: 13px;
      color: var(--noir-text-tertiary);
      margin-bottom: 16px;
    }
    .crop-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
    }
    .crop-actions .noir-btn {
      min-width: 100px;
      height: 40px;
    }
    /* ---- 详情弹窗 ---- */
    .detail-overlay {
      position: fixed; inset: 0; z-index: 2000;
      display: none; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(8px);
      padding: 20px;
    }
    .detail-overlay.open { display: flex; }
    .detail-panel {
      background: var(--noir-bg-elevated);
      border: 1px solid var(--noir-border-light);
      border-radius: var(--noir-radius-xl);
      width: 100%;
      max-width: 420px;
      box-shadow: var(--noir-shadow-xl);
      overflow: hidden;
      animation: detailIn 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes detailIn {
      from { opacity: 0; transform: scale(0.92) translateY(20px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .detail-head {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 28px 24px 20px;
      background: radial-gradient(ellipse at 30% 20%, rgba(91,135,49,0.2) 0%, transparent 60%);
    }
    .detail-avatar {
      width: 80px; height: 80px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--noir-border-light);
      background: var(--noir-bg-tertiary);
      flex-shrink: 0;
      box-shadow: var(--noir-shadow-md);
    }
    .detail-head-info { flex: 1; min-width: 0; }
    .detail-name {
      font-size: 22px; font-weight: 700;
      color: var(--noir-text-primary);
      display: flex; align-items: center; gap: 10px;
    }
    .detail-gender {
      display: inline-flex; align-items: center;
      width: 24px; height: 24px; border-radius: 50%;
      justify-content: center; flex-shrink: 0;
    }
    .detail-gender.male { background: rgba(70,130,255,0.2); color: #5b9aff; }
    .detail-gender.female { background: rgba(255,100,150,0.2); color: #ff6b9d; }
    .detail-time {
      font-size: 12px; color: var(--noir-text-tertiary);
      margin-top: 4px;
    }
    .detail-body {
      padding: 8px 24px 24px;
    }
    .detail-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--noir-border-light);
      cursor: pointer;
      transition: background var(--noir-transition-fast);
      border-radius: 8px;
      margin: 0 -8px;
      padding: 12px 8px;
    }
    .detail-row:hover { background: var(--noir-bg-tertiary); }
    .detail-row:active { transform: scale(0.98); }
    .detail-row-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      font-size: 16px;
    }
    .detail-row-icon.birthday { background: rgba(255,180,50,0.15); color: #ffb432; }
    .detail-row-icon.hobby { background: rgba(50,200,120,0.15); color: #32c878; }
    .detail-row-icon.contact { background: rgba(70,130,255,0.15); color: #5b9aff; }
    .detail-row-icon.motto { background: rgba(180,100,255,0.15); color: #b464ff; }
    .detail-row-content { flex: 1; min-width: 0; }
    .detail-row-label {
      font-size: 11px; font-weight: 600;
      color: var(--noir-text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }
    .detail-row-value {
      font-size: 14px;
      color: var(--noir-text-primary);
      word-break: break-all;
    }
    .detail-row-value .contact-tag {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 10px; border-radius: 9999px;
      font-size: 12px; font-weight: 500;
      margin: 2px 4px 2px 0;
    }
    .detail-row-value .contact-tag.phone {
      background: rgba(70,130,255,0.12);
      color: #5b9aff;
    }
    .detail-row-value .contact-tag.qq {
      background: rgba(0,180,255,0.12);
      color: #00b4ff;
    }
    .detail-row-value .contact-tag.wechat {
      background: rgba(0,200,100,0.12);
      color: #00c864;
    }
    .detail-row-value .contact-tag.other {
      background: color-mix(in srgb, var(--text-primary) 8%, transparent);
      color: var(--noir-text-secondary);
    }
    .detail-copy-hint {
      font-size: 11px;
      color: var(--noir-text-tertiary);
      opacity: 0.6;
      flex-shrink: 0;
      align-self: center;
    }
    .detail-toast {
      position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
      padding: 10px 24px;
      border-radius: 9999px;
      background: var(--noir-accent);
      color: var(--noir-text-inverse);
      font-size: 13px; font-weight: 500;
      box-shadow: var(--noir-shadow-lg);
      z-index: 3000;
      opacity: 0; transition: opacity 300ms;
      pointer-events: none;
    }
    .detail-toast.show { opacity: 1; }
    .detail-motto-text {
      font-style: italic;
      opacity: 0.85;
      line-height: 1.6;
    }
    .detail-close {
      position: absolute; top: 12px; right: 12px;
      width: 32px; height: 32px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--text-primary) 8%, transparent);
      border: none;
      color: var(--noir-text-secondary);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all var(--noir-transition-fast);
    }
    .detail-close:hover {
      background: color-mix(in srgb, var(--text-primary) 15%, transparent);
      color: var(--noir-text-primary);
    }
    .detail-panel { position: relative; }
  </style>
<link rel="stylesheet" href="/mc-theme.css">
<link rel="stylesheet" href="/mc-compat.css">
<script src="/static/site-sync.js"></script>
</head>
<body class="mc-page">
<script src="/static/nav.js"></script>
<script src="/static/auth-check.js"></script>
  <!-- ===== 返回主页按钮 ===== -->
  <a href="/" class="home-btn" title="返回主页">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
      <polyline points="9 22 9 12 15 12 15 22"/>
    </svg>
  </a>
  <!-- ===== 顶部 Hero ===== -->
  <section class="hero-section">
    <div class="hero-icon">
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
        <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/>
        <path d="M12 6v7"/>
        <path d="M9 9l3-3 3 3"/>
      </svg>
    </div>
    <h1>同学录</h1>
    <div class="hero-sub">
      <span>珍藏每一份同窗情谊</span>
      <span class="count-badge" id="totalCount">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
          <circle cx="9" cy="7" r="4"/>
          <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
        </svg>
        加载中…
      </span>
    </div>
  </section>
  <!-- ===== 搜索与过滤 ===== -->
  <div class="toolbar">
    <div class="toolbar-inner">
      <div class="search-wrap">
        <span class="search-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"/>
            <path d="M21 21l-4.35-4.35"/>
          </svg>
        </span>
        <input type="text" class="noir-input" id="searchInput" placeholder="搜索姓名、爱好、寄语…" autocomplete="off">
      </div>
      <div class="filter-group" id="genderFilter">
        <span class="filter-chip active" data-filter="all">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
          </svg>
          全部
        </span>
        <span class="filter-chip" data-filter="男">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <circle cx="10" cy="14" r="6"/>
            <path d="M19 5l-5.6 5.6M19 5h-5M19 5v5"/>
          </svg>
          男
        </span>
        <span class="filter-chip" data-filter="女">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none">
            <circle cx="12" cy="9" r="6"/>
            <path d="M12 15v7M9 18h6"/>
          </svg>
          女
        </span>
      </div>
      <div class="toolbar-actions">
        <button class="add-btn" id="openAddModal">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <path d="M12 8v8"/>
            <path d="M8 12h8"/>
          </svg>
          添加同学
        </button>
      </div>
    </div>
  </div>
  <!-- ===== 卡片网格 ===== -->
  <div class="class-grid-wrap">
    <div class="class-grid" id="classGrid"></div>
  </div>
  <!-- ===== 底部 ===== -->
  <div class="footer-note">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:4px">
      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
    </svg>
    愿时光不老 · 友谊长存
  </div>
  <!-- ===== 添加同学弹窗 ===== -->
  <div class="noir-modal-overlay" id="addModal" style="display:none;">
    <div class="noir-modal">
      <div class="noir-modal-header">
        <span class="noir-h6">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-4px;margin-right:6px">
            <circle cx="12" cy="12" r="10"/>
            <path d="M12 8v8"/>
            <path d="M8 12h8"/>
          </svg>
          添加同学
        </span>
        <button class="noir-btn noir-btn-ghost noir-btn-icon" id="closeModal" title="关闭">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 6L6 18"/>
            <path d="M6 6l12 12"/>
          </svg>
        </button>
      </div>
      <div class="noir-modal-body">
        <form id="addForm" class="upload-form">
          <!-- 头像 -->
          <div class="form-row single">
            <div>
              <label>头像</label>
              <div class="avatar-upload-area">
                <div class="avatar-preview-wrap" id="avatarPreview">
                  <span class="placeholder">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
                      <circle cx="12" cy="13" r="4"/>
                    </svg>
                  </span>
                </div>
                <label class="avatar-upload-btn">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
                  </svg>
                  选择图片
                  <input type="file" id="avatarInput" accept="image/*">
                </label>
              </div>
            </div>
          </div>
          <!-- 姓名 + 性别 -->
          <div class="form-row">
            <div>
              <label>姓名 <span class="required">*</span></label>
              <input type="text" class="noir-input" id="addName" placeholder="请输入姓名" required>
            </div>
            <div>
              <label>性别</label>
              <select class="noir-select" id="addGender">
                <option value="">未设置</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
          </div>
          <!-- 生日 + 爱好 -->
          <div class="form-row">
            <div>
              <label>生日</label>
              <input type="date" class="noir-input" id="addBirthday">
            </div>
            <div>
              <label>爱好</label>
              <input type="text" class="noir-input" id="addHobby" placeholder="请输入爱好">
            </div>
          </div>
          <!-- 联系方式 -->
          <div class="form-row single" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
            <div>
              <label>手机号</label>
              <input type="text" class="noir-input" id="addPhone" placeholder="手机号">
            </div>
            <div>
              <label>QQ</label>
              <input type="text" class="noir-input" id="addQQ" placeholder="QQ号">
            </div>
            <div>
              <label>微信</label>
              <input type="text" class="noir-input" id="addWechat" placeholder="微信号">
            </div>
            <div>
              <label>抖音</label>
              <input type="text" class="noir-input" id="addDouyin" placeholder="抖音号">
            </div>
          </div>
          <div class="form-row single">
            <div>
              <label>寄语</label>
              <input type="text" class="noir-input" id="addMotto" placeholder="给同学的留言寄语">
            </div>
          </div>
        </form>
      </div>
      <div class="noir-modal-footer">
        <button class="noir-btn noir-btn-ghost" id="closeModalBtn2">取消</button>
        <button class="noir-btn noir-btn-primary" id="submitAdd">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-3px;margin-right:4px">
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
          </svg>
          保存
        </button>
      </div>
    </div>
  </div>
  <!-- ===== 圆形裁切弹窗 ===== -->
  <div class="crop-overlay" id="cropOverlay">
    <div class="crop-panel">
      <h3>调整头像</h3>
      <div class="crop-stage" id="cropStage">
        <img id="cropImage" alt="crop preview">
      </div>
      <div class="crop-hint">拖拽图片调整位置，圆形区域即为头像</div>
      <div class="crop-actions">
        <button class="noir-btn noir-btn-ghost" id="cropCancel">重新选择</button>
        <button class="noir-btn noir-btn-primary" id="cropConfirm">确认</button>
      </div>
    </div>
  </div>
  <!-- ===== 详情弹窗 ===== -->
  <div class="detail-overlay" id="detailOverlay">
    <div class="detail-panel">
      <button class="detail-close" id="detailClose">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6L6 18"/><path d="M6 6l12 12"/>
        </svg>
      </button>
      <div class="detail-head">
        <img class="detail-avatar" id="detailAvatar" src="" alt="">
        <div class="detail-head-info">
          <div class="detail-name">
            <span id="detailName"></span>
            <span class="detail-gender" id="detailGender"></span>
          </div>
          <div class="detail-time" id="detailTime"></div>
        </div>
      </div>
      <div class="detail-body" id="detailBody"></div>
    </div>
  </div>
  <!-- ===== 复制提示 ===== -->
  <div class="detail-toast" id="detailToast">已复制</div>
  <script>
    // ---- SVG 图标常量 ----
    const ICONS = {
      clock: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
      cake: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8"/><path d="M4 16c2 .5 4 1.5 6 2 2 .5 4 .5 6-2 2-1.5 4-1.5 6-2"/><path d="M12 3v4"/><path d="M10 5h4"/></svg>',
      target: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>',
      phone: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>',
      chat: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
      people: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
      mail: '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>',
      warning: '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
      hourglass: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 22h14"/><path d="M5 2h14"/><path d="M17 22v-4.17a2 2 0 0 0-.59-1.42L12 12l-4.41 4.41A2 2 0 0 0 7 17.83V22"/><path d="M7 2v4.17a2 2 0 0 0 .59 1.42L12 12l4.41-4.41A2 2 0 0 0 17 6.17V2"/></svg>',
      star: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>',
      camera: '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>',
      male: '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="10" cy="14" r="6"/><path d="M19 5l-5.6 5.6M19 5h-5M19 5v5"/></svg>',
      female: '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="12" cy="9" r="6"/><path d="M12 15v7M9 18h6"/></svg>',
    };
    // ---- 数据 ----
    let classmates = [];
    // ---- 工具 ----
    function escapeHtml(str) {
      if (!str) return '';
      return String(str).replace(/[&<>]/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[m]);
    }
    function getGenderIcon(gender) {
      const g = (gender || '').trim();
      if (g === '男' || g === '♂') return { icon: ICONS.male, cls: 'male', label: '男' };
      if (g === '女' || g === '♀') return { icon: ICONS.female, cls: 'female', label: '女' };
      return { icon: ICONS.star, cls: '', label: g || '未知' };
    }
    // ---- 渲染 ----
    function render(list) {
      const grid = document.getElementById('classGrid');
      const total = document.getElementById('totalCount');
      if (!list.length) {
        grid.innerHTML = `<div class="empty-state">
          <div class="empty-icon">${ICONS.mail}</div>
          <p>没有找到匹配的同学～</p>
        </div>`;
        total.innerHTML = `${ICONS.people} ${classmates.length} 位同学`;
        return;
      }
      total.innerHTML = `${ICONS.people} ${classmates.length} 位同学`;
      grid.innerHTML = list.map((item, idx) => {
        const gi = getGenderIcon(item.gender);
        const avatar = item.avatar && item.avatar !== '/static/default-avatar.jpg'
          ? item.avatar : 'data:image/svg+xml,' + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="#2a2840"/><text x="50" y="62" text-anchor="middle" font-size="36" fill="#7c7a9e">${item.name.charAt(0)}</text></svg>`);
        const birthday = escapeHtml(item.birthday || '-');
        const hobby = escapeHtml(item.hobby && item.hobby !== '无' ? item.hobby : '-');
        const contact = escapeHtml(item.contact || '-');
        const motto = escapeHtml(item.motto && item.motto !== '无' ? item.motto : '');
        const time = escapeHtml(item.time || '');
        return `
          <div class="class-card" id="classmate-${item.id}">
            <div class="card-top">
              <img src="${avatar}" class="card-avatar" alt="${escapeHtml(item.name)}" loading="lazy"
                onerror="this.src='data:image/svg+xml,' + encodeURIComponent('<svg xmlns=\\'http://www.w3.org/2000/svg\\' viewBox=\\'0 0 100 100\\'><rect width=\\'100\\' height=\\'100\\' fill=\\'#2a2840\\'/><text x=\\'50\\' y=\\'62\\' text-anchor=\\'middle\\' font-size=\\'36\\' fill=\\'#7c7a9e\\'>${escapeHtml(item.name.charAt(0))}</text></svg>')">
              <div class="card-name-row">
                <div class="card-name">
                  ${escapeHtml(item.name)}
                  ${gi.cls ? `<span class="card-gender ${gi.cls}">${gi.icon}</span>` : ''}
                </div>
                ${time ? `<div class="card-time">${ICONS.clock} ${time}</div>` : ''}
              </div>
            </div>
            <div class="card-divider"></div>
            <div class="card-info">
              <div class="card-info-row">
                <span class="label">${ICONS.cake}</span>
                <span class="value">${birthday}</span>
              </div>
              <div class="card-info-row">
                <span class="label">${ICONS.target}</span>
                <span class="value">${hobby}</span>
              </div>
              ${motto ? `
              <div class="card-divider"></div>
              <div class="card-info-row">
                <span class="label">${ICONS.chat}</span>
                <span class="value motto-text">「${motto}」</span>
              </div>` : ''}
            </div>
          </div>
        `;
      }).join('');
    }
    // ---- 过滤 + 搜索 ----
    function filterAndRender() {
      const query = document.getElementById('searchInput').value.trim().toLowerCase();
      const activeChip = document.querySelector('.filter-chip.active');
      const genderFilter = activeChip ? activeChip.dataset.filter : 'all';
      let filtered = classmates;
      if (genderFilter !== 'all') {
        filtered = filtered.filter(item => {
          const g = (item.gender || '').trim();
          return g === genderFilter || g === (genderFilter === '男' ? '♂' : '♀');
        });
      }
      if (query) {
        filtered = filtered.filter(item =>
          (item.name || '').toLowerCase().includes(query) ||
          (item.hobby || '').toLowerCase().includes(query) ||
          (item.motto || '').toLowerCase().includes(query) ||
          (item.contact || '').toLowerCase().includes(query) ||
          (item.birthday || '').includes(query)
        );
      }
      render(filtered);
    }
    // ---- 加载数据 ----
    async function load() {
      try {
        const res = await fetch('/api/classmates');
        classmates = await res.json();
        // 按时间排序，最新的在前
        classmates.sort((a, b) => (b.time || '').localeCompare(a.time || ''));
        filterAndRender();
      } catch (err) {
        console.error('加载同学录失败', err);
        document.getElementById('classGrid').innerHTML = `
          <div class="empty-state">
            <div class="empty-icon">${ICONS.warning}</div>
            <p>加载失败，请刷新重试</p>
          </div>`;
      }
    }
    // ---- 事件绑定 ----
    document.getElementById('searchInput').addEventListener('input', filterAndRender);
    document.querySelectorAll('.filter-chip').forEach(chip => {
      chip.addEventListener('click', () => {
        document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
        chip.classList.add('active');
        filterAndRender();
      });
    });
    // ---- 启动 ----
    load();
    // ===== 弹窗交互 =====
    const modal = document.getElementById('addModal');
    const openBtn = document.getElementById('openAddModal');
    const closeBtn = document.getElementById('closeModal');
    const closeBtn2 = document.getElementById('closeModalBtn2');
    const avatarInput = document.getElementById('avatarInput');
    const avatarPreview = document.getElementById('avatarPreview');
    function openModal() {
      modal.style.display = 'flex';
      document.body.style.overflow = 'hidden';
    }
    function closeModalFn() {
      modal.style.display = 'none';
      document.body.style.overflow = '';
    }
    openBtn.addEventListener('click', openModal);
    closeBtn.addEventListener('click', closeModalFn);
    closeBtn2.addEventListener('click', closeModalFn);
    modal.addEventListener('click', (e) => {
      if (e.target === modal) closeModalFn();
    });
    // ---- 圆形裁切状态 ----
    let cropData = null; // 裁切后的 Blob
    let cropOriginalFile = null; // 原始文件引用
    // 头像选择 → 打开裁切弹窗
    avatarInput.addEventListener('change', () => {
      const file = avatarInput.files[0];
      if (!file) return;
      cropOriginalFile = file;
      const reader = new FileReader();
      reader.onload = (e) => {
        openCropModal(e.target.result);
      };
      reader.readAsDataURL(file);
    });
    // ---- 裁切弹窗交互 ----
    const cropOverlay = document.getElementById('cropOverlay');
    const cropImg = document.getElementById('cropImage');
    const cropStage = document.getElementById('cropStage');
    const cropCancel = document.getElementById('cropCancel');
    const cropConfirm = document.getElementById('cropConfirm');
    const CROP_SIZE = 280;
    let cropState = {
      img: null, natW: 0, natH: 0,
      disW: 0, disH: 0,
      ox: 0, oy: 0,
      dragging: false, startX: 0, startY: 0, startOx: 0, startOy: 0
    };
    function openCropModal(src) {
      const img = new Image();
      img.onload = () => {
        cropState.img = img;
        cropState.natW = img.naturalWidth;
        cropState.natH = img.naturalHeight;
        // 等比例缩放，最小边填满裁切区
        const scale = Math.max(CROP_SIZE / img.naturalWidth, CROP_SIZE / img.naturalHeight);
        cropState.disW = img.naturalWidth * scale;
        cropState.disH = img.naturalHeight * scale;
        cropState.ox = (CROP_SIZE - cropState.disW) / 2;
        cropState.oy = (CROP_SIZE - cropState.disH) / 2;
        // 更新图片位置
        cropImg.src = src;
        cropImg.style.width = cropState.disW + 'px';
        cropImg.style.height = cropState.disH + 'px';
        cropImg.style.transform = `translate(${cropState.ox}px, ${cropState.oy}px)`;
        cropOverlay.classList.add('open');
      };
      img.src = src;
    }
    function closeCropModal() {
      cropOverlay.classList.remove('open');
    }
    // 拖拽交互
    function onDragStart(e) {
      const pos = e.touches ? { x: e.touches[0].clientX, y: e.touches[0].clientY } : { x: e.clientX, y: e.clientY };
      cropState.dragging = true;
      cropState.startX = pos.x;
      cropState.startY = pos.y;
      cropState.startOx = cropState.ox;
      cropState.startOy = cropState.oy;
    }
    function onDragMove(e) {
      if (!cropState.dragging) return;
      e.preventDefault();
      const pos = e.touches ? { x: e.touches[0].clientX, y: e.touches[0].clientY } : { x: e.clientX, y: e.clientY };
      let dx = pos.x - cropState.startX;
      let dy = pos.y - cropState.startY;
      let nx = cropState.startOx + dx;
      let ny = cropState.startOy + dy;
      // 限制边界：不允许图片移出裁切区
      nx = Math.min(0, Math.max(CROP_SIZE - cropState.disW, nx));
      ny = Math.min(0, Math.max(CROP_SIZE - cropState.disH, ny));
      cropState.ox = nx;
      cropState.oy = ny;
      cropImg.style.transform = `translate(${nx}px, ${ny}px)`;
    }
    function onDragEnd() {
      cropState.dragging = false;
    }
    cropStage.addEventListener('mousedown', onDragStart);
    document.addEventListener('mousemove', onDragMove);
    document.addEventListener('mouseup', onDragEnd);
    cropStage.addEventListener('touchstart', onDragStart, { passive: true });
    document.addEventListener('touchmove', onDragMove, { passive: false });
    document.addEventListener('touchend', onDragEnd);
    // 裁切确认 → Canvas 圆形裁切 + 压缩
    cropConfirm.addEventListener('click', () => {
      const { img, natW, natH, disW, disH, ox, oy } = cropState;
      const cropPx = 360; // 输出尺寸
      const scaleX = natW / disW;
      const scaleY = natH / disH;
      const sx = -ox * scaleX;
      const sy = -oy * scaleY;
      const sw = CROP_SIZE * scaleX;
      const sh = CROP_SIZE * scaleY;
      const canvas = document.createElement('canvas');
      canvas.width = cropPx;
      canvas.height = cropPx;
      const ctx = canvas.getContext('2d');
      // 圆形裁切
      ctx.beginPath();
      ctx.arc(cropPx / 2, cropPx / 2, cropPx / 2, 0, Math.PI * 2);
      ctx.closePath();
      ctx.clip();
      ctx.drawImage(img, sx, sy, sw, sh, 0, 0, cropPx, cropPx);
      // 压缩为 JPEG
      canvas.toBlob((blob) => {
        cropData = blob;
        // 更新预览
        const url = URL.createObjectURL(blob);
        avatarPreview.innerHTML = `<img src="${url}" alt="avatar">`;
        avatarPreview.classList.add('has-image');
        closeCropModal();
      }, 'image/jpeg', 0.85);
    });
    // 重新选择
    cropCancel.addEventListener('click', () => {
      closeCropModal();
      cropData = null;
      avatarInput.value = '';
      avatarPreview.innerHTML = '<span class="placeholder">' + ICONS.camera + '</span>';
      avatarPreview.classList.remove('has-image');
    });
    // 表单提交（使用裁切后的 Blob）
    document.getElementById('submitAdd').addEventListener('click', async () => {
      const name = document.getElementById('addName').value.trim();
      if (!name) {
        document.getElementById('addName').focus();
        document.getElementById('addName').style.borderColor = '#ff6b6b';
        setTimeout(() => document.getElementById('addName').style.borderColor = '', 1500);
        return;
      }
      const fd = new FormData();
      fd.append('name', name);
      fd.append('gender', document.getElementById('addGender').value);
      fd.append('birthday', document.getElementById('addBirthday').value.trim());
      fd.append('hobby', document.getElementById('addHobby').value.trim());
      fd.append('phone', document.getElementById('addPhone').value.trim());
      fd.append('qq', document.getElementById('addQQ').value.trim());
      fd.append('wechat', document.getElementById('addWechat').value.trim());
      fd.append('douyin', document.getElementById('addDouyin').value.trim());
      fd.append('motto', document.getElementById('addMotto').value.trim());
      // 有裁切数据就用裁切后的，否则用原始文件
      if (cropData) {
        fd.append('avatar', cropData, 'avatar.jpg');
      } else if (avatarInput.files[0]) {
        fd.append('avatar', avatarInput.files[0]);
      }
      const btn = document.getElementById('submitAdd');
      btn.disabled = true;
      btn.innerHTML = `${ICONS.hourglass} 保存中…`;
      try {
        const res = await fetch('/api/classmates', { method: 'POST', body: fd });
        const data = await res.json();
        if (data.ok) {
          document.getElementById('addForm').reset();
          avatarPreview.innerHTML = '<span class="placeholder">' + ICONS.camera + '</span>';
          avatarPreview.classList.remove('has-image');
          cropData = null;
          closeModalFn();
          const res2 = await fetch('/api/classmates');
          classmates = await res2.json();
          classmates.sort((a, b) => (b.time || '').localeCompare(a.time || ''));
          filterAndRender();
        } else {
          alert(data.msg || '添加失败');
        }
      } catch (err) {
        alert('网络错误，请重试');
        console.error(err);
      } finally {
        btn.disabled = false;
        btn.innerHTML = `${ICONS.star} 保存`;
      }
    });
    // 点击头像上传按钮兜底触发文件选择
    document.querySelector('.avatar-upload-btn').addEventListener('click', function(e) {
      if (e.target.tagName !== 'INPUT') {
        document.getElementById('avatarInput').click();
      }
    });
    // ===== 详情弹窗 =====
    const detailOverlay = document.getElementById('detailOverlay');
    const detailAvatar = document.getElementById('detailAvatar');
    const detailName = document.getElementById('detailName');
    const detailGender = document.getElementById('detailGender');
    const detailTime = document.getElementById('detailTime');
    const detailBody = document.getElementById('detailBody');
    const detailToast = document.getElementById('detailToast');
    let toastTimer = null;
    function showToast(msg) {
      detailToast.textContent = msg;
      detailToast.classList.add('show');
      clearTimeout(toastTimer);
      toastTimer = setTimeout(() => detailToast.classList.remove('show'), 1500);
    }
    function parseContact(text) {
      if (!text || text === '-') return [{ type: 'other', value: '-' }];
      const parts = text.split(/[\\s,;，；、]+/).filter(Boolean);
      return parts.map(p => {
        const clean = p.trim();
        if (/^1[3-9]\d{9}$/.test(clean)) return { type: 'phone', value: clean, label: '电话' };
        if (/^[1-9]\d{4,9}$/.test(clean) && !/^1[3-9]\d{9}$/.test(clean)) return { type: 'qq', value: clean, label: 'QQ' };
        if (/^[a-zA-Z][a-zA-Z0-9_-]{3,19}$/.test(clean)) return { type: 'wechat', value: clean, label: '微信' };
        if (/^1\d{10}$/.test(clean)) return { type: 'phone', value: clean, label: '电话' };
        return { type: 'other', value: clean, label: '其他' };
      });
    }
    function openDetailModal(item) {
      const gi = getGenderIcon(item.gender);
      const avatar = item.avatar && item.avatar !== '/static/default-avatar.jpg'
        ? item.avatar : 'data:image/svg+xml,' + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="#2a2840"/><text x="50" y="62" text-anchor="middle" font-size="36" fill="#7c7a9e">${escapeHtml(item.name.charAt(0))}</text></svg>`);
      detailAvatar.src = avatar;
      detailName.textContent = item.name;
      detailGender.className = 'detail-gender' + (gi.cls ? ' ' + gi.cls : '');
      detailGender.innerHTML = gi.cls ? gi.icon : '';
      detailTime.textContent = item.time || '';
      const birthday = item.birthday || '-';
      const hobby = (item.hobby && item.hobby !== '无') ? item.hobby : '-';
      const motto = (item.motto && item.motto !== '无') ? item.motto : '';
      let rows = '';
      // 生日
      rows += `<div class="detail-row" data-copy="${escapeHtml(birthday)}" data-label="生日">
        <div class="detail-row-icon birthday">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8"/>
            <path d="M4 16c2 .5 4 1.5 6 2 2 .5 4 .5 6-2 2-1.5 4-1.5 6-2"/>
            <path d="M12 3v4"/><path d="M10 5h4"/>
          </svg>
        </div>
        <div class="detail-row-content">
          <div class="detail-row-label">生日</div>
          <div class="detail-row-value">${escapeHtml(birthday)}</div>
        </div>
        <span class="detail-copy-hint">点击复制</span>
      </div>`;
      // 爱好
      rows += `<div class="detail-row" data-copy="${escapeHtml(hobby)}" data-label="爱好">
        <div class="detail-row-icon hobby">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>
          </svg>
        </div>
        <div class="detail-row-content">
          <div class="detail-row-label">爱好</div>
          <div class="detail-row-value">${escapeHtml(hobby)}</div>
        </div>
        <span class="detail-copy-hint">点击复制</span>
      </div>`;
      // 联系方式
      let contactHTML = '';
      // 新格式: item.contacts 对象
      if (item.contacts && typeof item.contacts === 'object') {
        const c = item.contacts;
        if (c.phone) contactHTML += `<span class="contact-tag phone"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg> ${escapeHtml(c.phone)}</span>`;
        if (c.qq) contactHTML += `<span class="contact-tag qq"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><path d="M9 9h.01"/><path d="M15 9h.01"/></svg> ${escapeHtml(c.qq)}</span>`;
        if (c.wechat) contactHTML += `<span class="contact-tag wechat"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> ${escapeHtml(c.wechat)}</span>`;
        if (c.douyin) contactHTML += `<span class="contact-tag other"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 3.44L12 10.2l-1.08-2.14a5.5 5.5 0 0 0-7.78-3.44 5.5 5.5 0 0 0-1.9 7.61l7.15 11.63a1 1 0 0 0 1.72 0l7.15-11.63a5.5 5.5 0 0 0-1.42-7.62z"/></svg> ${escapeHtml(c.douyin)}</span>`;
      } else if (item.contact) {
        // 旧格式兼容: item.contact 字符串
        const oldContacts = parseContact(item.contact);
        oldContacts.forEach(c => {
          if (c.type === 'phone') contactHTML += `<span class="contact-tag phone"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg> ${escapeHtml(c.value)}</span>`;
          else if (c.type === 'qq') contactHTML += `<span class="contact-tag qq"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><path d="M9 9h.01"/><path d="M15 9h.01"/></svg> ${escapeHtml(c.value)}</span>`;
          else if (c.type === 'wechat') contactHTML += `<span class="contact-tag wechat"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> ${escapeHtml(c.value)}</span>`;
          else contactHTML += `<span class="contact-tag other">${escapeHtml(c.value)}</span>`;
        });
      }
      const contactCopyText = item.contacts ? Object.values(item.contacts).filter(Boolean).join(' ') : (item.contact || '-');
      rows += `<div class="detail-row" data-copy="${escapeHtml(contactCopyText)}" data-label="联系方式">
        <div class="detail-row-icon contact">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
          </svg>
        </div>
        <div class="detail-row-content">
          <div class="detail-row-label">联系方式</div>
          <div class="detail-row-value">${contactHTML || '-'}</div>
        </div>
        <span class="detail-copy-hint">点击复制</span>
      </div>`;
      // 寄语
      if (motto) {
        rows += `<div class="detail-row" data-copy="${escapeHtml(motto)}" data-label="寄语">
          <div class="detail-row-icon motto">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
            </svg>
          </div>
          <div class="detail-row-content">
            <div class="detail-row-label">寄语</div>
            <div class="detail-row-value detail-motto-text">「${escapeHtml(motto)}」</div>
          </div>
          <span class="detail-copy-hint">点击复制</span>
        </div>`;
      }
      detailBody.innerHTML = rows;
      detailOverlay.classList.add('open');
      document.body.style.overflow = 'hidden';
      // 点击行复制
      detailBody.querySelectorAll('.detail-row').forEach(row => {
        row.addEventListener('click', () => {
          const text = row.dataset.copy;
          const label = row.dataset.label;
          if (text && text !== '-') {
            navigator.clipboard.writeText(text).then(() => {
              showToast(label + '已复制');
            }).catch(() => {
              // fallback
              const ta = document.createElement('textarea');
              ta.value = text;
              document.body.appendChild(ta);
              ta.select();
              document.execCommand('copy');
              document.body.removeChild(ta);
              showToast(label + '已复制');
            });
          }
        });
      });
    }
    function closeDetailModal() {
      detailOverlay.classList.remove('open');
      document.body.style.overflow = '';
    }
    // 卡片点击 → 打开详情
    document.getElementById('classGrid').addEventListener('click', (e) => {
      const card = e.target.closest('.class-card');
      if (!card) return;
      const id = card.id.replace('classmate-', '');
      const item = classmates.find(c => String(c.id) === id);
      if (item) openDetailModal(item);
    });
    // 详情弹窗关闭
    document.getElementById('detailClose').addEventListener('click', closeDetailModal);
    detailOverlay.addEventListener('click', (e) => {
      if (e.target === detailOverlay) closeDetailModal();
    });
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && detailOverlay.classList.contains('open')) closeDetailModal();
    });
  </script>
</body>
</html>