/* Codex 接码：monk.party/codex 落地页 + 订单页的接码卡片（在 Monk UI 和 store.css 之上） */
:root { --cx-1: #10A37F; --cx-2: #14B8A6; --cx-3: #38BDF8; --cx-grad: linear-gradient(110deg, var(--cx-1) 0%, var(--cx-2) 55%, var(--cx-3) 100%); --cx-soft: rgba(16, 163, 127, .12); }

/* ---------------- 落地页 ---------------- */
.cx-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; padding: 56px 0 8px; }
@media (max-width: 860px) { .cx-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; } }
.cx-hero-text { display: grid; gap: 16px; justify-items: start; }
.cx-hero h1 { margin: 0; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.1; font-weight: 900; letter-spacing: -.025em; text-wrap: balance; }
.cx-hero .mk-lede { margin: 0; max-width: 32em; }
.cx-hero .mk-lede b { color: var(--mk-text); }
.cx-hero .checks { justify-content: flex-start; }
.cx-grad { background: var(--cx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.cx-live { margin: 0; font-size: 13.5px; color: var(--mk-muted); display: inline-flex; align-items: center; gap: 8px; }
.cx-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-1); box-shadow: 0 0 0 4px var(--cx-soft); }

.cx-demo { display: grid; gap: 8px; justify-items: center; }
.cx-phone-mock { width: min(100%, 340px); padding: 18px; display: grid; gap: 10px; position: relative; overflow: hidden; border-radius: 26px; box-shadow: var(--mk-shadow-2); }
.cx-phone-mock::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cx-grad); }
.cx-pm-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cx-pm-top b { flex: 1; font-weight: 700; }
.cx-pm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cx-grad); }
.cx-pm-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: var(--mk-r-md); background: var(--mk-surface-2); font-size: 13px; }
.cx-pm-row span { color: var(--mk-muted); flex: none; width: 5.5em; }
.cx-pm-row b { font-size: 15px; }
.cx-pm-row em { font-style: normal; color: var(--mk-muted); margin-left: auto; font-family: var(--mk-mono); }
.cx-pm-row code { font-family: var(--mk-mono); font-size: 15px; letter-spacing: .04em; }
.cx-pm-code { display: grid; gap: 4px; padding: 14px; border-radius: var(--mk-r-md); background: var(--cx-soft); border: 1px solid rgba(16, 163, 127, .35); transition: opacity .3s, filter .3s; }
.cx-pm-code span { font-size: 12.5px; color: var(--mk-muted); }
.cx-pm-code code { font-family: var(--mk-mono); font-size: 34px; font-weight: 800; letter-spacing: .1em; color: var(--mk-text); font-variant-numeric: tabular-nums; }
.cx-pm-sms { margin: 0; font-size: 12.5px; color: var(--mk-muted); font-family: var(--mk-mono); transition: opacity .3s; }
.cx-pm-bar { height: 4px; border-radius: 999px; background: var(--mk-surface-3); overflow: hidden; }
.cx-pm-bar i { display: block; height: 100%; width: 100%; background: var(--cx-grad); transform-origin: left; }
.cx-phone-mock.is-wait .cx-pm-code { opacity: .35; filter: blur(3px); }
.cx-phone-mock.is-wait .cx-pm-sms { opacity: 0; }
.cx-phone-mock.is-wait .cx-pm-bar i { animation: cxFill 2.6s linear; }
@keyframes cxFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cx-demo-note { margin: 0; }

.cx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .cx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cx-steps { grid-template-columns: 1fr; } }
.cx-steps li { padding: 20px; display: grid; gap: 8px; align-content: start; }
.cx-steps b { font-family: var(--mk-mono); font-size: 13px; color: var(--cx-1); letter-spacing: .06em; }
.cx-steps h3 { margin: 0; font-size: 17px; font-weight: 800; }
.cx-steps p { margin: 0; color: var(--mk-muted); font-size: 14px; line-height: 1.7; }
.cx-steps p b { font-family: inherit; font-size: inherit; color: var(--mk-text); letter-spacing: 0; }

.cx-promise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .cx-promise { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cx-promise { grid-template-columns: 1fr; } }
.cx-promise .mk-card { padding: 20px; display: grid; gap: 8px; align-content: start; }
.cx-promise h3 { margin: 4px 0 0; font-size: 16px; font-weight: 800; }
.cx-promise p { margin: 0; color: var(--mk-muted); font-size: 14px; line-height: 1.7; }
.cx-pi { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--cx-soft); color: var(--cx-1); }
.cx-pi svg { width: 22px; height: 22px; }

