/* ============================================
   神皇预测 App - 我猜本期猜卡组件样式（SPEC-B4）
   作用域前缀 .gc-*；亮色主题；老 WebView 兼容（无 grid/gap/sticky/fixed/backdrop-filter）
   ============================================ */

#guess-card-root {
  display: block;
}

.gc-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(30, 50, 90, .05);
  padding: 14px 14px 16px;
  margin: 10px;
}

/* ---------- 标题行 ---------- */
.gc-head {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.gc-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: #1f2733;
}
.gc-badge {
  background: #eef3ff;
  color: #4a7dff;
  font-size: 11px;
  border-radius: 8px;
  padding: 2px 8px;
  margin-right: 8px;
  white-space: nowrap;
}
.gc-countdown {
  font-size: 11px;
  color: #9aa4b2;
  font-variant-numeric: tabular-nums;
}

/* ---------- 选择组 ---------- */
.gc-group {
  margin-bottom: 12px;
}
.gc-label {
  font-size: 13px;
  color: #5d6b82;
  margin-bottom: 6px;
}

/* 和值 4x7 数字块网格 */
.gc-sumgrid {
  display: flex;
  flex-wrap: wrap;
  margin: -3px;
}
.gc-sum {
  width: 40px;
  height: 40px;
  margin: 3px;
  border: 0;
  border-radius: 8px;
  background: #eef3ff;
  color: #4a7dff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.gc-sum.on {
  background: linear-gradient(135deg, #4a7dff, #3f6ef0);
  color: #fff;
}

/* 大小 / 单双 / 组合 选项按钮 */
.gc-opts {
  display: flex;
  flex-wrap: wrap;
}
.gc-opt {
  flex: 1;
  min-width: 0;
  margin-right: 8px;
  border: 0;
  border-radius: 10px;
  padding: 10px 0;
  background: #eef3ff;
  color: #4a7dff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.gc-opt:last-child {
  margin-right: 0;
}
.gc-opt.on {
  background: linear-gradient(135deg, #4a7dff, #3f6ef0);
  color: #fff;
}
/* 大（红系） */
.gc-opt.gc-opt-red {
  background: #ffeef0;
  color: #e03131;
}
.gc-opt.gc-opt-red.on {
  background: linear-gradient(135deg, #ff6b6b, #e03131);
  color: #fff;
}

/* 主按钮（提交 / 去晒） */
.gc-submit {
  width: 100%;
  margin-top: 4px;
  border: 0;
  border-radius: 12px;
  padding: 13px 0;
  background: linear-gradient(135deg, #4a7dff, #3f6ef0);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.gc-submit.is-disabled,
.gc-submit:disabled {
  background: #c6d0e2;
  color: #fff;
  cursor: not-allowed;
}

/* 查看我的帖子 */
.gc-viewpost {
  width: 100%;
  margin-top: 10px;
  border: 1px solid #c9d6ee;
  border-radius: 12px;
  padding: 12px 0;
  background: #fff;
  color: #4a7dff;
  font-size: 14px;
  cursor: pointer;
}

/* ---------- 已保存 / 截止 摘要 ---------- */
.gc-summary {
  margin: 2px 0 10px;
}
.gc-srow {
  display: flex;
  padding: 5px 0;
  font-size: 14px;
}
.gc-slabel {
  color: #5d6b82;
  width: 44px;
  flex-shrink: 0;
}
.gc-sval {
  color: #1f2733;
}
.gc-sval.gc-none {
  color: #9aa4b2;
}

.gc-cutoff {
  background: #f0f2f5;
  color: #9aa4b2;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  margin-bottom: 10px;
}
.gc-empty {
  text-align: center;
  color: #9aa4b2;
  font-size: 13px;
  padding: 12px 0;
}

/* ---------- 已开奖结果 ---------- */
.gc-lastnote {
  text-align: center;
  font-size: 12px;
  color: #9aa4b2;
  margin-bottom: 6px;
}
.gc-drawnums {
  display: flex;
  justify-content: center;
  margin: 6px 0 4px;
}
.gc-num {
  width: 46px;
  height: 52px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(180deg, #ff6b6b, #e03131);
  box-shadow: 0 3px 0 rgba(224, 49, 49, .35);
  margin-right: 8px;
}
.gc-num:last-child {
  margin-right: 0;
}
.gc-num.blue {
  background: linear-gradient(180deg, #4a7dff, #3b5bdb);
  box-shadow: 0 3px 0 rgba(59, 91, 219, .35);
}
.gc-drawmeta {
  text-align: center;
  font-size: 12.5px;
  color: #3b4658;
  margin-top: 6px;
}
.gc-drawmeta b {
  color: #e03131;
  font-size: 14px;
}

.gc-mypred {
  margin-top: 12px;
  border-top: 1px solid #eef0f4;
  padding-top: 10px;
}
.gc-mypred-title {
  font-size: 13px;
  color: #1f2733;
  font-weight: 700;
  margin-bottom: 6px;
}
.gc-predrow {
  display: flex;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
}
.gc-predlabel {
  color: #5d6b82;
  width: 44px;
  flex-shrink: 0;
}
.gc-predval {
  color: #1f2733;
  flex: 1;
}
.gc-mark-hit {
  color: #12b886;
  margin-left: 6px;
  font-weight: 700;
}
.gc-mark-miss {
  color: #9aa4b2;
  margin-left: 6px;
  font-weight: 700;
}
.gc-mark-none {
  color: #9aa4b2;
  margin-left: 6px;
  font-size: 12px;
}

.gc-hitbadge {
  display: inline-block;
  margin-top: 10px;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
}
.gc-hit-full {
  background: #e6f7f1;
  color: #12b886;
}
.gc-hit-partial {
  background: #fff2e2;
  color: #e8590c;
}
.gc-hit-none {
  background: #f0f2f5;
  color: #9aa4b2;
}

.gc-sharepreview {
  margin-top: 12px;
}
.gc-cardimg {
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* ---------- 状态提示 ---------- */
.gc-loading,
.gc-error,
.gc-notlogin,
.gc-pending {
  text-align: center;
  padding: 24px 12px;
  color: #9aa4b2;
  font-size: 14px;
}
.gc-notlogin p {
  color: #5d6b82;
  margin-bottom: 12px;
}
.gc-error button {
  margin-top: 12px;
  padding: 7px 26px;
  border: 0;
  border-radius: 4px;
  background: #4a7dff;
  color: #fff;
  font-size: 14px;
}
.gc-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e4e9f1;
  border-top-color: #4a7dff;
  border-radius: 50%;
  margin: 0 auto 10px;
  animation: gc-spin .8s linear infinite;
}
@keyframes gc-spin {
  to { transform: rotate(360deg); }
}
.gc-loading p {
  color: #9aa4b2;
  font-size: 13px;
  margin-top: 4px;
}
.gc-pending-note {
  color: #5d6b82;
  margin-bottom: 8px;
}

/* ---------- 收纳按钮 / 嵌入面板（SPEC-C） ---------- */
.gc-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(59, 130, 246, .35);
  border: none;
  white-space: nowrap;
}
.gc-toggle-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  background: rgba(255, 255, 255, .28);
  border-radius: 8px;
  padding: 1px 6px;
  line-height: 16px;
}
.gc-toggle-badge.gc-tb-ok {
  background: #fff;
  color: #2563EB;
}
.gc-toggle-badge.gc-tb-hit {
  background: #F59E0B;
  color: #fff;
}
.gc-toggle-badge.gc-tb-wait {
  background: rgba(255, 255, 255, .35);
}
.gc-embedpanel {
  display: none;
  margin: 0 10px;
}
.gc-embedpanel .gc-card {
  margin: 0 0 10px;
}

/* ============================================
   pc28 嵌入作用域完整样式（SPEC-D 任务1）
   所有选择器带 #pc28-embed 前缀，特异性≥110，
   压过 embed.css 的 #pc28-embed * 与 #pc28-embed button 两条 reset
   ============================================ */

/* ---------- 容器 ---------- */
#pc28-embed .gc-embedpanel {
  margin: 0 10px;
}
#pc28-embed .gc-embedpanel .gc-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(30, 50, 90, .05);
  padding: 14px 14px 16px;
  margin: 0 0 10px;
}

/* ---------- 收纳按钮 ---------- */
#pc28-embed .gc-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(59, 130, 246, .35);
  border: none;
  white-space: nowrap;
}
#pc28-embed .gc-toggle:active {
  background: linear-gradient(135deg, #2f6fd8, #1d4ed8);
  box-shadow: 0 1px 3px rgba(59, 130, 246, .25);
}

/* ---------- badge ---------- */
#pc28-embed .gc-toggle-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  background: rgba(255, 255, 255, .28);
  border-radius: 8px;
  padding: 1px 6px;
  line-height: 16px;
}
#pc28-embed .gc-toggle-badge.gc-tb-ok {
  background: #fff;
  color: #2563EB;
}
#pc28-embed .gc-toggle-badge.gc-tb-hit {
  background: #F59E0B;
  color: #fff;
}
#pc28-embed .gc-toggle-badge.gc-tb-wait {
  background: rgba(255, 255, 255, .35);
}

