/* ============================================================
   Ratio — 贷款利率计算器
   纯 CSS：现代浅色风格，卡片式布局，响应式（支持手机端）
   ============================================================ */

:root {
  --bg: #f3f5f9;
  --card: #ffffff;
  --border: #e3e8f0;
  --text: #1f2733;
  --text-2: #5b6675;
  --text-3: #8b94a3;
  --accent: #2563eb;
  --accent-soft: #eaf1ff;
  --accent-dark: #1d4ed8;
  --green: #16a34a;
  --green-soft: #e8f7ee;
  --green-dark: #15803d;
  --red: #dc2626;
  --input-bg: #fbfcfe;
  --row-bg: #f7f9fc;
  --th-bg: #eef2f9;
  --row-alt: #fafbfe;
  --border-soft: #f0f3f8;
  --hl-bg: #fef3c7;
  --danger-soft: #fee2e2;
  --accent-rgb: 37, 99, 235;
  --green-rgb: 22, 163, 74;
  --header-grad: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  --radius: 12px;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --mono: "SF Mono", "Menlo", "Consolas", monospace;
}

/* 深色主题（跟随系统偏好） */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --card: #151e2e;
    --border: #2b3a52;
    --text: #e2e8f0;
    --text-2: #9fb0c3;
    --text-3: #64748b;
    --accent: #3b82f6;
    --accent-soft: #1d2f4d;
    --accent-dark: #93c5fd;
    --green: #22c55e;
    --green-soft: #13301f;
    --green-dark: #86efac;
    --red: #f87171;
    --input-bg: #0f1a2b;
    --row-bg: #111c2e;
    --th-bg: #1a2638;
    --row-alt: #131f30;
    --border-soft: #223048;
    --hl-bg: #3d3410;
    --danger-soft: #4a1f1f;
    --accent-rgb: 59, 130, 246;
    --green-rgb: 34, 197, 94;
    --header-grad: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* body 始终占满视口宽度（防内容溢出撑宽导致 header 占不满） */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

html { font-size: 15px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* ── 顶栏 ─────────────────────────────── */
.app-header {
  width: 100%;
  background: var(--header-grad);
  color: #fff;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800;
}
.app-header h1 { font-size: 20px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; }
.brand-sub { font-size: 13px; font-weight: 400; opacity: 0.85; }
.tagline { font-size: 12px; opacity: 0.85; }

/* ── 布局 ─────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 20px 32px;
  max-width: 1560px;
  margin: 0 auto;
  align-items: start;
}

/* ── 卡片 ─────────────────────────────── */
.card, .table-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.card h2, .table-card h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ── 表单控件（紧凑） ─────────────────── */
.field { margin-bottom: 10px; }
.field:last-child { margin-bottom: 0; }
.field > label {
  display: block;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 4px;
}

/* 两列并排（如：期限 + 开始时间） */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field-row .field { margin-bottom: 0; }

.field input[type="number"] {
  width: 100%;
  padding: 7px 9px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.radio-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}
.radio-row input[type="radio"] { accent-color: var(--accent); width: 14px; height: 14px; }

.ym-picker { display: flex; align-items: center; gap: 4px; }
.ym-picker select {
  padding: 6px 6px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.ym-picker .unit { color: var(--text-3); font-size: 12px; }

.hint { font-size: 11.5px; color: var(--text-3); margin-bottom: 8px; }

/* ── 动态列表（利率区间 / 提前还贷，紧凑） ── */
.rate-list, .prepay-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

.rate-row, .prepay-row {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--row-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 7px;
}
/* 分段利率：单行显示（不换行），控件紧凑固定宽度 */
.rate-row {
  flex-wrap: nowrap;
  padding: 4px 6px;
}
.prepay-row { flex-wrap: wrap; }
.rate-row select, .prepay-row select {
  padding: 4px 4px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
}
.rate-row select {
  flex: 0 0 auto;
  width: 52px;             /* 年份 */
  padding: 3px 2px;
}
.rate-row .ry { width: 52px; }   /* 年份（显式类） */
.rate-row .rm { width: 44px; }  /* 月份 */
.prepay-row select { flex: 1; min-width: 0; }
.rate-row input, .prepay-row input {
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
}
.rate-row input {
  width: 56px;             /* 利率 */
  padding: 3px 4px;
}
.prepay-row .prepay-amount { width: 92px; }
.rate-row .lbl, .prepay-row .lbl { font-size: 11px; color: var(--text-3); }

.btn-del {
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 6px;
  line-height: 1;
}
.btn-del:hover { background: var(--danger-soft); color: var(--red); }

.btn-add {
  border: 1px dashed var(--accent);
  color: var(--accent);
  background: transparent;
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12.5px;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}
.btn-add:hover { background: var(--accent-soft); }

/* ── 结果区：横向 tab + 内容 ──────────── */
.results-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.result-content {
  flex: 1;
  min-width: 0;
}

/* 横向 tab 栏（未提前还款=蓝 / 提前还款=绿，不同背景色标记） */
.v-tabs {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}
.v-tab {
  flex: 1;
  border: 1px solid var(--border);
  border-top: 4px solid transparent;
  border-radius: 10px;
  padding: 10px 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  line-height: 1.35;
  transition: all 0.15s;
  background: var(--card);
  color: var(--text-2);
}
/* 未提前还款：蓝色标记 */
.v-tab-base {
  border-top-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.v-tab-base.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.35);
}
/* 提前还款：绿色标记 */
.v-tab-prepay {
  border-top-color: var(--green);
  background: var(--green-soft);
  color: var(--green-dark);
}
.v-tab-prepay.active {
  background: var(--green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--green-rgb), 0.35);
}
.v-tab:hover { filter: brightness(0.97); }
.v-tab.active:hover { filter: none; }

