:root{
  color-scheme: light;
  --bg:#F7F9FC; --surface:#FFFFFF; --text:#1A1F36; --muted:#5B6B82;
  --primary:#2D6AE3; --primary-600:#1E5AD6; --accent:#17B26A;
  --border:#E5EAF2; --shadow:220 10% 40%;
  --space-2:.25rem; --space-3:.5rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text); font:400 16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,PingFang SC,Microsoft YaHei}
a{color:var(--primary); text-decoration:none}
a:hover{color:var(--primary-600)}
.container{width:min(100%,1200px); margin:0 auto; padding:0 var(--space-4)}
header{padding:var(--space-6) 0}
.brand{font-weight:700; font-size:22px}
footer{border-top:1px solid var(--border); margin-top:var(--space-8); padding:var(--space-6) 0; color:var(--muted); font-size:14px}
.site-nav{position:relative; display:flex; gap:12px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.site-nav a{padding:8px 6px}
.site-nav::after{content:""; position:absolute; left:0; bottom:-1px; height:2px; width:var(--underline-w,0px); transform:translateX(var(--underline-x,0px)); background:var(--primary); transition:transform .28s ease,width .28s ease}
.nav-right{margin-left:auto; display:flex; gap:8px}
.dropdown{position:relative}
.dropdown>button{background:transparent; border:0; padding:8px 6px; border-radius:var(--radius-sm)}
.dropdown-menu{position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 6px 24px hsl(var(--shadow)/.12); min-width:180px; padding:6px; display:none}
.dropdown-menu a{display:block; padding:8px 10px; border-radius:var(--radius-sm)}
.dropdown.open .dropdown-menu{display:block}
.hamburger{display:none; background:transparent; border:0; font-size:22px; padding:6px}
.mobile-nav{display:none; flex-direction:column; gap:8px; padding:8px}
.mobile-nav a{padding:10px; border-radius:var(--radius-sm); background:#fff; border:1px solid var(--border)}
.mobile-nav.open{display:flex}
.hero{padding:var(--space-8) 0}
.hero-block{background:linear-gradient(135deg,#eaf2ff 0%,#fff 60%); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 8px 28px hsl(var(--shadow)/0.1); padding:var(--space-8)}
.lead{color:var(--muted)}
.stack>*+*{margin-top:var(--space-6)}
@media (max-width:768px){ .stack>*+*{margin-top:var(--space-4)} }
.grid{display:grid; gap:var(--space-6); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 4px 18px hsl(var(--shadow)/0.08); padding:var(--space-6)}
.card:hover{box-shadow:0 8px 28px hsl(var(--shadow)/0.12)}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1rem; border-radius:var(--radius-sm); font-weight:600; cursor:pointer; transition:transform .06s ease, box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn--primary{color:#fff; background:var(--primary)}
.btn--outline{color:var(--text); border:1px solid var(--border); background:var(--surface)}
[data-observe]{opacity:0; transform:translateY(12px)}
.is-visible{opacity:1; transform:none; transition:.4s}
.carousel{position:relative; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface)}
.carousel .slides{display:flex; width:100%; transition:transform .4s ease}
.carousel .slides>div{min-width:100%; padding:var(--space-6)}
.carousel .prev,.carousel .next{position:absolute; top:50%; transform:translateY(-50%); background:#fff; border:1px solid var(--border); border-radius:50%; width:36px; height:36px}
.carousel .prev{left:12px} .carousel .next{right:12px}
.form{background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 6px 24px hsl(var(--shadow)/.08); padding:var(--space-6)}
.form p{margin:var(--space-4) 0}
input,select,textarea{width:100%; padding:10px; border:1px solid #ccd3e5; border-radius:var(--radius-sm); background:#fff}
button{padding:10px 14px; border:1px solid #c9d4ff; border-radius:var(--radius-sm); background:#fff}
table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden}
th,td{padding:10px; border-bottom:1px solid #eef1f6; text-align:left}
.stats{display:flex; gap:var(--space-6); flex-wrap:wrap}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-6); min-width:160px}
.stat .num{font-weight:800; font-size:28px}
.list{display:flex; flex-direction:column; gap:var(--space-4)}
.list-item{display:block; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); box-shadow:0 2px 10px hsl(var(--shadow)/0.06)}
.list-item:hover{box-shadow:0 6px 18px hsl(var(--shadow)/0.1)}
.list-meta{color:var(--muted); font-size:14px; margin-top:4px}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,#f0f3f8 25%,#e6ebf3 37%,#f0f3f8 63%); background-size:200% 100%; animation:shimmer 1.4s infinite}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }
@media (max-width:768px){ .site-nav{display:none} .hamburger{display:block} }
[data-mobile-nav]{display:none!important}
@media (max-width:768px){ [data-mobile-nav].open{display:flex!important} }