/* ============================================
   API Hub — 公共样式
   浅色米色系 · 直角元素 · 简洁
   ============================================ */

/* ---- 变量 ---- */
: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;
  --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: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", "Noto Sans Mono CJK SC", monospace;
  --font-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;
}

/* ---- 布局 ---- */
.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-mono);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-mono);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-wrap:wrap;
  gap:3px;
}
.heatmap-cell{
  width:22px;
  height:22px;
  border:1px solid var(--border-light);
  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(--bg-input);border-color:var(--border-light);cursor:default}

/* ---- 兑换双输入框 ---- */
.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}

/* ---- 空状态 ---- */
.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}
  .heatmap-cell{width:18px;height:18px}
  table{font-size:0.75rem}
  th,td{padding:0.35rem 0.4rem}
}