/* v51 dashboard layer: dashboard-only interaction patterns and practice tabs */
.practice-section {
  margin-top: clamp(18px, 2.4vw, 28px);
}

.practice-tabs {
  border: 1px solid var(--border, #E4E7EC);
  border-radius: 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFF 100%);
  box-shadow: 0 18px 44px rgba(26,35,126,.08);
  padding: clamp(18px, 2.4vw, 26px);
}

.practice-tab-list {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(26,35,126,.10);
  border-radius: 999px;
  background: #F4F6FF;
  margin-bottom: 20px;
}

.practice-tab {
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-weight: 800;
  color: #39415F;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.practice-tab:hover,
.practice-tab:focus-visible {
  outline: none;
  background: rgba(255,255,255,.8);
  transform: translateY(-1px);
}

.practice-tab.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, #1A237E 0%, #3949AB 100%);
  box-shadow: 0 10px 22px rgba(26,35,126,.18);
}

.practice-tab-panel[hidden] {
  display: none !important;
}

.practice-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.practice-card {
  min-height: 100%;
  box-shadow: 0 14px 34px rgba(16,24,40,.07) !important;
  border-color: #E7EAF3 !important;
  transform: none !important;
}

.practice-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(26,35,126,.18) !important;
}

.practice-card .card-visual {
  width: 86px;
  height: 86px;
  object-fit: contain;
  margin-bottom: 10px;
}

.practice-card h3 {
  margin-top: 0;
  color: var(--primary, #1A237E);
}