/* =============================================================================
   ct-co.css — shared card/form kit for the lottery page (ported from mrbazarbd)
   All ids / JS state classes (.sel .co-pm-sel .co-pm-off .show .ok .err) kept.
   ============================================================================= */

.co-page {
    --cop: var(--ct-primary);
    --cop-l: var(--ct-primary-50);
    width: 100%; max-width: 680px;
    margin: 0 auto;
    padding: 16px 14px 32px;
    box-sizing: border-box;
}
@media (min-width: 768px) { .co-page { padding-top: 28px; } }

#coMain { opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ct-ease), transform .3s var(--ct-ease); }
#coMain.loaded { opacity: 1; transform: none; }

/* Skeleton */
#coSkeleton > div { background: var(--ct-surface) !important; border: 1px solid var(--ct-line); border-radius: var(--ct-r-lg) !important; }
.ske { position: relative; overflow: hidden; border-radius: 8px; background: #E8EDF4; }
.ske::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    animation: mb-shimmer 1.3s infinite;
}

/* ---------------------------------------------------------------------------
   Product header
   --------------------------------------------------------------------------- */
.co-hero {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 14px; padding: 14px;
    background: linear-gradient(120deg, var(--ct-blue-50) 0%, #fff 55%, var(--ct-teal-50) 100%);
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-r-xl);
    box-shadow: var(--ct-shadow-1);
    overflow: hidden;
}
.co-hero::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--ct-blue), var(--ct-teal));
}
.co-hero-img {
    width: 72px; height: 72px; flex-shrink: 0;
    border-radius: 14px; object-fit: cover;
    background: var(--ct-surface-2);
    border: 1px solid var(--ct-line);
}
.co-hero-title {
    font-family: var(--ct-font-display) !important;
    font-size: 1.12rem; font-weight: 700; line-height: 1.25;
    color: var(--ct-ink);
    padding-right: 72px;
}
@media (min-width: 768px) { .co-hero-title { font-size: 1.3rem; } .co-hero-img { width: 84px; height: 84px; } }
.co-hero-sub {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 6px; padding: 3px 9px;
    border-radius: var(--ct-pill);
    background: var(--ct-primary-50); color: var(--ct-primary);
    font-size: .72rem; font-weight: 700;
}
.co-hero-badge {
    position: absolute; top: 14px; right: 14px;
    padding: 4px 10px; border-radius: var(--ct-pill);
    background: var(--ct-success-50); color: var(--ct-success);
    border: 1px solid color-mix(in srgb, var(--ct-success) 20%, #fff);
    font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Step cards
   --------------------------------------------------------------------------- */
.co-card {
    width: 100%; box-sizing: border-box;
    margin-bottom: 12px;
    background: var(--ct-surface);
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-r-xl);
    box-shadow: var(--ct-shadow-1);
    overflow: hidden;
}
.co-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 0;
}
.co-step {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ct-btn-grad); color: #fff;
    box-shadow: var(--ct-btn-shadow);
    font-family: var(--ct-font-display) !important;
    font-size: .8rem; font-weight: 700;
}
#coForm > .co-card:nth-of-type(1) .co-step { background: linear-gradient(135deg, #3B82F6, var(--ct-blue)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--ct-blue) 70%, transparent); }
#coForm > .co-card:nth-of-type(2) .co-step { background: linear-gradient(135deg, #8B5CF6, var(--ct-violet)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--ct-violet) 70%, transparent); }
#coForm > .co-card:nth-of-type(3) .co-step { background: linear-gradient(135deg, #10B981, var(--ct-emerald)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--ct-emerald) 70%, transparent); }
.co-step.co-step-muted { background: var(--ct-surface-2); color: var(--ct-muted); border: 1px solid var(--ct-line); }
.co-card-title {
    flex: 1; margin-left: 10px;
    font-family: var(--ct-font-display) !important;
    font-size: .98rem; font-weight: 700; color: var(--ct-ink);
}
.co-how {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: var(--ct-pill);
    background: var(--ct-primary-50); color: var(--ct-primary) !important;
    font-size: .74rem; font-weight: 700; text-decoration: none !important;
}
.co-card-body { padding: 14px 16px 16px; }

/* ---------------------------------------------------------------------------
   Packages
   --------------------------------------------------------------------------- */
