/* ───── Theme tokens ───── */
:root {
  --brand-1: #6366f1;   /* indigo-500 */
  --brand-2: #8b5cf6;   /* violet-500 */
  --brand-3: #ec4899;   /* pink-500 (accent) */
  --bg-page: #f4f5fb;
  --bg-card: #ffffff;
  --border-soft: rgba(99, 102, 241, .08);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .05), 0 10px 15px -3px rgba(15, 23, 42, .08);
  --shadow-lg: 0 10px 25px -5px rgba(99, 102, 241, .2);
  --radius: 14px;
}

body {
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg-page);
  background-image: radial-gradient(circle at top right, rgba(139, 92, 246, .05), transparent 50%),
                    radial-gradient(circle at bottom left, rgba(99, 102, 241, .04), transparent 40%);
  min-height: 100vh;
  color: #1e293b;
}

/* ───── Navbar ───── */
.navbar.navbar-dark.bg-dark {
  background: linear-gradient(135deg, #1e1b4b, #312e81) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  backdrop-filter: saturate(180%) blur(10px);
}
.navbar-brand {
  letter-spacing: .3px;
  font-size: 1.05rem;
}
.navbar .btn-warning {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  border: none;
  color: #fff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, .35);
}
.navbar .btn-warning:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(245, 158, 11, .5); }
.navbar .btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  box-shadow: 0 2px 6px rgba(16, 185, 129, .35);
}
.navbar .btn-success:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(16, 185, 129, .5); }
.navbar .btn { transition: transform .15s ease, box-shadow .15s ease; }

/* ───── Cards ───── */
.card {
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  background: var(--bg-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-header {
  border-bottom: 1px solid var(--border-soft);
  background: transparent !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: .85rem 1rem;
}
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-info,
.card-header.bg-warning {
  border-bottom: none;
}
.list-group-item {
  border-left: 0;
  border-right: 0;
  background: transparent;
  border-color: var(--border-soft);
  transition: background .12s ease;
}
.list-group-item:hover { background: rgba(99, 102, 241, .025); }

/* ───── Tier pills (primary nav) ───── */
.nav.nav-pills.nav-fill {
  border: 1px solid var(--border-soft);
  background: #fff !important;
}
.nav-pills .nav-link {
  color: #64748b;
  font-weight: 600;
  border-radius: calc(var(--radius) - 4px);
  padding: .55rem .5rem;
  transition: color .15s ease, background .15s ease;
}
.nav-pills .nav-link:hover { color: #334155; background: rgba(99, 102, 241, .06); }
.nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, .35);
}

/* 二级 pills（时长，更紧凑）*/
.tab-content .nav.nav-pills.bg-light {
  background: #eef2ff !important;
  border: none;
}
.tab-content .nav.nav-pills.bg-light .nav-link {
  font-size: .85rem;
  color: #4f46e5;
}
.tab-content .nav.nav-pills.bg-light .nav-link.active {
  background: #fff !important;
  color: var(--brand-1) !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, .15);
}

/* ───── Buttons ───── */
.btn { border-radius: 10px; font-weight: 500; transition: transform .12s ease, box-shadow .12s ease; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, .35);
}
.btn-danger {
  background: linear-gradient(135deg, #ef4444, #ec4899);
  border: none;
}
.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626, #db2777);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, .35);
}
.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
}
.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  border: none;
  color: #fff;
}
.btn-warning:hover { color: #fff; }
.btn-info {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  border: none;
  color: #fff;
}
.btn-outline-primary { color: var(--brand-1); border-color: var(--brand-1); }
.btn-outline-primary:hover { background: var(--brand-1); border-color: var(--brand-1); }

/* ───── Forms ───── */
.form-control, .input-group-text {
  border-color: rgba(99, 102, 241, .15);
  border-radius: 10px;
  padding: .55rem .8rem;
}
.form-control:focus {
  border-color: var(--brand-1);
  box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .15);
}
.input-group .input-group-text { border-radius: 10px 0 0 10px; background: #f8fafc; }
.input-group .form-control { border-radius: 0; }
.input-group .form-control:last-child { border-radius: 0 10px 10px 0; }
.input-group .btn:last-child { border-radius: 0 10px 10px 0; }

/* ───── Typography ───── */
h4, h5, h6 { color: #1e1b4b; }
code { color: var(--brand-3); word-break: break-all; }
.text-danger { color: #ef4444 !important; }
.text-muted { color: #64748b !important; }

/* ───── Badges ───── */
.badge { font-weight: 500; padding: .35em .65em; border-radius: 6px; }
.badge.bg-primary { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important; }
.badge.bg-warning { background: linear-gradient(135deg, #f59e0b, #ea580c) !important; color: #fff !important; }
.badge.bg-success { background: linear-gradient(135deg, #10b981, #059669) !important; }
.badge.bg-info    { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; color: #fff !important; }
.badge.bg-danger  { background: linear-gradient(135deg, #ef4444, #ec4899) !important; }

/* ───── Hero / user card ───── */
.hero-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ec4899 100%);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.hero-card .text-white-50 { color: rgba(255, 255, 255, .75) !important; }

/* ───── Tab content padding ───── */
.tab-pane { animation: fadeIn .2s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ───── Alert refinement ───── */
.alert {
  border: none;
  border-radius: 10px;
  border-left: 4px solid;
  padding: .8rem 1rem;
}
.alert-info { background: rgba(99, 102, 241, .08); color: #4338ca; border-left-color: var(--brand-1); }
.alert-success { background: rgba(16, 185, 129, .08); color: #047857; border-left-color: #10b981; }
.alert-warning { background: rgba(245, 158, 11, .08); color: #92400e; border-left-color: #f59e0b; }
.alert-danger { background: rgba(239, 68, 68, .08); color: #b91c1c; border-left-color: #ef4444; }

/* ───── Section headers ───── */
.section-title {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #64748b;
  margin: 1.2rem 0 .6rem;
  padding-left: .25rem;
}

/* ───── Utility ───── */
.shadow-soft { box-shadow: var(--shadow-md) !important; }
details > summary { cursor: pointer; user-select: none; color: #64748b; }
details > summary:hover { color: var(--brand-1); }

/* ───── Mobile ───── */
@media (max-width: 575px) {
  .card-body { padding: 1rem; }
  h4 { font-size: 1.2rem; }
  h5 { font-size: 1.05rem; }
  .navbar .btn-sm { padding: .3rem .55rem; font-size: .8rem; }
}