/* ==========================================================================
   KEHU Design System
   客湖成交价调研工具 —— 前后台共用底层样式
   色板取自品牌基础规范：主紫 #61007D / 浅紫 #904CA3 / 强调橙 #F19319
                        青 #41B8B1 / 蓝 #219CDC / 品红 #DA2F68
   ========================================================================== */

:root {
  /* ---------- 品牌色 ---------- */
  --k-purple:        #61007D;
  --k-purple-2:      #904CA3;
  --k-orange:        #F19319;
  --k-teal:          #41B8B1;
  --k-blue:          #219CDC;
  --k-magenta:       #DA2F68;

  /* ---------- 品牌色淡化层（背景／描边用，勿用于文字） ---------- */
  --k-purple-50:     #F4EDF7;
  --k-purple-100:    #E6D8EC;
  --k-purple-200:    #CBAAD8;
  --k-orange-50:     #FDF2E2;
  --k-teal-50:       #E4F5F4;
  --k-blue-50:       #E3F1FA;
  --k-magenta-50:    #FBE7EE;

  /* ---------- 语义色 ---------- */
  --k-success:       var(--k-teal);
  --k-success-bg:    var(--k-teal-50);
  --k-warning:       #AB650A;          /* 橙色压暗版，白底 4.57:1 刚过 AA */
  --k-warning-bg:    var(--k-orange-50);
  --k-danger:        var(--k-magenta);
  --k-danger-bg:     var(--k-magenta-50);
  --k-info:          #1A7DB1;          /* 蓝色压暗版，白底 4.55:1 刚过 AA */
  --k-info-bg:       var(--k-blue-50);

  /* ---------- 中性色 ---------- */
  --k-bg:            #F7F6F9;
  --k-surface:       #FFFFFF;
  --k-surface-2:     #FBFAFC;
  --k-line:          #E8E4EE;
  --k-line-strong:   #D6D0DE;
  --k-text:          #1D1B20;
  --k-text-2:        #5F5A66;
  --k-text-3:        #928C9B;
  --k-text-invert:   #FFFFFF;

  /* ---------- 圆角 ---------- */
  --k-r-sm:  8px;
  --k-r-md:  12px;
  --k-r-lg:  16px;
  --k-r-pill: 999px;

  /* ---------- 阴影（克制，只用两级） ---------- */
  --k-shadow-1: 0 1px 2px rgba(29,27,32,.06), 0 1px 3px rgba(29,27,32,.04);
  --k-shadow-2: 0 4px 16px rgba(97,0,125,.10), 0 1px 4px rgba(29,27,32,.06);

  /* ---------- 间距 ---------- */
  --k-sp-1: 4px;  --k-sp-2: 8px;  --k-sp-3: 12px;
  --k-sp-4: 16px; --k-sp-5: 20px; --k-sp-6: 24px; --k-sp-8: 32px;

  /* ---------- 字体 ---------- */
  --k-font: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text",
            "PingFang SC", "HarmonyOS Sans SC", "Noto Sans CJK SC",
            "Microsoft YaHei", system-ui, sans-serif;
  --k-font-num: "SF Pro Display", -apple-system, BlinkMacSystemFont,
                "Helvetica Neue", Arial, sans-serif;

  /* 触控最小热区，遵循 Apple HIG 44pt */
  --k-tap: 44px;
}