.cx-buy { margin-top: 0; }
.cx-know { display: grid; gap: 10px; align-content: start; }
.cx-know h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.cx-know ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cx-know li { position: relative; padding: 12px 14px 12px 38px; border-radius: var(--mk-r-md); background: var(--mk-surface-2); font-size: 14px; line-height: 1.7; color: var(--mk-text-2); }
.cx-know li::before { content: ""; position: absolute; left: 15px; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-1); }
.cx-know b { color: var(--mk-text); }
.cx-buy .picked { margin-bottom: 4px; }
.cx-buy .picked > div { flex: 1; min-width: 0; }
.cx-pic { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--mk-surface-2); border: 1px solid var(--mk-border); }
.cx-pic svg { width: 30px; height: 30px; }
.go:disabled { opacity: .55; cursor: not-allowed; }

/* ---------------- 订单页：接码卡片 ---------------- */
.cx { display: grid; gap: 14px; }
.cx-card { padding: 20px 22px; display: grid; gap: 14px; position: relative; overflow: hidden; }
@media (max-width: 560px) { .cx-card { padding: 16px; } }
.cx-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cx-grad); }
.cx-head { display: flex; align-items: center; gap: 12px; }
.cx-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--cx-soft); color: var(--cx-1); flex: none; }
.cx-mark svg { width: 22px; height: 22px; }
.cx-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cx-title b { font-size: 16px; }
.cx-title span { font-size: 13px; color: var(--mk-muted); }
.cx-num { display: grid; gap: 8px; }
.cx-country, .cx-phone { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: var(--mk-r-md); background: var(--mk-surface-2); }
.cx-country > span, .cx-phone > span { flex: none; width: 8.5em; font-size: 13px; color: var(--mk-muted); }
.cx-country b { font-size: 18px; font-weight: 800; }
.cx-country em { font-style: normal; font-family: var(--mk-mono); font-size: 13px; color: var(--mk-muted); margin-left: auto; }
.cx-phone code { flex: 1 1 160px; min-width: 0; font-family: var(--mk-mono); font-size: 22px; font-weight: 700; letter-spacing: .05em; overflow-wrap: anywhere; }
.cx-phone .mk-btn { flex: none; height: 36px; }
.cx-tip { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--mk-text-2); }
.cx-tip b { color: var(--mk-text); }
.cx-tip code { font-family: var(--mk-mono); font-size: 13px; background: var(--mk-surface-2); padding: 1px 6px; border-radius: 6px; }
.cx-wait { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--mk-r-md); border: 1px dashed var(--mk-border-strong); }
.cx-wait .spin { flex: none; }
.cx-wait div { display: grid; gap: 2px; }
.cx-wait b { font-size: 15px; }
.cx-wait span:not(.spin) { font-size: 13px; color: var(--mk-muted); line-height: 1.6; }
.cx-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 16px; border-radius: var(--mk-r-md); background: var(--cx-soft); border: 1px solid rgba(16, 163, 127, .4); }
.cx-code > span { flex: 0 0 100%; font-size: 13px; color: var(--mk-muted); }
.cx-code code { font-family: var(--mk-mono); font-size: 40px; font-weight: 800; letter-spacing: .12em; color: var(--mk-text); font-variant-numeric: tabular-nums; }
.cx-code .mk-btn { margin-left: auto; }
.cx-code.is-done { background: var(--mk-surface-2); border-color: var(--mk-border); }
.cx-code.is-done code { font-size: 24px; color: var(--mk-muted); }
.cx-sms, .cx-older { flex: 0 0 100%; margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--mk-muted); overflow-wrap: anywhere; }
.cx-acts .mk-btn { height: 40px; }
.cx-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 13px; color: var(--mk-muted); }
.cx-meta svg { width: 15px; height: 15px; }
.cx-note { margin: 0; color: var(--mk-text-2); font-size: 14px; line-height: 1.7; }
.cx-ok { margin: 0; padding: 10px 14px; border-radius: var(--mk-r-md); background: var(--mk-ok-soft); color: var(--mk-ok); font-size: 14px; font-weight: 600; }
.cx-fail { margin: 0; padding: 12px 14px; border-radius: var(--mk-r-md); background: var(--mk-warn-soft); color: var(--mk-warn); font-size: 14px; line-height: 1.7; font-weight: 600; }
.cx-howto { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; line-height: 1.7; color: var(--mk-text-2); }
@media (prefers-reduced-motion: reduce) { .cx-phone-mock.is-wait .cx-pm-bar i { animation: none; } }