/* Part 11 — shared page polish (dashboard, single-stock, batch, etc.) */

.panel, .card {
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.panel:hover, .card:hover {
  box-shadow: 0 12px 40px rgba(11, 31, 51, 0.08);
}

.kpi {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12);
}

.kpi.featured {
  background: linear-gradient(145deg, #0d2137 0%, #1b3a5c 55%, #2a5298 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.kpi.featured .value {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

.btn-outline, .btn-secondary, .btn-primary {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-outline:hover, .btn-secondary:hover, .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(42, 82, 152, 0.18);
}

.chip {
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip:hover:not(.active) {
  background: rgba(42, 82, 152, 0.06);
}

.data-table tbody tr {
  transition: background 0.12s ease;
}

.data-table tbody tr:hover {
  background: rgba(16, 185, 129, 0.04);
}

.sent-grid .sent {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sent-grid .sent:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11, 31, 51, 0.06);
}

.fade-in {
  animation: fadeSlideIn 0.55s ease both;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.value-flash {
  animation: valueFlash 0.55s ease;
}

@keyframes valueFlash {
  0% { color: #10b981; transform: scale(1.015); }
  100% { color: inherit; transform: scale(1); }
}

.work-head h1 {
  letter-spacing: -0.03em;
}

.topbar {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.92);
}

#market-chart-echarts {
  border-radius: 12px;
  overflow: hidden;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

@media (max-width: 768px) {
  .kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .panel-grid { grid-template-columns: 1fr !important; }
}