/* AI 許願池 — 共用樣式 */
:root {
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-900: #312e81;
  --brand-950: #1e1b4b;
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --line: #e2e8f0;
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  color: var(--ink-800);
  background: #f6f7fb;
}

.view { display: none; }
.view.active { display: block; }

/* ===== Sidebar nav ===== */
.nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem 1rem; border-radius: .75rem;
  font-size: .875rem; font-weight: 500;
  cursor: pointer; transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active {
  background: #fff; color: var(--brand-700);
  box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.nav-item.active i { color: var(--brand-600); }

/* ===== Status badges ===== */
.status-badge {
  display: inline-flex; align-items: center;
  padding: .125rem .625rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 600;
}

/* ===== Cards ===== */
.card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  padding: 1.5rem;
  transition: box-shadow .2s, transform .2s;
}

/* ===== Buttons ===== */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-600), #7c3aed);
  color: #fff;
  padding: .625rem 1.25rem;
  border-radius: .75rem;
  font-size: .875rem; font-weight: 600;
  border: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(79,70,229,.25), 0 4px 12px rgba(79,70,229,.15);
  transition: filter .15s, transform .1s, box-shadow .15s;
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 2px 4px rgba(79,70,229,.3), 0 8px 16px rgba(79,70,229,.2);
}
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn-secondary {
  background: #f1f5f9; color: var(--ink-700);
  padding: .625rem 1.25rem; border-radius: .75rem;
  font-size: .875rem; font-weight: 600;
  border: 1px solid var(--line); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-secondary:hover { background: #e2e8f0; border-color: #cbd5e1; }

/* ===== Form ===== */
.input-field {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  padding: .625rem .875rem;
  border-radius: .75rem;
  font-size: .875rem;
  color: var(--ink-800);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input-field:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.input-field:disabled { background: #f1f5f9; color: var(--ink-500); cursor: not-allowed; }
.input-field::placeholder { color: #cbd5e1; }

/* ===== Modal ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 1rem; backdrop-filter: blur(4px);
}
.modal-box {
  background: #fff; border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(15,23,42,.4);
  width: 100%; max-width: 32rem;
}

/* ===== Layout ===== */
#sidebar { width: 240px; min-height: 100vh; flex-shrink: 0; }
#main { flex: 1; min-width: 0; overflow-y: auto; }

.scrollbar-thin::-webkit-scrollbar { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 99px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }