/* =====================================================
   链金引擎 Design System v1.0
   统一视觉规范：颜色 / 字体 / 间距 / 组件 / 响应式
   ===================================================== */

/* ----- 1. CSS Variables ----- */
:root{
  /* Primary palette */
  --navy:#0C447C;
  --navy-dark:#042C53;
  --navy-light:#0D528F;
  --navy-soft:#E8F1FA;

  /* Accent palette */
  --gold:#C8A347;
  --gold-dark:#854F0B;
  --gold-bg:#FDF8EF;

  /* Neutrals */
  --bg:#FFFFFF;
  --bg-section:#F7F8FA;
  --bg-card:#FAFBFC;
  --bg-hover:#F0F3F7;
  --text:#1A1A1A;
  --text2:#4A4A4A;
  --muted:#5F5E5A;
  --light:#888780;
  --border:#E2E8F0;
  --border-hover:#CBD5E1;

  /* Semantic */
  --red:#A32D2D;
  --red-light:#FEF0F0;
  --green:#0F6E56;
  --green-light:#ECF8F4;
  --blue:#1D4ED8;
  --blue-light:#EBF4FC;
  --orange:#D97706;
  --orange-light:#FFFBEB;
  --purple:#6B21A8;
  --purple-light:#F5F0FA;
  --teal:#0F766E;
  --teal-light:#ECF6F5;

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.04);
  --shadow:0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.12);

  /* Radius */
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:20px;

  /* Layout */
  --nav-height:64px;
  --container-max:1200px;
  --section-py:64px;
  --section-px:24px;
}

/* ----- 2. Reset & Base ----- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei','Hiragino Sans GB',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
img{max-width:100%;display:block}

/* ----- 3. Layout ----- */
.lj-container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding-left:var(--section-px);
  padding-right:var(--section-px);
}
.lj-section{padding:var(--section-py) 0}
.lj-section-sm{padding:40px 0}
.lj-page{padding-top:calc(var(--nav-height) + 24px);padding-bottom:60px}

/* ----- 4. Typography ----- */
.lj-title-xl{font-size:44px;font-weight:800;line-height:1.15;letter-spacing:-0.02em}
.lj-title-lg{font-size:36px;font-weight:800;line-height:1.2;letter-spacing:-0.01em}
.lj-title-md{font-size:28px;font-weight:800;line-height:1.25}
.lj-title-sm{font-size:20px;font-weight:700;line-height:1.3}
.lj-text-muted{color:var(--muted)}
.lj-text-light{color:var(--light)}
.lj-text-navy{color:var(--navy)}
.lj-text-gold{color:var(--gold-dark)}
.lj-text-center{text-align:center}
.lj-subtitle{font-size:17px;color:var(--muted);line-height:1.7;max-width:680px}
.lj-subtitle.center{margin-left:auto;margin-right:auto}

