/* 全局变量：浅色 & 深色模式 */
:root {
  --bg: #f8fafc;
  --text: #1e293b;
  --muted: #64748b;
  --card: #ffffff;
  --accent: #0ea5e9;
  --accent-light: #38bdf8;
  --danger: #ef4444;
  --border: rgba(0,0,0,0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --card: #1e293b;
    --accent: #38bdf8;
    --accent-light: #0ea5e9;
    --danger: #f87171;
    --border: rgba(255,255,255,0.1);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
  font-size: clamp(0.7rem, 0.9vw, 0.85rem); /* 自适应字体：手机更小，PC正常 */
}

/* 标题 */
header { text-align: center; padding: 1rem 0.5rem; }
header h1 { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 700; margin-bottom: .3rem; }
header p { color: var(--muted); max-width: 600px; margin: 0 auto; font-size: clamp(0.7rem, 1vw, 0.85rem); }

/* 容器（全宽） */
.container { 
  margin: 0 auto; 
  padding: 0.5rem; 
}

/* 网格布局：默认 PC 四列 */
.grid { 
  display: grid; 
  gap: 0.6rem;  /* 间距更小 */
  grid-template-columns: repeat(4, 1fr); 
}

/* Pad (≤ 1024px) 两列 */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 手机 (≤ 600px) 一列 */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* 横屏时强制四列（Pad 横屏也算） */
@media (orientation: landscape) {
  .grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* 卡片 */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.8rem; /* 内边距缩小 */
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.card h2 { margin-bottom: 0.4rem; font-size: clamp(0.9rem, 1.2vw, 1rem); }
.card h3 { margin: 0.4rem 0 .2rem; font-size: clamp(0.75rem, 1vw, 0.85rem); color: var(--muted); }

/* 表单 */
.fields { display: grid; gap: 0.6rem; }
label { display: flex; flex-direction: column; font-size: clamp(0.7rem, 0.9vw, 0.8rem); gap: 0.2rem; }
input {
  border: 1px solid var(--border);
  padding: 0.4rem 0.5rem; /* 更紧凑 */
  border-radius: 0.4rem;
  font-size: clamp(0.75rem, 1vw, 0.85rem);
  background: transparent;
  color: var(--text);
  transition: border .2s, box-shadow .2s;
}
input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-light), transparent 70%);
  outline: none;
}

/* 结果区 */
.result {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  font-weight: 500;
  display: grid;
  gap: 0.3rem;
}
.result .hint { font-size: clamp(0.65rem, 0.8vw, 0.75rem); color: var(--muted); }

/* 底部操作区 */
.footer {
  padding: 1rem 0.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.actions { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.2rem;  /* 按钮几乎贴近 */
  justify-content: center; 
  margin-bottom: 0.5rem; 
}
button, .file {
  border: 1px solid var(--border);
  padding: 0.4rem 0.6rem; /* 更小按钮 */
  border-radius: 0.4rem;
  background: var(--accent);
  color: white;
  cursor: pointer;
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  transition: background .2s;
}
button:hover, .file:hover { background: var(--accent-light); }
button.danger { background: var(--danger); border-color: var(--danger); }
.file input { display: none; }