/* ==========================================================================
   基础重置
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--k-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--k-text);
  background: var(--k-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--k-purple-2); text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

/* 数字统一用等宽表格数字，价格纵向对齐才不会跳 */
.k-num, td.k-num, input[inputmode="numeric"] {
  font-family: var(--k-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ==========================================================================
   图标 —— 全部 24 网格、1.8px 线宽、圆头端点（苹果 SF Symbols 风格）
   ========================================================================== */
.k-icon {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -.22em;
}
.k-icon-sm { width: 16px; height: 16px; stroke-width: 2; }
.k-icon-lg { width: 24px; height: 24px; }
.k-icon-xl { width: 32px; height: 32px; stroke-width: 1.6; }

/* ==========================================================================
   品牌标识
   ========================================================================== */
.k-logo { display: inline-flex; align-items: center; gap: 10px; }
.k-logo img, .k-logo .k-logo-mark { height: 30px; width: auto; display: block; }
.k-logo-text {
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  color: var(--k-text-invert);
}

/* ==========================================================================
   顶栏
   ========================================================================== */
.k-topbar {
  background: var(--k-purple);
  color: var(--k-text-invert);
  padding: 0 var(--k-sp-5);
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 30;
}
.k-topbar a { color: rgba(255,255,255,.88); }
.k-topbar a:hover { color: #fff; }

/* ==========================================================================
   卡片
   ========================================================================== */
.k-card {
  background: var(--k-surface);
  border-radius: var(--k-r-md);
  border: 1px solid var(--k-line);
  padding: var(--k-sp-4);
  box-shadow: var(--k-shadow-1);
}
.k-card + .k-card { margin-top: var(--k-sp-3); }

.k-card-title {
  font-size: 15px; font-weight: 600; color: var(--k-text);
  display: flex; align-items: center; gap: var(--k-sp-2);
  margin-bottom: var(--k-sp-3);
}
.k-card-title .k-icon { color: var(--k-purple-2); }

.k-sub { font-size: 13px; color: var(--k-text-3); line-height: 1.65; }

/* ==========================================================================
   按钮
   ========================================================================== */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 16px;
  border-radius: var(--k-r-sm);
  font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
}
.k-btn-primary   { background: var(--k-purple); color: #fff; }
.k-btn-primary:hover  { background: #4E0064; }
.k-btn-primary:active { background: #3D004E; }

.k-btn-outline   { background: var(--k-surface); color: var(--k-purple-2); border-color: var(--k-purple-200); }
.k-btn-outline:hover { background: var(--k-purple-50); }

.k-btn-ghost     { background: transparent; color: var(--k-text-2); }
.k-btn-ghost:hover { background: var(--k-purple-50); color: var(--k-purple); }

.k-btn-success   { background: var(--k-success-bg); color: #21716C; border-color: #A9DFDC; }
.k-btn-warning   { background: var(--k-warning-bg); color: var(--k-warning); border-color: #F3D5A8; }
.k-btn-danger    { background: var(--k-danger-bg);  color: var(--k-danger); border-color: #F2B8CB; }

.k-btn:disabled { opacity: .45; cursor: not-allowed; }
.k-btn-sm { min-height: 30px; padding: 0 12px; font-size: 13px; }
.k-btn-lg { min-height: var(--k-tap); padding: 0 24px; font-size: 16px; font-weight: 600; }
.k-btn-block { display: flex; width: 100%; }

/* ==========================================================================
   表单
   ========================================================================== */
.k-field { margin-bottom: var(--k-sp-4); }
.k-field:last-child { margin-bottom: 0; }
.k-label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--k-text-2); margin-bottom: 6px;
}
.k-req { color: var(--k-magenta); margin-left: 2px; }

.k-input, .k-select, .k-textarea {
  width: 100%;
  min-height: var(--k-tap);
  padding: 10px 12px;
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-sm);
  background: var(--k-surface);
  /* 16px 起步，iOS Safari 才不会在聚焦时自动放大页面 */
  font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.k-textarea { min-height: 76px; resize: vertical; line-height: 1.6; }
.k-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23928C9B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.k-input:focus, .k-select:focus, .k-textarea:focus {
  outline: none;
  border-color: var(--k-purple-2);
  box-shadow: 0 0 0 3px rgba(144,76,163,.14);
}
.k-input.is-error, .k-select.is-error {
  border-color: var(--k-magenta);
  box-shadow: 0 0 0 3px rgba(218,47,104,.12);
}
.k-input::placeholder { color: var(--k-text-3); }

/* ==========================================================================
   徽标
   ========================================================================== */
.k-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--k-r-pill);
  font-size: 12px; font-weight: 500; line-height: 1.7;
}
.k-badge-neutral { background: #F0EEF3; color: var(--k-text-2); }
.k-badge-purple  { background: var(--k-purple-50); color: var(--k-purple); }
.k-badge-teal    { background: var(--k-teal-50);   color: #21716C; }
.k-badge-orange  { background: var(--k-orange-50); color: var(--k-warning); }
.k-badge-magenta { background: var(--k-magenta-50);color: #A81B4A; }
.k-badge-blue    { background: var(--k-blue-50);   color: var(--k-info); }

/* ==========================================================================
   提示条
   ========================================================================== */
.k-note {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--k-r-sm);
  font-size: 13px; line-height: 1.6;
  border: 1px solid transparent;
}
.k-note .k-icon { margin-top: 1px; }
.k-note-info    { background: var(--k-blue-50);    color: var(--k-info);    border-color: #BFE0F3; }
.k-note-warning { background: var(--k-orange-50);  color: var(--k-warning); border-color: #F3D5A8; }
.k-note-danger  { background: var(--k-magenta-50); color: #A81B4A;          border-color: #F2B8CB; }
.k-note-success { background: var(--k-teal-50);    color: #21716C;          border-color: #A9DFDC; }

/* ==========================================================================
   浮层提示
   ========================================================================== */
.k-toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  transform: translateX(-50%) translateY(8px);
  background: rgba(29,27,32,.92);
  color: #fff; padding: 11px 18px; border-radius: var(--k-r-sm);
  font-size: 14px; line-height: 1.5; max-width: min(86vw, 420px);
  z-index: 900; box-shadow: var(--k-shadow-2);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.k-toast.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   表格
   ========================================================================== */
.k-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.k-table { font-size: 13.5px; }
.k-table th {
  background: var(--k-purple-50);
  color: var(--k-purple);
  font-weight: 600; font-size: 12.5px;
  padding: 10px 10px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--k-purple-100);
}
.k-table td {
  padding: 10px; text-align: center;
  border-bottom: 1px solid var(--k-line);
  color: var(--k-text);
}
.k-table tbody tr:hover td { background: var(--k-surface-2); }
.k-table .t-left { text-align: left; }

.k-empty {
  text-align: center; color: var(--k-text-3);
  padding: 36px 0; font-size: 13.5px;
}

/* ==========================================================================
   弹窗
   ========================================================================== */
.k-modal-mask {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(29,27,32,.5);
  display: none; align-items: center; justify-content: center;
  padding: var(--k-sp-4);
  backdrop-filter: blur(2px);
}
.k-modal-mask.is-open { display: flex; }
.k-modal {
  background: var(--k-surface);
  border-radius: var(--k-r-lg);
  width: 100%; max-width: 660px; max-height: 88vh;
  overflow-y: auto; padding: var(--k-sp-6);
  box-shadow: var(--k-shadow-2);
}

.k-lightbox {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.9);
  display: none; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.k-lightbox.is-open { display: flex; }
.k-lightbox img { max-width: 94vw; max-height: 92vh; }

/* ==========================================================================
   无障碍
   ========================================================================== */
.k-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--k-purple-2); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}