/* ============================================================
   pages/gift.html 样式（用户邀请功能 V1.0 · 阶段 4）
   - 亮色主题：白底 #ffffff / 主文字 #111827 /
     teal 强调（作文字 #0e9e7e、作底/线 #1abc9c）/ 直角边框 / 大字距 eyebrow
   ============================================================== */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { color-scheme: light; }
  html, body { height: 100%; }
  body {
    background: #ffffff;
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  a { color: inherit; text-decoration: none; }

  main {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
  }
  .panel { width: 100%; max-width: 560px; }
  .panel-head { margin-bottom: 36px; }
  .eyebrow {
    font-size: 10px; letter-spacing: 0.4em; color: #9ca3af;
    text-transform: uppercase; margin-bottom: 16px;
  }
  .panel h1 {
    font-size: 36px; font-weight: 200; letter-spacing: 0.02em;
    line-height: 1.1; color: #111827;
  }
  .panel h1 .en {
    font-size: 12px; font-weight: 400; letter-spacing: 0.3em;
    color: #9ca3af; text-transform: uppercase; margin-left: 10px;
    vertical-align: middle;
  }
  .panel .sub {
    font-size: 14px; color: #6b7280; line-height: 1.7;
    margin-top: 16px; font-weight: 300;
  }

  /* —— 卡片 —— */
  #giftMain { display: flex; flex-direction: column; gap: 16px; }
  #giftMain[hidden] { display: none; }

  .gift-card {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    padding: 24px;
  }
  .gift-card[hidden] { display: none; }
  .card-title {
    font-size: 10px; letter-spacing: 0.3em; color: #9ca3af;
    text-transform: uppercase; margin-bottom: 14px;
  }
  .card-sub { font-size: 13px; color: #6b7280; line-height: 1.8; }
  .card-sub b { color: #0e9e7e; font-weight: 500; }

  /* A 视图强调卡：被邀请来源 */
  .gift-card.invited { border-color: rgba(26, 188, 156, 0.45); }

  /* —— 邀请码大字 —— */
  .code-big {
    font-size: 32px; font-weight: 200;
    letter-spacing: 0.42em; text-indent: 0.42em; /* 补偿末字间距，视觉居中 */
    color: #0e9e7e; text-align: center;
    padding: 18px 0 20px;
    user-select: all;
  }

  /* —— 链接 + 复制 —— */
  .link-row { display: flex; align-items: stretch; gap: 10px; }
  .link-row input {
    flex: 1; min-width: 0;
    background: transparent; border: 0;
    border-bottom: 1px solid #d1d5db;
    color: #6b7280; font-size: 12px; font-weight: 300;
    letter-spacing: 0.04em; padding: 8px 0;
    outline: none; font-family: inherit;
  }
  .link-row input:focus { border-color: #1abc9c; color: #111827; }
  .copy-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    border: 1px solid #d1d5db; border-radius: 0;
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #111827; background: transparent;
    cursor: pointer; transition: all 0.18s ease; font-family: inherit;
  }
  .copy-btn:hover, .copy-btn:focus-visible {
    background: #1abc9c; color: #0a0c10; border-color: #1abc9c; outline: none;
  }

  /* —— 统计 —— */
  .stat-row {
    display: flex; gap: 16px;
    margin-top: 20px;
    border-top: 1px solid #f3f4f6;
    padding-top: 20px;
  }
  .stat { flex: 1; text-align: center; }
  .stat-num {
    font-size: 26px; font-weight: 200; color: #111827;
    letter-spacing: 0.04em;
  }
  .stat-label {
    font-size: 10px; letter-spacing: 0.3em; color: #9ca3af;
    text-transform: uppercase; margin-top: 8px;
  }

  /* —— 邀请记录 —— */
  .rec-list { display: flex; flex-direction: column; }
  .rec-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
  }
  .rec-row:last-child { border-bottom: 0; }
  .rec-name {
    flex: 1; min-width: 0;
    color: #111827; font-weight: 300;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rec-date {
    flex-shrink: 0;
    font-size: 11px; color: #9ca3af; letter-spacing: 0.06em;
  }
  .rec-reward {
    flex-shrink: 0;
    font-size: 12px; color: #0e9e7e; font-weight: 500;
    letter-spacing: 0.08em;
  }
  .rec-empty {
    padding: 24px 0;
    font-size: 12px; color: #9ca3af;
    letter-spacing: 0.06em; line-height: 1.8; text-align: center;
  }

  /* —— 规则说明 —— */
  .gift-rules {
    padding: 4px 4px 0;
    font-size: 11px; color: #9ca3af;
    line-height: 2; letter-spacing: 0.06em;
  }

  /* —— 登录引导按钮（沿用 register 提交按钮形态） —— */
  .submit-btn {
    display: inline-flex; align-items: center; gap: 12px;
    margin-top: 20px;
    padding: 14px 28px;
    border: 1px solid #d1d5db; border-radius: 0;
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #111827; background: transparent;
    cursor: pointer; transition: all 0.18s ease; font-family: inherit;
  }
  .submit-btn:hover, .submit-btn:focus-visible {
    background: #111827; color: #ffffff; border-color: #111827; outline: none;
  }
  .submit-btn .arrow { font-size: 15px; line-height: 1; transition: transform 0.18s ease; }
  .submit-btn:hover .arrow { transform: translateX(4px); }

  .toast {
    position: fixed; bottom: 32px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1abc9c; color: #0a0c10;
    padding: 12px 24px;
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    border-radius: 0;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  .footer {
    padding: 24px 40px;
    font-size: 11px; color: #9ca3af;
    letter-spacing: 0.18em; text-transform: uppercase;
    border-top: 1px solid #f3f4f6;
    text-align: center;
  }

  @media (max-width: 720px) {
    main { padding: 28px 16px; }
    .footer { padding: 20px 24px; }
    .panel h1 { font-size: 28px; }
    .panel h1 .en { font-size: 11px; letter-spacing: 0.2em; }
    .code-big { font-size: 26px; letter-spacing: 0.3em; text-indent: 0.3em; }
    .link-row { flex-direction: column; align-items: stretch; }
    .link-row input { border: 1px solid #d1d5db; padding: 10px 12px; }
    .copy-btn { padding: 12px 16px; }
  }