/**
 * AiDrumScore - AI驱动的鼓谱转录工具
 * Copyright (c) 2026 苏州市常熟市制谱修修信息技术服务有限责任公司. All rights reserved.
 */

/* ============================================================
   profile.css — Notion Warm Minimalism
   ============================================================ */

body {
  background-color: var(--bg-secondary, #f6f5f4) !important;
}

/* ── 页面容器 ── */
.profile-page {
  max-width: 880px;
  margin: 0 auto;
  padding: calc(var(--nav-height, 56px) + 48px) 32px 80px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.profile-page.visible { opacity: 1; }

/* ── 加载状态 ── */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 140px 20px;
  color: var(--text-tertiary, #a39e98);
  font-size: 14px;
}
.loading-state .spinner { margin: 0 auto 20px; }

/* ── Hero 头部 ── */
.p-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-default, rgba(0,0,0,0.1));
}
.p-hero-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600;
  background: var(--accent-light, #f2f9ff);
  color: var(--accent-light-text, #097fe8);
}
.p-hero-info { flex: 1; min-width: 0; }
.p-hero-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.p-hero-name {
  font-size: 22px; font-weight: 700;
  color: var(--text-primary, rgba(0,0,0,0.95));
  letter-spacing: -0.02em; line-height: 1.3; margin: 0;
}
.p-hero-meta { font-size: 13px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.p-hero-meta-dot { color: rgba(0,0,0,0.1); }
.p-hero-joined { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

/* ── 角色徽章 ── */
.role-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 9999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.125px; line-height: 1.33;
}
.role-badge--admin { background: var(--danger-light); color: var(--danger); }
.role-badge--member { background: var(--accent-light); color: var(--accent-light-text); }
.role-badge--user { background: rgba(0,0,0,0.06); color: var(--text-tertiary); }

/* ── 统计数据行 ── */
.p-stats {
  display: flex; align-items: center;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 12px);
  padding: 20px 24px; margin-bottom: 28px;
  box-shadow: var(--shadow-card);
}
.p-stat { flex: 1; text-align: center; }
.p-stat-value {
  font-size: 26px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 4px;
}
.p-stat-label { font-size: 12px; color: var(--text-tertiary); }
.p-stat-divider { width: 1px; height: 36px; background: var(--border-default); flex-shrink: 0; }

/* ── 双栏布局 ── */
.p-grid { display: grid; grid-template-columns: 1fr 240px; gap: 16px; margin-bottom: 16px; }

/* ── 通用卡片 ── */
.p-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.p-card:hover { border-color: rgba(0,0,0,0.15); box-shadow: var(--shadow-hover); }
.p-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 20px 0;
  font-size: 11px; font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.p-card-icon { opacity: 0.5; flex-shrink: 0; color: var(--text-tertiary); }

/* ── 快捷操作 ── */
.p-quick-actions { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.p-quick-action {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm, 4px);
  text-decoration: none; color: inherit;
  transition: background 0.15s ease; cursor: pointer;
}
.p-quick-action:hover { background: var(--bg-tertiary, #fafaf9); }
.p-quick-action-icon {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-tertiary); flex-shrink: 0;
}
.p-quick-action-text { flex: 1; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.p-quick-action-arrow { color: rgba(0,0,0,0.1); opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; }
.p-quick-action:hover .p-quick-action-arrow { opacity: 1; transform: translateX(2px); }

/* ── 个人资料表单 ── */
.p-form { padding: 4px 20px 20px; }
.p-form-row { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
.p-form-row + .p-form-row { border-top: 1px solid var(--border-default); }
.p-form-label { width: 56px; flex-shrink: 0; font-size: 14px; font-weight: 500; color: var(--text-tertiary); }
.p-form-input {
  flex: 1; background: transparent; border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-primary); font-size: 15px;
  font-family: inherit; outline: none; padding: 4px 0;
  transition: border-color 0.2s ease;
}
.p-form-input:focus { border-bottom-color: var(--accent-primary, #0075de); }
.p-form-input::placeholder { color: var(--text-tertiary); }
.p-form-input:disabled { color: var(--text-tertiary); cursor: default; }
.p-form-actions {
  display: flex; justify-content: flex-end;
  padding-top: 16px; border-top: 1px solid var(--border-default); margin-top: 4px;
}

/* ── 按钮 ── */
.p-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: var(--radius-sm, 4px);
  font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all 0.15s ease;
  border: none; text-decoration: none; line-height: 1.33;
}
.p-btn:active { transform: scale(0.97); }
.p-btn-primary { background: var(--accent-primary); color: #ffffff; }
.p-btn-primary:hover { background: var(--accent-hover); }

/* ── 订单列表 ── */
.order-list { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.order-item { padding: 14px 16px; border-radius: var(--radius-sm); transition: background 0.15s ease; }
.order-item:hover { background: var(--bg-tertiary); }
.order-item-main { display: flex; align-items: center; gap: 12px; }
.order-info { flex: 1; min-width: 0; }
.order-title { font-size: 15px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.order-meta { font-size: 13px; color: var(--text-tertiary); }
.order-price { font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; flex-shrink: 0; }
.order-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
  padding: 2px 8px; border-radius: 9999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.order-status--pending .badge-dot, .order-status--pending { color: var(--warning, #dd5b00); }
.order-status--paid .badge-dot, .order-status--paid { color: var(--accent-primary); }
.order-status--accepted .badge-dot, .order-status--accepted { color: var(--accent-light-text); }
.order-status--in_progress .badge-dot, .order-status--in_progress { color: var(--warning); }
.order-status--processing .badge-dot, .order-status--processing { color: var(--accent-light-text); }
.order-status--completed .badge-dot, .order-status--completed,
.order-status--delivered .badge-dot, .order-status--delivered { color: var(--success); }
.order-status--cancelled .badge-dot, .order-status--cancelled { color: var(--text-tertiary); }
.order-actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-default); display: flex; gap: 8px; }
.btn-download {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; background: transparent;
  border: 1px solid rgba(26, 174, 57, 0.3); color: var(--success);
  transition: all 0.15s ease; text-decoration: none;
}
.btn-download:hover { background: var(--success-light); border-color: var(--success); }
.btn-download:active { transform: scale(0.97); }

/* ── 空白状态 ── */
.p-empty { text-align: center; padding: 40px 20px; }
.p-empty-text { font-size: 14px; color: var(--text-tertiary); margin: 0; }

/* ── 转谱历史列表 ── */
.history-list { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.history-item { padding: 14px 16px; border-radius: var(--radius-sm); transition: background 0.15s ease; }
.history-item:hover { background: var(--bg-tertiary); }
.history-item-main { display: flex; align-items: center; gap: 12px; }
.history-info { flex: 1; min-width: 0; }
.history-filename { font-size: 15px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.history-meta { font-size: 13px; color: var(--text-tertiary); }
.history-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.history-downloads { display: flex; gap: 6px; }
.history-download-link {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500; text-decoration: none;
  background: var(--accent-light); color: var(--accent-light-text);
  border: 1px solid rgba(0, 117, 222, 0.15);
  transition: all 0.15s ease;
}
.history-download-link:hover { background: rgba(0, 117, 222, 0.12); border-color: var(--accent-primary); }
.history-delete-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500; cursor: pointer;
  background: transparent; border: 1px solid rgba(255, 69, 58, 0.2); color: var(--danger);
  transition: all 0.15s ease; font-family: inherit;
}
.history-delete-btn:hover { background: var(--danger-light); border-color: var(--danger); }
.history-delete-btn:active { transform: scale(0.97); }

/* ── 鼓谱师申请弹窗 ── */
.transcriber-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.transcriber-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl, 16px);
  width: 100%; max-width: 420px;
  box-shadow: var(--shadow-deep); overflow: hidden;
}
.transcriber-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.transcriber-modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-primary); }
.transcriber-modal-close { background: none; border: none; font-size: 20px; color: var(--text-tertiary); cursor: pointer; padding: 0; line-height: 1; }
.transcriber-modal-close:hover { color: var(--text-primary); }
.transcriber-modal-body { padding: 20px 24px; }
.t-form-group { margin-bottom: 16px; }
.t-form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
.t-form-input, .t-form-textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-input, #dddddd);
  border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; color: var(--text-primary);
  outline: none; transition: border-color 0.2s ease; box-sizing: border-box;
}
.t-form-input:focus, .t-form-textarea:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(0,117,222,0.12); }
.t-form-textarea { resize: vertical; min-height: 60px; }
.t-form-error { color: var(--danger); font-size: 13px; padding: 8px 12px; background: var(--danger-light); border-radius: var(--radius-sm); margin-bottom: 12px; }
.transcriber-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 20px; border-top: 1px solid var(--border-default); }

/* ── 评分弹窗 ── */
.rating-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.rating-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl, 16px);
  width: 100%; max-width: 400px;
  box-shadow: var(--shadow-deep); overflow: hidden;
}
.rating-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.rating-modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-primary); }
.rating-modal-close { background: none; border: none; font-size: 20px; color: var(--text-tertiary); cursor: pointer; padding: 0; line-height: 1; }
.rating-modal-close:hover { color: var(--text-primary); }
.rating-modal-body { padding: 20px 24px; text-align: center; }
.rating-modal-desc { font-size: 14px; color: var(--text-secondary); margin: 0 0 16px; }
.rating-stars { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.rating-star { cursor: pointer; color: rgba(0,0,0,0.1); transition: color 0.15s ease, transform 0.15s ease; }
.rating-star:hover { transform: scale(1.15); color: #fbbf24; }
.rating-star.active { color: #f59e0b; }
.rating-score-text { font-size: 13px; color: #f59e0b; margin: 4px 0 16px; min-height: 20px; }
.rating-form-group { text-align: left; margin-bottom: 8px; }
.rating-form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; }
.rating-form-textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; color: var(--text-primary);
  outline: none; resize: vertical; min-height: 50px; box-sizing: border-box;
  transition: border-color 0.2s ease;
}
.rating-form-textarea:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(0,117,222,0.12); }
.rating-form-error { color: var(--danger); font-size: 13px; padding: 8px 12px; background: var(--danger-light); border-radius: var(--radius-sm); margin-bottom: 8px; text-align: left; }
.rating-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 20px; border-top: 1px solid var(--border-default); }

/* ── 响应式 ── */
@media (max-width: 768px) {
  .profile-page { padding: calc(var(--nav-height) + 28px) 16px 64px; }
  .p-grid { grid-template-columns: 1fr; }
  .p-hero-avatar { width: 48px; height: 48px; font-size: 18px; }
  .p-hero-name { font-size: 19px; }
  .p-stats { padding: 14px 16px; }
  .p-stat-value { font-size: 22px; }
  .order-item-main { flex-wrap: wrap; gap: 8px; }
  .order-price { margin-left: auto; }
  .order-badge { width: 100%; justify-content: center; }
  .history-item-main { flex-wrap: wrap; gap: 8px; }
  .history-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 480px) {
  .profile-page { padding: calc(var(--nav-height) + 20px) 12px 48px; }
  .p-hero-avatar { width: 40px; height: 40px; font-size: 16px; }
  .p-hero-name { font-size: 17px; }
  .p-stats { padding: 12px 12px; }
  .p-stat-value { font-size: 20px; }
  .p-form-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .p-form-label { width: auto; }
  .p-form-input { width: 100%; }
}