/* ============================================================================
 * theme-xhja.css —— 「徐宏江的小站」视觉皮肤层
 * ───────────────────────────────────────────────────────────────
 * 对齐站点交接文档「设计规范」：
 *   背景 linear-gradient(135deg,#e8f4fd,#b8dff5,#7ec8e3)
 *   卡片 rgba(255,255,255,.9) + backdrop-filter:blur(16px) + radius 28px + 轻阴影
 *   主色 #4290f5 → 渐变 #5a7ef5
 *
 * 加载位置：所有 CSS 与内联 <style> 之后（</body> 前），保证本层优先级最高。
 * 边界：只做视觉，不触碰任何计算逻辑与 DOM 结构。
 * ============================================================================ */

/* ============ 1. 页面底色与字体 ============ */
html {
  background-color: var(--primary-light);
}

body {
  background-color: var(--primary-light);
  background-image: var(--page-gradient);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  color: var(--gray-700);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", sans-serif;
}

/* ============ 2. 玻璃拟态卡片 ============ */
.calc-block,
.result-section,
.result-cards,
.custom-panel,
.brace-panel {
  background: var(--card-bg);
  -webkit-backdrop-filter: var(--card-blur);
  backdrop-filter: var(--card-blur);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  /* 不用 overflow:hidden —— 会裁掉参数区的下拉面板 */
}

/* 卡片头部：跟随卡片上圆角 */
.calc-block > .block-header,
.result-section > .section-title {
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: var(--primary-50);
  color: var(--primary-dark);
  border-bottom: 1px solid var(--gray-200);
  font-weight: 500;
}

.calc-block > .block-header i,
.result-section > .section-title i,
.calc-block > .block-header .fas,
.result-section > .section-title .fas {
  color: var(--primary);
}

/* 卡片内容留白，避免贴到圆角 */
.calc-block > .block-content,
.result-section > .result-toolbar,
.result-section > .result-cards,
.result-section > .result-area {
  padding-left: 18px;
  padding-right: 18px;
}

.result-section > .result-area {
  padding-bottom: 18px;
}

/* ============ 3. 表单控件 ============ */
.param-table input,
.param-table select,
.block-content input,
.block-content select,
.block-content textarea,
select,
input[type="text"],
input[type="number"] {
  border-radius: var(--control-radius) !important;
  border: 1px solid var(--gray-300);
  padding: 7px 10px;
  color: var(--gray-900);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.param-table input:focus,
.block-content input:focus,
.block-content select:focus,
select:focus,
input[type="text"]:focus,
input[type="number"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(66, 144, 245, .15);
}

/* ============ 4. 按钮 ============ */
.btn,
.tool-btn,
.btn-secondary {
  border-radius: var(--control-radius) !important;
  border: 1px solid var(--gray-200);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-primary,
.btn-success {
  background: var(--brand-gradient) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(66, 144, 245, .28);
}

.btn-primary:hover,
.btn-success:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(66, 144, 245, .34);
}

.btn-primary:active,
.btn-success:active {
  transform: translateY(0);
  filter: brightness(.96);
}

.btn-warning {
  background: var(--warning) !important;
  border: none !important;
  color: #fff !important;
}

.btn-info {
  background: var(--info) !important;
  border: none !important;
  color: #fff !important;
}

/* ============ 5. 结果区细节 ============ */
.result-toolbar {
  background: transparent;
  color: var(--gray-700);
}

.result-cards {
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--gray-200);
}

.result-table {
  border-radius: var(--control-radius);
  overflow: hidden;
}

.result-table th {
  background: var(--primary-50);
  color: var(--primary-dark);
  font-weight: 500;
}

/* 状态徽标：通过=绿 / 不通过=红（非金融场景，不用 A 股红涨绿跌） */
.badge-success,
.result-pass {
  background: var(--success-50);
  color: var(--success);
}

.badge-danger,
.result-fail {
  background: var(--danger-50);
  color: var(--danger);
}

/* ============ 6. 站点顶栏（品牌条） ============ */
.xhja-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(66, 144, 245, .18);
  box-shadow: 0 2px 12px rgba(31, 64, 104, .06);
}
.xhja-topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.xhja-brand {
  font-weight: 600;
  color: var(--primary, #4290f5);
  text-decoration: none;
}
.xhja-brand:hover { text-decoration: none; }
.xhja-sep { color: #9fb3c8; }
.xhja-page { color: #2d3748; font-weight: 500; }

/* ============ 7. 小屏适配 ============ */
@media (max-width: 768px) {
  .calc-block,
  .result-section,
  .result-cards {
    border-radius: 18px;
  }

  .calc-block > .block-header,
  .result-section > .section-title {
    border-radius: 18px 18px 0 0;
  }

  .calc-block > .block-content,
  .result-section > .result-toolbar,
  .result-section > .result-cards,
  .result-section > .result-area {
    padding-left: 12px;
    padding-right: 12px;
  }
}