/* =========================================================
   CGV Voting System Styles (Mobile-first, Enterprise Look)
   设计目标：清新、时尚、细节丰富；移动优先；对比度充足；状态完备；组件一体化。
   命名：全部 cgv- 前缀，避免污染。
   ========================================================= */

/* -------- CSS Variables -------- */
:root {
  /* 主题色与渐变 */
  --cgv-primary: #2563eb;
  --cgv-primary-2: #4f46e5;
  --cgv-grad: linear-gradient(135deg, var(--cgv-primary) 0%, var(--cgv-primary-2) 100%);

  /* 语义色 */
  --cgv-success: #10b981;
  --cgv-warning: #f59e0b;
  --cgv-danger:  #ef4444;
  --cgv-info:    #0ea5e9;

  /* 文本与表面 */
  --cgv-text: #111827;
  --cgv-muted: #6b7280;
  --cgv-border: #e5e7eb;
  --cgv-border-strong: #d1d5db;
  --cgv-bg: #ffffff;
  --cgv-surface: #f8fafc;

  /* 圆角与阴影 */
  --cgv-radius: 14px;
  --cgv-radius-sm: 10px;
  --cgv-shadow: 0 8px 28px rgba(0,0,0,0.08);
  --cgv-shadow-soft: 0 6px 20px rgba(0,0,0,0.06);

  /* 交互尺寸 */
  --cgv-pad: 16px;
  --cgv-gap: 12px;

  /* 动效 */
  --cgv-ease: cubic-bezier(.2,.8,.2,1);
  --cgv-speed: .2s;
}

/* 统一字体 */
.cgv-wrap, .cgv-admin {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--cgv-text);
}

/* -------- Cards -------- */
.cgv-card {
  background: var(--cgv-bg);
  border: 1px solid var(--cgv-border);
  border-radius: var(--cgv-radius);
  box-shadow: var(--cgv-shadow);
  padding: var(--cgv-pad);
  margin: 12px 0;
}
.cgv-topic {
  background: linear-gradient(180deg, #fff, #fbfdff);
  position: relative;
  overflow: hidden;
}
.cgv-topic::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px; width: 200px; height: 200px;
  background: radial-gradient(closest-side, rgba(37,99,235,0.15), rgba(37,99,235,0) 80%);
  filter: blur(8px);
}

/* -------- Badges -------- */
.cgv-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.cgv-badge-open { background: rgba(37,99,235,.1); color: var(--cgv-primary); border:1px solid rgba(37,99,235,.25); }
.cgv-badge-wait { background: rgba(14,165,233,.12); color: var(--cgv-info); border:1px solid rgba(14,165,233,.25); }
.cgv-badge-closed { background: rgba(239,68,68,.08); color: var(--cgv-danger); border:1px solid rgba(239,68,68,.25); }

.cgv-topic-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap: wrap; }
.cgv-title { margin:0; font-size:22px; line-height:1.2; }
.cgv-status { display:flex; align-items:center; gap:10px; }
.cgv-countdown { color: var(--cgv-muted); font-size: 13px; }

