/* =========================================================
 * Curves Flow Brand Theme (cv-mail)
 * 所有頁面共用：色票、字體、按鈕、卡片、標題裝飾、徽章
 * =======================================================*/

:root {
  /* ---------- Curves 品牌紫 ---------- */
  --brand-50:  #F5EEFB;
  --brand-100: #EAE0F6;
  --brand-200: #D6C0EF;
  --brand-300: #BFA0E7;
  --brand-400: #A78BDB;
  --brand-500: #9466D8;
  --brand-600: #7C3AED;   /* 主品牌色 (按鈕 / icon / 強調) */
  --brand-700: #6D28D9;   /* hover、header 主色 */
  --brand-800: #5B21B6;
  --brand-900: #3B1F6B;   /* 標題深紫 */

  /* ---------- 背景 / 表面 ---------- */
  --bg:        #F8F3FB;   /* 整體淡紫底 */
  --bg-soft:   #FBF7FD;
  --surface:   #FFFFFF;
  --surface-2: #FAF6FE;   /* 區塊內次層次 */
  --border:    #ECDFF6;   /* 淡紫色邊框 */
  --border-2:  #E5E7EB;

  /* ---------- 文字 ---------- */
  --ink:    #1F1B2E;      /* 主文字 (深墨紫) */
  --ink-2:  #4B5563;      /* 內文 */
  --ink-3:  #6B7280;      /* 次要 */
  --ink-4:  #9CA3AF;      /* hint */

  /* ---------- 語意色 ---------- */
  --success:    #059669;
  --success-bg: #ECFDF5;
  --warning:    #D97706;
  --warning-bg: #FFFBEB;
  --danger:     #DC2626;
  --danger-bg:  #FEF2F2;
  --info:       #2563EB;
  --info-bg:    #EFF6FF;

  /* 梯次色（語意：第 1/2/3 批） */
  --batch-1: #7C3AED;     /* 紫 */
  --batch-2: #2563EB;     /* 藍 */
  --batch-3: #059669;     /* 綠 */

  /* ---------- 陰影 ---------- */
  --shadow-sm: 0 1px 2px rgba(91, 33, 182, .04), 0 1px 3px rgba(91, 33, 182, .06);
  --shadow:    0 4px 14px rgba(91, 33, 182, .08), 0 2px 4px rgba(91, 33, 182, .04);
  --shadow-lg: 0 12px 32px rgba(91, 33, 182, .12), 0 4px 12px rgba(91, 33, 182, .06);

  /* ---------- 字體 ---------- */
  --font-sans: 'Noto Sans TC', system-ui, -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}

/* ========== Base ========== */
html, body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== Header (Curves 紫漸層) ========== */
.cv-header {
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 60%, #8B5CF6 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(91, 33, 182, .18);
}
.cv-header .cv-logo {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #fff;
  color: var(--brand-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.cv-header .cv-title { font-weight: 900; letter-spacing: -0.01em; }
.cv-header .cv-subtitle { color: rgba(255,255,255,.78); font-size: 12px; }

/* ========== Card (圖 2 樣式：白底圓角 + 淡紫陰影) ========== */
.cv-card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.cv-card-hd {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}

/* ========== Section title (圖 2：左邊一條紫色短粗 bar) ========== */
.cv-title-bar {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; color: var(--brand-900);
  font-size: 16px;
}
.cv-title-bar::before {
  content: ""; width: 4px; height: 18px; border-radius: 2px;
  background: var(--brand-600);
  flex-shrink: 0;
}

/* ========== Buttons ========== */
/* primary：紫底白字 */
.cv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 10px;
  font-weight: 700; font-size: 14px;
  min-height: 40px; line-height: 1.2;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  cursor: pointer; user-select: none;
}
.cv-btn:active { transform: translateY(1px); }
.cv-btn[disabled] { opacity: .55; cursor: not-allowed; }

.cv-btn-primary {
  background: var(--brand-600); color: #fff;
  box-shadow: 0 1px 2px rgba(91,33,182,.18);
}
.cv-btn-primary:hover { background: var(--brand-700); }

/* outline 系列（圖 2 風格） */
.cv-btn-outline {
  background: #fff;
  border: 1.5px solid var(--brand-200);
  color: var(--brand-700);
}
.cv-btn-outline:hover { background: var(--brand-50); border-color: var(--brand-300); }

.cv-btn-outline-green {
  background: #fff; border: 1.5px solid #BBF7D0; color: #047857;
}
.cv-btn-outline-green:hover { background: #ECFDF5; border-color: #86EFAC; }

.cv-btn-outline-orange {
  background: #fff; border: 1.5px solid #FED7AA; color: #C2410C;
}
.cv-btn-outline-orange:hover { background: #FFF7ED; border-color: #FDBA74; }

.cv-btn-outline-rose {
  background: #fff; border: 1.5px solid #FECDD3; color: #BE123C;
}
.cv-btn-outline-rose:hover { background: #FEF2F2; border-color: #FDA4AF; }

/* header 內 ghost / 反白透明按鈕 */
.cv-btn-ghost-on-dark {
  background: rgba(255,255,255,.14);
  color: #fff;
  backdrop-filter: blur(4px);
}
.cv-btn-ghost-on-dark:hover { background: rgba(255,255,255,.24); }

.cv-btn-solid-on-dark {
  background: #fff;
  color: var(--brand-700);
}
.cv-btn-solid-on-dark:hover { background: var(--brand-50); }

/* ========== Form ========== */
.cv-input,
input[type=date].cv,
input[type=month].cv,
select.cv,
input[type=text].cv,
input[type=password].cv {
  background: #fff;
  border: 1px solid var(--border);
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  min-height: 40px;
  color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
.cv-input:focus,
input.cv:focus, select.cv:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

/* ========== Badges (狀態徽章) ========== */
.cv-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 9999px;
  font-weight: 700; font-size: 12px;
  background: var(--brand-50); color: var(--brand-700);
}
.cv-badge-ok      { background: var(--success-bg); color: var(--success); }
.cv-badge-warn    { background: var(--warning-bg); color: var(--warning); }
.cv-badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.cv-badge-info    { background: var(--info-bg);    color: var(--info); }
.cv-badge-muted   { background: #F1F5F9;           color: #475569; }

/* ========== 文字 utility ========== */
.cv-text-brand     { color: var(--brand-700); }
.cv-text-brand-deep{ color: var(--brand-900); }
.cv-text-muted     { color: var(--ink-3); }
.cv-text-hint      { color: var(--ink-4); }

/* ========== Footer ========== */
.cv-footer {
  text-align: center;
  color: var(--ink-4);
  font-size: 12px;
  line-height: 1.8;
  padding: 24px 16px 32px;
}
.cv-footer .cv-footer-strong { color: var(--ink-3); font-weight: 500; }

/* ========== Animation ========== */
@keyframes cvSpin { to { transform: rotate(360deg); } }