/* ============================================================
 * 策略投资 全局 UI 组件库（2026-09-02）
 * 用法：页面 <link rel="stylesheet" href="//static.cltz.vip/css/ui.css">
 * 组件：按钮 / 面包屑 / 卡片 / 表格 / 标签 / 徽章 / 分页 / 表单 / 提示条 / 弹窗 / Toast / 涨跌色
 * 统一变量：主色 #206798，成功 #0a8f4c，危险 #c0392b，警告 #b8860b，圆角 6/10px
 * ============================================================ */
:root{
  --ui-primary:#206798;
  --ui-primary-light:#86c5e3;
  --ui-primary-bg:#e8f1f8;
  --ui-success:#0a8f4c;
  --ui-danger:#c0392b;
  --ui-warning:#b8860b;
  --ui-gray:#888;
  --ui-border:#e5e9ef;
  --ui-bg:#f5f7fa;
  --ui-radius:6px;
  --ui-shadow:0 4px 20px rgba(0,0,0,.08);
}

/* ================= 按钮 ================= */
.ui-btn{
  display:inline-block;
  border:none;
  border-radius:var(--ui-radius);
  cursor:pointer;
  font-size:1.3rem;
  padding:.7rem 1.4rem;
  text-decoration:none;
  text-align:center;
  line-height:1.4;
  background:#e8f1f8;
  color:#206798;
  transition:opacity .15s,background .15s;
  vertical-align:middle;
}
.ui-btn:hover{opacity:.88;text-decoration:none}
.ui-btn.primary{background:var(--ui-primary);color:#fff}
.ui-btn.success{background:var(--ui-success);color:#fff}
.ui-btn.danger{background:var(--ui-danger);color:#fff}
.ui-btn.warning{background:var(--ui-warning);color:#fff}
.ui-btn.ghost{background:#fff;color:var(--ui-primary);border:1px solid var(--ui-primary-light)}
.ui-btn.ghost-danger{background:#fff;color:var(--ui-danger);border:1px solid #e5c2c2}
.ui-btn.small{padding:.4rem 1rem;font-size:1.2rem}
.ui-btn.block{display:block;width:100%;box-sizing:border-box}
.ui-btn:disabled{opacity:.5;cursor:not-allowed}
.ui-btn + .ui-btn{margin-left:.6rem}
.ui-btn.small + .ui-btn.small{margin-left:.4rem}

/* ================= 面包屑 ================= */
.ui-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;font-size:1.3rem;color:var(--ui-gray);margin-bottom:1.2rem}
.ui-crumb a{color:var(--ui-primary);text-decoration:none}
.ui-crumb a:hover{text-decoration:underline}
.ui-crumb .sep{width:.6rem;height:.6rem;border-left:2px solid #b8c8d6;border-bottom:2px solid #b8c8d6;transform:rotate(-45deg);flex:0 0 auto;margin:0 .2rem}
.ui-crumb .cur{color:#333;font-weight:bold}

/* ================= 卡片 ================= */
.ui-card{background:#fff;border-radius:12px;box-shadow:var(--ui-shadow);padding:2rem 2.4rem;margin-bottom:1.6rem}
.ui-card .ui-card-hd{font-size:1.6rem;color:var(--ui-primary);margin:0 0 1.4rem;border-left:4px solid var(--ui-primary-light);padding-left:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.ui-card .ui-card-hd .sub{font-size:1.2rem;color:#999;font-weight:normal;margin-left:.4rem}
.ui-card .ui-card-hd .right{margin-left:auto}
.ui-card .ui-card-bd{font-size:1.4rem;color:#444}

/* ================= 表格 ================= */
.ui-table{width:100%;border-collapse:collapse;font-size:1.3rem}
.ui-table th{background:#eef4f9;color:var(--ui-primary);padding:.8rem .6rem;text-align:center;border-bottom:2px solid #d4e2ee;white-space:nowrap}
.ui-table td{border-bottom:1px solid #eef1f4;padding:.75rem .6rem;text-align:center;white-space:nowrap}
.ui-table tbody tr:hover td{background:#f7fafd}
.ui-table td.l, .ui-table th.l{text-align:left}
.ui-table td.r, .ui-table th.r{text-align:right}
.ui-table.striped tbody tr:nth-child(even) td{background:#fafcfe}
.ui-table .wrap{white-space:normal;word-break:break-all}
/* 表格横向滚动容器 */
.ui-table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.ui-table-scroll .ui-table{min-width:100%}

/* ================= 标签 / 徽章 ================= */
.ui-tag{display:inline-block;padding:.15rem .6rem;border-radius:4px;font-size:1.15rem;line-height:1.6;vertical-align:middle}
.ui-tag.blue{background:var(--ui-primary-bg);color:var(--ui-primary)}
.ui-tag.green{background:#e6f7ee;color:var(--ui-success)}
.ui-tag.red{background:#fdf0f0;color:var(--ui-danger)}
.ui-tag.orange{background:#fff7e6;color:var(--ui-warning);border:1px solid #f0d9a8}
.ui-tag.gray{background:#eef1f4;color:#7a8a99}
.ui-tag.solid-blue{background:var(--ui-primary);color:#fff}
.ui-badge{display:inline-block;min-width:1.8rem;padding:.15rem .5rem;border-radius:9px;font-size:1.1rem;text-align:center}
.ui-badge.red{background:var(--ui-danger);color:#fff}
.ui-badge.gray{background:#dde3e8;color:#666}

/* ================= 分页 ================= */
.ui-pager{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1.5rem;font-size:1.3rem;color:var(--ui-gray)}
.ui-pager .info{white-space:nowrap}

/* ================= 表单 ================= */
.ui-form .grp{margin-bottom:1.2rem}
.ui-form .grp h4{font-size:1.35rem;color:#333;margin:0 0 .6rem}
.ui-form label.opt{display:inline-flex;align-items:center;gap:.4rem;font-size:1.35rem;color:#444;margin-right:1.2rem;cursor:pointer}
.ui-form input[type=text],.ui-form input[type=number],.ui-form input[type=password],.ui-form input[type=tel],.ui-form select,.ui-form textarea{
  border:1px solid #ddd;border-radius:var(--ui-radius);padding:.85rem 1rem;font-size:1.4rem;outline:none;background:#fff;box-sizing:border-box;color:#333;
}
.ui-form input:focus,.ui-form select:focus,.ui-form textarea:focus{border-color:var(--ui-primary-light)}
.ui-form input.full,.ui-form select.full,.ui-form textarea.full{width:100%}

/* ================= 提示条 ================= */
.ui-alert{border-radius:8px;padding:1rem 1.4rem;font-size:1.35rem;margin-bottom:1.2rem;line-height:1.7}
.ui-alert.info{background:var(--ui-primary-bg);color:var(--ui-primary);border:1px solid #cfe4f5}
.ui-alert.success{background:#e6f7ee;color:var(--ui-success);border:1px solid #bfe6d1}
.ui-alert.warn{background:#fff7e6;color:var(--ui-warning);border:1px solid #f0d9a8}
.ui-alert.error{background:#fdf0f0;color:var(--ui-danger);border:1px solid #f5c6c6}
.ui-alert a{font-weight:bold}

/* ================= 弹窗 ================= */
.ui-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:999;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.ui-dialog{background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.2);max-width:420px;width:100%;animation:ui-pop .18s ease-out}
@keyframes ui-pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.ui-dialog .hd{padding:1.6rem 2rem 0;font-size:1.6rem;color:#333;font-weight:bold;display:flex;justify-content:space-between;align-items:center}
.ui-dialog .hd .x{cursor:pointer;color:#bbb;font-size:2rem;line-height:1}
.ui-dialog .hd .x:hover{color:#888}
.ui-dialog .bd{padding:1.2rem 2rem 1.8rem;font-size:1.4rem;color:#555;line-height:1.8;word-break:break-word}
.ui-dialog .ft{padding:0 2rem 1.8rem;display:flex;justify-content:flex-end;gap:.8rem}

/* ================= Toast ================= */
.ui-toast{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);background:rgba(0,0,0,.78);color:#fff;padding:1rem 1.8rem;border-radius:8px;font-size:1.4rem;z-index:1000;max-width:80vw;text-align:center;animation:ui-fade .2s}
.ui-toast.success{background:rgba(10,143,76,.92)}
.ui-toast.error{background:rgba(192,57,43,.92)}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}

/* ================= 涨跌色（A股红涨绿跌） ================= */
.up{color:#d33}
.down{color:var(--ui-success)}
.flat{color:var(--ui-gray)}

/* ================= 状态占位 ================= */
.ui-empty{text-align:center;color:#aaa;font-size:1.4rem;padding:3rem 0}
.ui-loading{text-align:center;color:#999;font-size:1.4rem;padding:3rem 0}
.ui-loading::before{content:"";display:inline-block;width:1.6rem;height:1.6rem;border:2px solid #cfe4f5;border-top-color:var(--ui-primary);border-radius:50%;animation:ui-spin .8s linear infinite;vertical-align:-.3rem;margin-right:.6rem}
@keyframes ui-spin{to{transform:rotate(360deg)}}

/* ================= 响应式 ================= */
@media (max-width:640px){
  .ui-card{padding:1.6rem 1.2rem}
  .ui-btn{padding:.6rem 1.1rem}
}