/* ============================================================
   LumaAI · 光合向善 — 共享设计系统 (对齐 UI mockup 精确还原)
   命名空间 --lm-* / .lm-*，与各页局部样式零冲突。移动端优先自适应。
   ============================================================ */
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/quicksand-latin-500.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/quicksand-latin-600.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/quicksand-latin-700.woff2') format('woff2');}

:root{
  --lm-bg:#FBFAF9; --lm-bg-2:#F3F3F0;
  --lm-card:#FFFFFF; --lm-card-2:#FBFBFA;
  --lm-line:#ECEBE6; --lm-line-soft:#F2F1EC;
  --lm-ink:#26262A; --lm-ink-soft:#3E3E42; --lm-muted:#666768; --lm-faint:#9B9B98;
  --lm-green:#1F5E48; --lm-green-strong:#184C3A; --lm-green-soft:#CDE6D6; --lm-green-bg:#E9F1EC;
  --lm-gold:#EFA83C; --lm-gold-soft:#F6D6A6; --lm-gold-bg:#FBF0DC;
  --lm-red:#C0392B; --lm-red-bg:#FBEDEA;
  --lm-radius:16px; --lm-radius-lg:20px;
  --lm-shadow:0 4px 18px rgba(45,45,40,.05),0 1px 2px rgba(0,0,0,.03);
  --lm-shadow-lg:0 12px 34px rgba(45,45,40,.09),0 2px 8px rgba(45,45,40,.04);
  --lm-nav-h:82px;
  --lm-font:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,-apple-system,sans-serif;
  --lm-brandfont:"Quicksand","PingFang SC",system-ui,sans-serif;
  --lm-displayfont:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --lm-bg:#1B1A17; --lm-bg-2:#232019;
    --lm-card:#26241F; --lm-card-2:#2B2822;
    --lm-line:#38352E; --lm-line-soft:#322F29;
    --lm-ink:#F1ECE2; --lm-ink-soft:#D8D2C6; --lm-muted:#ABA79C; --lm-faint:#87837A;
    --lm-green:#5CBB92; --lm-green-strong:#7ECBA6; --lm-green-soft:#2A473A; --lm-green-bg:#1D2F27;
    --lm-gold:#EDB25A; --lm-gold-soft:#4E3D20; --lm-gold-bg:#33291A;
    --lm-red:#E28368; --lm-red-bg:#3A241E;
    --lm-shadow:0 8px 26px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.24);
    --lm-shadow-lg:0 16px 42px rgba(0,0,0,.42),0 4px 12px rgba(0,0,0,.30);
  }
}
:root[data-theme="dark"]{
  --lm-bg:#1B1A17; --lm-bg-2:#232019; --lm-card:#26241F; --lm-card-2:#2B2822;
  --lm-line:#38352E; --lm-line-soft:#322F29; --lm-ink:#F1ECE2; --lm-ink-soft:#D8D2C6;
  --lm-muted:#ABA79C; --lm-faint:#87837A; --lm-green:#5CBB92; --lm-green-strong:#7ECBA6;
  --lm-green-soft:#2A473A; --lm-green-bg:#1D2F27; --lm-gold:#EDB25A; --lm-gold-soft:#4E3D20; --lm-gold-bg:#33291A;
}

*{box-sizing:border-box}
.lm-page{
  margin:0;min-height:100vh;color:var(--lm-ink);background:var(--lm-bg);
  font-family:var(--lm-font);line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  background-image:radial-gradient(720px 340px at 50% -60px, color-mix(in srgb,var(--lm-green) 10%,transparent), transparent 70%),
    linear-gradient(115deg,transparent 0 42%,color-mix(in srgb,var(--lm-gold) 4%,transparent) 50%,transparent 58%);
  background-repeat:no-repeat;
}
.lm-page:after{content:"";position:fixed;left:-250px;bottom:-170px;width:760px;height:470px;pointer-events:none;opacity:.55;z-index:0;
  background:repeating-radial-gradient(ellipse at 12% 100%,transparent 0 27px,color-mix(in srgb,var(--lm-green) 10%,transparent) 28px 29px,transparent 30px 48px)}

/* ---------- Top navigation ---------- */
.lm-nav{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  height:var(--lm-nav-h);padding:0 clamp(16px,4vw,44px);
  background:color-mix(in srgb,var(--lm-bg) 84%,transparent);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--lm-line) 52%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.55);
}
.lm-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;flex:0 0 auto}
.lm-logo{width:52px;height:52px;flex:0 0 auto;display:block}
.lm-wordmark{display:flex;flex-direction:column;justify-content:center;line-height:1;
  border-left:1.5px solid var(--lm-line);padding-left:14px}
