:root { --border:#e5e7eb; --text:#0f172a; --muted:#6b7280; --up:#ef4444; --down:#16a34a; --brand:#2563eb; --bg:#0b1220; --card:#0f172a; --card2:#111827; --ring: rgba(37,99,235,.35); --glass-bg: rgba(255,255,255,.06); --glass-border: rgba(255,255,255,.18); --glass-shadow: 0 10px 30px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.04); }
* { box-sizing: border-box; }
.container { max-width: 1200px; margin: 0 auto; padding: 24px; position: relative; z-index: 1; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial; margin: 0; color: #e5e7eb; background:
  radial-gradient(1200px 600px at -10% 0%, rgba(59,130,246,.10), transparent 60%),
  radial-gradient(1200px 600px at 110% 10%, rgba(147,51,234,.10), transparent 60%),
  linear-gradient(180deg, #0b1220 0%, #0b1220 100%);
}
/* 液态背景气泡 */
body::before, body::after { content:""; position: fixed; inset:auto; pointer-events:none; z-index:0; border-radius: 50%; filter: blur(48px); opacity:.18; }
body::before { width: 38vw; height: 38vw; top: -10vh; left: -6vw; background: radial-gradient(closest-side, rgba(59,130,246,.6), rgba(59,130,246,0) 70%); animation: float1 28s ease-in-out infinite alternate; }
body::after  { width: 46vw; height: 46vw; bottom: -12vh; right: -8vw; background: radial-gradient(closest-side, rgba(147,51,234,.6), rgba(147,51,234,0) 70%); animation: float2 36s ease-in-out infinite alternate; }
@keyframes float1 { from { transform: translateY(0) translateX(0);} to { transform: translateY(20px) translateX(10px);} }
@keyframes float2 { from { transform: translateY(0) translateX(0);} to { transform: translateY(-24px) translateX(-12px);} }
.header { position: relative; padding: 18px 20px; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); box-shadow: var(--glass-shadow); text-align: center;
  overflow: hidden;
}
.header.fancy::after { content:""; position:absolute; inset:-1px; pointer-events:none; border-radius:16px; padding:1px; background: linear-gradient(90deg, rgba(37,99,235,.6), rgba(236,72,153,.6), rgba(99,102,241,.6)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.header h1 { margin: 0 0 8px; color:#fff; letter-spacing:.2px; }
.header .desc { color: var(--muted); margin: 6px 0 0; }
.nav { display:flex; gap:12px; align-items:center; justify-content:center; margin-bottom:6px; }
.nav a { display:inline-block; padding:6px 10px; border-radius:10px; text-decoration:none; color:#c7d2fe; background: rgba(59,130,246,.10); border:1px solid rgba(59,130,246,.2); transition: all .2s ease; backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); }
.nav a:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,.25); }
.nav a.logout { color:#fecaca; background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.2); }
/* 出售链接区域 */
.sell-links { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.sell-links .buy-btn { padding: 8px 16px; }

.threshold, .topn { margin-top: 10px; }
.threshold input { width: 180px; }
.threshold .muted, .topn .muted { color: var(--muted); margin-left: 8px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0 12px; }
.cards.two-col { grid-template-columns: repeat(2, 1fr); }
.cards.three-col { grid-template-columns: repeat(3, 1fr); }
.cards.small { grid-template-columns: repeat(4, 1fr); }
.animated-grid > .card, .animated-grid > .chart { animation: cardIn .5s ease both; }
@keyframes cardIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.card { position: relative; padding: 14px 16px; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass-bg); box-shadow: var(--glass-shadow); text-align: center; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.card::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit; background:
  radial-gradient(120px 80px at 10% 10%, rgba(255,255,255,.22), rgba(255,255,255,0)),
  radial-gradient(180px 120px at 90% 10%, rgba(255,255,255,.10), rgba(255,255,255,0)); opacity:.35; }
.card .k { color: #a1a1aa; font-size: 12px; }
.card .v { font-size: 28px; margin-top: 6px; color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.card .sub { font-size: 12px; margin-top: 4px; color:#a1a1aa; }
.card .up { color: var(--up); }
.card .down { color: var(--down); }
table { position: relative; width: 100%; border-collapse: collapse; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; overflow: hidden; color:#e5e7eb; box-shadow: var(--glass-shadow); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); }
table::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit; background: radial-gradient(200px 120px at 0% 0%, rgba(255,255,255,.18), rgba(255,255,255,0)); opacity:.3; }
th, td { border-bottom: 1px solid rgba(255,255,255,.06); padding: 10px 8px; text-align: left; }
#liveTable th, #liveTable td { text-align: center; }
/* 日均值表格居中 */
#dayAvgTable th, #dayAvgTable td { text-align: center; }
thead th { background: rgba(255,255,255,.04); }
.charts { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
.chart { position: relative; height: 340px; border: 1px solid var(--glass-border); border-radius: 16px; padding: 8px; background: var(--glass-bg); box-shadow: var(--glass-shadow); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.chart::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit; background:
  radial-gradient(220px 140px at 100% 0%, rgba(255,255,255,.10), rgba(255,255,255,0)); opacity:.35; }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
table { min-width: 640px; }
.pager button { margin-left: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color:#e5e7eb; padding:6px 10px; border-radius:10px; cursor:pointer; transition: all .2s ease; backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); }
.pager button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
/* 始终竖排显示折线图 */
@media (min-width: 1100px){ .charts { grid-template-columns: 1fr; } }
.up{ color: var(--up); } .down{ color: var(--down); }

/* 登录页 */
body.login { display:flex; align-items:center; justify-content:center; min-height:100vh; margin:0; background: radial-gradient(800px 400px at -10% 0%, rgba(59,130,246,.10), transparent 60%), linear-gradient(180deg, #0b1220 0%, #0b1220 100%); color:#e5e7eb; }
.login-card { position: relative; width: 360px; padding: 22px; border:1px solid var(--glass-border); border-radius:16px; background: var(--glass-bg); box-shadow: var(--glass-shadow); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
.login-card::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit; background: radial-gradient(160px 100px at 100% 0%, rgba(255,255,255,.2), rgba(255,255,255,0)); opacity:.35; }
.login-card h2 { margin:0 0 12px; }
.login-card label { display:block; font-size:12px; color:#a1a1aa; margin-top:10px; }
.login-card input { width:100%; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:10px; margin-top:6px; background: rgba(255,255,255,.04); color:#e5e7eb; outline: none; transition: box-shadow .2s ease; }
.login-card input:focus { box-shadow: 0 0 0 4px var(--ring); border-color: rgba(37,99,235,.4); }
.login-card button { width:100%; margin-top:14px; padding:10px; border:0; border-radius:10px; background: linear-gradient(90deg, #2563eb, #7c3aed); color:#fff; cursor:pointer; box-shadow: 0 10px 20px rgba(37,99,235,.25); transition: transform .15s ease, box-shadow .15s ease; }
.login-card button:hover { transform: translateY(-1px); box-shadow: 0 16px 24px rgba(37,99,235,.35); }
.login-card .error { color:#fecaca; margin-top:10px; }
.login-card .tip { margin-top:8px; }

/* 登录/注册页链接在深浅主题下都清晰可读 */
.link-soft { color:#93c5fd; text-decoration:none; }
.link-soft:hover { text-decoration:underline; }
html[data-theme="light"] .link-soft { color:#2563eb; }

/* 表头标题 */
.section-title { margin: 18px 6px; color:#fff; letter-spacing:.2px; }

/* 输入控件统一化 */
/* 隐藏浏览器默认 number 小箭头 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

input[type="number"], input[type="text"], input[type="password"] {
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:#e5e7eb; border-radius:10px; padding:8px 10px; outline:none; transition: box-shadow .2s ease;
}
input[type="number"]:focus, input[type="text"]:focus, input[type="password"]:focus { box-shadow: 0 0 0 4px var(--ring); border-color: rgba(37,99,235,.4); }
/* 头部内的操作区居中 */
.header .threshold, .header .topn { display:flex; align-items:center; justify-content:center; flex-wrap: wrap; gap: 8px; }

/* 移动端适配 */
@media (max-width: 640px){
  .container { padding: 12px; }
  .header { padding: 12px 12px; }
  .nav { flex-wrap: wrap; gap: 8px; }
  .theme-toggle { width: 28px; height: 28px; }
  .cards, .cards.two-col, .cards.three-col, .cards.small { grid-template-columns: 1fr; }
  .card { padding: 12px; }
  .card .v { font-size: 22px; }
  .chart { height: 260px; }
  table { min-width: 520px; }
  .number-control .icon-btn { width: 26px; height: 26px; }
  #topNInput { width: 80px; }
}

/* 通用按钮样式 */
.btn { display:inline-block; padding:8px 12px; border-radius:10px; font-weight:600; border:1px solid transparent; cursor:pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); }
.btn:focus { outline:none; box-shadow: 0 0 0 4px var(--ring); }
.btn-primary { background: linear-gradient(90deg,#22c55e,#10b981); color:#0b1220; border-color: rgba(34,197,94,.7); box-shadow: 0 8px 18px rgba(16,185,129,.25); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(16,185,129,.35); }
.btn-secondary { background: rgba(255,255,255,.10); color:#e5e7eb; border-color: rgba(255,255,255,.24); }
.btn-secondary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.25); }

/* 数字步进控件 */
.number-control { display:inline-flex; align-items:center; gap:6px; }
.icon-btn { width:28px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color:#e5e7eb; cursor:pointer; backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); }
.icon-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.25); }

/* 动效：数据闪烁提示 */
.flash { animation: flash 0.6s ease; }
@keyframes flash { 0%{ box-shadow: 0 0 0 0 rgba(37,99,235,.0); } 30%{ box-shadow: 0 0 0 6px rgba(37,99,235,.25); } 100%{ box-shadow: 0 0 0 0 rgba(37,99,235,.0);} }

/* 新订单插入动画（丝滑） */
tbody tr.row-enter { animation: rowEnter 600ms ease-out; }
@keyframes rowEnter {
  0% { opacity: 0; background: rgba(245, 158, 11, 0.14); }
  100% { opacity: 1; background: transparent; }
}

/* 购买按钮高对比样式（避免蓝紫） */
.buy-btn { display:inline-block; padding:6px 12px; border-radius:10px; text-decoration:none; background: linear-gradient(90deg,#fde68a,#fcd34d); color:#111827; font-weight:700; border: 1px solid rgba(252,211,77,.9); transition: transform .15s ease; }
.buy-btn:hover { transform: translateY(-1px); }
.buy-btn:active { transform: translateY(0); }

/* 主题切换按钮 */
.theme-toggle { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color:#e5e7eb; cursor:pointer; margin-left:6px; }
.theme-toggle:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.theme-toggle.fix { position: fixed; top: 16px; right: 16px; z-index: 999; }

/* 亮色主题覆盖（当 html[data-theme="light"] 存在时） */
html[data-theme="light"] body { color:#0f172a; background: radial-gradient(800px 400px at -10% 0%, rgba(59,130,246,.06), transparent 60%), linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); }
html[data-theme="light"] .header { background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)); border-color: rgba(0,0,0,.06); box-shadow: 0 20px 40px rgba(0,0,0,.04) inset, 0 10px 30px rgba(0,0,0,.04); }
html[data-theme="light"] .header h1 { color:#0f172a; }
html[data-theme="light"] .nav a { color:#1d4ed8; background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.22); }

html[data-theme="light"] .nav a.logout { color:#b91c1c; }
html[data-theme="light"] .card { border-color:#e5e7eb; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)); box-shadow: 0 10px 30px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6); }
html[data-theme="light"] .card .k, html[data-theme="light"] .card .sub { color:#6b7280; }
html[data-theme="light"] .card .v { color:#0f172a; text-shadow: none; }
html[data-theme="light"] table { background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)); border-color:#e5e7eb; color:#0f172a; box-shadow: 0 10px 30px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6); }
html[data-theme="light"] thead th { background:#f3f4f6; }
html[data-theme="light"] th, html[data-theme="light"] td { border-bottom:1px solid #e5e7eb; }
html[data-theme="light"] .chart { border-color:#e5e7eb; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)); box-shadow: 0 10px 30px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6); }
html[data-theme="light"] .pager button { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); color:#0f172a; }
html[data-theme="light"] input[type="number"], html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="password"] { background:#ffffff; border-color:#e5e7eb; color:#0f172a; }
html[data-theme="light"] .btn-secondary { background: rgba(0,0,0,.04); color:#0f172a; border-color: rgba(0,0,0,.16); }
html[data-theme="light"] .theme-toggle { border:1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.04); color:#0f172a; }
html[data-theme="light"] body.login { background: radial-gradient(800px 400px at -10% 0%, rgba(59,130,246,.06), transparent 60%), linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); color:#0f172a; }
html[data-theme="light"] .login-card { border-color:#e5e7eb; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)); box-shadow: 0 10px 30px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6); }
html[data-theme="light"] .login-card label { color:#6b7280; }
html[data-theme="light"] .login-card input { background:#ffffff; border-color:#e5e7eb; color:#0f172a; }