/* ---------- 标题行 ---------- */
#pc28-embed .gc-head {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
#pc28-embed .gc-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: #1f2733;
}
#pc28-embed .gc-badge {
  background: #eef3ff;
  color: #4a7dff;
  font-size: 11px;
  border-radius: 8px;
  padding: 2px 8px;
  margin-right: 8px;
  white-space: nowrap;
}
#pc28-embed .gc-countdown {
  font-size: 11px;
  color: #9aa4b2;
  font-variant-numeric: tabular-nums;
}

/* ---------- 选择组 ---------- */
#pc28-embed .gc-group {
  margin-bottom: 12px;
}
#pc28-embed .gc-label {
  font-size: 13px;
  color: #5d6b82;
  margin-bottom: 6px;
}

/* ---------- 和值网格 ---------- */
#pc28-embed .gc-sumgrid {
  display: flex;
  flex-wrap: wrap;
  margin: -3px;
}
#pc28-embed .gc-sum {
  width: 40px;
  height: 40px;
  margin: 3px;
  border: none;
  border-radius: 8px;
  background: #eef3ff;
  color: #4a7dff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
#pc28-embed .gc-sum.on {
  background: linear-gradient(135deg, #4a7dff, #3f6ef0);
  color: #fff;
}
#pc28-embed .gc-sum:active {
  background: #dbe5fb;
}
#pc28-embed .gc-sum.on:active {
  background: linear-gradient(135deg, #3f6ef0, #3562d6);
}

