/* ============================================
   彩铃定制系统 - 统一设计系统
   主色: 深藏青 primary(专业商务)
   强调: 红 accent(仅关键转化按钮)
   ============================================ */

:root {
  --primary-900: #0a1f44;
  --primary-800: #0f2b5b;
  --primary-700: #1e3a8a;
  --primary-600: #2547b8;
  --primary-100: #dbe7fe;
  --primary-50: #eef4ff;
  --accent: #e63946;
  --accent-dark: #c92a37;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  background: #f6f7f9;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
}

/* ---- 卡片 ---- */
.card {
  background: #fff;
  border-radius: 1.25rem;
  border: 1px solid #eef0f4;
  box-shadow: 0 1px 3px rgba(15, 43, 91, .05), 0 8px 24px -12px rgba(15, 43, 91, .08);
}

/* ---- 输入框 ---- */
.input {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid #e2e8f0;
  border-radius: .9rem;
  background: #fff;
  font-size: 1rem;
  color: #1e293b;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.input::placeholder { color: #94a3b8; }
.input:focus {
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(37, 71, 184, .12);
}

/* ---- 主按钮(红色转化按钮) ---- */
.btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%;
  padding: .95rem 1.5rem;
  background: linear-gradient(135deg, #ef4444 0%, #e63946 60%, #c92a37 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: 999px;
  border: none;
  box-shadow: 0 8px 20px -6px rgba(230, 57, 70, .45);
  transition: transform .12s, box-shadow .15s, opacity .15s;
  cursor: pointer;
}
.btn-accent:active { transform: scale(.98); }
.btn-accent:disabled { opacity: .6; box-shadow: none; }

/* ---- 次按钮(描边) ---- */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.4rem;
  background: #fff;
  color: var(--primary-700);
  font-weight: 600;
  border-radius: 999px;
  border: 1.5px solid var(--primary-100);
  transition: all .15s;
  cursor: pointer;
}
.btn-ghost:active { background: var(--primary-50); }

/* ---- 深蓝实心按钮 ---- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.4rem;
  background: linear-gradient(135deg, var(--primary-700), var(--primary-800));
  color: #fff; font-weight: 600;
  border-radius: 999px; border: none;
  box-shadow: 0 6px 16px -6px rgba(15, 43, 91, .5);
  transition: all .15s; cursor: pointer;
}
.btn-primary:active { transform: scale(.98); }

/* ---- segmented 单选(男女声) ---- */
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
}
.seg-item {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem;
  border: 1.5px solid #e2e8f0;
  border-radius: .9rem;
  background: #fff;
  font-size: .95rem; font-weight: 500; color: #475569;
  cursor: pointer; transition: all .15s;
}
.seg-item.active {
  border-color: var(--primary-600);
  background: var(--primary-50);
  color: var(--primary-800);
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(37, 71, 184, .10);
}
.seg-item input { display: none; }

/* ---- 状态徽章 ---- */
.badge {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 600;
  padding: .2rem .65rem; border-radius: 999px;
}
.badge-blue   { background: #dbe7fe; color: #1e40af; }
.badge-green  { background: #d1fae5; color: #047857; }
.badge-yellow { background: #fef3c7; color: #b45309; }
.badge-gray   { background: #e2e8f0; color: #475569; }
.badge-red    { background: #fee2e2; color: #b91c1c; }

/* ---- toast ---- */
#toast, #callToast {
  transition: opacity .25s;
}
#toast.show, #callToast.show { opacity: 1 !important; }

/* ---- 底部安全区 ---- */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }