/* Base reset */
* { box-sizing: border-box; }
body { 
  margin: 0; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; 
  background: #f9fafb;  /* light neutral background */
  color: #111827;       /* dark gray text */
}
a { color: #22c55e; text-decoration: none; }
.container { max-width: 860px; margin: 0 auto; padding: 0 16px; }

/* Navigation bar */
.nav { background: #fff; border-bottom: 1px solid #e5e7eb; }
.nav .container { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.brand { font-weight: 700; font-size: 1.1rem; color: #16a34a; }
.nav-right .btn + .btn { margin-left: 8px; }
.hello { margin-right: 12px; color: #555; }

/* Footer */
.footer { margin-top: 48px; padding: 24px 0; color: #6b7280; border-top: 1px solid #e5e7eb; background: #fff; }

/* Card containers */
.card { 
  background: #fff; 
  border: 1px solid #e5e7eb; 
  border-radius: 16px; 
  padding: 24px; 
  margin: 24px 0; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.04); 
}
h1, h2, h3 { margin: 0 0 16px; }
h1 { font-size: 24px; }

/* Forms */
.form .form-row { display: flex; flex-direction: column; margin-bottom: 12px; }
label { font-size: 14px; color: #374151; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="password"], select {
  padding: 10px 12px; 
  border-radius: 10px; 
  border: 1px solid #d1d5db; 
  outline: none;
}

/* Buttons - Green theme */
.btn {
  background: #22c55e;       /* primary green */
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}
.btn:hover { background: #16a34a; }

.btn.small { padding: 6px 10px; border-radius: 8px; font-size: 0.9rem; }

/* Outline buttons */
.btn.outline {
  background: transparent;
  color: #22c55e;
  border: 1px solid #22c55e;
}
.btn.outline:hover {
  background: #22c55e;
  color: #fff;
}

/* Active state for nav */
.btn.active {
  border: 2px solid #16a34a;
  font-weight: bold;
}
/* Make secondary actions lightweight */
.btn.ghost {
  background: transparent;
  border: none;
  color: #16a34a;
  padding: 0;               /* looks like a link */
  font-weight: 500;
  cursor: pointer;
}
.btn.ghost:hover { text-decoration: underline; }

/* Softer outline for optional use */
.btn.outline {
  background: transparent;
  color: #16a34a;
  border: 1px solid #a7f3d0;             /* lighter border */
}
.btn.outline:hover {
  background: rgba(34,197,94,0.08);      /* subtle hover */
  color: #16a34a;
}

/* Action row spacing */
.actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }

/* Alerts */
.alert { padding: 12px 14px; border-radius: 10px; margin: 12px 0; }
.alert.success { background: #ecfdf5; border: 1px solid #22c55e; color: #065f46; }
.alert.error { background: #fef2f2; border: 1px solid #ef4444; color: #7f1d1d; }

/* Muted text */
.muted { color: #6b7280; }

/* Grid helpers */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .grid-3 { grid-template-columns: 1fr; } }

.item-card { 
  border: 1px solid #e5e7eb; 
  border-radius: 12px; 
  padding: 12px; 
  background: #fff; 
}

/* 迷你卡片：更紧凑、可点击 */
.mini-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .6rem;
  padding: .6rem .75rem;
  background: #fff;
}
.mini-card:hover {
  box-shadow: 0 .25rem .6rem rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
}

/* 文本截断：标题最多两行，副标题一行 */
.line-clamp-1, .line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }

/* 标题里副标题的灰色点分隔（可选） */
.card-title .text-muted { font-weight: 400; font-size: .9rem; }

/* 让卡片更“松”一点 */
.card { border-radius: 1rem; }

section.card {
  margin-bottom: 1rem; /* 缩小默认间隔 */
}