.lm-wordmark .nm{font-family:var(--lm-brandfont);font-size:26px;font-weight:700;letter-spacing:-.3px;color:var(--lm-ink)}
.lm-wordmark .nm b{color:var(--lm-gold);font-weight:700}
.lm-wordmark .cn{font-size:11px;letter-spacing:5px;color:var(--lm-muted);font-weight:500;margin-top:5px;padding-left:1px}
.lm-links{display:flex;align-items:center;gap:clamp(16px,3vw,38px);margin:0 auto}
.lm-links a{color:var(--lm-muted);text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap;transition:color .15s}
.lm-links a:hover{color:var(--lm-ink)}
.lm-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lm-btn{border:none;font-family:inherit;cursor:pointer;font-weight:600;border-radius:11px;white-space:nowrap;transition:transform .1s,box-shadow .15s,background .15s}
.lm-btn:active{transform:translateY(1px)}
.lm-btn.ghost{background:var(--lm-card);color:var(--lm-ink);border:1px solid var(--lm-line);padding:8px 16px;font-size:13.5px}
.lm-btn.ghost:hover{border-color:var(--lm-green-soft)}
.lm-btn.solid{background:var(--lm-green);color:#fff;padding:9px 19px;font-size:13.5px;box-shadow:0 4px 12px color-mix(in srgb,var(--lm-green) 28%,transparent)}
.lm-btn.solid:hover{background:var(--lm-green-strong)}
.lm-avatar{width:36px;height:36px;border-radius:50%;flex:0 0 auto;background:var(--lm-bg-2);
  border:1px solid var(--lm-line);display:grid;place-items:center;color:var(--lm-faint);font-size:17px}
.lm-avatar svg{width:20px;height:20px}

/* ---------- Page shell ---------- */
.lm-shell{max-width:1200px;margin:0 auto;padding:clamp(18px,3vw,36px) clamp(16px,4vw,44px) 84px}
.lm-shell.narrow{max-width:920px}

/* ---------- Hero ---------- */
.lm-hero{text-align:center;padding:clamp(22px,4vw,48px) 0 8px}
.lm-pill{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--lm-green);background:var(--lm-green-bg);border:1px solid var(--lm-green-soft);
  padding:7px 16px;border-radius:22px}
.lm-pill .star{color:var(--lm-green)}
.lm-h1{font-family:var(--lm-displayfont);font-size:clamp(31px,5.2vw,49px);font-weight:700;letter-spacing:.5px;margin:20px 0 12px;text-wrap:balance;line-height:1.3;color:var(--lm-ink)}
.lm-h1 b{color:var(--lm-green);font-weight:700}
.lm-sub{color:var(--lm-muted);font-size:clamp(14px,2vw,16px);margin:0 auto;max-width:56ch}
.lm-sub b{color:var(--lm-green);font-weight:600}

.lm-agentbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-bottom:8px}
.lm-agent{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--lm-muted);
  background:var(--lm-card);border:1px solid var(--lm-line);border-radius:22px;padding:7px 15px}
.lm-agent .lg{width:18px;height:18px}
.lm-back{display:inline-flex;align-items:center;gap:6px;color:var(--lm-muted);text-decoration:none;font-size:13.5px;font-weight:500}
.lm-back:hover{color:var(--lm-ink)}

/* ---------- Composer ---------- */
.lm-composer{max-width:850px;margin:28px auto 0;background:var(--lm-card);border:1px solid var(--lm-line);
  border-radius:18px;box-shadow:0 12px 34px rgba(45,45,40,.07),0 2px 8px rgba(45,45,40,.03);padding:22px 24px 15px;text-align:left;
  transition:border-color .15s,box-shadow .15s}
.lm-composer:focus-within{border-color:var(--lm-green-soft);box-shadow:0 16px 44px color-mix(in srgb,var(--lm-green) 12%,transparent)}
.lm-composer textarea{width:100%;border:none;outline:none;resize:none;background:transparent;color:var(--lm-ink);
  font-family:inherit;font-size:16px;line-height:1.6;min-height:66px;max-height:200px;padding:2px 0}
.lm-composer textarea::placeholder{color:var(--lm-faint)}
.lm-crow{display:flex;align-items:center;gap:12px;margin-top:10px}
.lm-model{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--lm-ink-soft);
  background:var(--lm-card);border:1px solid var(--lm-line);border-radius:22px;padding:7px 14px 7px 10px;cursor:pointer;box-shadow:var(--lm-shadow)}
