/* ============================================================
   风谕产品工坊 · 共享设计系统
   纸 / 墨 / 朱砂 — editorial intelligence aesthetic
   每个 app 可在自己的 <style> 里覆盖 --accent / --accent-deep
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --paper:#F4EEE2;
  --paper-2:#FBF7EE;
  --paper-3:#EFE7D6;
  --ink:#1B1813;
  --ink-2:#3D3830;
  --ink-soft:#5E574B;
  --muted:#938B7B;
  --line:#DCD2BF;
  --line-soft:#E7DFCF;
  --vermilion:#BC3B2E;
  --vermilion-deep:#8F261C;
  --jade:#2E6657;
  --gold:#A9802B;
  --accent:#BC3B2E;
  --accent-deep:#8F261C;
  --accent-soft:#F5E2DC;
  --shadow:0 1px 0 rgba(27,24,19,.04), 0 18px 40px -28px rgba(27,24,19,.4);
  --shadow-sm:0 1px 0 rgba(27,24,19,.04), 0 8px 22px -18px rgba(27,24,19,.45);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Noto Sans SC",system-ui,sans-serif;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:#fff;}
.serif{font-family:"Noto Serif SC",serif;}
.mono{font-family:"Space Mono",monospace;}
a{color:inherit;}
h1,h2,h3,h4{font-family:"Noto Serif SC",serif;margin:0;letter-spacing:-.005em;}

/* ---------- app top bar ---------- */
.app-top{
  position:sticky;top:0;z-index:50;
  background:rgba(244,238,226,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.app-top .row{
  max-width:var(--maxw,1080px);margin:0 auto;padding:13px clamp(18px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.app-top .back{
  font-family:"Space Mono",monospace;font-size:12.5px;letter-spacing:.04em;
  text-decoration:none;color:var(--ink-soft);display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;transition:.18s;border:1px solid transparent;
}
.app-top .back:hover{background:var(--ink);color:var(--paper);}
.app-top .title{display:flex;align-items:center;gap:11px;}
.app-top .title .ic{
  width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"Noto Serif SC",serif;font-weight:900;font-size:16px;
}
.app-top .title .nm{font-family:"Noto Serif SC",serif;font-weight:700;font-size:17px;}
.app-top .title .nm small{display:block;font-family:"Space Mono",monospace;font-weight:400;font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;}
.app-top .brand{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw,1080px);margin:0 auto;padding:0 clamp(18px,4vw,40px);}
.hero{padding:54px 0 30px;}
.hero .kick{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:700;}
.hero h1{font-size:clamp(30px,5vw,46px);line-height:1.05;font-weight:900;margin:16px 0 0;}
.hero p{color:var(--ink-soft);max-width:600px;margin:14px 0 0;font-size:16px;}

/* ---------- cards ---------- */
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow-sm);}
.card-h{background:var(--ink);color:var(--paper);border-color:transparent;}

/* ---------- buttons ---------- */
.btn{
  font-family:"Noto Sans SC",sans-serif;font-weight:500;font-size:14.5px;cursor:pointer;
  padding:11px 20px;border-radius:10px;border:1px solid var(--line);background:var(--paper-2);
  color:var(--ink);transition:.16s;display:inline-flex;align-items:center;gap:8px;line-height:1;
}
.btn:hover{border-color:var(--ink);transform:translateY(-1px);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn-ink:hover{background:#000;}
.btn-sm{padding:7px 13px;font-size:13px;border-radius:8px;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}

/* ---------- inputs ---------- */
.inp,textarea.inp,select.inp{
  width:100%;font-family:"Noto Sans SC",sans-serif;font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  transition:.16s;line-height:1.5;
}
.inp:focus,textarea.inp:focus,select.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
textarea.inp{resize:vertical;min-height:96px;}
.lbl{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;display:block;margin-bottom:8px;}

/* ---------- pills / badges ---------- */
.pill{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.06em;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:default;}
.pill.sel{background:var(--accent);border-color:var(--accent);color:#fff;}
.pill.click{cursor:pointer;transition:.15s;}
.pill.click:hover{border-color:var(--ink);}

/* ---------- empty / loading ---------- */
.empty{text-align:center;color:var(--muted);padding:46px 20px;font-size:14.5px;}
.empty .big{font-family:"Noto Serif SC",serif;font-size:40px;color:var(--line);margin-bottom:10px;}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}
.thinking{color:var(--muted);font-size:14px;display:inline-flex;align-items:center;gap:9px;}

/* ---------- utility ---------- */
.row{display:flex;gap:12px;}
.col{display:flex;flex-direction:column;gap:12px;}
.between{justify-content:space-between;align-items:center;}
.wrap-g{flex-wrap:wrap;}
.muted{color:var(--muted);}
.section-t{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 14px;}
.divider{height:1px;background:var(--line);border:0;margin:22px 0;}
.note{font-size:12.5px;color:var(--muted);}
.demo-tag{position:fixed;bottom:14px;right:14px;z-index:80;font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.08em;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);padding:6px 11px;border-radius:999px;}