/* -------- Hints -------- */
.cgv-hint .cgv-info,
.cgv-hint .cgv-warning,
.cgv-hint .cgv-success,
.cgv-hint .cgv-lock {
  padding: 12px 14px; border-radius: var(--cgv-radius-sm); margin-bottom: 6px; border: 1px solid transparent;
}
.cgv-hint .cgv-info { background: rgba(14,165,233,.08); color: #0369a1; border-color: rgba(14,165,233,.2); }
.cgv-hint .cgv-warning { background: rgba(245,158,11,.10); color: #92400e; border-color: rgba(245,158,11,.25); }
.cgv-hint .cgv-success { background: rgba(16,185,129,.10); color: #065f46; border-color: rgba(16,185,129,.25); }
.cgv-hint .cgv-lock { background: rgba(75,85,99,.08); color: #111827; border-color: rgba(75,85,99,.2); }
.cgv-subtle, .cgv-hint-quiet { color: var(--cgv-muted); font-size: 13px; }

/* -------- Options / Progress -------- */
.cgv-vote-card.cgv-disabled { opacity: .88; }
.cgv-options { display:flex; flex-direction: column; gap: 10px; }

.cgv-option {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px; border:1px solid var(--cgv-border); border-radius: var(--cgv-radius-sm);
  background: #fff; transition: box-shadow var(--cgv-speed) var(--cgv-ease), transform var(--cgv-speed) var(--cgv-ease);
}
.cgv-option:hover { box-shadow: var(--cgv-shadow-soft); transform: translateY(-1px); }
.cgv-option-main { flex: 1; }
.cgv-option-label { font-weight: 700; margin: 2px 0 8px; }
.cgv-option-stats { display:flex; align-items:center; gap: 10px; }
.cgv-progress {
  flex: 1; height: 12px; background: var(--cgv-surface); border-radius: 999px; overflow:hidden; border:1px solid var(--cgv-border);
}
.cgv-progress-bar {
  height: 100%; background: var(--cgv-grad);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  transition: width .5s var(--cgv-ease);
}
.cgv-count { font-size: 13px; color: var(--cgv-muted); min-width: 64px; text-align:right; }

/* -------- Controls -------- */
.cgv-option-actions { display:flex; align-items:center; justify-content:flex-end; gap: 10px; min-width: 160px; }

/* 单选按钮（普通VIP） */
.cgv-choice {
  display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 10px;
  border:1px solid var(--cgv-border); cursor:pointer; user-select:none;
  transition: background var(--cgv-speed) var(--cgv-ease), border-color var(--cgv-speed) var(--cgv-ease);
}
.cgv-choice:hover { background: var(--cgv-surface); border-color: var(--cgv-border-strong); }
.cgv-choice input { transform: scale(1.2); }

/* 步进器（永久VIP） */
.cgv-stepper { display:flex; align-items:center; gap: 8px; }
.cgv-input.cgv-num {
  width: 64px; text-align:center; padding: 8px 10px; border:1px solid var(--cgv-border);
  border-radius: 10px; font-weight:700; font-size: 15px; background:#fff; color: var(--cgv-text);
}
.cgv-btn {
  border:1px solid var(--cgv-border); background:#fff; color: var(--cgv-text);
  padding: 10px 14px; border-radius: 12px; cursor:pointer; transition: all var(--cgv-speed) var(--cgv-ease);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.cgv-btn:hover { background: var(--cgv-surface); }
.cgv-btn:active { transform: translateY(1px); }

.cgv-btn-ghost { background:#fff; }
.cgv-btn-primary {
  background: var(--cgv-grad); color:#fff; border-color: transparent;
  box-shadow: 0 8px 20px rgba(79,70,229,.25);
}
.cgv-btn-primary:hover { filter: brightness(.98); }
.cgv-btn-primary:disabled, .cgv-btn-disabled {
  background: #eef2ff; color: #6b7280; border-color: #e5e7eb; cursor: not-allowed; box-shadow: none;
}

.cgv-btn-warning { background: rgba(245,158,11,.12); color:#92400e; border-color: rgba(245,158,11,.25); }
.cgv-btn-warning:hover { background: rgba(245,158,11,.18); }
.cgv-btn-danger  { background: rgba(239,68,68,.12); color:#7f1d1d; border-color: rgba(239,68,68,.25); }
.cgv-btn-danger:hover { background: rgba(239,68,68,.18); }

/* +- 可见性与一致性 */
.cgv-minus, .cgv-plus {
  width: 40px; height: 40px; border-radius: 12px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 22px; line-height: 1; font-weight:900;
  color: var(--cgv-primary); background: #fff;
}
.cgv-minus:hover, .cgv-plus:hover { background: var(--cgv-surface); }
.cgv-minus:active, .cgv-plus:active { transform: scale(.98); }

/* Actions */
.cgv-actions { display:flex; align-items:center; justify-content:space-between; margin-top:12px; flex-wrap: wrap; gap: 10px; }

/* 结束展示 */
.cgv-ended { padding-top: 8px; }
.cgv-winner-title { font-weight:700; margin: 10px 0 6px; }
.cgv-winner-list { margin:0; padding-left: 18px; }

/* -------- Admin（全量自定义） -------- */
.cgv-admin-title { font-size: 24px; font-weight:800; margin: 14px 0 10px; }
.cgv-admin .cgv-admin-grid { display:grid; grid-template-columns: 1fr; gap: 16px; }
.cgv-panel { border:1px solid var(--cgv-border); border-radius: var(--cgv-radius); background:#fff; box-shadow: var(--cgv-shadow); }
.cgv-panel-head { padding: 14px 16px; border-bottom:1px solid var(--cgv-border); background: linear-gradient(180deg,#fff,#f9fbff); border-radius: var(--cgv-radius) var(--cgv-radius) 0 0; }
.cgv-panel-body { padding: 14px 16px; }
.cgv-admin-topic-head { display:flex; align-items:center; justify-content:space-between; gap: 10px; margin: 8px 0 12px; }
.cgv-head-actions { display:flex; align-items:center; gap: 8px; }

.cgv-table { width:100%; border-collapse: separate; border-spacing: 0; }
.cgv-table th, .cgv-table td { padding: 10px 12px; border-bottom:1px solid var(--cgv-border); text-align:left; }
.cgv-table thead th { background:#f7f9ff; font-weight:700; position: sticky; top:0; z-index:1; }
.cgv-table tr:hover td { background:#fafbff; }

.cgv-form .cgv-field { margin-bottom: 12px; }
.cgv-form label { display:block; font-weight:700; margin-bottom:6px; }
.cgv-form input[type="text"],
.cgv-form input[type="number"],
.cgv-form input[type="datetime-local"],
.cgv-form textarea {
  width:100%; max-width:100%; border:1px solid var(--cgv-border); border-radius: 10px; padding: 10px 12px; background:#fff;
}
.cgv-input.cgv-input-sm { width: 120px; }

.cgv-inline, .cgv-inline-form { display:inline-flex; align-items:center; gap:8px; }
.cgv-modal { position: fixed; z-index: 9999; inset: 0; background: rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding: 20px; }
.cgv-modal-inner { width:100%; max-width: 680px; background:#fff; border-radius: var(--cgv-radius); padding: 16px; box-shadow: var(--cgv-shadow); }

.cgv-modal-actions { display:flex; gap: 10px; }

/* -------- Responsive (Desktop Enhancements) -------- */
@media (min-width: 960px) {
  .cgv-admin .cgv-admin-grid { grid-template-columns: 2fr 1fr; }
  .cgv-title { font-size: 24px; }
  .cgv-option { padding: 14px 16px; }
  .cgv-option-actions { min-width: 200px; }
}

/* -------- Reduced Motion -------- */
@media (prefers-reduced-motion: reduce) {
  .cgv-progress-bar, .cgv-option { transition: none; }
}