/* 紫苏翻译 · 网页版全站样式（与浏览器插件同一套设计令牌，见 theme.css） */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zs-paper-2); color: var(--zs-ink);
  font-family: var(--zs-sans); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--zs-purple); }

/* ---------------- 顶部导航（全站统一） ---------------- */
.zs-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--zs-line-2);
}
.zs-nav-in {
  max-width: 1180px; margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; gap: 8px; height: 58px;
}
.zs-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-right: 10px; flex: none; }
.zs-brand img { width: 28px; height: 28px; object-fit: contain; }
.zs-brand .n { font-size: 18px; font-weight: 900; letter-spacing: -.01em; white-space: nowrap; }
.zs-brand .e { font-family: var(--zs-mono); font-size: 9.5px; letter-spacing: .22em; color: var(--zs-purple); opacity: .85; }
.zs-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.zs-links::-webkit-scrollbar { display: none; }
.zs-links a {
  padding: 7px 13px; border-radius: var(--zs-pill); text-decoration: none;
  color: var(--zs-ink-3); font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.zs-links a:hover { background: var(--zs-purple-soft); color: var(--zs-purple); }
.zs-links a.on { background: var(--zs-purple); color: #fff; }
.zs-navr { display: flex; align-items: center; gap: 10px; flex: none; }
.zs-key {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--zs-pill); border: 1px solid var(--zs-line);
  font-size: 12.5px; font-weight: 600; color: var(--zs-ink-3);
  text-decoration: none; white-space: nowrap; background: #fff;
}
.zs-key:hover { border-color: var(--zs-purple); color: var(--zs-purple); }
.zs-key .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zs-ink-5); flex: none; }
.zs-key.on .dot { background: var(--zs-ok); }
.zs-key.off .dot { background: var(--zs-red); }
@media (max-width: 720px) {
  .zs-nav-in { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  .zs-links { order: 3; width: 100%; }
  .zs-brand .e { display: none; }
}

/* ---------------- 页面骨架 ---------------- */
.page { max-width: 1180px; margin: 0 auto; padding: 26px 22px 76px; }
.page.wide { max-width: 1400px; }
.phead { margin-bottom: 20px; }
.phead h1 { font-size: 27px; font-weight: 900; letter-spacing: -.01em; margin: 0; }
.phead .en { color: var(--zs-purple); font-size: 10.5px; letter-spacing: .2em; font-family: var(--zs-mono); opacity: .8; margin-top: 2px; }
.phead .sub { color: var(--zs-ink-4); font-size: 13.5px; margin-top: 8px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.grid-l { display: grid; grid-template-columns: 460px 1fr; gap: 18px; align-items: start; }
@media (max-width: 940px) { .grid2, .grid-l { grid-template-columns: 1fr; } }

/* ---------------- 通用组件 ---------------- */
.card { background: #fff; border: 1px solid var(--zs-line-2); border-radius: var(--zs-r-xl); overflow: hidden; }
.card .chead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 17px 11px; font-size: 13px; font-weight: 800; color: var(--zs-purple-deep);
}
.card .cbody { padding: 0 17px 16px; }
.card .chead .cp { font-size: 12px; color: var(--zs-purple); cursor: pointer; font-weight: 600; }
.card .chead .cp.ok { color: var(--zs-ok); }

.btn {
  padding: 10px 22px; border: none; border-radius: var(--zs-r); background: var(--zs-purple); color: #fff;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  box-shadow: var(--zs-sh-purple); transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { background: var(--zs-ink-5); box-shadow: none; cursor: default; }
.btn.ghost { background: #fff; color: var(--zs-purple); border: 1.5px solid var(--zs-purple); box-shadow: none; }
.btn.ghost:hover { background: var(--zs-purple-soft); }
.btn.sm { padding: 7px 15px; font-size: 12.5px; }
.btn.ok { background: var(--zs-ok) !important; }
.btn.block { display: block; width: 100%; padding: 14px 0; font-size: 15.5px; font-weight: 800; }

input[type=text], input[type=password], input[type=number], textarea, select {
  font-family: inherit; font-size: 14px; color: var(--zs-ink); background: #fff;
  border: 1px solid var(--zs-line); border-radius: var(--zs-r); padding: 10px 13px; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--zs-purple); }
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238B8497' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.mono { font-family: var(--zs-mono); }
kbd { font-family: var(--zs-mono); font-size: 10.5px; background: var(--zs-purple-soft); color: var(--zs-purple-deep); border-radius: 5px; padding: 1px 5px; }

.chips { display: flex; gap: 9px; flex-wrap: wrap; }
.chip {
  padding: 8px 16px; border: 1px solid var(--zs-line); border-radius: var(--zs-pill); background: #fff;
  color: var(--zs-ink-3); font-size: 13px; cursor: pointer; user-select: none; transition: all .15s;
}
.chip:hover { border-color: var(--zs-purple); color: var(--zs-purple); }
.chip.on { background: var(--zs-purple); border-color: var(--zs-purple); color: #fff; }

.status {
  background: #fff; border: 1px solid var(--zs-line-2); border-radius: var(--zs-r-lg);
  padding: 16px; font-size: 13.5px; color: var(--zs-ink-3);
}
.status.err { color: var(--zs-red); }
.spin {
  display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(110,42,159,.35);
  border-top-color: var(--zs-purple); border-radius: 50%; animation: zs-sp .8s linear infinite;
  vertical-align: -2px; margin-right: 8px;
}
@keyframes zs-sp { to { transform: rotate(360deg); } }

.ainote {
  display: flex; gap: 9px; align-items: flex-start; padding: 11px 14px;
  background: #FFF9EC; border: 1px solid #F0DCB4; border-radius: var(--zs-r-lg);
  font-size: 12px; color: #8A6420; line-height: 1.6;
}
.sumcard {
  background: var(--zs-purple-soft); border: 1px solid #E1D5EE; border-radius: var(--zs-r-lg);
  padding: 14px 16px; font-size: 13.5px; line-height: 1.75;
}
.sumcard .lb { font-size: 12px; font-weight: 800; color: var(--zs-purple-deep); margin-bottom: 6px; }
.caveat { font-size: 11.5px; color: var(--zs-ink-5); text-align: center; line-height: 1.6; }
.hint { font-size: 12px; color: var(--zs-ink-4); line-height: 1.6; }

/* 未激活提示条 */
.needkey {
  display: none; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 17px; margin-bottom: 18px; border-radius: var(--zs-r-lg);
  background: linear-gradient(135deg, #F3EEF8 0%, #EDE4F6 100%);
  border: 1.5px solid var(--zs-purple); font-size: 13.5px;
}
.needkey.show { display: flex; }
.needkey b { color: var(--zs-purple-deep); }

/* 拖放区 */
.drop {
  background: #fff; border: 2px dashed var(--zs-line); border-radius: var(--zs-r-xl);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; cursor: pointer; transition: border-color .15s, background .15s; text-align: center; padding: 26px;
}
.drop:hover, .drop.drag { border-color: var(--zs-purple); background: var(--zs-purple-soft); }
.drop .big { font-size: 15.5px; font-weight: 800; }
.drop .small { font-size: 12.5px; color: var(--zs-ink-4); }

/* ---------------- 页脚 ---------------- */
.zs-foot {
  border-top: 1px solid var(--zs-line-2); background: #fff;
  padding: 22px; text-align: center; color: var(--zs-ink-4); font-size: 12.5px; line-height: 1.9;
}
.zs-foot a { color: var(--zs-ink-3); text-decoration: none; }
.zs-foot a:hover { color: var(--zs-purple); text-decoration: underline; }