.co-var-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 16px 16px; }
@media (min-width: 640px) { .co-var-grid { gap: 10px; } }
@media (max-width: 320px) { .co-var-grid { grid-template-columns: 1fr; } }
.co-var-btn {
    position: relative;
    display: flex; align-items: center; gap: 9px;
    width: 100%; min-width: 0; min-height: 58px;
    padding: 10px 11px;
    border-radius: var(--ct-r);
    border: 1.5px solid var(--ct-line);
    background: var(--ct-surface);
    cursor: pointer; text-align: left;
    transition: border-color var(--ct-fast) var(--ct-ease), background-color var(--ct-fast) var(--ct-ease), transform var(--ct-fast) var(--ct-ease);
    box-sizing: border-box;
}
@media (hover: hover) { .co-var-btn:hover:not([disabled]) { border-color: var(--ct-primary-200); background: var(--ct-surface-2); } }
.co-var-btn:active:not([disabled]) { transform: scale(.98); }
.co-var-btn[disabled] { opacity: .5; cursor: not-allowed; background: var(--ct-surface-2); }
.co-var-dot {
    position: relative; flex-shrink: 0;
    width: 18px; height: 18px; min-width: 18px;
    border-radius: 50%;
    border: 2px solid var(--ct-line-strong);
    background: var(--ct-surface);
    transition: border-color var(--ct-fast) var(--ct-ease), background-color var(--ct-fast) var(--ct-ease);
}
.co-var-info { flex: 1; min-width: 0; overflow: hidden; }
.co-var-name {
    display: block; max-width: 100%;
    font-size: .78rem; font-weight: 700; line-height: 1.25; color: var(--ct-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-var-stock { display: block; margin-top: 2px; font-size: .64rem; font-weight: 600; color: var(--ct-success); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-var-stock.out { color: var(--ct-danger); }
.co-var-price {
    flex-shrink: 0;
    font-family: var(--ct-font-display) !important;
    font-size: .84rem; font-weight: 700; color: var(--ct-primary);
    white-space: nowrap;
}
.co-var-btn.sel {
    border-color: var(--ct-primary) !important;
    background: var(--ct-primary-50) !important;
    box-shadow: none !important;
}
.co-var-btn.sel .co-var-dot { border-color: var(--ct-primary); background: var(--ct-primary); }
.co-var-btn.sel .co-var-dot::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff;
}
.co-hot {
    position: absolute; top: -8px; right: 8px;
    padding: 2px 7px; border-radius: var(--ct-pill);
    background: #FFF1E6; color: #C2410C;
    border: 1px solid #FED7AA;
    font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    white-space: nowrap;
}
.co-var-grid { padding-top: 20px; }
.co-empty { grid-column: 1 / -1; text-align: center; padding: 22px 0; color: var(--ct-muted); font-size: .86rem; }
@media (max-width: 400px) {
    .co-var-btn { padding: 9px; gap: 7px; }
    .co-var-name { font-size: .72rem; }
    .co-var-price { font-size: .76rem; }
}

/* ---------------------------------------------------------------------------
   Inputs
   --------------------------------------------------------------------------- */
.co-field { margin-bottom: 14px; }
.co-label { display: block; margin-bottom: 7px; font-size: .82rem; font-weight: 700; color: var(--ct-ink); }
.co-label i { color: var(--ct-primary) !important; }
.co-optional { font-weight: 500; color: var(--ct-subtle); }
.co-input {
    width: 100%; height: 48px; box-sizing: border-box;
    padding: 0 14px;
    border-radius: var(--ct-r);
    border: 1.5px solid var(--ct-line-strong);
    background: var(--ct-surface);
    font-size: 16px; font-weight: 600; color: var(--ct-ink);
    outline: none;
    transition: border-color var(--ct-fast) var(--ct-ease), box-shadow var(--ct-fast) var(--ct-ease);
}
.co-input::placeholder { color: var(--ct-subtle); font-weight: 500; }
.co-input:focus { border-color: var(--ct-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ct-primary) 14%, transparent); }
select.co-input { appearance: auto; }
.co-irow { display: flex; gap: 8px; align-items: stretch; }
.co-irow .co-input { flex: 1; min-width: 0; margin: 0; }
.co-uid-btn {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    height: 48px; padding: 0 16px;
    border: 0; border-radius: var(--ct-r);
    background: var(--ct-primary); color: #fff;
    font-size: .82rem; font-weight: 700; white-space: nowrap; cursor: pointer;
    transition: background-color var(--ct-fast) var(--ct-ease), transform var(--ct-fast) var(--ct-ease);
}
.co-uid-btn:hover { background: var(--ct-primary-600); }
.co-uid-btn:active { transform: scale(.97); }
.co-uid-btn:disabled { opacity: .6; cursor: not-allowed; }
.co-uid-result {
    display: none; margin-top: 8px; padding: 10px 12px;
    border-radius: var(--ct-r-sm);
    font-size: .8rem; font-weight: 600;
    animation: mb-fade-down .2s var(--ct-ease);
}
.co-uid-result.ok { background: var(--ct-success-50); color: var(--ct-success); border: 1px solid color-mix(in srgb, var(--ct-success) 25%, #fff); }
.co-uid-result.err { background: var(--ct-danger-50); color: var(--ct-danger); border: 1px solid color-mix(in srgb, var(--ct-danger) 25%, #fff); }
@keyframes mb-fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.co-qty-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px dashed var(--ct-line);
}
.co-qty-label { font-size: .86rem; font-weight: 700; color: var(--ct-ink); }
.co-qty-wrap {
    display: flex; align-items: center; gap: 2px;
    padding: 3px; border-radius: var(--ct-r);
    background: var(--ct-surface-2); border: 1px solid var(--ct-line);
}
.co-qty-btn {
    width: 36px; height: 36px; border: 0; border-radius: 9px;
    background: var(--ct-surface); color: var(--ct-ink);
    box-shadow: var(--ct-shadow-1);
    font-size: 1.1rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color var(--ct-fast) var(--ct-ease), color var(--ct-fast) var(--ct-ease);
}
.co-qty-btn:hover { background: var(--ct-primary); color: #fff; }
.co-qty-num {
    width: 44px; border: 0; outline: none; background: transparent;
    text-align: center; font-family: var(--ct-font-display) !important;
    font-size: .95rem; font-weight: 700; color: var(--ct-ink);
    -moz-appearance: textfield;
}
.co-qty-num::-webkit-inner-spin-button, .co-qty-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------------------------
   Payment
   --------------------------------------------------------------------------- */
.co-pm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; }
.co-pm-card {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 12px; min-height: 64px;
    border-radius: var(--ct-r);
    border: 1.5px solid var(--ct-line);
    background: var(--ct-surface);
    cursor: pointer;
    transition: border-color var(--ct-fast) var(--ct-ease), background-color var(--ct-fast) var(--ct-ease);
}
@media (hover: hover) { .co-pm-card:hover:not(.co-pm-off) { border-color: var(--ct-primary-200); } }
.co-pm-card.co-pm-sel { border-color: var(--ct-primary); background: var(--ct-primary-50); box-shadow: none; }
.co-pm-card.co-pm-sel::before {
    content: ""; position: absolute; top: 8px; right: 8px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--ct-primary);
    border: 0;
}
.co-pm-card.co-pm-sel::after {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: 8px; right: 8px;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 9px; line-height: 1;
}
#coWallet  { background: linear-gradient(135deg, var(--ct-amber-50), #fff); }
#coGateway { background: linear-gradient(135deg, var(--ct-blue-50), #fff); }
.co-pm-card.co-pm-off { opacity: .45; cursor: not-allowed; filter: grayscale(60%); pointer-events: none; }
.co-pm-img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; border-radius: 8px; }
.co-pm-name { display: flex; align-items: center; font-size: .86rem; font-weight: 700; color: var(--ct-ink); }
.co-pm-sub { margin-top: 2px; font-size: .7rem; color: var(--ct-muted); font-weight: 600; }
.co-low { display: none; margin-left: 5px; padding: 1px 5px; border-radius: 4px; background: var(--ct-danger); color: #fff; font-size: .58rem; font-weight: 800; text-transform: uppercase; }

.co-coupon {
    margin: 0 16px 12px; padding: 10px;
    border-radius: var(--ct-r);
    border: 1.5px dashed color-mix(in srgb, var(--ct-amber) 40%, #fff);
    background: var(--ct-amber-50);
}
.co-coupon-row { display: flex; gap: 8px; }
.co-coupon .co-input { height: 42px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.co-coupon .co-uid-btn { height: 42px; padding: 0 14px; font-size: .78rem; background: var(--ct-ink); }
#coCouponMsg { display: none; margin-top: 7px; font-size: .74rem; font-weight: 700; }

.co-cost {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 16px; padding: 12px 14px;
    border-radius: var(--ct-r);
    background: linear-gradient(135deg, var(--ct-primary) 0%, color-mix(in srgb, var(--ct-primary) 70%, var(--ct-blue)) 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 22px -12px color-mix(in srgb, var(--ct-primary) 70%, transparent);
}
.co-cost-lbl { font-size: .84rem; font-weight: 700; color: rgba(255,255,255,.75); }
.co-cost-lbl i { margin-right: 6px; color: #FCD34D; }
.co-cost-val {
    font-family: var(--ct-font-display) !important;
    font-size: 1.3rem; font-weight: 700; color: #fff;
    font-variant-numeric: tabular-nums;
}
.co-btn-wrap { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; }

/* Buttons */
.co-btn {
    width: 100%; height: 52px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: var(--ct-r);
    font-size: .98rem; font-weight: 800; letter-spacing: .01em;
    cursor: pointer; text-decoration: none !important;
    transition: background-color var(--ct-fast) var(--ct-ease), transform var(--ct-fast) var(--ct-ease);
}
.co-btn:active { transform: scale(.98); }
.co-btn-p { background: var(--ct-lime); color: var(--ct-on-lime) !important; box-shadow: none; }
.co-btn-p:hover:not(:disabled) { background: var(--ct-lime-600); }
.co-btn-p:disabled { background: var(--ct-line); color: var(--ct-subtle) !important; cursor: not-allowed; }
.co-btn-g { background: var(--ct-primary); color: #fff !important; }
.co-btn-g:hover { background: var(--ct-primary-600); }

/* ---------------------------------------------------------------------------
   Terms + related
   --------------------------------------------------------------------------- */
.co-rules { padding: 12px 16px 16px; font-size: .84rem; line-height: 1.7; color: var(--ct-text); }
.co-rules ul, .co-rules ol { padding-left: 18px; margin: 0; }
.co-rules li { margin-bottom: 4px; }
.co-rules p:last-child { margin-bottom: 0; }
.co-rules h3 {
    display: flex; align-items: center; gap: 8px;
    margin: 18px 0 8px;
    font-family: var(--ct-font-display) !important;
    font-size: .92rem; font-weight: 700; color: var(--ct-ink);
}
.co-rules h3::before { content: ""; width: 4px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, var(--ct-blue), var(--ct-teal)); }
.co-rules > p:first-child { padding: 10px 12px; border-radius: var(--ct-r); background: var(--ct-blue-50); border: 1px solid color-mix(in srgb, var(--ct-blue) 14%, #fff); }
.co-rules h3 + ul li { margin-bottom: 6px; }

.co-related { margin: 22px 0 8px; }
.co-rel-ttl {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 12px;
    font-family: var(--ct-font-display) !important;
    font-size: 1rem; font-weight: 700; color: var(--ct-ink);
    text-align: left; text-transform: none; letter-spacing: -0.01em;
}
.co-rel-ttl::after { content: ""; flex: 1; height: 1px; background: var(--ct-line); }
.co-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .co-rel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.co-rel-card {
    display: flex; flex-direction: column; align-items: stretch;
    padding: 5px 5px 0;
    background: var(--ct-surface);
    border: 1px solid var(--ct-line);
    border-radius: 14px;
    box-shadow: var(--ct-shadow-1);
    text-decoration: none !important; text-align: center;
    transition: transform var(--ct-med) var(--ct-ease), border-color var(--ct-med) var(--ct-ease);
}
@media (hover: hover) { .co-rel-card:hover { transform: translateY(-3px); border-color: var(--ct-primary-200); } }
.co-rel-img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; margin: 0; background: var(--ct-violet-50); box-shadow: none; }
.co-rel-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(2 * 1.3em);
    margin: 7px 3px 8px;
    font-size: .72rem; font-weight: 700; line-height: 1.3; color: var(--ct-ink);
}

/* ---------------------------------------------------------------------------
   Confirm sheet (bottom sheet on phones, centred dialog on larger screens)
   --------------------------------------------------------------------------- */
.co-overlay {
    position: fixed; inset: 0; z-index: 99998;
    display: none; align-items: flex-end; justify-content: center;
    background: rgba(4, 8, 20, .55);
}
.co-overlay.show { display: flex; animation: mb-fade .2s ease; }
@keyframes mb-fade { from { opacity: 0; } to { opacity: 1; } }
.co-dialog {
    width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
    padding: 0 0 calc(22px + var(--ct-safe-b));
    background: var(--ct-surface);
    border-radius: 24px 24px 0 0;
    animation: mb-sheet .3s var(--ct-ease);
}
@keyframes mb-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
    .co-overlay { align-items: center; padding: 20px; }
    .co-dialog { border-radius: var(--ct-r-xl); padding-bottom: 22px; box-shadow: var(--ct-shadow-3); }
    .co-dlg-handle { display: none; }
}
.co-dlg-handle { width: 40px; height: 4px; margin: 10px auto 0; border-radius: 4px; background: var(--ct-line-strong); }
.co-dlg-head { padding: 18px 20px 14px; text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; border-bottom: 1px solid var(--ct-line); }
.co-dlg-icon {
    grid-row: span 2;
    width: 46px; height: 46px; margin: 0;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ct-primary-100); color: var(--ct-primary);
    font-size: 1.2rem;
}
.co-dlg-title { font-family: var(--ct-font-display) !important; font-size: 1.08rem; font-weight: 700; color: var(--ct-ink); margin: 0; }
.co-dlg-sub { font-size: .8rem; color: var(--ct-muted); }
.co-sum-body { padding: 8px 20px 0; }
.co-sum-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ct-line);
    font-size: .86rem;
}
.co-sum-row:last-child { border-bottom: 0; }
.co-sum-row.co-sum-total { margin-top: 4px; padding: 14px; border: 0; border-radius: var(--ct-r); background: var(--ct-surface-2); }
.co-sum-k { display: flex; align-items: center; gap: 8px; color: var(--ct-muted); font-weight: 600; }
.co-sum-k i { width: 16px; text-align: center; color: var(--ct-primary); }
.co-sum-total .co-sum-k { color: var(--ct-ink); font-weight: 800; }
.co-sum-v { max-width: 58%; text-align: right; font-weight: 700; color: var(--ct-ink); word-break: break-word; }
.co-sum-v.big { font-family: var(--ct-font-display) !important; font-size: 1.25rem; color: var(--ct-primary); }
.co-dlg-warn {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 12px 20px 0; padding: 10px 12px;
    border-radius: var(--ct-r-sm);
    background: var(--ct-warning-50); border: 1px solid color-mix(in srgb, var(--ct-warning) 22%, #fff);
    color: var(--ct-warning); font-size: .76rem; font-weight: 600; line-height: 1.5;
}
.co-dlg-warn i { flex-shrink: 0; margin-top: 2px; }
.co-dlg-acts { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 0; }
.co-btn-back {
    width: 100%; height: 48px;
    border-radius: var(--ct-r); border: 1px solid var(--ct-line-strong);
    background: var(--ct-surface); color: var(--ct-text);
    font-size: .9rem; font-weight: 700; cursor: pointer;
    transition: border-color var(--ct-fast) var(--ct-ease);
}
.co-btn-back:hover { border-color: var(--ct-ink); }

/* Processing overlay */
.co-proc { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(4, 8, 20, .6); }
.co-proc.show { display: flex; }
.co-proc-card { width: 90%; max-width: 340px; padding: 30px 24px; border-radius: var(--ct-r-xl); background: var(--ct-surface); text-align: center; box-shadow: var(--ct-shadow-3); }
.co-spin { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%; border: 4px solid var(--ct-line); border-top-color: var(--ct-primary); animation: mb-spin .9s linear infinite; }
@keyframes mb-spin { to { transform: rotate(360deg); } }
.co-proc-title { font-family: var(--ct-font-display) !important; font-size: 1rem; font-weight: 700; color: var(--ct-ink); }
.co-proc-sub { margin-top: 6px; font-size: .8rem; color: var(--ct-muted); }

/* Inline toast */
.co-toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--ct-dock-h) + 28px + var(--ct-safe-b));
    z-index: 999999;
    display: none; max-width: calc(100vw - 32px);
    padding: 11px 18px; border-radius: var(--ct-r);
    background: var(--ct-ink); color: #fff;
    font-size: .84rem; font-weight: 700; text-align: center;
    box-shadow: var(--ct-shadow-3);
}
@media (min-width: 768px) { .co-toast { bottom: 32px; } }
.co-toast.err { background: var(--ct-danger); }
.co-toast.ok { background: var(--ct-success); }