/* ============ AI模型市场 SSR 页面公共样式（llm-plans / model-prices / token-index） ============ */
.main.wide{ max-width:1600px; }
.page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.page-head h3, .page-head h1{ font-size:22px; font-weight:800; }
.page-head .sub{ font-size:0.8rem; color:#7c8595; margin-top:4px; }
.page-head .meta{ font-size:12px; color:#a0a6b0; }

/* Tab导航（胶囊样式，页面间链接，当前页 .on） */
.tabs{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.tabs a.tab-btn{ text-decoration:none; }
.tab-btn{ padding:6px 18px; font-size:13px; font-weight:600; cursor:pointer; background:#fff; border:1px solid #e5e7eb; border-radius:16px; color:#6b7280; transition:all .15s; display:inline-block; }
.tab-btn:hover{ border-color:var(--primary); color:var(--primary); }
.tab-btn.active, .tab-btn.on{ background:var(--primary); color:#fff; border-color:var(--primary); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.filter-bar{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.filter-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filter-label{ font-size:12px; color:#7c8595; min-width:36px; flex-shrink:0; }
.filter-btn{ padding:4px 12px; border-radius:14px; font-size:12px; cursor:pointer; background:#fff; border:1px solid #e5e7eb; color:#6b7280; transition:all .15s; white-space:nowrap; }
.filter-btn:hover{ border-color:var(--primary); color:var(--primary); }
.filter-btn.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
#mp-providers .filter-btn{ margin:4px 7px 4px 0; line-height:1.9; }
#mp-providers{ position:relative; flex:1; min-width:0; overflow:hidden; transition:max-height .25s ease; display:flex; flex-wrap:wrap; align-items:center; }
#vendor-filters{ position:relative; flex:1; min-width:0; overflow:hidden; transition:max-height .25s ease; display:flex; flex-wrap:wrap; align-items:center; }
#vendor-filters .filter-btn{ margin:4px 7px 4px 0; line-height:1.9; }
.mp-toggle{ flex-shrink:0; margin-left:2px; }
.filter-sep{ width:1px; height:20px; background:#e5e7eb; flex-shrink:0; }
.f-group{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }

@media (max-width: 768px){
	.f-group{ flex-basis:100%; }
	.filter-sep{ display:none; }
	.mp-search-input{ flex:1; min-width:0; width:auto; }
}

.board-wrap{ background:#fff; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,0.06); padding:6px 14px 14px; overflow-x:auto; }
table.board{ width:100%; border-collapse:collapse; min-width:1280px; font-size:13px; }
.board th, .board td{ padding:9px 10px; text-align:left; border-bottom:1px solid #f0f1f4; vertical-align:top; }
.board thead th{ font-size:12px; color:#7c8595; font-weight:600; white-space:nowrap; position:sticky; top:0; background:#fff; z-index:1; }
.board tbody tr:hover{ background:#f8faff; }
.board .vendor-row td{ background:#f7f9fc; font-weight:700; font-size:13.5px; color:#334; border-top:2px solid #eef1f6; }
.board .vendor-row a{ color:var(--primary); text-decoration:none; }
.plan-name{ font-weight:600; color:#222; }
.tier-chip{ display:inline-block; font-size:11px; color:#9aa1ad; background:#f5f6f8; border-radius:8px; padding:1px 7px; margin-left:6px; vertical-align:1px; }
.price{ font-weight:700; color:#222; white-space:nowrap; }
.price-sub{ font-size:11px; color:#9aa1ad; white-space:nowrap; }
.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.dash{ color:#c9ced8; }
.cred{ display:inline-block; font-size:11px; border-radius:8px; padding:1px 8px; }
.cred.high{ background:#e8f7ee; color:#1d9e57; }
.cred.medium{ background:#fff6e5; color:#c77d00; }
.cred.low{ background:#fdecec; color:#d64545; }
.warn{ color:#d64545; font-weight:700; }
.buy-btn{ display:inline-block; font-size:12px; color:var(--primary); border:1px solid var(--primary); border-radius:8px; padding:3px 10px; text-decoration:none; white-space:nowrap; }
.buy-btn:hover{ background:var(--primary); color:#fff; }
.empty{ text-align:center; padding:40px 0; font-size:13px; color:#a0a6b0; }
.cost-limit-row td{ background:#f9fafb; font-size:12px; color:#6b7280; border-bottom:1px solid #f0f1f4; }
.spin{ display:inline-block; width:16px; height:16px; border:2px solid #e5e7eb; border-top-color:var(--primary); border-radius:50%; animation:sp 0.8s linear infinite; vertical-align:-3px; margin-right:6px; }
@keyframes sp{ to{ transform:rotate(360deg); } }
.src-note{ font-size:12px; color:#a0a6b0; margin-top:12px; line-height:1.7; }
.src-note a{ color:#8aa2c8; }

/* 模型价格 Tab */
.mp-search-input{ padding:5px 12px; border:1px solid #e5e7eb; border-radius:14px; font-size:13px; width:220px; outline:none; }
.mp-search-input:focus{ border-color:var(--primary); }
.mp-search-input:-webkit-autofill,
.mp-search-input:-webkit-autofill:hover,
.mp-search-input:-webkit-autofill:focus{
	-webkit-box-shadow:0 0 0 1000px #fff inset;
	-webkit-text-fill-color:#222;
	transition:background-color 9999s ease-out;
}
table.mp-table{ min-width:980px; }
.mp-table .m-name{ font-weight:600; color:#222; white-space:nowrap; }
.mp-table .m-provider{ font-size:11px; color:#9aa1ad; white-space:nowrap; }
.mp-table .m-tag{ display:inline-block; font-size:11px; color:#8a93a3; background:#f5f6f8; border-radius:8px; padding:1px 7px; margin:1px 2px; }
.mp-table td{ vertical-align:middle; }
.mp-pager{ display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 0 4px; font-size:13px; color:#6b7280; }
.mp-pager button{ padding:4px 14px; border-radius:14px; font-size:12px; cursor:pointer; background:#fff; border:1px solid #e5e7eb; color:#6b7280; }
.mp-pager button:hover:not(:disabled){ border-color:var(--primary); color:var(--primary); }
.mp-pager button:disabled{ opacity:.45; cursor:not-allowed; }
.mp-pager .mp-page-info{ min-width:110px; text-align:center; }

/* Token指数 Tab */
.index-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.index-card{ background:#fff; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,0.06); padding:16px; }
.index-card .i-top{ display:flex; justify-content:space-between; align-items:center; gap:6px; }
.index-card .i-name{ font-size:13px; font-weight:600; color:#333; }
.index-card .i-sym{ font-size:11px; color:#9aa1ad; font-family:Consolas,Menlo,monospace; }
.index-card .i-val{ font-size:24px; font-weight:800; margin-top:8px; color:#222; font-variant-numeric:tabular-nums; }
.index-card .i-val small{ font-size:12px; font-weight:400; color:#9aa1ad; margin-left:4px; }
.index-card .i-chg{ font-size:12px; font-weight:600; margin-top:4px; }
.index-card .i-chg.up{ color:#e8463a; }
.index-card .i-chg.down{ color:#1dc981; }
.index-card .i-spark{ display:block; width:100%; height:44px; margin-top:10px; }
.index-card .i-spark path{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.index-card .i-spark.up path{ stroke:#e8463a; }
.index-card .i-spark.down path{ stroke:#1dc981; }
.index-grid-empty{ grid-column:1/-1; text-align:center; padding:40px 0; font-size:13px; color:#a0a6b0; }
@media(max-width:900px){ .index-grid{ grid-template-columns:1fr; } }
@media(max-width:768px){
	.page-head h3, .page-head h1{ font-size:19px; }
	.board-wrap{ padding:4px 8px 10px; }
	.tab-btn{ padding:7px 12px; font-size:13px; }
}