/* OptionPerks loading skeletons — shared across money pages */
:root {
  --op-skel-base: #e8eef5;
  --op-skel-shine: #f7fafc;
}

@keyframes op-skel-shine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.op-skel {
  display: block;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--op-skel-base) 0%,
    var(--op-skel-shine) 45%,
    var(--op-skel-base) 90%
  );
  background-size: 200% 100%;
  animation: op-skel-shine 1.2s ease-in-out infinite;
}

.op-skel--sm { height: 12px; }
.op-skel--md { height: 16px; }
.op-skel--lg { height: 22px; }
.op-skel--xl { height: 36px; }
.op-skel--kpi { height: 64px; border-radius: 12px; }
.op-skel--row { height: 40px; margin-bottom: 8px; }
.op-skel--chart { height: 180px; border-radius: 12px; }

.op-skel-grid {
  display: grid;
  gap: 0.75rem;
}

.op-skel-grid--kpi {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 1rem;
}

.op-skel-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.45rem;
}

.op-skel-table td {
  padding: 0 0.25rem;
}

.op-skel-wrap[hidden],
.op-skel-wrap.is-done {
  display: none !important;
}

.op-skel-status {
  font-size: 0.82rem;
  color: #5b6b7c;
  margin: 0.35rem 0 0.75rem;
}