/* ================= 卡通皮肤（数据魔方同款视觉） =================
   作用范围：body.ct 的页面（个人中心 / 在线检测 / 套餐充值）
   只做视觉叠加，不改动任何页面原有结构与逻辑 */

/* ---------- 动态背景 ---------- */
.ct2 { position: relative; }
.ct2-bg { position: absolute; left: -22px; right: -22px; top: -22px; bottom: -10px; overflow: hidden; pointer-events: none; z-index: 0; }
.ct2-bg .orb { position: absolute; border-radius: 50%; filter: blur(52px); opacity: .55; }
.ct2-bg .orb.o1 { width: 380px; height: 380px; left: -90px; top: -140px; background: radial-gradient(circle at 32% 32%, #7c5cff, transparent 68%); animation: ctOrbA 17s ease-in-out infinite alternate; }
.ct2-bg .orb.o2 { width: 340px; height: 340px; right: -70px; top: 30px; background: radial-gradient(circle at 60% 40%, #22d3ee, transparent 68%); animation: ctOrbB 20s ease-in-out infinite alternate; }
.ct2-bg .orb.o3 { width: 430px; height: 430px; left: 42%; bottom: -190px; background: radial-gradient(circle at 50% 50%, #ff6bcb, transparent 72%); opacity: .3; animation: ctOrbA 24s ease-in-out infinite alternate-reverse; }
@keyframes ctOrbA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(70px, 46px, 0) scale(1.16); } }
@keyframes ctOrbB { from { transform: translate3d(0, 0, 0) scale(1.06); } to { transform: translate3d(-56px, 66px, 0) scale(.94); } }
.ct2-bg .shape { position: absolute; width: 40px; height: 40px; border-radius: 13px; opacity: .16; background: linear-gradient(140deg, #7c5cff, #22d3ee); animation: ctFloat 12s ease-in-out infinite; }
.ct2-bg .shape.s1 { left: 10%; top: 130px; transform: rotate(18deg); }
.ct2-bg .shape.s2 { right: 15%; top: 250px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(140deg, #ff6bcb, #ffb020); animation-delay: -3s; }
.ct2-bg .shape.s3 { left: 56%; top: 46px; width: 22px; height: 22px; background: linear-gradient(140deg, #34d399, #22d3ee); animation-delay: -6s; }
.ct2-bg .shape.s4 { left: 80%; bottom: 130px; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, #818cf8, #7c5cff); animation-delay: -8s; }
@keyframes ctFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-26px) rotate(16deg); } }
.ct2-bg .dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(124, 92, 255, .22) 1.3px, transparent 1.4px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse at 45% 10%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 45% 10%, #000 0%, transparent 70%); }
.ct2-inner { position: relative; z-index: 1; }

/* 顶部轮播图（页面最上方，Hero 之前） */
body.ct .ct2-inner > .kb-banner { border-radius: 24px; margin-bottom: 18px; box-shadow: 0 10px 0 -4px rgba(124, 92, 255, .12), 0 22px 44px -26px rgba(30, 40, 80, .55); }
/* 后台把位置设为底部时，间距翻转 */
body.ct .ct2-inner > .kb-banner.kb-bottom { margin-top: 18px; margin-bottom: 0; }
@media (max-width: 640px) { body.ct .ct2-inner > .kb-banner { border-radius: 16px; } }

/* ---------- Hero ---------- */
.ct-hero { position: relative; display: grid; grid-template-columns: 1fr 230px; gap: 18px; align-items: center; padding: 24px 26px; border-radius: 30px; border: 2px solid rgba(124, 92, 255, .18); background: linear-gradient(135deg, rgba(124, 92, 255, .15), rgba(34, 211, 238, .10) 52%, rgba(255, 107, 203, .14)); overflow: hidden; margin-bottom: 18px; box-shadow: 0 10px 0 -4px rgba(124, 92, 255, .14), 0 26px 50px -30px rgba(30, 40, 80, .6); }
.ct-hero::after { content: ''; position: absolute; inset: auto -40px -90px; height: 160px; background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .5), transparent 70%); opacity: .5; }
.ct-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #fff; padding: 5px 12px 5px 9px; border-radius: 99px; background: linear-gradient(120deg, #7c5cff, #ff6bcb); box-shadow: 0 4px 12px -4px rgba(124, 92, 255, .9); }
.ct-badge svg { width: 14px; height: 14px; }
.ct-hero-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 28px; font-weight: 900; letter-spacing: -.8px; margin: 11px 0 7px; color: var(--text); }
.ct-hero-title .tag-green, .ct-hero-title .tag-gray, .ct-hero-title .tag-orange { font-size: 11.5px; padding: 3px 10px; border-radius: 99px; font-weight: 700; }
.ct-hero-sub { font-size: 13.5px; color: var(--text-2); margin: 0 0 13px; }
.ct-hero-sub a { font-weight: 700; }
.ct-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--card-bg); border: 2px solid var(--border); border-radius: 99px; padding: 5px 13px 5px 8px; box-shadow: 0 3px 0 -1px rgba(124, 92, 255, .12); }
.ct-step i { width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; color: #fff; }
.ct-step i svg { width: 12px; height: 12px; }
.ct-step i.c1 { background: linear-gradient(140deg, #8b6bff, #4f46e5); }
.ct-step i.c2 { background: linear-gradient(140deg, #22d3ee, #0891b2); }
.ct-step i.c3 { background: linear-gradient(140deg, #34d399, #0d9488); }

/* 3D 魔方 */
.ct-hero-art { position: relative; height: 176px; display: grid; place-items: center; }
.ct-hero-art::before { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 107, 255, .3), transparent 65%); animation: ctPulse 5s ease-in-out infinite alternate; }
@keyframes ctPulse { from { opacity: .55; } to { opacity: 1; } }
.ct-cube-wrap { perspective: 760px; width: 180px; height: 180px; display: grid; place-items: center; }
.ct-cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; animation: ctSpin 18s linear infinite; }
.ct-cube span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; border-radius: 20px; border: 2px solid rgba(255, 255, 255, .55); box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .14), 0 0 28px rgba(124, 92, 255, .3); }
.ct-cube span:nth-child(1) { transform: translateZ(50px); background: linear-gradient(150deg, #8b6bff, #4f46e5); }
.ct-cube span:nth-child(2) { transform: rotateY(180deg) translateZ(50px); background: linear-gradient(150deg, #22d3ee, #0891b2); }
.ct-cube span:nth-child(3) { transform: rotateY(90deg) translateZ(50px); background: linear-gradient(150deg, #ff6bcb, #e11d48); }
.ct-cube span:nth-child(4) { transform: rotateY(-90deg) translateZ(50px); background: linear-gradient(150deg, #fbbf24, #f97316); }
.ct-cube span:nth-child(5) { transform: rotateX(90deg) translateZ(50px); background: linear-gradient(150deg, #34d399, #10b981); }
.ct-cube span:nth-child(6) { transform: rotateX(-90deg) translateZ(50px); background: linear-gradient(150deg, #818cf8, #6366f1); }
@keyframes ctSpin { from { transform: rotateX(-16deg) rotateY(0); } to { transform: rotateX(-16deg) rotateY(360deg); } }
.ct-ring { position: absolute; border-radius: 50%; border: 2px dashed rgba(124, 92, 255, .35); }
.ct-ring.r1 { width: 178px; height: 178px; animation: ctRing 22s linear infinite; }
.ct-ring.r2 { width: 220px; height: 220px; border-style: solid; border-color: rgba(34, 211, 238, .22); animation: ctRing 30s linear infinite reverse; }
@keyframes ctRing { to { transform: rotate(360deg); } }

/* ---------- 卡片 ---------- */
body.ct .card { border-radius: 26px; border: 2px solid var(--border); padding: 20px 22px; box-shadow: 0 7px 0 -3px rgba(124, 92, 255, .10), 0 18px 40px -22px rgba(30, 40, 80, .45); }
body.ct .card h3 { font-size: 16px; font-weight: 800; letter-spacing: .2px; }

/* ---------- 按钮：立体按压 ---------- */
body.ct .btn { height: 40px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--border); background: var(--card-bg); color: var(--text); font-weight: 700; box-shadow: 0 4px 0 -1px rgba(30, 40, 80, .12); transition: transform .14s, box-shadow .14s, background .14s, color .14s; }
body.ct .btn:hover { transform: translateY(-2px); border-color: var(--border); color: var(--text); }
body.ct .btn:active { transform: translateY(2px); box-shadow: none; }
body.ct .btn.primary { background: linear-gradient(140deg, #8b6bff, var(--primary) 62%, var(--primary-600)); border-color: transparent; color: #fff; box-shadow: 0 4px 0 -1px rgba(70, 55, 180, .55), 0 16px 26px -16px rgba(92, 70, 220, .95); }
body.ct .btn.primary:hover { color: #fff; opacity: .96; }
body.ct .btn.sm { height: 32px; padding: 0 13px; font-size: 12.5px; border-radius: 11px; box-shadow: 0 3px 0 -1px rgba(30, 40, 80, .12); }
body.ct .btn.orange-grad { box-shadow: 0 4px 0 -1px rgba(190, 80, 10, .55), 0 16px 26px -16px rgba(249, 115, 22, .9); }
body.ct .btn:disabled { opacity: .45; }
body.ct .btn.danger { border-color: rgba(229, 72, 77, .3); background: rgba(229, 72, 77, .07); color: var(--danger); }

/* ---------- 统计卡 ---------- */
body.ct .stat-card { position: relative; border-radius: 22px; border: 2px solid var(--border); padding: 16px 18px; overflow: hidden; box-shadow: 0 5px 0 -1px rgba(124, 92, 255, .10); transition: transform .2s, box-shadow .2s; }
body.ct .stat-card::after { content: ''; position: absolute; right: -22px; top: -24px; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, .18), transparent 70%); }
body.ct .stat-card:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 16px 28px -20px rgba(40, 50, 90, .95); }
body.ct .stat-card .ico { width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(140deg, #8b6bff, #4f46e5); color: #fff; box-shadow: inset 0 -3px 9px rgba(0, 0, 0, .16), 0 8px 16px -8px rgba(40, 50, 90, .75); }
body.ct .stat-card:nth-child(2) .ico { background: linear-gradient(140deg, #22d3ee, #0891b2); }
body.ct .stat-card:nth-child(3) .ico { background: linear-gradient(140deg, #ff6bcb, #db2777); }
body.ct .stat-card:nth-child(4) .ico { background: linear-gradient(140deg, #fbbf24, #f97316); }
body.ct .stat-card .num { font-size: 26px; font-weight: 900; letter-spacing: -.6px; margin-top: 9px; background: linear-gradient(135deg, #7c5cff, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.ct .stat-card:nth-child(2) .num { background: linear-gradient(135deg, #22d3ee, #0d9488); -webkit-background-clip: text; background-clip: text; }
body.ct .stat-card:nth-child(3) .num { background: linear-gradient(135deg, #ff6bcb, #e11d48); -webkit-background-clip: text; background-clip: text; }
body.ct .stat-card:nth-child(4) .num { background: linear-gradient(135deg, #fbbf24, #f97316); -webkit-background-clip: text; background-clip: text; }

/* ---------- 表格：胶囊行 ---------- */
body.ct .table { border-collapse: separate; border-spacing: 0 6px; }
body.ct .table th { background: transparent; border: 0; color: var(--text-2); font-size: 12px; font-weight: 700; padding: 6px 12px; }
body.ct .table td { background: var(--card-bg); border-top: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border); padding: 10px 12px; }
body.ct .table td:first-child { border-left: 1.5px solid var(--border); border-radius: 13px 0 0 13px; }
body.ct .table td:last-child { border-right: 1.5px solid var(--border); border-radius: 0 13px 13px 0; }
body.ct .table tr:hover td { background: rgba(124, 92, 255, .07); }

/* ---------- 上传区 ---------- */
body.ct .dropzone { border: 2.5px dashed rgba(124, 92, 255, .38); border-radius: 22px; background: linear-gradient(120deg, rgba(124, 92, 255, .07), rgba(34, 211, 238, .06)); transition: .18s; }
body.ct .dropzone:hover, body.ct .dropzone.drag { border-color: #7c5cff; background: linear-gradient(120deg, rgba(124, 92, 255, .15), rgba(34, 211, 238, .11)); transform: translateY(-2px); }
body.ct .dropzone svg { color: #7c5cff; }

/* ---------- 步骤条 ---------- */
body.ct .steps .st .n { width: 26px; height: 26px; border-radius: 9px; font-weight: 800; box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .12); }
body.ct .steps .st.on .n { background: linear-gradient(140deg, #8b6bff, #4f46e5); }
body.ct .steps .st.on { color: var(--text); }

/* ---------- 标签 ---------- */
body.ct .tag-green, body.ct .tag-gray, body.ct .tag-orange { font-weight: 700; }

/* ---------- 深色适配 ---------- */
body.dark-theme.ct .card { box-shadow: 0 7px 0 -3px rgba(0, 0, 0, .5), 0 18px 40px -22px rgba(0, 0, 0, .8); }
body.dark-theme.ct .ct-hero { box-shadow: 0 10px 0 -4px rgba(0, 0, 0, .45), 0 26px 50px -30px rgba(0, 0, 0, .9); }
body.dark-theme.ct .btn { background: rgba(255, 255, 255, .04); box-shadow: 0 4px 0 -1px rgba(0, 0, 0, .5); }
body.dark-theme.ct .btn:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
body.dark-theme.ct .btn.primary { background: linear-gradient(140deg, #8b6bff, var(--primary) 62%, var(--primary-600)); color: #fff; }
body.dark-theme.ct .stat-card { background: rgba(255, 255, 255, .03); }
body.dark-theme.ct .table td { background: rgba(255, 255, 255, .025); }
body.dark-theme.ct .dropzone { background: linear-gradient(120deg, rgba(124, 92, 255, .12), rgba(34, 211, 238, .08)); }
body.dark-theme.ct .ct-step { background: rgba(255, 255, 255, .04); }
body.dark-theme.ct .ct-hero::after { background: radial-gradient(ellipse at 50% 0%, rgba(124, 92, 255, .28), transparent 70%); opacity: .55; }

@media (max-width: 860px) {
  .ct-hero { grid-template-columns: 1fr; padding: 20px; }
  .ct-hero-art { display: none; }
  .ct-hero-title { font-size: 23px; }
  body.ct .card { padding: 16px; border-radius: 22px; }
  body.ct .btn { height: 38px; font-size: 13px; padding: 0 13px; }
}