/* ---------- 大小/单双/组合 选项 ---------- */
#pc28-embed .gc-opts {
  display: flex;
  flex-wrap: wrap;
}
#pc28-embed .gc-opt {
  flex: 1;
  min-width: 0;
  margin-right: 8px;
  border: none;
  border-radius: 10px;
  padding: 10px 0;
  background: #eef3ff;
  color: #4a7dff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
#pc28-embed .gc-opt:last-child {
  margin-right: 0;
}
#pc28-embed .gc-opt.on {
  background: linear-gradient(135deg, #4a7dff, #3f6ef0);
  color: #fff;
}
#pc28-embed .gc-opt.gc-opt-red {
  background: #ffeef0;
  color: #e03131;
}
#pc28-embed .gc-opt.gc-opt-red.on {
  background: linear-gradient(135deg, #ff6b6b, #e03131);
  color: #fff;
}
#pc28-embed .gc-opt:active {
  background: #dbe5fb;
}
#pc28-embed .gc-opt.gc-opt-red:active {
  background: #ffdde0;
}
#pc28-embed .gc-opt.on:active {
  background: linear-gradient(135deg, #3f6ef0, #3562d6);
}
#pc28-embed .gc-opt.gc-opt-red.on:active {
  background: linear-gradient(135deg, #e03131, #c92a2a);
}

/* ---------- 主按钮 ---------- */
#pc28-embed .gc-submit {
  width: 100%;
  margin-top: 4px;
  border: none;
  border-radius: 12px;
  padding: 13px 0;
  background: linear-gradient(135deg, #4a7dff, #3f6ef0);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
#pc28-embed .gc-submit.is-disabled,
#pc28-embed .gc-submit:disabled {
  background: #c6d0e2;
  color: #fff;
  cursor: not-allowed;
}
#pc28-embed .gc-submit:active {
  background: linear-gradient(135deg, #3f6ef0, #3562d6);
}

/* ---------- 查看我的帖子 ---------- */
#pc28-embed .gc-viewpost {
  width: 100%;
  margin-top: 10px;
  border: 1px solid #c9d6ee;
  border-radius: 12px;
  padding: 12px 0;
  background: #fff;
  color: #4a7dff;
  font-size: 14px;
  cursor: pointer;
}
#pc28-embed .gc-viewpost:active {
  background: #eef3ff;
}

