/* DuoComic website shared styles (same design tokens as index.html) */
:root { --ink:#1c1c1e; --sub:#6e6e73; --accent:#e8734a; --bg:#faf9f7; --card:#ffffff; --line:#e8e5e1; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--ink); line-height:1.7; }
.wrap { max-width:760px; margin:0 auto; padding:40px 24px 40px; }
nav.top { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:34px; }
nav.top .brand { font-weight:700; font-size:18px; color:var(--ink); text-decoration:none; margin-right:auto; }
nav.top .brand span { color:var(--accent); }
nav.top a.navlink { color:var(--sub); text-decoration:none; font-size:14px; }
nav.top a.navlink:hover, nav.top a.navlink.on { color:var(--accent); }
h1 { font-size:30px; letter-spacing:.5px; margin-bottom:10px; }
.lead { color:var(--sub); font-size:15px; margin-bottom:26px; }
h2 { font-size:19px; margin:34px 0 12px; }
p.body, li.body { font-size:15px; color:#3a3a3c; }
ul.body { padding-left:20px; }
ul.body li { margin:5px 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:12px 0; }
details.faq { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 20px; margin:10px 0; }
details.faq summary { font-weight:600; font-size:15px; cursor:pointer; }
details.faq p { font-size:14px; color:var(--sub); margin-top:8px; }
code { background:#f1efe9; border-radius:5px; padding:1px 6px; font-size:13px; font-family:ui-monospace,Menlo,Consolas,monospace; word-break:break-all; }
form.feedback label { display:block; font-size:14px; font-weight:600; margin:16px 0 6px; }
form.feedback input[type=text], form.feedback input[type=email], form.feedback select, form.feedback textarea {
  width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:15px;
  font-family:inherit; background:var(--card); color:var(--ink); }
form.feedback textarea { min-height:130px; resize:vertical; }
form.feedback .env { background:#f4f2ed; border-radius:10px; padding:10px 14px; font-size:13px; color:var(--sub); }
form.feedback button { margin-top:20px; background:var(--accent); color:#fff; border:none; border-radius:10px;
  padding:11px 28px; font-size:15px; cursor:pointer; }
form.feedback button:disabled { opacity:.55; cursor:default; }
.formmsg { margin-top:14px; font-size:14px; }
.formmsg.ok { color:#22763a; }
.formmsg.err { color:#b3261e; }
.rel { padding:14px 0; border-bottom:1px solid var(--line); }
.rel:last-of-type { border-bottom:none; }
.rel .ver { font-weight:700; font-size:16px; }
.rel .date { color:var(--sub); font-size:13px; margin-left:10px; }
.rel ul { padding-left:20px; margin-top:6px; }
.rel li { font-size:14px; color:#3a3a3c; margin:3px 0; }
footer { margin-top:56px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--sub); text-align:center; }
footer p { margin:3px 0; }
footer a { color:var(--sub); }
.en { color:var(--sub); font-size:14px; }