/* ----- 5. Buttons ----- */
.lj-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 24px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  transition:all .2s ease;
  border:1px solid transparent;
  white-space:nowrap;
}
.lj-btn:hover{transform:translateY(-1px)}
.lj-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.lj-btn-primary{
  background:var(--navy);
  color:#fff;
  box-shadow:0 4px 14px rgba(12,68,124,.22);
}
.lj-btn-primary:hover{background:var(--navy-dark);box-shadow:0 6px 20px rgba(12,68,124,.3)}
.lj-btn-secondary{
  background:var(--bg);
  color:var(--text);
  border-color:var(--border);
}
.lj-btn-secondary:hover{border-color:var(--navy);color:var(--navy);background:var(--navy-soft)}
.lj-btn-ghost{
  background:transparent;
  color:var(--navy);
  border-color:var(--navy);
}
.lj-btn-ghost:hover{background:var(--navy);color:#fff}
.lj-btn-gold{
  background:var(--gold-bg);
  color:var(--gold-dark);
  border-color:#FAC775;
}
.lj-btn-gold:hover{background:#F5DEB3}
.lj-btn-sm{padding:8px 16px;font-size:13px;border-radius:8px}
.lj-btn-lg{padding:14px 32px;font-size:16px;border-radius:12px}
.lj-btn-block{width:100%}

/* ----- 6. Cards ----- */
.lj-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  transition:all .25s ease;
}
.lj-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md)}
.lj-card-featured{
  border-color:var(--navy);
  background:linear-gradient(180deg,rgba(12,68,124,.03),var(--bg));
}
.lj-card-title{
  font-size:17px;
  font-weight:700;
  color:var(--text);
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.lj-card-icon{
  width:44px;
  height:44px;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex-shrink:0;
}
.lj-card-icon.navy{background:linear-gradient(135deg,var(--navy),var(--navy-light));color:#fff}
.lj-card-icon.green{background:linear-gradient(135deg,var(--green),#0A8A63);color:#fff}
.lj-card-icon.gold{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#fff}
.lj-card-icon.purple{background:linear-gradient(135deg,var(--purple),#9333EA);color:#fff}
.lj-card-icon.red{background:linear-gradient(135deg,var(--red),#791F1F);color:#fff}

/* ----- 7. Forms ----- */
.lj-form-group{margin-bottom:18px}
.lj-form-label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text2);
  margin-bottom:6px;
}
.lj-form-label .req{color:var(--red);margin-left:2px}
.lj-form-input,
.lj-form-select,
.lj-form-textarea{
  width:100%;
  padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:14px;
  color:var(--text);
  outline:none;
  transition:all .2s ease;
}
.lj-form-input:hover,.lj-form-select:hover,.lj-form-textarea:hover{border-color:var(--border-hover)}
.lj-form-input:focus,.lj-form-select:focus,.lj-form-textarea:focus{
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(12,68,124,.08);
  background:var(--bg);
}
.lj-form-textarea{resize:vertical;min-height:90px}
.lj-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lj-form-hint{font-size:12px;color:var(--light);margin-top:4px}

/* ----- 8. Badges & Tags ----- */
.lj-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
}
.lj-badge-green{background:var(--green-light);color:var(--green);border:1px solid rgba(15,110,86,.15)}
.lj-badge-gold{background:var(--gold-bg);color:var(--gold-dark);border:1px solid #FAC775}
.lj-badge-blue{background:var(--blue-light);color:var(--navy);border:1px solid rgba(12,68,124,.12)}
.lj-badge-red{background:var(--red-light);color:var(--red);border:1px solid rgba(163,45,45,.12)}
.lj-badge-gray{background:var(--bg-section);color:var(--muted);border:1px solid var(--border)}
.lj-tag{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
}
.lj-tag-pro{background:var(--gold-bg);color:var(--gold-dark)}
.lj-tag-free{background:var(--green-light);color:var(--green)}

/* ----- 9. Hero ----- */
.lj-hero{
  padding:calc(var(--nav-height) + 48px) 0 48px;
  text-align:center;
  background:linear-gradient(180deg,var(--bg-section) 0%,var(--bg) 100%);
  position:relative;
  overflow:hidden;
}
.lj-hero::before{
  content:'';
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:900px;height:420px;
  background:radial-gradient(ellipse,rgba(12,68,124,.06) 0%,transparent 70%);
  pointer-events:none;
}
.lj-hero-inner{position:relative;z-index:1}
.lj-hero-avatar{
  width:80px;height:80px;
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  border-radius:var(--radius-lg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  color:#fff;
  margin-bottom:20px;
  box-shadow:0 8px 32px rgba(12,68,124,.25);
}
.lj-hero h1{margin-bottom:14px}
.lj-hero .lj-subtitle{margin-bottom:28px}
.lj-hero-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px}
.lj-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--bg);
  border:1px solid var(--border);
  padding:6px 14px;
  border-radius:20px;
  font-size:12px;
  color:var(--muted);
}
.lj-pill b{color:var(--navy)}

/* ----- 10. Upload zone ----- */
.lj-upload{
  border:2px dashed var(--border);
  border-radius:var(--radius);
  padding:24px;
  text-align:center;
  background:var(--bg-card);
  transition:all .2s ease;
  cursor:pointer;
}
.lj-upload:hover{border-color:var(--navy);background:var(--navy-soft)}
.lj-upload.dragover{border-color:var(--navy);background:var(--blue-light)}
.lj-upload-icon{font-size:32px;margin-bottom:8px;color:var(--navy)}
.lj-upload-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.lj-upload-desc{font-size:12px;color:var(--muted)}

/* ----- 11. Stats ----- */
.lj-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.lj-stat{
  background:var(--bg-section);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  text-align:center;
}
.lj-stat-num{font-size:34px;font-weight:800;color:var(--navy);line-height:1.1;margin-bottom:6px}
.lj-stat-label{font-size:13px;color:var(--muted)}

/* ----- 12. Section headers ----- */
.lj-section-head{text-align:center;margin-bottom:44px}
.lj-section-head h2{margin-bottom:10px}
.lj-section-head p{margin:0 auto}

/* ----- 13. Footer ----- */
.lj-footer{
  text-align:center;
  padding:40px 24px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
  background:var(--bg);
}
.lj-footer a{color:var(--navy)}
.lj-footer-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:12px}

/* ----- 14. Loading ----- */
.lj-spinner{
  width:44px;height:44px;
  border:3px solid var(--border);
  border-top-color:var(--navy);
  border-radius:50%;
  animation:lj-spin .8s linear infinite;
}
@keyframes lj-spin{to{transform:rotate(360deg)}}

/* ----- 15. Animations ----- */
@keyframes lj-fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.lj-fade-up{animation:lj-fadeUp .35s ease}

/* ----- 16. Utility ----- */
.lj-flex{display:flex}
.lj-flex-col{display:flex;flex-direction:column}
.lj-items-center{align-items:center}
.lj-justify-center{justify-content:center}
.lj-justify-between{justify-content:space-between}
.lj-gap-2{gap:8px}
.lj-gap-3{gap:12px}
.lj-gap-4{gap:16px}
.lj-mt-2{margin-top:8px}
.lj-mt-3{margin-top:12px}
.lj-mt-4{margin-top:16px}
.lj-mb-2{margin-bottom:8px}
.lj-mb-3{margin-bottom:12px}
.lj-mb-4{margin-bottom:16px}
.lj-hidden{display:none!important}

/* ----- 17. Responsive ----- */
@media(max-width:1024px){
  .lj-title-xl{font-size:38px}
  .lj-title-lg{font-size:32px}
}
@media(max-width:768px){
  :root{--section-py:48px;--section-px:16px;--nav-height:60px}
  .lj-title-xl{font-size:30px}
  .lj-title-lg{font-size:26px}
  .lj-title-md{font-size:22px}
  .lj-subtitle{font-size:15px}
  .lj-form-row{grid-template-columns:1fr}
  .lj-stats-grid{grid-template-columns:repeat(2,1fr)}
  .lj-hero-avatar{width:64px;height:64px;font-size:28px}
}
@media(max-width:480px){
  .lj-title-xl{font-size:26px}
  .lj-title-lg{font-size:24px}
  .lj-title-md{font-size:20px}
  .lj-stats-grid{grid-template-columns:1fr}
  .lj-btn-lg{padding:12px 24px;font-size:15px}
}