/* 质感版（2026-10-16 起替换旧的蓝色彩带风格）：象牙白纸张底 + 细颗粒、标题思源宋体、
   深祖母绿是品牌色、黄铜金只做点缀（细线、编号），琥珀色只给“开通年卡”和价格。不要大面积深色。
   放在所有样式最后加载，只改外观不动结构；样板见 设计升级demo/首页-质感版.html、style-v3.css。
   第一步：公共部分（导航、按钮、首屏、左表单 / 右结果）+ 任务卡页；其余页面的专属样式下一步再换。 */
:root {
  --paper:#fbf8f1; --paper-2:#f4efe4; --ivory:#fffdf8;
  --ink:#1d1b16; --ink-2:#3b3830; --muted:#6f6a5e; --faint:#9a9486;
  --line:#e8e1d2; --line-2:#ddd4c2;
  --emerald:#0f5c43; --emerald-2:#0b4834; --emerald-soft:#e6f0eb; --leaf:#2f8f6b;
  --brass:#b0873a; --brass-soft:#f3ead6; --amber:#e9a23b;
  --danger:#a8321f; --danger-soft:#fbefe9;
  --shadow-paper:0 1px 1px rgba(40,30,10,.06),0 10px 20px -6px rgba(40,30,10,.18),0 30px 50px -20px rgba(40,30,10,.28);
  --shadow-card:0 1px 2px rgba(40,30,10,.05),0 12px 30px -12px rgba(40,30,10,.16);
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif;
  --sans:"Inter","PingFang SC","Microsoft YaHei",sans-serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.15 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* 旧变量指向新颜色，没改到的旧样式也不会再冒出亮蓝 */
  --navy:var(--ink); --blue:var(--emerald); --orange:var(--brass); --cream:var(--paper); --white:var(--ivory);
}
body {background:var(--paper) var(--grain);background-attachment:scroll;color:var(--ink);font-family:var(--sans)}
button:focus-visible,textarea:focus-visible,summary:focus-visible,input:focus-visible {outline:2px solid var(--brass);outline-offset:3px}
::selection {background:var(--brass-soft)}

