/* ============================================
   ReadVenture Utility Classes
   替换高频 inline style 模式
   ============================================ */

/* ── 字号 ── */
.text-9  { font-size: 9px; }
.text-10 { font-size: 10px; }
.text-11 { font-size: 11px; }
.text-12 { font-size: 12px; }
.text-13 { font-size: 13px; }
.text-14 { font-size: 14px; }
.text-15 { font-size: 15px; }
.text-16 { font-size: 16px; }
.text-18 { font-size: 18px; }
.text-20 { font-size: 20px; }
.text-22 { font-size: 22px; }
.text-24 { font-size: 24px; }
.text-26 { font-size: 26px; }
.text-28 { font-size: 28px; }
.text-32 { font-size: 32px; }
.text-36 { font-size: 36px; }
.text-40 { font-size: 40px; }
.text-48 { font-size: 48px; }
.text-56 { font-size: 56px; }
.text-64 { font-size: 64px; }
.text-72 { font-size: 72px; }

/* ── 粗细 ── */
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* ── 文字颜色 ── */
.text-white { color: #fff; }
.text-muted { color: var(--text-muted); }
.text-very-dim { color: var(--text-very-dim); }
.text-dim { color: var(--text-dim); }
.text-purple-l { color: var(--purple-light); }
.text-purple { color: var(--purple); }
.text-cyan { color: var(--cyan); }
.text-gold { color: var(--gold); }
.text-gold-dark { color: var(--gold-dark); }
.text-green { color: var(--green); }
.text-green-bright { color: var(--green-bright); }
.text-red { color: var(--red); }
.text-coral { color: var(--coral); }
.text-amber { color: var(--amber); }
.text-error { color: #f87171; }
.text-brown { color: #4a3728; }

/* ── 文字对齐 ── */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ── 展示 ── */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-align { display: flex; align-items: center; }
.flex-1 { flex: 1; }
.flex-1-min { flex: 1; min-width: 0; }
.flex-shrink0 { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }

/* ── 间距 ── */
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }

.mt-2 { margin-top: 2px; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mr-4 { margin-right: 4px; }
.mr-6 { margin-right: 6px; }
.mr-8 { margin-right: 8px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }

.p-8 { padding: 8px; }
.p-12 { padding: 12px; }
.p-14 { padding: 14px; }
.p-16 { padding: 16px; }
.px-8 { padding-left: 8px; padding-right: 8px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }

/* ── 对齐 ── */
.align-mid { vertical-align: middle; }
.text-upper { text-transform: uppercase; }
.nowrap { white-space: nowrap; }
.overflow-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.w-full { width: 100%; }
.h-full { height: 100%; }

/* ── 圆角 ── */
.rounded-full { border-radius: 50%; }
.rounded-8 { border-radius: 8px; }
.rounded-12 { border-radius: 12px; }
.rounded-14 { border-radius: 14px; }
.rounded-16 { border-radius: 16px; }
.rounded-20 { border-radius: 20px; }
.rounded-24 { border-radius: 24px; }

/* ── 光标 / 交互 ── */
.pointer { cursor: pointer; }
.no-pointer { pointer-events: none; }

/* ── 定位 ── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* ── 常见组合 ── */
.text-caption {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
}

.text-caption-line {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}

.text-error-msg {
  color: #f87171;
  font-size: 13px;
}

.icon-inline {
  font-size: 18px;
  vertical-align: middle;
  margin-right: 4px;
}

.icon-inline-sm {
  font-size: 16px;
  vertical-align: middle;
  margin-right: 4px;
}

.input-field {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-purple-30);
  background: var(--glass-5);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
}

.input-mono {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-purple-30);
  background: var(--glass-5);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  font-family: monospace;
  letter-spacing: 1px;
}

.card-purple-sm {
  background: var(--purple-10);
  border: 1px solid var(--border-purple-25);
  border-radius: 20px;
  padding: 20px;
}

.card-section-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  margin-bottom: 12px;
}

.tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}

.status-indicator {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.objfit-contain { object-fit: contain; }
.objfit-cover { object-fit: cover; }