:root{
  --bg:#f6f8fb; --fg:#222; --muted:#6b7280;
  --card:#fff; --line:#e5e7eb; --brand:#2563eb; --brand-2:#1d4ed8;
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
  --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Noto Sans SC,Helvetica,Arial,sans-serif;
  color:var(--fg); background:var(--bg);
}

/* 顶部导航 */
.header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.nav{
  max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:16px;
  padding:14px 16px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-logo{
  width:36px;height:36px;border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-weight:700;
  box-shadow:0 6px 16px rgba(37,99,235,.35);
}
.brand-name{color:var(--fg); font-weight:700; letter-spacing:.2px}
.nav-gap{flex:1}
.nav a{
  text-decoration:none; color:var(--fg); padding:8px 12px; border-radius:10px;
}
.nav a.active,.nav a:hover{background:rgba(37,99,235,.08); color:var(--brand)}

/* 通用布局 */
.main{max-width:1080px; margin:36px auto; padding:0 16px}
.hero{
  background: radial-gradient(1200px 400px at 20% -10%, rgba(37,99,235,.12), transparent),
              radial-gradient(1200px 400px at 80% -20%, rgba(16,185,129,.12), transparent);
  border:1px solid var(--line); border-radius:24px; padding:36px 28px; background-color:#fff; box-shadow:var(--shadow);
}
.hero h1{margin:0 0 10px 0; font-size:28px}
.hero p{margin:0; color:var(--muted)}

.grid{display:grid; gap:18px}
@media (min-width:768px){ .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-2{grid-template-columns:repeat(2,1fr)}}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow);
}
.card h3{margin:0 0 8px 0}
.muted{color:var(--muted)}
.badge{display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; background:rgba(37,99,235,.1); color:var(--brand);}

.kv{display:flex; align-items:flex-start; gap:12px}
.kv .icon{width:36px;height:36px;border-radius:10px; display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
}

.btn{
  display:inline-block; padding:10px 14px; border-radius:12px; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 8px 18px rgba(37,99,235,.35);
}
.btn-outline{
  background:#fff; color:var(--brand); border:1px solid var(--brand);
  box-shadow:none;
}
.btn + .btn{margin-left:10px}

/* 表格 */
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line); padding:10px 8px; text-align:left}
.table th{color:#111}

/* 页脚 */
.footer{margin:40px 0 24px 0; text-align:center; color:var(--muted); font-size:14px}
.footer a{color:var(--muted); text-decoration:none}
.footer a:hover{color:var(--brand)}

.carousel-container {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
}

.carousel {
  position: relative;
  width: 100%;
  height: auto;
}

.carousel-slide {
  display: none;
  padding: 40px 24px;
  background: linear-gradient(to right, #e0f2fe, #ffffff);
  text-align: center;
  transition: all 0.5s ease;
}

.carousel-slide.active {
  display: block;
}

.carousel-content h1 {
  font-size: 32px;
  margin: 16px 0 8px;
}

.carousel-content p {
  font-size: 16px;
  color: #333;
  margin-bottom: 16px;
}

.btn-group a {
  margin: 0 8px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  background: rgba(0,0,0,0.1);
  color: #333;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  z-index: 1;
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

.carousel-btn:hover {
  background: rgba(0,0,0,0.3);
  color: white;
}