:root{
  --bg: #f6f7fb;
  --fg: #1f2430;
  --muted: #6b7280;
  --card: #ffffff;
  --primary: #2563eb;
  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
  --ring: rgba(37,99,235,0.25);
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}
html[data-theme="dark"]{
  --bg: #0f1216;
  --fg: #e5e7eb;
  --muted: #9ca3af;
  --card: #151a21;
  --primary: #60a5fa;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --ring: rgba(96,165,250,0.25);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}
*{ box-sizing: border-box; }
body{
  margin:0; padding:0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 顶部栏 */
.topbar{
  position: sticky; top:0; z-index: 10;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), transparent);
  backdrop-filter: blur(6px);
}
.app-title{ margin:0; font-size: 18px; font-weight: 700; }
.top-actions{ display:flex; gap:8px; flex-wrap: wrap; }

/* 按钮 */
.btn{
  appearance: none; border:1px solid transparent; border-radius:10px;
  padding: 8px 14px; color: var(--fg); background: rgba(125,125,125,0.12);
  cursor:pointer; transition: all .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:focus{ outline: none; box-shadow: 0 0 0 4px var(--ring); }
.btn.primary{ background: var(--primary); color:#fff; }
.btn.primary:hover{ filter: brightness(1.05); }

/* 横向滚动容器 */
.h-scroller{
  display: flex; gap: 20px;
  padding: 16px 20px 28px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.h-scroller::-webkit-scrollbar{ height: 10px; }
.h-scroller::-webkit-scrollbar-thumb{ background: rgba(125,125,125,.25); border-radius: 999px; }
.h-scroller::-webkit-scrollbar-track{ background: transparent; }

/* 竖向两列网格布局（保留横向样式以便随时切换） */
.v-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 20px;
  padding: 16px 20px 28px;
  max-width: 1200px;
  margin: 0 auto;
}
.v-grid .card{
  min-width: auto;
  max-width: none;
  scroll-snap-align: unset;
}

/* 两侧渐隐遮罩 */
.h-mask{ position: relative; }
.h-mask::before, .h-mask::after{
  content:""; position:absolute; top:0; bottom:0; width:56px; pointer-events: none; z-index: 5;
  background: linear-gradient(to right, var(--bg), transparent);
}
.h-mask::after{
  right:0; left:auto;
  transform: scaleX(-1);
}

/* 卡片 */
.card{
  min-width: clamp(280px, 72vw, 760px);
  max-width: 760px;
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid rgba(125,125,125,0.12);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.card h2{ margin: 0 0 12px; font-size: 16px; }

/* 表单网格与行 */
.grid-2{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px;
}
.form-row{
  display:flex; flex-direction: column; gap:6px; margin-bottom: 10px;
}
label{ color: var(--muted); font-size: 12px; }
input[type="number"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(125,125,125,0.25);
  background: transparent; color: var(--fg);
}
input[type="number"]::placeholder{ color: rgba(125,125,125,.6); }
input[type="number"]:focus{ outline:none; box-shadow: 0 0 0 4px var(--ring); border-color: transparent; }
.btn-row{ margin-top: 6px; }

/* 输出状态 */
.output{
  margin-top: 10px; padding: 12px; white-space: pre-wrap;
  border-radius: 10px; border:1px dashed rgba(125,125,125,.35);
  background: rgba(125,125,125,.06);
}
.output.ok{ border-color: var(--ok); }
.output.warn{ border-color: var(--warn); }
.output.danger{ border-color: var(--danger); }

/* 渐入动画 */
.fade-in{ opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.is-visible{ opacity: 1; transform: translateY(0); }

/* 响应式 */
@media (max-width: 900px){
  .v-grid{ grid-template-columns: 1fr; }
  .v-grid .card{ min-width: auto; }
}
@media (max-width: 720px){
  .grid-2{ grid-template-columns: 1fr; }
  .card{ min-width: 85vw; }
}

/* 欢迎横幅 */
.welcome-banner{
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: white;
  padding: 20px 30px;
  border-radius: 12px;
  margin-bottom: 15px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(37,99,235,0.2);
}
.welcome-text{
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}
.welcome-subtitle{
  margin: 8px 0 0;
  font-size: 0.95rem;
  opacity: 0.95;
}

/* 页脚样式 */
.site-footer{
  margin-top: 40px;
  padding: 30px 20px;
  background: var(--card);
  border-top: 1px solid rgba(125,125,125,0.12);
  text-align: center;
}
.footer-content{
  max-width: 1200px;
  margin: 0 auto;
}
.site-footer .copyright{
  margin: 8px 0;
  color: var(--muted);
  font-size: 14px;
}
.site-footer a{
  color: var(--primary);
  text-decoration: none;
  transition: opacity .2s ease;
}
.site-footer a:hover{
  opacity: 0.8;
}