.cpx-card{--cpx-bg:#f6f5f8;cursor:pointer}.cpx-cover{height:140px!important;background:var(--cpx-bg);position:relative;display:flex;align-items:center;justify-content:center;gap:10px}.cpx-cover>svg{width:44px;height:44px;color:#96929f}.cpx-provider{font-size:20px;font-weight:700;letter-spacing:-.6px;color:#514c5c}.cpx-badge{position:absolute;left:14px;top:12px;max-width:calc(100% - 28px);font-size:10px;color:#77727f;line-height:1.3}.cpx-price{position:absolute;right:14px;bottom:12px;font-size:23px;font-weight:700;color:#514c5c}.cpx-price small{font-size:11px;font-weight:500}.cpx-caption{color:#89838f;font-size:12px;line-height:1.45;min-height:35px;margin:8px 0 12px}.cpx-home .cpx-caption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cpx-dialog{border:0;border-radius:24px;padding:24px;width:min(420px,calc(100vw - 32px));max-height:85dvh;box-sizing:border-box;color:#322c3b;background:#fff;box-shadow:0 20px 90px #17111f30;overflow-y:auto}.cpx-dialog::backdrop{background:#19122366;backdrop-filter:blur(4px)}.cpx-dialog-head{display:flex;justify-content:space-between;align-items:center;color:#77717d;font:13px system-ui}.cpx-dialog-head button{border:2px solid #9672c2;background:#f7f5f9;border-radius:50%;width:42px;height:42px;font-size:25px;line-height:1;color:#6e6678;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px #fff,0 0 0 7px #9672c2}.cpx-dialog>svg{display:block;width:70px;height:70px;color:#aaa4b2;margin:22px auto}.cpx-dialog h2{font-size:23px;line-height:1.2;margin:16px 0}.cpx-dialog p{font-size:14px;line-height:1.5}.cpx-notice{padding:12px;background:#f5f3f8;border-radius:12px;color:#776c83}.cpx-dialog .tk-btn{width:100%;min-height:46px;white-space:normal}.cpx-text{display:block;text-align:center;width:100%;padding:12px 0;border:0;background:none;color:#82718f;font:12px/1.4 system-ui;cursor:pointer;text-decoration:none}.cpx-dialog [data-cpx-status]{color:#796b86}.cpx-dialog button:disabled{opacity:.5;cursor:wait}.cpx-card button:focus-visible,.cpx-dialog button:focus-visible,.cpx-dialog a:focus-visible{outline:2px solid #9273ba;outline-offset:3px}
/* Task carousel dots use the same compact indicator as the game and promo carousels. */
.cpx-home .cpx-caption{margin:-5px 0 0;font-size:13px;line-height:1.45;-webkit-line-clamp:3;min-height:0}
.cpx-detail-cover{height:196px;display:flex;align-items:center;justify-content:center;gap:14px;color:#514c5c}
.cpx-detail-cover>svg{width:52px;height:52px;color:#96929f}
.cpx-detail-cover>b{font-size:24px;font-weight:800}
.cpx-detail-gap{height:196px}
.cpx-detail-steps{margin:0;padding-left:20px;display:grid;gap:12px;color:#716b79;font-size:14px;line-height:1.5}
.cpx-detail-empty{margin:0;padding:20px 0;color:#797080;font-size:15px;line-height:1.5}
[data-cpx-offers]{display:grid;gap:12px}
.cpx-cover-brand{display:flex!important;align-items:center;gap:10px}.cpx-cover-brand>svg{position:static!important;width:44px!important;height:44px!important;color:#96929f}.cpx-cover-brand>b{position:static!important;transform:none!important;font-size:20px!important;letter-spacing:-.6px;color:#514c5c}.cpx-detail-cover .cpx-cover-brand>svg{width:52px!important;height:52px!important}.cpx-detail-cover .cpx-cover-brand>b{font-size:24px!important;font-weight:800}.cpx-coin-fallback{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#7c3aed;color:#fff;font-size:10px;font-weight:800}.cpx-card .tk-home-description{margin:0 0 14px}.cpx-detail-cover{padding:0!important}
.ht-dots{gap:5px}
.ht-dots button{flex:0 0 18px;width:18px}
.ht-dots button::before{width:6px;height:6px}
.ht-dots button.is-on::before{width:18px;border-radius:999px;background:#7c3aed}
/* Keep the complete requirements legible in the tapped preview and task page. */
.cpx-detail-description{margin:10px 0 18px;color:#77717f;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.task-preview-content .cpx-caption{display:block;overflow:visible;-webkit-line-clamp:unset}
.cpx-card-status{margin:0 0 12px;font-size:12px;line-height:1.4;color:#82718f}
/* Match the neutral close control used across Purple; no provider-coloured ring. */
.cpx-dialog-head button{border:0;background:#f4f1f7;box-shadow:0 0 0 1px #e6e3e9,0 3px 10px rgba(35,28,43,.08)}
.cpx-dialog-head button:focus-visible{outline-color:#aaa4b0}