/* CryptoNow demo tours — mock UI kit (replicas of real CryptoNow surfaces + merchant-side mocks) */

/* ===== shared bits ===== */
.coin { display: inline-block; width: 22px; height: 22px; vertical-align: middle; border-radius: 50%; flex: 0 0 22px; }
.copy-ic { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; color: var(--cn-blue); margin-left: 6px; cursor: pointer; }
.copy-ic:hover { color: var(--cn-blue-ink); }
.mono { font-family: var(--mono); }
.chk-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 8px; background: var(--cn-blue); color: #fff; border: 0; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: .12s; }
.chk-btn:hover { background: var(--cn-blue-ink); }
.chk-btn:disabled { background: #e6e9ef; color: #9aa4b2; cursor: default; }
.chk-btn.outline { background: #fff; color: var(--cn-blue); border: 1px solid var(--cn-blue); }
.chk-btn.outline:hover { background: var(--cn-blue-soft); }
.chk-btn.block { width: 100%; }
.hidden { display: none !important; }
.fade { animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade { animation: none; } }

/* ===== hosted checkout replica (checkouts.crypto-now.io) ===== */
.chk { width: 100%; max-width: 760px; font-size: 13px; color: #1f2937; }
.chk .chk-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.chk .chk-top .mini { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #6b7280; letter-spacing: .02em; }
.chk .chk-top .mini img { width: 18px; height: 18px; }
.chk .chk-top .flag { font-size: 14px; display: flex; align-items: center; gap: 4px; color: #6b7280; }
.chk h2 { text-align: center; font-size: 15px; font-weight: 700; margin: 6px 0 4px; font-family: var(--font); }
.chk .chk-sub { text-align: center; color: #4b5563; font-size: 13px; margin: 0 auto 18px; max-width: 34ch; line-height: 1.45; }
.chk .chk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 640px) { .chk .chk-grid { grid-template-columns: 1fr; } }
.chk .card { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,27,45,.05), 0 8px 24px rgba(15,27,45,.07); padding: 18px; }
.chk .brandcard { text-align: center; display: flex; flex-direction: column; }
.chk .brandcard .nm { font-weight: 600; font-size: 13px; }
.chk .brandcard .ds { color: #6b7280; font-size: 11.5px; margin-top: 2px; }
.chk .brandcard .art { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 22px 8px; min-height: 200px; }
.chk .brandcard .art .big { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .02em; line-height: 1.25; text-transform: uppercase; color: #111827; }
.chk .brandcard .art .wm { display: flex; align-items: center; gap: 6px; font-size: 22px; letter-spacing: -.01em; color: #111827; }
.chk .brandcard .art .wm img { width: 26px; height: 26px; }
.chk .brandcard .art .wm b { font-weight: 700; }
.chk .pane { display: flex; flex-direction: column; gap: 10px; }
.chk .total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 14px; }
.chk .total .v { font-size: 14px; }
.chk .lbl { font-size: 12px; color: #374151; margin-top: 4px; }
.chk .curlist { max-height: 168px; overflow: auto; border-right: 3px solid #eef0f4; padding-right: 6px; scrollbar-width: thin; }
.chk .cur { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 12.5px; transition: background .12s; }
.chk .cur:hover { background: #f7f8fb; }
.chk .cur.sel { background: #f1f5ff; }
.chk .sel-box { position: relative; }
.chk .selbtn { width: 100%; height: 38px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; text-align: left; padding: 0 12px; font-size: 12.5px; color: #9ca3af; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.chk .selbtn.has { color: #111827; }
.chk .selbtn::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid #9ca3af; border-bottom: 1.5px solid #9ca3af; transform: rotate(45deg); margin-top: -4px; }
.chk .selmenu { position: absolute; left: 0; right: 0; top: 42px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 10px 28px rgba(15,27,45,.12); z-index: 5; padding: 4px; display: none; max-height: 190px; overflow: auto; }
.chk .selmenu.open { display: block; }
.chk .selmenu div { padding: 7px 10px; font-size: 12.5px; border-radius: 6px; cursor: pointer; }
.chk .selmenu div:hover, .chk .selmenu div.sel { background: #f1f5ff; }
.chk .amtin { display: flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 8px; height: 40px; padding: 0 12px; gap: 8px; }
.chk .amtin span { color: #6b7280; font-size: 12.5px; }
.chk .amtin input { border: 0; outline: 0; flex: 1; font: inherit; font-size: 14px; font-weight: 600; min-width: 0; }
.chk .fld { display: flex; flex-direction: column; gap: 4px; }
.chk .fld input { height: 36px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 12.5px; outline: 0; }
.chk .fld input:focus { border-color: var(--cn-blue); }
.chk .back { color: #374151; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chk .back i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #e8eefc; color: var(--cn-blue); font-style: normal; font-size: 11px; }
.chk .krow { display: flex; align-items: center; justify-content: space-between; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; }
.chk .krow .k { color: #6b7280; }
.chk .krow .v { font-weight: 600; display: flex; align-items: center; }
.chk .note { display: flex; gap: 8px; align-items: flex-start; background: #eef3ff; color: #2b57d6; border-radius: 8px; padding: 9px 10px; font-size: 11.5px; line-height: 1.4; }
.chk .note i { flex: 0 0 15px; width: 15px; height: 15px; border-radius: 50%; background: var(--cn-blue); color: #fff; font-style: normal; font-size: 10px; display: grid; place-items: center; margin-top: 1px; }
.chk .qr { display: flex; justify-content: center; padding: 6px 0 2px; }
.chk .qr svg { width: 160px; height: 160px; }
.chk .expires { text-align: center; font-size: 12.5px; color: #374151; margin-top: 14px; font-variant-numeric: tabular-nums; }
.chk .processed { text-align: center; font-size: 11.5px; color: #374151; margin-top: 44px; }
.chk .processed b { font-weight: 700; }
/* success state */
.chk .done { text-align: center; padding: 6px 0; }
.chk .done .ok { width: 52px; height: 52px; border-radius: 50%; margin: 4px auto 12px; background: #e8f8ef; display: grid; place-items: center; }
.chk .done .ok i { width: 28px; height: 28px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 15px; font-weight: 700; }
.chk .done h3 { font-size: 14.5px; margin: 0; font-family: var(--font); }
.chk .done .s { color: #6b7280; font-size: 12px; margin-top: 2px; }
.chk .done .amt { font-family: var(--display); font-size: 30px; font-weight: 700; margin-top: 14px; letter-spacing: -.02em; }
.chk .done .of { font-size: 15px; font-weight: 600; color: #374151; margin-top: -2px; }
.chk .done .rows { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.chk .done .rows div { display: flex; justify-content: space-between; font-size: 12.5px; }
.chk .done .rows div span:first-child { color: #6b7280; }
.chk .done .chk-btn { margin-top: 14px; }
.chk .pending-bar { display: flex; align-items: center; gap: 10px; background: #fff8e6; color: #92400e; border-radius: 8px; padding: 9px 12px; font-size: 12px; }
.chk .spin { width: 14px; height: 14px; border: 2px solid #fde68a; border-top-color: #d97706; border-radius: 50%; animation: spin 1s linear infinite; flex: 0 0 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== merchant "where you see it" — CryptoNow app replica ===== */
.app { width: 100%; max-width: 1060px; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,27,45,.05), 0 14px 40px rgba(15,27,45,.10); overflow: hidden; font-size: 12.5px; color: #1f2937; }
.app .ahead { height: 52px; display: flex; align-items: center; padding: 0 18px; gap: 10px; border-bottom: 1px solid #eef0f4; }
.app .ahead .lg { display: flex; align-items: center; gap: 8px; font-size: 19px; letter-spacing: -.01em; }
.app .ahead .lg img { width: 26px; height: 26px; }
.app .ahead .lg b { font-weight: 700; }
.app .ahead .sp { flex: 1; }
.app .ahead .pill { border: 1px solid #dbe3f0; color: var(--cn-blue); border-radius: 6px; padding: 5px 12px; font-size: 12px; }
.app .ahead .usr { color: var(--cn-blue); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.app .abody { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 300px; }
@media (max-width: 640px) { .app .abody { grid-template-columns: 1fr; } .app .anav { display: none; } }
.app .anav { border-right: 1px solid #eef0f4; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.app .anav div { padding: 6px 10px; border-radius: 6px; font-size: 12.5px; color: #111827; font-weight: 600; }
.app .anav div.sub { font-weight: 400; font-size: 11.5px; padding-left: 28px; color: #374151; }
.app .anav div.sub.on { color: var(--cn-blue); background: #f1f5ff; }
.app .amain { padding: 16px 18px; background: #fafbfd; }
.app .amain h3 { margin: 0 0 12px; font-size: 16px; font-family: var(--font); font-weight: 600; }
.app table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e9edf3; border-radius: 8px; overflow: hidden; }
.app th { text-align: left; font-weight: 500; color: #6b7280; font-size: 11.5px; padding: 9px 10px; border-bottom: 1px solid #e9edf3; white-space: nowrap; }
.app td { padding: 10px 9px; border-bottom: 1px solid #f0f2f6; font-size: 11.5px; white-space: nowrap; vertical-align: middle; }
.app tr:last-child td { border-bottom: 0; }
.app tr.hl td { background: #f1f5ff; }
.app .st { font-weight: 600; }
.app .st.done { color: #16a34a; } .app .st.pend { color: #d97706; } .app .st.act { color: #16a34a; } .app .st.can { color: #6b7280; }
.app .tblwrap { overflow-x: auto; }
.app .muted { color: #6b7280; }
.app .menu { position: relative; display: inline-block; }
.app .menu .dd { position: absolute; right: 0; top: 22px; background: #fff; border: 1px solid #e9edf3; border-radius: 8px; box-shadow: 0 8px 24px rgba(15,27,45,.12); padding: 6px 12px; font-size: 12px; white-space: nowrap; z-index: 3; }
.app .kebab { cursor: pointer; padding: 0 6px; font-weight: 700; }

/* ===== subscription page replica (recurring-billing.crypto-now.io) ===== */
.sub { width: 100%; max-width: 440px; font-size: 13.5px; color: #1f2937; }
.sub .sub-top { display: flex; align-items: center; margin-bottom: 8px; }
.sub .sub-top img { width: 34px; height: 34px; }
.sub .card { background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(15,27,45,.05), 0 10px 30px rgba(15,27,45,.08); padding: 20px 24px; margin-bottom: 14px; }
.sub .hd { text-align: center; }
.sub .hd .nm { font-size: 17px; font-weight: 600; }
.sub .hd .ds { color: #4b5563; font-size: 13.5px; margin-top: 2px; }
.sub .art { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 34px 0 26px; }
.sub .art .big { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: .02em; line-height: 1.2; text-transform: uppercase; text-align: center; }
.sub .art .wm { display: flex; align-items: center; gap: 8px; font-size: 30px; letter-spacing: -.01em; }
.sub .art .wm img { width: 34px; height: 34px; }
.sub .art .wm b { font-weight: 700; }
.sub .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sub .mode { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 12px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.sub .mode.sel { border-color: var(--cn-blue); background: #f1f5ff; }
.sub .mode .ic { width: 20px; height: 20px; flex: 0 0 20px; color: #374151; }
.sub .mode.sel .ic { color: var(--cn-blue); }
.sub .mode b { display: block; font-size: 15px; }
.sub .mode.sel b { color: var(--cn-blue); }
.sub .mode span { color: #6b7280; font-size: 12.5px; }
.sub .sec { color: #6b7280; font-size: 13px; margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 1px solid #eef0f4; }
.sub label { display: block; font-weight: 600; font-size: 13.5px; margin: 12px 0 6px; }
.sub input { width: 100%; height: 44px; border: 1px solid #d1d5db; border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; outline: 0; }
.sub input:focus { border-color: var(--cn-blue); }
.sub .tot { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 12px; font-size: 14px; }
.sub .tot b { font-size: 15px; }
.sub .wallet-btn { width: 100%; height: 46px; border-radius: 10px; border: 0; background: var(--cn-blue); color: #fff; font-weight: 600; font-size: 14.5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.sub .wallet-btn:hover { background: var(--cn-blue-ink); }
.sub .wallet-btn.connected { background: #fff; color: #111827; border: 1px solid #e5e7eb; font-weight: 500; justify-content: space-between; padding: 0 14px; }
.sub .wallet-btn.connected .addr { font-family: var(--mono); font-size: 12.5px; }
.sub .wallet-btn.connected .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.sub .send { margin-top: 10px; }
.sub .done { text-align: center; }
.sub .done .ok { width: 64px; height: 64px; border-radius: 50%; margin: 6px auto 14px; background: #e8f8ef; display: grid; place-items: center; }
.sub .done .ok i { width: 34px; height: 34px; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 17px; font-weight: 700; }
.sub .done h3 { font-size: 16px; margin: 0; font-family: var(--font); }
.sub .done .s { color: #6b7280; font-size: 13px; margin-top: 2px; }
.sub .done .amt { font-family: var(--display); font-size: 40px; font-weight: 700; margin-top: 14px; letter-spacing: -.02em; }
.sub .done .of { font-size: 20px; font-weight: 600; color: #374151; margin-top: -4px; }
.sub .done .rows { margin: 18px 0 16px; display: flex; flex-direction: column; gap: 10px; }
.sub .done .rows div { display: flex; justify-content: space-between; font-size: 13.5px; }
.sub .done .rows div span:first-child { color: #6b7280; }
.sub .info h3 { font-size: 16px; margin: 0 0 12px; font-family: var(--font); }
.sub .info .rows { display: flex; flex-direction: column; gap: 9px; }
.sub .info .rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.sub .info .rows div span:first-child { color: #6b7280; }
.sub .info .rows div span:last-child { font-weight: 500; text-align: right; }
.sub .hist { margin-top: 18px; }
.sub .hist table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sub .hist th { text-align: left; color: #6b7280; font-weight: 500; padding: 6px 0; border-bottom: 1px solid #eef0f4; }
.sub .hist td { padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.sub .unsub { margin-top: 18px; width: 100%; height: 44px; border-radius: 10px; border: 1px solid #ef4444; color: #ef4444; background: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.sub .unsub:hover { background: #fef2f2; }
.sub .cancelled { text-align: center; padding: 8px 0; }
.sub .cancelled .x { width: 56px; height: 56px; border-radius: 50%; margin: 4px auto 12px; background: #f3f4f6; color: #6b7280; display: grid; place-items: center; font-size: 24px; }
.sub .processed { text-align: center; font-size: 12.5px; color: #374151; margin-top: 30px; }

/* ===== wallet approval sheet (browser-extension style, generic) ===== */
.wsheet { width: 340px; max-width: 100%; background: #24272a; color: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); font-size: 13px; }
.wsheet .wh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #1b1d1f; }
.wsheet .wh .av { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg,#8b5cf6,#ec4899); }
.wsheet .wh b { display: block; font-size: 14px; }
.wsheet .wh span { font-size: 11.5px; color: #9ca3af; }
.wsheet .wb { padding: 14px; }
.wsheet h4 { margin: 4px 0 4px; font-size: 18px; text-align: center; font-family: var(--font); }
.wsheet .ws { text-align: center; color: #9ca3af; font-size: 12.5px; margin-bottom: 14px; }
.wsheet .box { background: #2f3236; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.wsheet .box .r { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12.5px; }
.wsheet .box .r span:first-child { color: #9ca3af; }
.wsheet .box .cap { background: #1b1d1f; border-radius: 999px; padding: 3px 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.wsheet .box .t { color: #d1d5db; font-size: 12px; line-height: 1.45; }
.wsheet .wbtns { display: flex; gap: 10px; padding: 4px 14px 14px; }
.wsheet .wbtns button { flex: 1; height: 42px; border-radius: 999px; border: 1px solid #4b5563; background: transparent; color: #fff; font-weight: 600; cursor: pointer; }
.wsheet .wbtns button.ok { background: #fff; color: #111; border-color: #fff; }
.wsheet .wbtns button.ok:hover { background: #e5e7eb; }
.wsheet .fee { display: flex; justify-content: space-between; padding: 8px 2px; font-size: 12.5px; color: #d1d5db; }
.sheet-host { position: relative; width: 100%; max-width: 440px; display: flex; justify-content: center; padding: 12px 0 0; }

/* ===== broker cabinet ("Your Brand" — modeled on a real broker portal) ===== */
.cab { width: 100%; max-width: 1240px; min-height: 620px; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,27,45,.05), 0 14px 40px rgba(15,27,45,.10); overflow: hidden; font-size: 13.5px; color: #1f2937; display: grid; grid-template-rows: 64px 1fr; }
.cab .chead { display: flex; align-items: center; padding: 0 22px; gap: 22px; border-bottom: 1px solid #eef0f4; }
.cab .clogo { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.cab .clogo i { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #1e40af, #60a5fa); display: block; }
.cab .cctx { color: #374151; font-size: 13.5px; }
.cab .csp { flex: 1; }
.cab .cwallet { background: #f3f4f6; border-radius: 10px; padding: 8px 14px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.cab .cwallet b { font-weight: 700; }
.cab .cuser { display: flex; align-items: center; gap: 10px; }
.cab .cuser .av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#0f172a,#334155); }
.cab .cuser b { display: block; font-size: 13.5px; }
.cab .cuser span { font-size: 10px; color: #16a34a; font-weight: 700; letter-spacing: .06em; }
.cab .cbody { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
@media (max-width: 760px) { .cab .cbody { grid-template-columns: 1fr; } .cab .cnav { display: none; } }
.cab .cnav { background: #f8fafc; border-right: 1px solid #eef0f4; padding: 14px 0; }
.cab .cnav .g { font-size: 10.5px; letter-spacing: .08em; color: #9ca3af; padding: 14px 22px 6px; font-weight: 600; }
.cab .cnav div.it { padding: 10px 22px; color: #4b5563; display: flex; gap: 10px; align-items: center; }
.cab .cnav div.it.on { background: #e8f0fe; color: #1e40af; font-weight: 600; border-left: 3px solid #2563eb; padding-left: 19px; }
.cab .cnav div.it svg { width: 16px; height: 16px; }
.cab .cmain { padding: 26px 34px 34px; }
.cab .cmain h2 { font-family: var(--font); font-size: 22px; margin: 0 0 14px; font-weight: 600; }
.cab .cmain h2 small { font-weight: 400; color: #6b7280; font-size: 15px; }
.cab hr { border: 0; border-top: 1px solid #eef0f4; margin: 0 0 26px; }
.cab .dep-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .cab .dep-grid { grid-template-columns: 1fr; } }
.cab .amtcard { background: #eef4ff; border-radius: 12px; padding: 22px 26px; }
.cab .amtcard .k { font-size: 11px; letter-spacing: .08em; color: #6b7280; font-weight: 600; }
.cab .amtcard .a { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.cab .amtcard .stat { float: right; background: #fff; color: #2563eb; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; }
.cab .amtcard .stat.ok { color: #16a34a; }
.cab .amtcard .rows { border-top: 1px solid #dbe6fb; margin-top: 22px; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cab .amtcard .rows div { display: flex; justify-content: space-between; font-size: 12.5px; }
.cab .amtcard .rows div span:first-child { color: #6b7280; letter-spacing: .06em; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.cab .amtcard .rows div span:last-child { font-weight: 600; }
.cab .flowcard { background: #f8fafc; border-radius: 12px; padding: 22px 26px; }
.cab .tl { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.cab .tl .n { display: flex; align-items: center; gap: 10px; }
.cab .tl .n i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; flex: 0 0 30px; }
.cab .tl .n.ok i { background: #e5e7eb; color: #6b7280; }
.cab .tl .n.cur i { background: #fff; color: #2563eb; border: 2px solid #2563eb; }
.cab .tl .n.wait i { background: #fff; border: 2px solid #d1d5db; }
.cab .tl .n.done i { background: #16a34a; color: #fff; }
.cab .tl .n b { display: block; font-size: 14px; }
.cab .tl .n span { font-size: 12px; color: #9ca3af; }
.cab .tl .n.wait b { color: #9ca3af; font-weight: 500; }
.cab .tl .ln { flex: 1; height: 2px; background: #16a34a; }
.cab .tl .ln.dash { background: repeating-linear-gradient(90deg, #d1d5db 0 8px, transparent 8px 14px); }
.cab .paybox { background: #2f6fe8; color: #fff; border-radius: 12px; padding: 22px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 640px) { .cab .paybox { grid-template-columns: 1fr; } }
.cab .paybox .qrw { background: #fff; border-radius: 8px; padding: 6px; }
.cab .paybox .qrw svg { width: 108px; height: 108px; display: block; }
.cab .paybox .k { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cab .paybox .addr { font-family: var(--mono); font-size: 17px; font-weight: 600; margin: 6px 0 12px; word-break: break-all; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cab .paybox .addr .copy-ic { color: #fff; }
.cab .paybox p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: #e5edff; }
.cab .paybox p b { color: #fff; }
.cab .recv { background: #ecfdf5; border: 1px solid #bbf7d0; color: #166534; border-radius: 12px; padding: 18px 22px; display: flex; gap: 14px; align-items: center; }
.cab .recv .ok { width: 36px; height: 36px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-weight: 700; flex: 0 0 36px; }
.cab .recv b { display: block; font-size: 15px; }
.cab .recv span { font-size: 12.5px; }
.cab .cbtn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 999px; background: #2f6fe8; color: #fff; border: 0; font-weight: 600; font-size: 14px; cursor: pointer; }
.cab .cbtn:hover { background: #1d5fd6; }
.cab .cbtn.ghost { background: #e5efff; color: #2563eb; }
.cab .methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cab .meth { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; display: flex; gap: 12px; align-items: center; cursor: pointer; background: #fff; }
.cab .meth.sel { border-color: #2563eb; background: #eef4ff; box-shadow: 0 0 0 1px #2563eb inset; }
.cab .meth b { display: block; font-size: 13.5px; }
.cab .meth span { font-size: 11.5px; color: #6b7280; }
.cab .field { margin-bottom: 16px; max-width: 340px; }
.cab .field label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 6px; font-weight: 600; letter-spacing: .04em; }
.cab .field .in { display: flex; align-items: center; border: 1px solid #d1d5db; border-radius: 10px; height: 46px; padding: 0 14px; gap: 8px; background: #fff; }
.cab .field .in input { border: 0; outline: 0; font: inherit; font-size: 16px; font-weight: 600; flex: 1; min-width: 0; }
.cab .field .in span { color: #6b7280; }
.cab .hist table { width: 100%; border-collapse: collapse; }
.cab .hist th { text-align: left; font-size: 11.5px; color: #6b7280; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid #eef0f4; }
.cab .hist td { padding: 12px 10px; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.cab .hist tr.hl td { background: #eef4ff; }
.cab .bal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 760px) { .cab .bal { grid-template-columns: 1fr; } }
.cab .bal div { background: #f8fafc; border-radius: 12px; padding: 16px 18px; }
.cab .bal div span { font-size: 11px; letter-spacing: .08em; color: #6b7280; font-weight: 600; text-transform: uppercase; }
.cab .bal div b { display: block; font-family: var(--display); font-size: 24px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cab .bal div b.up { color: #16a34a; }

/* ===== "Your own CRM" back-office (operator side) ===== */
.crm { width: 100%; max-width: 1240px; min-height: 620px; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,27,45,.05), 0 14px 40px rgba(15,27,45,.10); overflow: hidden; font-size: 13.5px; color: #1f2937; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
@media (max-width: 760px) { .crm { grid-template-columns: 1fr; } .crm .knav { display: none; } }
.crm .knav { background: #111827; color: #cbd5e1; padding: 18px 0; }
.crm .knav .kl { display: flex; align-items: center; gap: 9px; padding: 4px 20px 18px; color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; }
.crm .knav .kl i { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg,#f59e0b,#ef4444); }
.crm .knav .kl small { display: block; font-family: var(--font); font-weight: 400; font-size: 10.5px; color: #94a3b8; letter-spacing: .06em; text-transform: uppercase; }
.crm .knav .g { font-size: 10.5px; letter-spacing: .08em; color: #64748b; padding: 12px 20px 4px; font-weight: 600; }
.crm .knav .it { padding: 9px 20px; font-size: 13px; }
.crm .knav .it.on { background: #1f2937; color: #fff; font-weight: 600; border-left: 3px solid #f59e0b; padding-left: 17px; }
.crm .knav .it .cnt { float: right; background: #f59e0b; color: #111; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.crm .kmain { padding: 22px 28px 32px; background: #f8fafc; }
.crm .ktop { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.crm .ktop h2 { font-family: var(--font); font-size: 20px; font-weight: 600; margin: 0; }
.crm .ktop .sp { flex: 1; }
.crm .ktop .op { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #475569; }
.crm .ktop .op i { width: 28px; height: 28px; border-radius: 50%; background: #e2e8f0; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #334155; }
.crm .kcard { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.crm table { width: 100%; border-collapse: collapse; }
.crm th { text-align: left; font-size: 11.5px; color: #64748b; font-weight: 600; padding: 10px 11px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; white-space: nowrap; }
.crm td { padding: 11px 11px; border-bottom: 1px solid #f1f5f9; font-size: 13px; white-space: nowrap; vertical-align: middle; }
.crm tr:last-child td { border-bottom: 0; }
.crm tr.hl td { background: #fffbeb; }
.crm .tag { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; }
.crm .tag.pend { background: #fef3c7; color: #92400e; } .crm .tag.done { background: #dcfce7; color: #166534; } .crm .tag.proc { background: #dbeafe; color: #1e40af; } .crm .tag.rej { background: #fee2e2; color: #991b1b; }
.crm .kbtn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.crm .kbtn.ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.crm .kbtn.ok:hover { background: #15803d; }
.crm .kbtn.danger { color: #b91c1c; }
.crm .tblwrap { overflow-x: auto; }
.crm .mono { font-size: 12px; }
/* modal */
.kmodal { position: absolute; inset: 0; background: rgba(15,23,42,.45); display: none; align-items: center; justify-content: center; z-index: 5; }
.kmodal.show { display: flex; }
.kmodal .mbox { width: 440px; max-width: calc(100% - 32px); background: #fff; border-radius: 14px; padding: 22px 24px; box-shadow: 0 30px 70px rgba(15,23,42,.35); }
.kmodal h3 { margin: 0 0 6px; font-family: var(--font); font-size: 17px; }
.kmodal .sub { color: #64748b; font-size: 13px; margin-bottom: 14px; }
.kmodal .rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.kmodal .rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.kmodal .rows div span:first-child { color: #64748b; }
.kmodal .rows div span:last-child { font-weight: 600; text-align: right; }
.kmodal .warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 14px; }
.kmodal .btns { display: flex; gap: 10px; justify-content: flex-end; }
.kmodal .btns button { height: 38px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; border: 1px solid #e5e7eb; background: #fff; }
.kmodal .btns button.ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.kmodal .api { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 10px 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; margin-bottom: 14px; overflow-x: auto; white-space: pre; }
.kmodal .api .m { color: #34d399; } .kmodal .api .h { color: #fbbf24; } .kmodal .api .c { color: #94a3b8; }
.kmodal .prog { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; font-size: 13px; }
.kmodal .prog div { display: flex; gap: 10px; align-items: center; color: #94a3b8; }
.kmodal .prog div.on { color: #1f2937; } .kmodal .prog div.ok { color: #166534; }
.kmodal .prog i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #e5e7eb; display: grid; place-items: center; font-style: normal; font-size: 10px; flex: 0 0 18px; }
.kmodal .prog div.on i { border-color: #2563eb; border-top-color: transparent; animation: spin 1s linear infinite; }
.kmodal .prog div.ok i { background: #16a34a; border-color: #16a34a; color: #fff; }

/* ===== merchant store page (for embed demos) ===== */
.store { width: 100%; max-width: 980px; }
.store .shead { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 22px; }
.store .shead .lg { font-family: var(--display); font-weight: 700; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.store .shead .lg img { width: 26px; height: 26px; }
.store .shead .lg .accent { color: var(--cn-blue); }
.store .shead nav { display: flex; gap: 18px; font-size: 13.5px; color: #6b7280; }
.store .prod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 760px) { .store .prod { grid-template-columns: 1fr; } }
.store .pimg { background: #fff; border: 1px solid var(--cn-line); border-radius: 16px; aspect-ratio: 1; display: grid; place-items: center; font-size: 96px; }
.store .pinfo h1 { font-family: var(--display); font-size: 28px; margin: 0 0 8px; letter-spacing: -.02em; }
.store .pinfo .price { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.store .pinfo p { color: #4b5563; font-size: 14px; margin: 0 0 18px; max-width: 46ch; }
.store .snip { background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 12px 14px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; white-space: pre; overflow-x: auto; margin-top: 18px; }
.store .snip .t { color: #7dd3fc; } .store .snip .a { color: #fbbf24; } .store .snip .s { color: #86efac; }
.store .snipl { font-size: 11.5px; color: #6b7280; margin-top: 6px; }
.store .paybtn { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 22px; border-radius: 11px; background: var(--cn-blue); color: #fff; border: 0; font-weight: 600; font-size: 15px; cursor: pointer; }
.store .paybtn:hover { background: var(--cn-blue-ink); }
.store .paybtn .coin { width: 18px; height: 18px; flex-basis: 18px; }
.store .frame { background: #f5f6fa; border: 1px solid var(--cn-line); border-radius: 16px; padding: 20px; }
.store .frame .flabel { font-size: 11px; letter-spacing: .08em; color: #9ca3af; font-weight: 600; text-transform: uppercase; margin-bottom: 10px; }
.store .frame iframe { width: 100%; height: 640px; border: 0; display: block; border-radius: 12px; background: #fff; }
/* mock popup window */
.popwin { position: fixed; inset: 0; z-index: 800; display: none; align-items: center; justify-content: center; background: rgba(15,23,42,.35); }
.popwin.show { display: flex; }
.popwin .win { width: 520px; max-width: calc(100% - 24px); max-height: calc(100vh - 40px); background: #f5f6fa; border-radius: 12px; box-shadow: 0 40px 90px rgba(15,23,42,.45); overflow: hidden; display: flex; flex-direction: column; }
.popwin .wbar { height: 34px; background: #e5e7eb; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 11.5px; color: #4b5563; }
.popwin .wbar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.popwin .wbar .url { flex: 1; background: #fff; border-radius: 6px; padding: 3px 10px; font-family: var(--mono); font-size: 11px; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popwin .wbody { padding: 18px; overflow: auto; }
.popwin .wbody .chk { max-width: 100%; }
.popwin .wbody .chk .chk-grid { grid-template-columns: 1fr; }
.popwin .wbody .chk .brandcard .art { min-height: 120px; padding: 12px; }

/* ===== cart page ===== */
.cartpg { width: 100%; max-width: 980px; }
.cartpg .grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 800px) { .cartpg .grid { grid-template-columns: 1fr; } }
.cartpg .items { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .cartpg .items { grid-template-columns: 1fr; } }
.cartpg .it { background: #fff; border: 1px solid var(--cn-line); border-radius: 14px; padding: 14px; }
.cartpg .it .th { height: 96px; border-radius: 10px; background: var(--cn-blue-soft); display: grid; place-items: center; font-size: 36px; margin-bottom: 10px; }
.cartpg .it h4 { margin: 0 0 2px; font-size: 14px; }
.cartpg .it .d { color: #6b7280; font-size: 12px; margin-bottom: 10px; }
.cartpg .it .r { display: flex; justify-content: space-between; align-items: center; }
.cartpg .it .r b { font-size: 14px; }
.cartpg .it button { border: 1px solid var(--cn-blue); color: var(--cn-blue-ink); background: #fff; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cartpg .it button:hover { background: var(--cn-blue-soft); }
.cartpg .cart { background: #fff; border: 1px solid var(--cn-line); border-radius: 14px; }
.cartpg .cart h3 { margin: 0; padding: 14px 16px 10px; font-size: 15px; border-bottom: 1px solid var(--cn-line); font-family: var(--display); }
.cartpg .cart .lines { padding: 6px 16px; min-height: 60px; }
.cartpg .cart .line { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f3f6; font-size: 13px; }
.cartpg .cart .line:last-child { border: 0; }
.cartpg .cart .line small { display: block; color: #6b7280; }
.cartpg .cart .line .q { display: flex; gap: 8px; align-items: center; }
.cartpg .cart .line .q button { width: 22px; height: 22px; border: 1px solid var(--cn-line); background: #fff; border-radius: 6px; cursor: pointer; }
.cartpg .cart .empty { color: #6b7280; font-size: 13px; padding: 14px 0; }
.cartpg .cart .foot { padding: 12px 16px 16px; border-top: 1px solid var(--cn-line); }
.cartpg .cart .tot { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.cartpg .cart .tot span { color: #6b7280; font-size: 13px; }
.cartpg .cart .tot b { font-family: var(--display); font-size: 22px; }
.cartpg .cart .urlp { margin-top: 10px; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 8px 10px; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; word-break: break-all; }
.cartpg .cart .urlp .a { color: #fbbf24; }
.cartpg .cart .urlp .s { color: #86efac; }