:root{
  --bg:#f5f7fb; --surface:#fff; --text:#1f2937; --muted:#6b7280;
  --primary:#2563eb; --soft:#dbeafe; --line:#e5e7eb;
  --shadow:0 14px 34px rgba(15,23,42,.08); --radius:24px;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);
  background:radial-gradient(circle at top left,#e0f2fe 0%,rgba(224,242,254,0) 28%),
             radial-gradient(circle at top right,#dcfce7 0%,rgba(220,252,231,0) 22%), var(--bg);
}
a{text-decoration:none;color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.topbar{background:rgba(255,255,255,.94);border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:5}
.nav{display:flex;justify-content:space-between;align-items:center;min-height:72px;gap:16px;flex-wrap:wrap}
.brand{font-weight:800;font-size:1.18rem;color:var(--primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;font-weight:700;cursor:pointer}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.hero{padding:52px 0 18px}
.hero-card,.card,.stat,.detail-card,.editor-card,.side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card{padding:34px}
.eyebrow{display:inline-block;background:var(--soft);color:var(--primary);padding:9px 14px;border-radius:999px;font-size:.92rem;font-weight:700;margin-bottom:16px}
.hero h1{margin:0 0 14px;font-size:clamp(2rem,3vw,3.4rem);line-height:1.08}
.hero p{margin:0;color:var(--muted);line-height:1.8;font-size:1.04rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:18px 0 6px}
.stat{padding:20px}
.stat .n{font-size:1.8rem;font-weight:800;margin-bottom:6px}
.stat .t{color:var(--muted)}
.section-title{font-size:1.45rem;margin:24px 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;padding-bottom:56px}
.card{overflow:hidden;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.12)}
.card img{width:100%;height:330px;object-fit:cover;object-position:center top;display:block;background:#eef2ff}
.card-body{padding:18px}
.pill{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:8px 12px;font-size:.82rem;font-weight:700;margin-bottom:12px}
.card h3{margin:0 0 8px;font-size:1.22rem}
.meta{margin:0 0 14px;color:var(--muted);line-height:1.55}
.facts{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px}
.facts li{display:flex;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:#fbfdff}
.facts span{color:var(--muted)}
.desc{margin:0;color:#374151;line-height:1.7}
.detail-layout{display:grid;grid-template-columns:420px 1fr;gap:28px;padding:30px 0 60px}
.detail-photo{padding:20px}
.detail-photo img{width:100%;height:560px;object-fit:cover;object-position:center top;border-radius:18px;display:block;background:#eef2ff}
.detail-content{padding:28px}
.detail-content h1{margin:0 0 12px;font-size:2.1rem}
.detail-text{line-height:1.85;color:#374151}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.footer{padding:0 20px 44px;text-align:center;color:var(--muted)}
.editor-layout{display:grid;grid-template-columns:320px 1fr;gap:22px;padding:24px 0 56px}
.side-card,.editor-card{padding:18px}
.child-list{display:grid;gap:10px}
.child-item{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fbfdff;cursor:pointer}
.child-item.active{border-color:var(--primary);background:#eef4ff}
label{display:block;font-weight:700;margin:12px 0 6px}
input,textarea,select{width:100%;padding:12px 14px;border:1px solid #d1d5db;border-radius:14px;font:inherit}
textarea{min-height:140px;resize:vertical}
.note{padding:14px 16px;border:1px solid #fed7aa;background:#fff7ed;color:#9a3412;border-radius:16px;line-height:1.7;margin-bottom:14px}
.preview-box{margin-top:20px;padding:18px;border:1px dashed #cbd5e1;border-radius:18px;background:#f8fafc}
.preview-box img{width:220px;height:260px;object-fit:cover;object-position:center top;border-radius:14px;display:block;margin-bottom:14px}
.small{color:var(--muted);font-size:.95rem;line-height:1.7}
@media (max-width:900px){.stats,.detail-layout,.editor-layout{grid-template-columns:1fr}}