/* 自然笔记页：沿用环创素材页的左表单 / 右结果布局（decor.css），这里只放自然笔记独有的部分 */
.nature {grid-template-columns:360px minmax(0,1fr)}

/* Page picker: a checkbox row per page with its example thumbnail */
.nt-pages {display:flex;flex-direction:column;gap:7px}
.nt-page {display:flex;align-items:center;gap:10px;padding:8px 9px 8px 11px;border:1px solid #e3dccb;border-radius:13px;background:#edf3ee;cursor:pointer}
.nt-page.on {border-color:#0f5c43;background:#efe9dc;box-shadow:inset 0 0 0 1px #0f5c43}
.nt-page input {flex:none;width:17px;height:17px;accent-color:#0f5c43}
.nt-page-text {flex:1;min-width:0}
.nt-page-text b {display:block;font-size:13.5px;color:#2a2720}
.nt-page-text small {display:block;margin-top:2px;font-size:11px;line-height:1.45;color:#6f6a5e}
.nt-page img {flex:none;width:39px;height:52px;object-fit:cover;border-radius:6px;border:2px solid #fff;box-shadow:0 2px 6px rgba(40,30,10,.18);cursor:zoom-in}
.nt-soon {font-size:11.5px;color:#6f6a5e}
.nt-line {display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:13px;background:#fff8ec;border:1px solid #f3dfb8;cursor:pointer}
.nt-line input {flex:none;width:17px;height:17px;margin-top:2px;accent-color:#e08a1e}
.nt-line b {display:block;font-size:13.5px;color:#6b4a12}
.nt-line small {display:block;margin-top:2px;font-size:11px;color:#9a7a3e}
.nt-cost {font-size:14px;color:#2a2720}
.nt-cost b {font-size:17px;color:#0f5c43}
.nt-cost small {display:block;margin-top:3px;font-size:11px;color:#6f6a5e}
.nt-mini-row .hero-art {background:#fff}
.nt-notice {padding:9px 12px;border-radius:10px;background:#fff8ec;border:1px solid #f3dfb8;font-size:12.5px;color:#7a5413}

/* Copy form */
.nt-form {display:flex;flex-direction:column;gap:14px}
.nt-form-head {padding:18px 20px;border-radius:20px;background:linear-gradient(145deg,#edf3ee,#fff8ef);border:1px solid #e3dccb}
.nt-form-head h2 {margin:4px 0 6px;font-size:21px;color:#2a2720}
.nt-form-head p {font-size:13px;line-height:1.7;color:#6f6a5e}
.nt-form-head p b {color:#b42318}
.nt-problems {padding:12px 14px;border-radius:12px;background:#fff1f0;border:1px solid #fda29b;color:#b42318;font-size:12.5px;line-height:1.7}
.nt-problems ul {margin:4px 0 0;padding-left:18px}
.nt-card {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;padding:16px 18px 18px;border-radius:18px;background:#fff;border:1px solid #e6e0d8;box-shadow:0 5px 16px rgba(40,30,10,.05)}
.nt-card h3 {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;font-size:16px;color:#1d1b16}
.nt-card h3 img {width:30px;height:40px;object-fit:cover;border-radius:5px;border:1px solid #e3dccb;cursor:zoom-in}
.nt-group {grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;padding-top:8px;border-top:1px dashed #e3dccb}
.nt-group h4 {grid-column:1/-1;font-size:12.5px;color:#2a2720}
.nt-group h4 small {margin-left:8px;font-weight:400;color:#6f6a5e}
.nt-row {grid-column:1/-1;display:grid;grid-template-columns:72px minmax(0,1.9fr) minmax(0,1fr);gap:8px;align-items:center}
.nt-row:not(:has(.nt-fixed)) {grid-template-columns:1fr}
.nt-fixed {font-size:12.5px;color:#d2571c}
.nt-f {display:flex;align-items:center;gap:7px;min-width:0;padding:0 10px;height:38px;border:1px solid #e3dccb;border-radius:10px;background:#edf3ee}
.nt-f:focus-within {border-color:#0f5c43;background:#fff;box-shadow:0 0 0 3px rgba(15,92,67,.1)}
.nt-f>span {flex:none;max-width:42%;font-size:11.5px;font-weight:700;color:#6f6a5e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-f input {flex:1;min-width:0;height:100%;border:0;background:none;outline:0;font:inherit;font-size:13.5px;color:#2a2720}
.nt-count {flex:none;font-style:normal;font-size:10.5px;color:#9a9486}
.nt-count.over {color:#d92d20;font-weight:800}
.nt-f:has(.nt-count.over) {border-color:#f04438;background:#fff6f5}
.nt-submit {position:sticky;bottom:12px;display:flex;flex-direction:column;gap:9px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.96);border:1px solid #e3dccb;box-shadow:0 10px 30px rgba(40,30,10,.16)}
.nt-submit .typo-note {margin-top:0}

/* Results */
.nt-job {display:flex;flex-direction:column;gap:14px}
.nt-job-head {display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding:18px 20px;border-radius:20px;background:#fff;border:1px solid #e6e0d8;box-shadow:0 7px 21px rgba(40,30,10,.07)}
.nt-job-head h2 {margin:3px 0 4px;font-size:21px;color:#2a2720}
.nt-job-head p {font-size:12.5px;color:#6f6a5e}
.nt-bar {width:100%;margin-top:0}
.nt-bar>i {transition:width .6s}
.nt-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.nt-result-card {display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;border:1px solid #e6e0d8}
.nt-result-img {display:grid;place-items:center;aspect-ratio:3/4;background:linear-gradient(145deg,#edf3ee,#fff4ea)}
.nt-result-card.line .nt-result-img {background:#f6f6f4}
.nt-result-img img {width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.nt-result-img span {padding:0 14px;font-size:12px;text-align:center;color:#6f6a5e}
.nt-example-note {font-size:12.5px;color:#6f6a5e}
.nt-job .typo-note a {color:#b42318}

@media (max-width: 900px) {
  .nature {grid-template-columns:1fr}
  .nt-card,.nt-group {grid-template-columns:1fr}
  .nt-row {grid-template-columns:1fr}
  /* A sticky bar would cover half a phone screen. */
  .nt-submit {position:static}
}
/* Five nav links: keep them on one line on narrow phones. */
@media (max-width: 480px) { .navlink {padding:6px 4px;font-size:11px} }