.lm-model .lg{width:20px;height:20px;flex:0 0 auto}
.lm-model .br{font-family:var(--lm-brandfont);font-weight:600}
.lm-hint{margin-left:auto;font-size:13px;color:var(--lm-faint)}
.lm-send{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;flex:0 0 auto;
  background:var(--lm-green);color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 16px color-mix(in srgb,var(--lm-green) 32%,transparent);transition:transform .1s,opacity .15s,background .15s}
.lm-send:hover{background:var(--lm-green-strong)}
.lm-send:active{transform:translateY(1px)}
.lm-send:disabled{opacity:.4;cursor:default;box-shadow:none}
.lm-send svg{width:19px;height:19px}

/* ---------- Capability cards (icon 与标题同排) ---------- */
.lm-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px auto 0;max-width:1010px}
.lm-cap{position:relative;background:var(--lm-card);border:1px solid var(--lm-line);border-radius:18px;
  padding:20px 20px 18px;cursor:pointer;text-decoration:none;color:inherit;box-shadow:0 5px 20px rgba(45,45,40,.045);
  display:grid;grid-template-columns:auto 1fr;column-gap:11px;align-items:center;
  transition:transform .12s,border-color .15s,box-shadow .15s}
.lm-cap:hover{transform:translateY(-2px);border-color:var(--lm-green-soft);box-shadow:var(--lm-shadow-lg)}
.lm-cap .ic{grid-row:1;grid-column:1;width:26px;height:26px;color:var(--lm-green);flex:0 0 auto}
.lm-cap .ic svg{width:100%;height:100%;display:block}
.lm-cap .tt{grid-row:1;grid-column:2;font-size:16px;font-weight:700;color:var(--lm-ink)}
.lm-cap .ds{grid-row:2;grid-column:1 / 3;font-size:13px;color:var(--lm-muted);margin-top:12px;line-height:1.6}
.lm-cap .badge{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;color:var(--lm-green);
  background:var(--lm-green-bg);border:1px solid var(--lm-green-soft);padding:2px 9px;border-radius:20px}
.lm-cap.rec,.lm-cap.cur{border-color:var(--lm-green-soft);background:color-mix(in srgb,var(--lm-green-bg) 42%,var(--lm-card))}
.lm-cap.cur{box-shadow:0 0 0 1px var(--lm-green-soft),var(--lm-shadow)}
.lm-cap.soon{opacity:.72}
.lm-cap.soon .badge{color:var(--lm-gold);background:var(--lm-gold-bg);border-color:var(--lm-gold-soft)}

.lm-caps.row{margin-top:22px}
.lm-caps.row .lm-cap{padding:15px 16px}
.lm-caps.row .lm-cap .ic{width:23px;height:23px}
.lm-caps.row .lm-cap .tt{font-size:15px}
.lm-caps.row .lm-cap .ds{font-size:12px;margin-top:8px}

.lm-foot-hint{text-align:center;color:var(--lm-muted);font-size:13.5px;margin:28px auto 0;max-width:60ch}
.lm-foot-hint .b{color:var(--lm-green);font-weight:700}
.lm-foot-hint .ic{color:var(--lm-gold)}

.lm-panel{background:var(--lm-card);border:1px solid var(--lm-line);border-radius:var(--lm-radius);box-shadow:var(--lm-shadow);padding:18px 18px}

.lm-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--lm-ink);color:var(--lm-bg);padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;box-shadow:var(--lm-shadow-lg);max-width:88vw}
.lm-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   Responsive — 自适应显示屏 / 手机同步
   ============================================================ */
@media (max-width:1040px){ .lm-caps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){
  .lm-links{display:none}
  .lm-btn.ghost{display:none}
}
@media (max-width:560px){
  :root{--lm-nav-h:66px}
  .lm-nav{gap:10px;padding:0 14px}
  .lm-logo{width:44px;height:44px}
  .lm-wordmark .nm{font-size:19px}
  .lm-wordmark .cn{display:none}
  .lm-wordmark{padding-left:10px}
  .lm-caps{grid-template-columns:1fr;gap:12px}
  .lm-composer{padding:16px 16px 12px;border-radius:18px;margin-top:20px}
  .lm-composer textarea{font-size:15.5px;min-height:64px}
  .lm-hint{display:none}
  .lm-crow{gap:8px}
  .lm-btn.solid{padding:8px 15px}
  .lm-hero{padding-top:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}