/* ── Reset & Variables ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --p:       #7c3aed;   /* 主色 紫 */
  --ph:      #6d28d9;
  --pl:      #ede9fe;
  --gold:    #f59e0b;
  --gl:      #fef3c7;
  --success: #10b981;
  --danger:  #ef4444;
  --warn:    #f59e0b;
  --bg:      #f5f4f8;
  --card:    #ffffff;
  --border:  #e5e7eb;
  --text:    #111827;
  --sub:     #6b7280;
  --r:       12px;
  --shadow:  0 2px 20px rgba(0,0,0,.07);
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.65; }

/* ── NAV ───────────────────────────────────────────────── */
.nav { background: #fff; border-bottom: 1px solid var(--border); height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; position: sticky; top: 0; z-index: 200; box-shadow: 0 1px 8px rgba(0,0,0,.05); }
.nav-logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 800; font-size: 1.1rem; color: var(--p); }
.nav-logo img { width: 32px; height: 32px; border-radius: 8px; }
.nav-menu { display: flex; align-items: center; gap: .2rem; }
.nav-menu a { padding: .4rem .85rem; border-radius: 8px; text-decoration: none; color: var(--sub); font-size: .9rem; font-weight: 500; transition: all .18s; }
.nav-menu a:hover, .nav-menu a.active { color: var(--p); background: var(--pl); }
.nav-right { display: flex; align-items: center; gap: .8rem; }
.nav-gongde { background: var(--gl); color: #92400e; padding: .3rem .85rem; border-radius: 20px; font-size: .82rem; font-weight: 700; }
.vip-badge { background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; padding: .2rem .6rem; border-radius: 12px; font-size: .72rem; font-weight: 700; }

/* ── LAYOUT ────────────────────────────────────────────── */
.wrap   { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.wrap-sm{ max-width: 560px;  margin: 0 auto; padding: 2rem 1.5rem; }
.wrap-md{ max-width: 780px;  margin: 0 auto; padding: 2rem 1.5rem; }
.page-head { margin-bottom: 1.8rem; }
.page-head h1 { font-size: 1.7rem; font-weight: 800; }
.page-head p  { color: var(--sub); margin-top: .3rem; }

/* ── CARD ──────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.8rem; }
.card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 1.3rem; display: flex; align-items: center; gap: .5rem; }
.card + .card { margin-top: 1.2rem; }

/* ── FORM ──────────────────────────────────────────────── */
.form-row { display: grid; gap: 1rem; }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
label.fl { font-size: .83rem; font-weight: 600; color: var(--sub); }
.fc { width: 100%; padding: .6rem .95rem; border: 1.5px solid var(--border); border-radius: 8px; font-size: .93rem; outline: none; transition: border .18s; background: #fff; color: var(--text); }
.fc:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
select.fc { cursor: pointer; }
.hint { font-size: .78rem; color: var(--sub); }

/* ── BUTTONS ───────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem 1.4rem; border-radius: 9px; font-size: .92rem; font-weight: 600; cursor: pointer; border: none; transition: all .18s; text-decoration: none; white-space: nowrap; }
.btn-p  { background: var(--p);    color: #fff; }
.btn-p:hover  { background: var(--ph); transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #d97706; }
.btn-o  { background: #fff; border: 1.5px solid var(--border); color: var(--text); }
.btn-o:hover  { border-color: var(--p); color: var(--p); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: .35rem .85rem; font-size: .82rem; }
.btn-block { width: 100%; }

/* ── ALERT ─────────────────────────────────────────────── */
.alert { padding: .75rem 1rem; border-radius: 9px; font-size: .88rem; margin-bottom: 1rem; }
.alert-ok  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-info{ background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.alert-warn{ background: var(--gl); color: #92400e; border: 1px solid #fde68a; }

/* ── TABLE ─────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th,td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
th { font-weight: 600; color: var(--sub); background: var(--bg); white-space: nowrap; }
tr:hover td { background: #faf9ff; }

/* ── GRID ──────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
@media(max-width:768px){ .grid-2,.grid-3,.grid-4,.form-row-2,.form-row-3{ grid-template-columns:1fr; } }

/* ── STAT CARD ─────────────────────────────────────────── */
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 1.3rem 1.5rem; }
.stat-label { font-size: .78rem; color: var(--sub); margin-bottom: .3rem; }
.stat-value { font-size: 1.9rem; font-weight: 800; color: var(--p); }

/* ── TOOL CARDS ────────────────────────────────────────── */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1.2rem; }
.tool-card { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r); padding: 1.6rem 1.3rem; text-align: center; text-decoration: none; color: var(--text); transition: all .2s; cursor: pointer; }
.tool-card:hover { border-color: var(--p); box-shadow: 0 4px 20px rgba(124,58,237,.12); transform: translateY(-3px); }
.tool-card .ti { font-size: 2.5rem; margin-bottom: .6rem; }
.tool-card h3 { font-size: 1rem; font-weight: 700; }
.tool-card p  { font-size: .78rem; color: var(--sub); margin-top: .3rem; }
.tool-card .cost { font-size: .75rem; color: var(--p); font-weight: 600; margin-top: .5rem; background: var(--pl); padding: .2rem .6rem; border-radius: 10px; display: inline-block; }

/* ── RESULT AREA ───────────────────────────────────────── */
.result-box { background: #faf9ff; border: 1.5px solid var(--pl); border-radius: var(--r); padding: 1.5rem; margin-top: 1.2rem; display: none; }
.result-box.show { display: block; }
.result-box h3 { font-size: 1rem; font-weight: 700; color: var(--p); margin-bottom: 1rem; }
.result-content { line-height: 1.8; font-size: .93rem; }

/* ── MARKDOWN RENDER ───────────────────────────────────── */
.result-content .md-h2,
.msg-body .md-h2 { font-size: 1.1rem; font-weight: 800; color: var(--p); margin: 1.1rem 0 .4rem; padding-bottom: .25rem; border-bottom: 1px solid var(--border); }
.result-content .md-h3,
.msg-body .md-h3 { font-size: 1rem; font-weight: 700; color: var(--p); margin: .9rem 0 .3rem; }
.result-content .md-h4,
.msg-body .md-h4 { font-size: .95rem; font-weight: 700; color: var(--text); margin: .7rem 0 .25rem; }
.result-content .md-p,
.msg-body .md-p { margin: .35rem 0; line-height: 1.85; }
.result-content .md-ul,
.result-content .md-ol,
.msg-body .md-ul,
.msg-body .md-ol { padding-left: 1.4rem; margin: .4rem 0; }
.result-content .md-ul li,
.result-content .md-ol li,
.msg-body .md-ul li,
.msg-body .md-ol li { margin: .2rem 0; line-height: 1.75; }
.result-content .md-pre,
.msg-body .md-pre { background: #1e1e2e; border-radius: 8px; padding: .9rem 1.1rem; margin: .7rem 0; overflow-x: auto; }
.result-content .md-pre code,
.msg-body .md-pre code { font-family: 'Consolas','Monaco',monospace; font-size: .82rem; color: #cdd6f4; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
.result-content .md-ic,
.msg-body .md-ic { background: var(--pl); color: var(--p); padding: .1rem .38rem; border-radius: 4px; font-family: monospace; font-size: .85em; }
.result-content .md-hr,
.msg-body .md-hr { border: none; border-top: 1px solid var(--border); margin: .9rem 0; }
.result-content .md-gap,
.msg-body .md-gap { height: .45rem; }
/* 去掉首尾多余间距 */
.result-content > *:first-child,
.msg-body > *:first-child { margin-top: 0 !important; }
.result-content > *:last-child,
.msg-body > *:last-child { margin-bottom: 0 !important; }

/* ── KLINE CHART ───────────────────────────────────────── */
#kline-chart { width: 100%; height: 420px; }

/* ── AUTH ──────────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: 2.5rem 2.2rem; width: 100%; max-width: 430px; }
.auth-logo { text-align: center; margin-bottom: 2rem; }
.auth-logo .al { font-size: 2.8rem; }
.auth-logo h2 { font-size: 1.4rem; font-weight: 800; color: var(--p); margin-top: .4rem; }
.auth-switch { text-align: center; margin-top: 1.2rem; font-size: .86rem; color: var(--sub); }
.auth-switch a { color: var(--p); font-weight: 600; }

/* ── ADMIN LAYOUT ──────────────────────────────────────── */
.admin-wrap { display: flex; min-height: calc(100vh - 62px); }
.aside { width: 220px; background: var(--card); border-right: 1px solid var(--border); padding: 1.5rem 1rem; flex-shrink: 0; }
.aside-group { margin-bottom: 1.5rem; }
.aside-label { font-size: .72rem; font-weight: 700; color: var(--sub); letter-spacing: .07em; text-transform: uppercase; padding: 0 .8rem; margin-bottom: .4rem; }
.aside a { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: 8px; text-decoration: none; color: var(--sub); font-size: .88rem; margin-bottom: .1rem; transition: all .15s; }
.aside a:hover, .aside a.on { background: var(--pl); color: var(--p); font-weight: 600; }
.admin-main { flex: 1; padding: 2rem; overflow-x: auto; }

/* ── SPINNER ───────────────────────────────────────────── */
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: sp .65s linear infinite; vertical-align: middle; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ── TABS ──────────────────────────────────────────────── */
.tabs { display: flex; gap: .3rem; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
.tab { padding: .55rem 1.1rem; font-size: .9rem; font-weight: 600; cursor: pointer; border: none; background: none; color: var(--sub); border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 8px 8px 0 0; transition: all .18s; }
.tab.on { color: var(--p); border-bottom-color: var(--p); background: var(--pl); }

/* ── MISC ──────────────────────────────────────────────── */
footer { text-align: center; padding: 2rem; color: var(--sub); font-size: .8rem; border-top: 1px solid var(--border); margin-top: 4rem; }
.mono { font-family: monospace; font-size: .82rem; background: var(--bg); padding: 2px 6px; border-radius: 4px; }
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 10px; font-size: .75rem; font-weight: 700; }
.badge-green { background: #d1fae5; color: #065f46; }
.badge-red   { background: #fee2e2; color: #991b1b; }
.badge-blue  { background: #dbeafe; color: #1e40af; }
.badge-gold  { background: var(--gl); color: #92400e; }
.badge-purple{ background: var(--pl); color: #5b21b6; }
.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}.mt4{margin-top:2rem}
.flex{display:flex}.items-center{align-items:center}.gap1{gap:.5rem}.gap2{gap:1rem}.justify-between{justify-content:space-between}

/* ═══════════════════════════════════════════════
   全站 H5 移动端适配
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 布局容器 ── */
  .wrap, .wrap-md, .wrap-sm { padding: 1rem; }

  /* ── 页头 ── */
  .page-head { margin-bottom: 1.2rem; }
  .page-head h1 { font-size: 1.35rem; }

  /* ── 卡片 ── */
  .card { padding: 1.1rem; border-radius: 10px; }
  .card-title { font-size: .97rem; margin-bottom: 1rem; }

  /* ── 网格 ── */
  .grid-2, .grid-3, .grid-4,
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }

  /* ── 工具卡片 2列 ── */
  .tool-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .tool-card { padding: 1.1rem .8rem; border-radius: 10px; }
  .tool-card .ti { font-size: 2rem; margin-bottom: .4rem; }
  .tool-card h3 { font-size: .88rem; }
  .tool-card p { font-size: .72rem; }

  /* ── 统计卡片 ── */
  .stat-card { padding: 1rem 1.1rem; }
  .stat-value { font-size: 1.6rem; }

  /* ── 首页 Hero ── */
  .hero { padding: 2rem 1rem 1.5rem; }
  .hero h1 { font-size: 2rem !important; }
  .hero p { font-size: .95rem; }
  .hero-btns { gap: .6rem; }
  .hero-btns .btn { padding: .55rem 1.1rem; font-size: .85rem; }

  /* ── 按钮 ── */
  .btn { font-size: .88rem; padding: .55rem 1.1rem; }
  .btn-sm { font-size: .78rem; padding: .3rem .7rem; }

  /* ── 表单 ── */
  .fc { font-size: .9rem; padding: .55rem .85rem; }
  label.fl { font-size: .8rem; }

  /* ── 表格 ── */
  th, td { padding: .55rem .7rem; font-size: .82rem; }

  /* ── 提示条 ── */
  .alert { font-size: .83rem; padding: .65rem .9rem; }

  /* ── 结果框 ── */
  .result-box { padding: 1.1rem; }
  .result-content { font-size: .88rem; }

  /* ── K线图高度 ── */
  #kline-chart { height: 380px; }

  /* ── 四柱 ── */
  .pillars-wrap { gap: .7rem; }
  .pillar-tg { font-size: 2.2rem !important; }
  .pillar-dz { font-size: 1.5rem !important; }

  /* ── Footer ── */
  footer { padding: 1.2rem 1rem; margin-top: 2rem; font-size: .75rem; }

  /* ── 管理后台：侧边栏收折 ── */
  .admin-wrap { flex-direction: column; }
  .aside { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: .8rem; display: flex; flex-wrap: wrap; gap: .3rem; }
  .aside-group { margin-bottom: 0; }
  .aside-group .aside-label { display: none; }
  .aside a { font-size: .8rem; padding: .3rem .7rem; margin-bottom: 0; }
  .admin-main { padding: 1rem; }

  /* ── Chat 高度 ── */
  .chat-wrap { height: calc(100vh - 120px); }

  /* ── 隐藏 flex 辅助在移动端不换行 ── */
  .flex.items-center.justify-between { flex-wrap: wrap; gap: .5rem; }
}

@media (max-width: 480px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .tool-card { padding: .9rem .65rem; }
  .tool-card .ti { font-size: 1.7rem; }
  .hero h1 { font-size: 1.7rem !important; }
  .pillars-wrap { grid-template-columns: repeat(2, 1fr) !important; }
}