/* ---- 变量 ---- */
:root {
	--bg: #f2ede4;
	--bg-card: #faf7f2;
	--bg-input: #ffffff;
	--bg-code: #ede8df;
	--text: #3a342c;
	--text-secondary: #8a8273;
	--text-muted: #b0a89b;
	--border: #ddd6c9;
	--border-light: #e8e2d6;
	--accent: #000000;
	--accent-hover: #292929;
	--accent-light: #f1ebe2;
	--green: #4f7f5e;
	--green-bg: #e6f0e9;
	--blue: #069aff;
	--yellow: #c9973b;
	--yellow-bg: #f5eddb;
	--orange: #c47a45;
	--orange-bg: #f2e4d9;
	--red: #b85450;
	--red-bg: #f0e0df;
	--shadow: 0 1px 3px rgba(0,0,0,0.05);
	--shadow-hover: 0 2px 8px rgba(0,0,0,0.08);
	--radius: 0;
	--font: "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code", "Consolas", "Noto Sans Mono CJK SC", monospace;
	--max-width: 720px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{
	font-family:var(--font);
	background:var(--bg);
	color:var(--text);
	line-height:1.6;
	min-height:100vh;
	padding:2rem 1rem;
	overflow-y: scroll;
}

/* 滚动条 */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: #333; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb:hover { background: #555; cursor: default; }
::-webkit-scrollbar-corner { background: #333; }
::-webkit-resizer { margin: 0; }

a {
	color: var(--blue);
	text-decoration: none;
	word-wrap: break-word;
}

/* ---- 布局 ---- */
.container{max-width:var(--max-width);margin:0 auto}

/* ---- 卡片 ---- */
.card{
	background:var(--bg-card);
	border:1px solid var(--border);
	box-shadow:var(--shadow);
	padding:1.25rem 1.5rem;
	margin-bottom:1.25rem;
}
.card h2{
	font-size:1.05rem;
	font-weight:600;
	color:var(--text);
	margin-bottom:1rem;
	padding-bottom:0.5rem;
	border-bottom:1px solid var(--border-light);
	letter-spacing:0.01em;
	display: flex;
	align-items: center;
}
.card h2 .badge{
	font-size:0.75rem;
	font-weight:400;
	color:var(--text-secondary);
	margin-left:0.5rem;
}
.card h3{
	font-size:0.9rem;
	font-weight:600;
	color:var(--text-secondary);
	margin-bottom:0.6rem;
}

/* ---- 表单 ---- */
.form-row{
	display:flex;
	gap:0.5rem;
	align-items:center;
	flex-wrap:wrap;
}
.form-row.vertical{flex-direction:column;align-items:stretch}
.form-group{display:flex;flex-direction:column;gap:0.25rem;flex:1;min-width:0}
.form-group label{
	font-size:0.78rem;
	font-weight:500;
	color:var(--text-secondary);
}

input[type=text],
input[type=number],
select,
textarea{
	font-family:var(--font);
	font-size:0.9rem;
	padding:0.5rem 0.65rem;
	border:1px solid var(--border);
	background:var(--bg-input);
	color:var(--text);
	outline:none;
	transition:border-color 0.15s;
	border-radius:0;
}
input[type=text]:focus,
input[type=number]:focus,
select:focus,
textarea:focus{
	border-color:var(--accent);
	box-shadow:0 0 0 2px var(--accent-light);
}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
textarea{resize:vertical;min-height:3.5rem;font-family:var(--font);font-size:0.82rem;line-height:1.5}
textarea.multi-result{min-height:6rem;background:var(--bg-code);color:var(--text)}

/* ---- 按钮 ---- */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:0.35rem;
	font-family:var(--font);
	font-size:0.85rem;
	font-weight:500;
	padding:0.4rem 1.2rem;
	border:1px solid var(--border);
	background:var(--bg-card);
	color:var(--text);
	cursor:pointer;
	white-space:nowrap;
	transition:background 0.15s,border-color 0.15s,box-shadow 0.15s;
	border-radius:0;
	user-select:none;
}
.btn:hover{background:var(--accent-light);border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn-primary{
	background:var(--accent);
	border-color:var(--accent);
	color:#fff;
}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-danger{
	background:var(--red);
	border-color:var(--red);
	color:#fff;
}
.btn-danger:hover{background:#a34946;border-color:#a34946}
.btn-sm{font-size:0.78rem;padding:0.3rem 0.6rem}
.btn:disabled{opacity:0.5;cursor:default;pointer-events:none}

/* ---- 表格 ---- */
.table-wrap{overflow-x:auto}
table{
	width:100%;
	border-collapse:collapse;
	font-size:0.82rem;
}
th,td{
	text-align:left;
	padding:0.45rem 0.6rem;
	border-bottom:1px solid var(--border-light);
	white-space:nowrap;
}
th{
	font-weight:600;
	color:var(--text-secondary);
	font-size:0.75rem;
	text-transform:uppercase;
	letter-spacing:0.03em;
	border-bottom:1px solid var(--border);
}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(0,0,0,0.015)}
.usage-table-wrap{
	width:100%;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}
.usage-table{
	width:max-content;
	min-width:100%;
}
.usage-table th,
.usage-table td,
.usage-table .text-mono,
.usage-table .truncate{
	white-space:nowrap;
	word-break:normal;
	overflow:visible;
	text-overflow:clip;
	max-width:none !important;
}

/* ---- 状态/消息 ---- */
.message{
	padding:0.5rem 0.75rem;
	font-size:0.85rem;
	margin-top:0.75rem;
	border-left:3px solid var(--border);
}
.message.error{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.message.success{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.message.info{background:var(--accent-light);border-color:var(--accent);color:var(--accent)}
.message.warn{background:var(--yellow-bg);border-color:var(--yellow);color:#7a5f28}
.message:empty{display:none}

/* ---- 工具类 ---- */
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.gap-0-5{gap:0.5rem}
.gap-0-75{gap:0.75rem}
.mt-0-75{margin-top:0.75rem}
.mb-0-5{margin-bottom:0.5rem}
.mb-0-75{margin-bottom:0.75rem}
.text-mono{font-family:var(--font);font-size:0.82rem;word-break:break-all}
.text-sm{font-size:0.82rem}
.text-secondary{color:var(--text-secondary)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-btn{cursor:pointer;color:var(--accent);font-size:0.78rem;background:none;border:none;padding:0.15rem 0.4rem;font-family:var(--font)}
.copy-btn:hover{text-decoration:underline}
.copy-td{cursor:pointer}
.copy-td:hover{background:var(--bg-code)!important}
.min-width-0{min-width:0}

/* ---- 热力图 ---- */
.heatmap-grid{
	display:flex;
	flex-direction:column;
	width:fit-content;
	margin:0 auto;
}
.heatmap-grid.hidden{display:none}
#heatmapWrap{
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}
.heatmap-row{
	display:flex;
	align-items:center;
	gap:8px;
}
.heatmap-date{
	font-size:0.75rem;
	color:var(--text-muted);
	white-space:nowrap;
	min-width:65px;
	text-align:right;
	flex-shrink:0;
	user-select:none;
}
.heatmap-cells{
	display:grid;
	grid-template-columns:repeat(24,14px);
	gap:3px;
}
.heatmap-cell{
	width:14px;
	height:14px;
	border:none;
	cursor:pointer;
	position:relative;
}
.heatmap-cell.green{background:var(--green)}
.heatmap-cell.yellow{background:var(--yellow)}
.heatmap-cell.orange{background:var(--orange)}
.heatmap-cell.red{background:var(--red)}
.heatmap-cell.empty{background:var(--border-light)}

/* ---- 热力图图例（迁移自内联样式） ---- */
.heatmap-legend{
	display:inline-flex;
	align-items:center;
	gap:3px;
}
.heatmap-legend-swatch{
	display:inline-block;
	width:14px;
	height:14px;
	border:1px solid var(--border-light);
}
.heatmap-legend.green .heatmap-legend-swatch{background:var(--green)}
.heatmap-legend.yellow .heatmap-legend-swatch{background:var(--yellow)}
.heatmap-legend.orange .heatmap-legend-swatch{background:var(--orange)}
.heatmap-legend.red .heatmap-legend-swatch{background:var(--red)}
.heatmap-legend.empty .heatmap-legend-swatch{background:var(--border-light)}

/* ---- 热力图 tooltip（三行布局） ---- */
.heatmap-tooltip{
	position:fixed;
	z-index:1000;
	background:var(--text);
	color:#fff;
	font-size:0.75rem;
	padding:6px 10px;
	pointer-events:none;
	white-space:nowrap;
	line-height:1.6;
	font-family:var(--font);
}
.heatmap-tooltip__line1{
	font-weight:500;
}
.heatmap-tooltip__line2{
	font-weight:400;
}
.heatmap-tooltip__line3,
.heatmap-tooltip__line4,
.heatmap-tooltip__line5{
	font-weight:400;
	opacity:0.85;
}
/* 空状态 hidden 辅助 */
.empty-state.hidden{display:none}

/* ---- 模型价格 - 子模型展开 ---- */
.model-name-link {
	text-decoration: underline;
	cursor: pointer;
	transition: color 0.15s;
}
.model-name-link:hover {
	color: var(--accent-hover);
}
.model-detail-row td {
	padding: 0.5rem 0.6rem 0.5rem 1.5rem;
	border-bottom: 1px solid var(--border-light);
}
.model-detail-inner {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: 0.82rem;
	line-height: 1.5;
}
.model-detail-strategy,
.model-detail-list {
	color: var(--text);
	font-family: var(--font);
	word-break: break-all;
}

/* ---- 兑换双输入框 ---- */
.exchange-row{display:flex;gap:0.5rem;align-items:center}
.exchange-row .input-group{flex:1;display:flex;flex-direction:column;gap:0.2rem;min-width:0}
.exchange-row .input-group input{width:100%}
.exchange-arrow{color:var(--text-muted);font-size:1.2rem;padding:0 0.15rem;flex-shrink:0;margin-top:1.7rem}

/* ---- Header ---- */
.page-header{
	padding-bottom:0.75rem;
}
.page-header h1{
	font-size:1.3rem;
	font-weight:700;
	color:var(--text);
	letter-spacing:-0.01em;
}

/* ---- Tab 导航 ---- */
.tabs{
	display:flex;
	flex-wrap: wrap;
	gap:0;
	margin-bottom:1.25rem;
	border-bottom:2px solid var(--border);
}
.tab-btn{
	font-family:var(--font);
	font-size:0.82rem;
	font-weight:500;
	padding:0.55rem 1rem;
	border:none;
	background:none;
	color:var(--text-secondary);
	cursor:pointer;
	white-space:nowrap;
	position:relative;
	transition:color 0.15s;
	user-select:none;
	flex-shrink:0;
}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{
	color:var(--accent);
	font-weight:600;
}
.tab-btn.active::after{
	content:'';
	position:absolute;
	bottom:-2px;left:0;right:0;
	height:2px;
	background:var(--accent);
}
.card.hidden{display:none}

/* ---- 数据卡片（stats-grid） ---- */
.stats-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
	gap:0.75rem;
}
.stats-grid.hidden{display:none}
.stat-item{
	background:var(--bg);
	border:1px solid var(--border-light);
	padding:0.7rem 0.8rem;
	text-align:center;
}
.stat-label{
	font-size:0.72rem;
	color:var(--text-secondary);
	margin-bottom:0.2rem;
	text-transform:uppercase;
	letter-spacing:0.02em;
}
.stat-value{
	font-size:1.35rem;
	font-weight:700;
	color:var(--text);
	line-height:1.25;
}
.stat-cache{
	font-size:0.72rem;
	color:var(--text-muted);
	margin-top:0.1rem;
	line-height:1.3;
}

/* ---- 空状态 ---- */
.empty-state{
	color:var(--text-muted);
	font-size:0.85rem;
	font-style:italic;
	padding:1rem 0;
	text-align:center;
}

/* ---- 响应式 ---- */
@media(max-width:600px){
	body{padding:1rem 0.75rem}
	.card{padding:1rem}
	.form-row{flex-direction:column;align-items:stretch}
	.exchange-row{flex-direction:column;gap:0.25rem}
	.exchange-arrow{transform:rotate(90deg);margin-top:0;padding:0.15rem 0}
	table{font-size:0.75rem}
	th,td{padding:0.35rem 0.4rem}
}