/* ---------- 摘要 ---------- */
#pc28-embed .gc-summary {
  margin: 2px 0 10px;
}
#pc28-embed .gc-srow {
  display: flex;
  padding: 5px 0;
  font-size: 14px;
}
#pc28-embed .gc-slabel {
  color: #5d6b82;
  width: 44px;
  flex-shrink: 0;
}
#pc28-embed .gc-sval {
  color: #1f2733;
}
#pc28-embed .gc-sval.gc-none {
  color: #9aa4b2;
}

#pc28-embed .gc-cutoff {
  background: #f0f2f5;
  color: #9aa4b2;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  margin-bottom: 10px;
}
#pc28-embed .gc-empty {
  text-align: center;
  color: #9aa4b2;
  font-size: 13px;
  padding: 12px 0;
}

/* ---------- 开奖结果 ---------- */
#pc28-embed .gc-lastnote {
  text-align: center;
  font-size: 12px;
  color: #9aa4b2;
  margin-bottom: 6px;
}
#pc28-embed .gc-drawnums {
  display: flex;
  justify-content: center;
  margin: 6px 0 4px;
}
#pc28-embed .gc-num {
  width: 46px;
  height: 52px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(180deg, #ff6b6b, #e03131);
  box-shadow: 0 3px 0 rgba(224, 49, 49, .35);
  margin-right: 8px;
}
#pc28-embed .gc-num:last-child {
  margin-right: 0;
}
#pc28-embed .gc-num.blue {
  background: linear-gradient(180deg, #4a7dff, #3b5bdb);
  box-shadow: 0 3px 0 rgba(59, 91, 219, .35);
}
#pc28-embed .gc-drawmeta {
  text-align: center;
  font-size: 12.5px;
  color: #3b4658;
  margin-top: 6px;
}
#pc28-embed .gc-drawmeta b {
  color: #e03131;
  font-size: 14px;
}

#pc28-embed .gc-mypred {
  margin-top: 12px;
  border-top: 1px solid #eef0f4;
  padding-top: 10px;
}
#pc28-embed .gc-mypred-title {
  font-size: 13px;
  color: #1f2733;
  font-weight: 700;
  margin-bottom: 6px;
}
#pc28-embed .gc-predrow {
  display: flex;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
}
#pc28-embed .gc-predlabel {
  color: #5d6b82;
  width: 44px;
  flex-shrink: 0;
}
#pc28-embed .gc-predval {
  color: #1f2733;
  flex: 1;
}
#pc28-embed .gc-mark-hit {
  color: #12b886;
  margin-left: 6px;
  font-weight: 700;
}
#pc28-embed .gc-mark-miss {
  color: #9aa4b2;
  margin-left: 6px;
  font-weight: 700;
}
#pc28-embed .gc-mark-none {
  color: #9aa4b2;
  margin-left: 6px;
  font-size: 12px;
}

#pc28-embed .gc-hitbadge {
  display: inline-block;
  margin-top: 10px;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
}
#pc28-embed .gc-hit-full {
  background: #e6f7f1;
  color: #12b886;
}
#pc28-embed .gc-hit-partial {
  background: #fff2e2;
  color: #e8590c;
}
#pc28-embed .gc-hit-none {
  background: #f0f2f5;
  color: #9aa4b2;
}

#pc28-embed .gc-sharepreview {
  margin-top: 12px;
}
#pc28-embed .gc-cardimg {
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* ---------- 状态提示 ---------- */
#pc28-embed .gc-loading,
#pc28-embed .gc-error,
#pc28-embed .gc-notlogin,
#pc28-embed .gc-pending {
  text-align: center;
  padding: 24px 12px;
  color: #9aa4b2;
  font-size: 14px;
}
#pc28-embed .gc-notlogin p {
  color: #5d6b82;
  margin-bottom: 12px;
}
#pc28-embed .gc-error button,
#pc28-embed .gc-retry {
  margin-top: 12px;
  padding: 7px 26px;
  border: none;
  border-radius: 4px;
  background: #4a7dff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
#pc28-embed .gc-error button:active,
#pc28-embed .gc-retry:active {
  background: #3f6ef0;
}
#pc28-embed .gc-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e4e9f1;
  border-top-color: #4a7dff;
  border-radius: 50%;
  margin: 0 auto 10px;
  animation: gc-spin .8s linear infinite;
}
#pc28-embed .gc-loading p {
  color: #9aa4b2;
  font-size: 13px;
  margin-top: 4px;
}
#pc28-embed .gc-pending-note {
  color: #5d6b82;
  margin-bottom: 8px;
}