/* ── 汇总卡片 ─────────────────────────── */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.sum-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 11px 14px;
}
.sum-item .k { font-size: 11.5px; color: var(--text-2); margin-bottom: 5px; }
.sum-item .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sum-item .v small { font-size: 11px; font-weight: 400; color: var(--text-3); margin-left: 3px; }
.sum-item.accent .v { color: var(--accent); }
.sum-item.green .v { color: var(--green); }
.sum-item.red .v { color: var(--red); }

/* ── 视图切换（混合贷款：合计/公积金/商业） ── */
.view-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 12px;
}
.view-tabs .tab {
  border: none;
  background: transparent;
  padding: 5px 16px;
  font-size: 13px;
  border-radius: 7px;
  color: var(--text-2);
  cursor: pointer;
}
.view-tabs .tab.active { background: var(--accent); color: #fff; font-weight: 600; }

/* ── 表格 ─────────────────────────────── */
.table-card { padding: 0; overflow: hidden; }
.table-card h2 { padding: 12px 16px; margin: 0; background: var(--row-alt); }
.table-wrap {
  max-height: 570px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.plan-table th {
  position: sticky;
  top: 0;
  background: var(--th-bg);
  color: var(--text-2);
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  z-index: 1;
}
.plan-table th.num, .plan-table td.num { text-align: right; font-family: var(--mono); }
.plan-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  white-space: nowrap;
}
.plan-table tbody tr:nth-child(even) { background: var(--row-alt); }
.plan-table tbody tr:hover { background: var(--accent-soft); }
.plan-table td.remain { color: var(--text-2); }
.plan-table td.interest-col { color: var(--red); }
.plan-table td.principal-col { color: var(--green); }
.plan-table td.total-col { font-weight: 600; }
.plan-table tr.hl-row td { background: var(--hl-bg) !important; }
.plan-table td.prepay-flag { color: var(--accent); font-weight: 700; }

.empty-tip { padding: 26px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ── 页脚 ─────────────────────────────── */
.app-footer {
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  padding: 0 20px 22px;
}

/* ════════════ 手机端（≤ 900px） ════════════ */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; padding: 12px 14px 24px; }
  /* 顶部栏右侧 tagline 在手机上易遮挡，隐藏；padding 与内容对齐 */
  .tagline { display: none; }
  .app-header { padding: 12px 14px; }

  .summary { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .field-row { grid-template-columns: 1fr 1fr; }
  .table-wrap { max-height: 560px; }
  /* 表格超宽时横向滚动 */
  .table-wrap { overflow-x: auto; }
  .plan-table { min-width: 640px; }
}

/* 窄屏手机（≤ 480px）：单列输入；利率区间行允许折行，保证完整可见 */
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
  .summary { grid-template-columns: 1fr 1fr; }
  .rate-row { flex-wrap: wrap; }
}

/* 更小屏（≤ 360px）：汇总卡片单列全宽 */
@media (max-width: 360px) {
  .summary { grid-template-columns: 1fr; }
}