:root {
  --bg: #ecfeff;
  --border: #cffafe;
  --text: #164e63;
  --muted: #64748b;
  --danger: #dc2626;
  --primary-50: #ecfeff;
  --primary-100: #cffafe;
  --primary-400: #22d3ee;
  --primary-500: #06b6d4;
  --primary-600: #0891b2;
  --primary-700: #0e7490;
  --primary-800: #155e75;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Source Sans 3", "Noto Sans SC", -apple-system, "PingFang SC", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}
.content-area { max-width: 1200px; margin: 0 auto; }

h1, h2, h3, h4 { font-family: "Lexend", "Noto Sans SC", sans-serif; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease; }
.card-hover { transition: all 0.2s ease; cursor: pointer; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(8,145,178,0.12); }
.act-card { cursor: pointer; transition: all 0.15s ease; }
.act-card:hover { box-shadow: 0 2px 12px rgba(8,145,178,0.1); }
.progress-bar { height: 6px; background: #cffafe; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; }

.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: #164e63; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px;
  box-shadow: 0 8px 30px rgba(8,145,178,0.25); z-index: 50;
}
.toast.err { background: #dc2626; }

.bp-list { max-height: 320px; overflow: auto; margin: 10px 0; }
.bp-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
.bp-item:hover { border-color: var(--primary-400); background: var(--primary-50); }

.nav-item.active {
  background: var(--primary-50); color: var(--primary-600); font-weight: 600; position: relative;
}
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--primary-600);
}

.pick-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
  border: 1.5px solid var(--border); background: #fff; color: var(--muted);
  cursor: pointer; transition: all 0.15s;
  user-select: none;
}
.pick-chip:hover { border-color: var(--primary-400); color: var(--primary-600); }
.pick-chip.pick-on {
  border-color: var(--primary-600); background: var(--primary-50); color: var(--primary-700);
}
.pick-dot { font-size: 7px; line-height: 1; }
.pick-chip.pick-on .pick-dot { color: var(--primary-600); }

/* Focus ring for keyboard navigation */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--primary-400);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
  .card-hover { transition: none; }
}