/* ---------- 导航 ---------- */
.nav {height:72px;background:rgba(251,248,241,.88);border-bottom:1px solid var(--line);box-shadow:none;backdrop-filter:blur(14px)}
.nav-in {max-width:1320px;gap:36px}
.brand {gap:12px;color:var(--ink);font-family:var(--serif);font-size:19px;font-weight:900;letter-spacing:.06em}
.brand small {display:block;margin-top:-3px;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--brass);text-align:left}
.brandmark {width:38px;height:38px;border-radius:10px;background:linear-gradient(150deg,#177a5a,var(--emerald-2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 4px 12px rgba(15,92,67,.28)}
.brandmark svg {width:26px;height:26px}
.logo-paper {fill:#fffdf8}.logo-fold,.logo-spark {stroke:#e7c27a}.logo-pencil {fill:#f2c46f}.logo-tip {stroke:#fffdf8}
.navlinks {gap:2px;padding:0;background:none;border-radius:0}
.navlink {position:relative;padding:8px 13px;border-radius:0;background:none;color:var(--ink-2);font-size:15px;font-weight:500}
.navlink:hover {background:none;box-shadow:none;color:var(--emerald)}
.navlink.on {background:none;box-shadow:none;color:var(--emerald);font-weight:700}
.navlink.on::after {content:"";position:absolute;left:50%;bottom:-15px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--brass)}
.pillinfo,.service-state {background:var(--ivory);border:1px solid var(--line);color:var(--muted)}
.pillinfo b {color:var(--ink)}
.service-state i,.result-state i {background:var(--leaf);box-shadow:0 0 0 4px rgba(47,143,107,.15)}
.account-btn {background:var(--emerald);box-shadow:0 8px 20px -6px rgba(15,92,67,.55)}
.account-btn:hover {background:var(--emerald-2)}
.account-btn.signed {background:var(--ivory);color:var(--ink);border:1px solid var(--line-2)}
.account-btn.signed b {color:var(--emerald)}
.account-btn.signed i {background:var(--emerald-soft);color:var(--emerald)}
.account-menu {background:var(--ivory);border-color:var(--line);box-shadow:var(--shadow-card)}
.account-menu>button:hover,.account-menu>a:hover {background:var(--paper-2)}

/* ---------- 按钮 ---------- */
.btn {background:var(--ivory);color:var(--ink-2);border:1px solid var(--line-2)}
.btn:hover {background:var(--ivory);border-color:var(--emerald);color:var(--emerald)}
.btn.primary {background:var(--emerald);color:#fff;border-color:var(--emerald);box-shadow:0 8px 20px -8px rgba(15,92,67,.55)}
.btn.primary:hover {background:var(--emerald-2);border-color:var(--emerald-2);color:#fff}
.btn:disabled,.btn.primary:disabled {background:var(--paper-2);border-color:var(--line);color:var(--faint);box-shadow:none}

/* ---------- 首屏（每个创作页顶上那块） ---------- */
.app-shell {max-width:1320px}
.intro {background:var(--ivory) var(--grain);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-card)}
.intro::before {width:520px;height:520px;left:auto;right:-140px;top:-180px;border:0;border-radius:50%;background:radial-gradient(closest-side,rgba(47,143,107,.13),rgba(47,143,107,.04) 60%,transparent)}
.intro::after {display:none}
.intro .eyebrow {gap:12px;margin-bottom:18px;color:var(--brass);font-size:13px;font-weight:600;letter-spacing:.2em}
.intro .eyebrow i {width:36px;height:1px;background:var(--brass)}
.intro .eyebrow span:last-child {color:var(--muted)}
.hero-eyebrow-mark {display:none}
.intro h1 {font-family:var(--serif);color:var(--ink);font-weight:900;letter-spacing:.01em;line-height:1.2}
.intro h1 em {color:var(--emerald)}
.intro h1 em::after {left:0;right:0;bottom:.06em;height:.16em;border-radius:0;transform:none;background:linear-gradient(90deg,rgba(176,135,58,.45),rgba(176,135,58,.1))}
.intro p {color:var(--muted);font-size:15px}
.intro p b {color:var(--emerald)}
.hero-features span {background:var(--brass-soft);color:#7a5a1f;font-weight:600;font-size:12px}
.hero-cta {border-radius:999px;background:var(--emerald);font-weight:600;font-size:14px;box-shadow:0 8px 20px -6px rgba(15,92,67,.55)}
.hero-cta:hover {background:var(--emerald-2)}
/* 右边的作品：像摊在桌上的纸 */
.hero-gallery {background:var(--paper-2);border:1px solid var(--line);box-shadow:none}
.hero-gallery-head {color:var(--muted);font-weight:600;letter-spacing:.12em}
.hero-gallery-head b {color:var(--brass);font-family:var(--serif)}
.hero-art {background:#fff;border:6px solid #fff;border-radius:3px;box-shadow:var(--shadow-paper)}
.hero-art span {background:var(--ivory);color:var(--emerald);border:1px solid var(--line);border-radius:999px;font-weight:700}

/* ---------- 左表单 / 右结果（环创、自然笔记、任务卡共用） ---------- */
.dc-panel {background:var(--ivory);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card)}
.dc-field>span {color:var(--ink);font-weight:700;font-size:14px}
.dc-field>span b {color:var(--brass);font-family:var(--serif)}
.dc-field input {background:#fff;border-color:var(--line-2);color:var(--ink)}
.dc-field input::placeholder {color:var(--faint)}
.dc-field input:focus {border-color:var(--emerald);box-shadow:0 0 0 4px rgba(15,92,67,.08)}
.dc-scenes button,.dc-ratios button {background:#fff;border-color:var(--line-2);color:var(--ink-2)}
.dc-scenes button small {color:var(--faint)}
.dc-scenes button.on,.dc-ratios button.on {background:var(--emerald-soft);border-color:var(--emerald);color:var(--emerald);box-shadow:inset 0 0 0 1px var(--emerald)}
.nt-cost {color:var(--ink-2)}
.nt-cost b {color:var(--emerald);font-family:var(--serif)}
.nt-cost small {color:var(--faint)}
.typo-note {background:var(--danger-soft);border-color:#ecc7b8;color:var(--danger);font-weight:500}
.typo-note>span:first-child {background:var(--danger)}
.typo-note a,.nt-job .typo-note a {color:var(--danger)}
.dc-empty,.dc-progress {background:var(--ivory) var(--grain);border:1px dashed var(--line-2);color:var(--muted)}
.dc-empty b,.dc-progress b {font-family:var(--serif);font-size:20px;color:var(--ink)}
.dc-empty li span {background:none;border:1px solid var(--brass);color:var(--brass);font-family:var(--serif)}
.dc-progress.fail {background:var(--danger-soft);border-color:#ecc7b8}
.dc-kicker {color:var(--brass);letter-spacing:.14em;font-weight:600}
.dc-error {color:var(--danger)}
.gen-orbit {border-color:var(--line-2)}
.gen-orbit i:nth-child(1) {background:var(--emerald)}.gen-orbit i:nth-child(2) {background:var(--brass)}.gen-orbit i:nth-child(3) {background:var(--leaf)}
.nt-job-head {background:var(--ivory);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card)}
.nt-job-head h2 {font-family:var(--serif);color:var(--ink)}
.nt-job-head p {color:var(--muted)}
.nt-result-card {background:var(--ivory);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card)}
.nt-result-img {background:var(--paper-2)}
.dc-card-info b {color:var(--ink)}
.dc-card-actions button {background:var(--emerald-soft);color:var(--emerald)}
.dc-card-actions button:hover {background:var(--emerald);color:#fff}
.nt-notice {background:var(--brass-soft);border-color:#e6d3a8;color:#6b4f19}

/* ---------- 任务卡页 ---------- */
.tc-style {background:#fff;border-color:var(--line-2);border-radius:14px}
.tc-style b {color:var(--ink)}
.tc-style small {color:var(--muted)}
.tc-style i {color:var(--emerald);border-bottom-color:rgba(15,92,67,.3)}
.tc-style.on {border-color:var(--emerald);box-shadow:0 0 0 3px rgba(15,92,67,.1)}
.tc-tools button {background:#fff;border-color:var(--line-2);color:var(--emerald)}
.tc-tools button:hover {border-color:var(--emerald)}
.tc-list li {background:var(--paper);border-color:var(--line)}
.tc-list li.on {background:#fff;border-color:var(--line-2)}
.tc-pick input {accent-color:var(--emerald)}
.tc-pick b {color:var(--brass);font-family:var(--serif)}
.tc-item strong {color:var(--ink)}
.tc-item em {color:var(--muted)}
.tc-sum {color:var(--muted)}
.tc-sum b {color:var(--emerald);font-family:var(--serif)}
.tc-drawbar {background:rgba(255,253,248,.96);border-color:var(--line-2);box-shadow:0 -6px 18px rgba(40,30,10,.06)}
.tc-bar,.tc-cardbar {background:var(--paper-2)}
.tc-bar i {background:linear-gradient(90deg,var(--emerald),var(--leaf),var(--brass))}
.tc-cardbar i {background:var(--emerald)}
.tc-progress p {color:var(--emerald)}
.tc-cardnote {color:var(--muted)}

/* ---------- 第 3 步：其余页面（2026-10-16）。各页写死的蓝色已统一换成质感版颜色（旧样式备份在 css-旧蓝色版备份-20261016/），这里只补标题字体和几处渐变。 ---------- */
.lib-hero {background:var(--ivory) var(--grain);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-card)}
.lib-hero h1,.gallery-head h1,.subpage-head h1 {font-family:var(--serif);font-weight:900;letter-spacing:.04em;color:var(--ink)}
.lib-section h2,.lib-head h2,.lh-head h2,.lv-info h2,.ggroup h3,.dc-showcase-head h2,.preview-head h2,.panel h2,.dc-scene-side h2,.dc-layers-head h3,.nt-form-head h2,.nt-card h3 {font-family:var(--serif);font-weight:900;color:var(--ink)}
.lh-head h2::before {background:var(--brass);width:3px;border-radius:0}
.lh-tabs button.on {background:var(--brass-soft);color:#7a5a1f}
.gallery-head {background:var(--ivory) var(--grain);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.gallery-head-art {border-color:var(--brass-soft)}
.nt-form-head {background:var(--ivory);border-color:var(--line)}

/* 作品语言切换（环创、自然笔记、任务卡共用，2026-10-16 英文版） */
.lang-toggle button b {display:block;font-size:13.5px}
.lang-toggle button small {display:block;margin-top:1px;font-size:10.5px;font-weight:400;color:var(--muted)}
.tc-item strong small {margin-left:8px;font-size:12.5px;font-weight:500;color:var(--muted)}
/* 自动换色后“没选中浅绿、选中米色”反了：统一成没选中白底、选中浅绿底 + 祖母绿边 */
.ratio-grid button,.language-grid button {background:#fff;border-color:var(--line-2);color:var(--ink-2)}
.ratio-grid button.on,.language-grid button.on {background:var(--emerald-soft);border-color:var(--emerald);color:var(--emerald)}

/* 2026-10-19 导航多了“研学手册”：收紧间距、不换行；窄屏藏掉两个说明小标签 */
.nav-in {gap:24px}
.brand,.navlink {white-space:nowrap}
.navlink {padding:8px 10px;font-size:14.5px}
@media (max-width:1500px) {.navright .pillinfo {display:none}}
@media (max-width:1180px) {.service-state span {display:none}.service-state {padding:7px}}

/* 2026-10-29：手机上导航链接（含“首页”共 8 个）横向滑动，不再把整页撑宽。 */
@media (max-width:720px) {
  .nav-in {min-width:0}
  .navlinks {flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .navlinks::-webkit-scrollbar {display:none}
  .navlink {flex:none}
  .navlink.on::after {bottom:-6px}
  .navright {flex:none;margin-left:0}
}