/* =========================================================
   LIFTRIX Shared Cards
   全画面共通カードデザイン
========================================================= */

:root{
  /* Card Base */
  --liftrix-card-radius: 16px;
  --liftrix-card-radius-sm: 12px;
  --liftrix-card-radius-lg: 20px;

  --liftrix-card-border: rgba(132,169,255,0.14);
  --liftrix-card-border-strong: rgba(132,169,255,0.20);

  --liftrix-card-bg:
    radial-gradient(circle at top left, rgba(63,169,255,0.07), transparent 36%),
    linear-gradient(180deg, rgba(13,27,50,0.92), rgba(7,16,31,0.96));

  --liftrix-card-bg-soft:
    linear-gradient(180deg, rgba(18,32,56,0.78), rgba(8,17,33,0.90));

  --liftrix-card-bg-flat: rgba(255,255,255,0.035);

  --liftrix-card-shadow:
    0 14px 34px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.035);

  --liftrix-card-shadow-soft:
    0 10px 24px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.03);

  /* Card Spacing */
  --liftrix-card-padding: 16px;
  --liftrix-card-padding-sm: 12px;
  --liftrix-card-padding-lg: 20px;

  /* Card Text */
  --liftrix-card-title: #F7FBFF;
  --liftrix-card-subtitle: rgba(221,233,255,0.62);
  --liftrix-card-muted: rgba(221,233,255,0.48);
}

/* =========================================================
   Base Shared Card
   新規画面では .liftrixCard を使う
========================================================= */

.liftrixCard{
  border-radius: var(--liftrix-card-radius);
  border: 1px solid var(--liftrix-card-border);
  background: var(--liftrix-card-bg);
  box-shadow: var(--liftrix-card-shadow);
  color: var(--liftrix-card-title);
}

.liftrixCard--soft{
  border-radius: var(--liftrix-card-radius);
  border: 1px solid var(--liftrix-card-border);
  background: var(--liftrix-card-bg-soft);
  box-shadow: var(--liftrix-card-shadow-soft);
}

.liftrixCard--flat{
  border-radius: var(--liftrix-card-radius-sm);
  border: 1px solid var(--liftrix-card-border);
  background: var(--liftrix-card-bg-flat);
}

.liftrixCard--padded{
  padding: var(--liftrix-card-padding);
}

.liftrixCard--paddedLg{
  padding: var(--liftrix-card-padding-lg);
}

/* =========================================================
   Card Typography
========================================================= */

.liftrixCardTitle{
  margin: 0;
  color: var(--liftrix-card-title);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.liftrixCardSubtitle{
  margin: 4px 0 0;
  color: var(--liftrix-card-subtitle);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.liftrixCardMuted{
  color: var(--liftrix-card-muted);
  font-size: 11px;
  font-weight: 800;
}

/* =========================================================
   Existing Card Compatibility
   既存画面への安全な共通化
========================================================= */

.planStepCard,
.previewCard,
.dashboardCard,
.clientCard,
.metricCard,
.graphCard,
.settingsCard,
.summaryCard,
.statCard,
.infoCard,
.reportCard,
.goalCard{
  border-color: var(--liftrix-card-border);
}

/* 既存カードの色味だけを軽く統一。レイアウトは壊さない */
.planStepCard,
.previewCard{
  background: var(--liftrix-card-bg);
  box-shadow: var(--liftrix-card-shadow);
}

/* =========================================================
   Hoverable Cards
========================================================= */

.liftrixCard--hoverable{
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.liftrixCard--hoverable:hover{
  transform: translateY(-1px);
  border-color: var(--liftrix-card-border-strong);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* =========================================================
   Legacy Card Compatibility
   app_ui.css から移管
========================================================= */

.card{
  background:
    linear-gradient(
      180deg,
      rgba(26, 41, 69, 0.92) 0%,
      rgba(20, 33, 58, 0.96) 100%
    );
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--card-pad);
  box-shadow:var(--shadow-card);

  display:flex;
  flex-direction:column;
  gap:var(--space-2);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.card:hover{
  box-shadow:var(--shadow-soft);
  border-color:var(--border-strong);
}

.cardTitle{
  margin:0 0 var(--space-1);
  font-size:16px;
  font-weight:var(--font-weight-title);
  line-height:1.3;
  color:var(--text-main);
}

.cardHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
}