/* ==========================================================================
   account.css -- cncrelief.com accounts, Points wallet, plans & dialogs (2026-09-25)
   Theme tokens exactly from requirement\ docs (00-03 plans, LOGIN_AUTH):
   2.5px #C4D2C9 border, #FBF8F2 paper, green header #DCE4DE -> #CFDDD2, #BAC8BE divider,
   terracotta #A85236 -> #883921, dark ink #16201E, sage pill #E4F2EB / #1E6B47 / #B8E3C3.
   ========================================================================== */

/* ---------- header slot ---------- */
.cnc-acc-slot { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.cnc-acc-slot .cnc-btn-sm {
    font-family: inherit; font-size: 12px; font-weight: 800; padding: 7px 14px; border-radius: 999px;
    cursor: pointer; white-space: nowrap; transition: all .15s; line-height: 1.1;
}
.cnc-btn-sm.ghost { background: #FFFFFF; color: #16201E; border: 2px solid #C4D2C9; }
.cnc-btn-sm.ghost:hover { border-color: #9C4B30; color: #9C4B30; }
.cnc-btn-sm.clay { background: linear-gradient(135deg, #A85236 0%, #883921 100%); color: #FFFFFF; border: 2px solid transparent; }
.cnc-btn-sm.clay:hover { filter: brightness(1.06); }

.cnc-chip {
    display: inline-flex; align-items: center; gap: 7px; background: #FFFFFF; border: 2px solid #C4D2C9;
    border-radius: 999px; padding: 3px 6px 3px 10px; box-shadow: 0 2px 6px rgba(22, 32, 30, 0.05);
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: #101716; cursor: pointer;
    white-space: nowrap; transition: border-color .15s, box-shadow .15s;
}
.cnc-chip:hover { border-color: #9C4B30; box-shadow: 0 4px 12px rgba(156, 75, 48, 0.15); }
.cnc-chip svg { flex-shrink: 0; }
.cnc-chip-plan { color: #556761; font-weight: 700; }
.cnc-chip-pts { font-weight: 800; background: #E4F2EB; color: #1E6B47; padding: 1px 8px; border-radius: 999px; }
.cnc-chip-pts.pro { background: #FAF0EC; color: #9C4B30; border: 1px solid #E6C6B9; }
.cnc-chip-trial { color: #9C4B30; font-weight: 800; padding-right: 6px; }
.cnc-chip-plus {
    width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #C4D2C9; background: #F0F5F2; color: #101716;
    font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    padding: 0; line-height: 1;
}
.cnc-chip-plus:hover { background: #9C4B30; color: #FFFFFF; border-color: #9C4B30; }
.cnc-chip.cashback { background: #FDF9F7; color: #883921; border: 1.5px solid #F0D5CB; padding: 4px 10px; font-weight: 800; font-size: 10.5px; }
.cnc-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: #16201E; color: #FFFFFF; border: 2px solid #C4D2C9;
    font-family: inherit; font-weight: 800; font-size: 12.5px; display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0;
}
.cnc-avatar:hover { border-color: #9C4B30; }

/* ---------- account menu ---------- */
.cnc-menu {
    position: fixed; z-index: 10050; width: 290px; background: #FBF8F2; border: 2.5px solid #C4D2C9; border-radius: 16px;
    box-shadow: 0 18px 44px rgba(22, 32, 30, 0.28); overflow: hidden; font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
}
.cnc-menu-head { background: linear-gradient(135deg, #DCE4DE 0%, #CFDDD2 100%); border-bottom: 2px solid #BAC8BE; padding: 12px 14px; }
.cnc-menu-name { font-weight: 800; font-size: 14px; color: #101716; }
.cnc-menu-sub { font-size: 11px; color: #4D5E58; margin-top: 2px; font-family: var(--font-mono, monospace); }
.cnc-menu-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #2E3A37; }
.cnc-menu-row { display: flex; justify-content: space-between; gap: 10px; }
.cnc-menu-row strong { color: #101716; }
.cnc-menu-actions { display: flex; flex-direction: column; border-top: 1.5px solid #E2ECE5; }
.cnc-menu-actions button {
    background: none; border: none; text-align: left; padding: 10px 14px; font-family: inherit; font-size: 12.5px;
    font-weight: 700; color: #16201E; cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.cnc-menu-actions button:hover { background: #F0F5F2; color: #9C4B30; }

/* ---------- dialogs ---------- */
.cnc-modal-backdrop {
    position: fixed; inset: 0; z-index: 10000; background: rgba(16, 23, 22, 0.68); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 16px;
    font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
}
.cnc-modal-backdrop.open { display: flex; animation: cncFade .18s ease-out; }
@keyframes cncFade { from { opacity: 0; } to { opacity: 1; } }
.cnc-modal-card {
    width: 100%; max-width: 480px; max-height: calc(100vh - 32px); background: #FBF8F2; border: 2.5px solid #C4D2C9;
    border-radius: 20px; box-shadow: 0 24px 60px rgba(22, 32, 30, 0.32), 0 2px 6px rgba(22, 32, 30, 0.08);
    overflow: hidden; display: flex; flex-direction: column; animation: cncUp .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.cnc-modal-card.wide { max-width: 560px; }
.cnc-modal-card.large { max-width: 980px; }
@keyframes cncUp { from { transform: translateY(18px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.cnc-modal-header {
    background: linear-gradient(135deg, #DCE4DE 0%, #CFDDD2 100%); padding: 16px 20px; border-bottom: 2px solid #BAC8BE;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0;
}
.cnc-head-box { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cnc-brand-badge {
    width: 40px; height: 40px; border-radius: 10px; background: #16201E; color: #FFFFFF; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; box-shadow: 0 3px 8px rgba(22, 32, 30, 0.2);
}
.cnc-brand-badge.clay { background: #9C4B30; }
.cnc-brand-badge.lock { background: #883921; }
.cnc-modal-title { font-size: 16px; font-weight: 800; color: #101716; margin: 0; line-height: 1.2; }
.cnc-modal-title span { color: #9C4B30; display: block; font-size: 13px; font-weight: 700; }
.cnc-sub-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.cnc-pill-green {
    font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; background: #E4F2EB;
    color: #1E6B47; border: 1px solid #B8E3C3; padding: 1px 7px; border-radius: 999px; text-transform: uppercase;
}
.cnc-sub-note { font-size: 10.5px; font-weight: 600; color: #4D5E58; }
.cnc-test-tag {
    font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 800; letter-spacing: .06em; background: #FFF6DB;
    color: #7A5A00; border: 1px solid #E6D18A; padding: 1px 6px; border-radius: 999px;
}
.cnc-modal-close {
    width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #BAC8BE; background: #FFFFFF; color: #101716;
    font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s;
    flex-shrink: 0; padding: 0; line-height: 1;
}
.cnc-modal-close:hover { background: #9C4B30; color: #FFFFFF; border-color: #9C4B30; }
.cnc-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.cnc-desc { font-size: 13px; color: #2E3A37; line-height: 1.45; margin: 0; }
.cnc-desc code { font-family: var(--font-mono, monospace); font-weight: 700; background: #EAE4D8; padding: 1px 4px; border-radius: 4px; }

/* buttons */
.cnc-btn-primary, .cnc-btn-dark, .cnc-btn-whatsapp {
    width: 100%; padding: 13px 18px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; color: #FFFFFF;
    font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; display: flex; align-items: center;
    justify-content: center; gap: 8px; transition: all .2s;
}
.cnc-btn-primary { background: linear-gradient(135deg, #A85236 0%, #883921 100%); box-shadow: 0 6px 18px rgba(156, 75, 48, 0.3); }
.cnc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(156, 75, 48, 0.42); }
.cnc-btn-dark { background: #16201E; }
.cnc-btn-dark:hover { background: #9C4B30; }
.cnc-btn-whatsapp { background: linear-gradient(135deg, #1E6B47 0%, #165337 100%); box-shadow: 0 6px 18px rgba(30, 107, 71, 0.25); }
.cnc-btn-whatsapp:hover { transform: translateY(-2px); }
.cnc-btn-primary:disabled, .cnc-btn-dark:disabled, .cnc-btn-whatsapp:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.cnc-btn-tag { background: rgba(255, 255, 255, 0.22); font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: .06em; }
.cnc-btn-link { background: transparent; border: none; color: #556761; font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 6px; text-decoration: underline; }
.cnc-btn-link:hover { color: #101716; }
.cnc-btn-google {
    width: 100%; background: #FFFFFF; border: 2px solid #C4D2C9; border-radius: 12px; padding: 10px 14px; display: flex;
    align-items: center; gap: 12px; cursor: not-allowed; font-family: inherit; text-align: left; opacity: .8;
}
.cnc-btn-google strong { display: block; font-size: 13.5px; font-weight: 800; color: #101716; }
.cnc-btn-google span { font-size: 10.5px; font-weight: 600; color: #556761; }
.cnc-soon { margin-left: auto; font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 800; color: #6E7A77; border: 1px solid #C4D2C9; border-radius: 999px; padding: 2px 7px; }

/* forms */
.cnc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #EFEBE2; border-radius: 12px; padding: 4px; }
.cnc-tabs button {
    border: none; background: transparent; border-radius: 9px; padding: 8px; font-family: inherit; font-size: 12.5px;
    font-weight: 800; color: #556761; cursor: pointer;
}
.cnc-tabs button.active { background: #FFFFFF; color: #101716; box-shadow: 0 2px 6px rgba(22, 32, 30, 0.08); }
.cnc-divider { display: flex; align-items: center; text-align: center; margin: 2px 0; }
.cnc-divider::before, .cnc-divider::after { content: ''; flex: 1; border-bottom: 1.5px solid #DDD6CA; }
.cnc-divider span { font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: #6E7A77; padding: 0 10px; }
.cnc-form { display: flex; flex-direction: column; gap: 11px; }
.cnc-field { display: flex; flex-direction: column; gap: 4px; }
/* 2026-09-27: register form -- WhatsApp design alerts opt-in */
.cnc-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: #2E3A37; line-height: 1.45; cursor: pointer; }
.cnc-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: #385949; flex: none; }
.cnc-check em { font-style: normal; color: #6E7A77; font-size: 11.5px; }
.cnc-label { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #2E3A37; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cnc-label em { font-style: normal; font-size: 9px; font-weight: 600; color: #6E7A77; letter-spacing: 0; }
.cnc-input {
    width: 100%; padding: 10px 12px; border: 2px solid #C4D2C9; border-radius: 10px; background: #FFFFFF; font-family: inherit;
    font-size: 13px; font-weight: 600; color: #101716; outline: none; box-sizing: border-box; transition: all .2s;
}
.cnc-input:focus { border-color: #385949; box-shadow: 0 0 0 3px rgba(56, 89, 73, 0.12); }
.cnc-input.phone { font-family: var(--font-mono, monospace); font-weight: 700; }
.cnc-input.otp { letter-spacing: 8px; font-size: 18px; text-align: center; font-weight: 800; font-family: var(--font-mono, monospace); }
.cnc-otp-row { display: flex; gap: 8px; align-items: center; }
.cnc-otp-row .cnc-input { flex: 1; }
.cnc-btn-resend {
    padding: 10px 12px; background: #FFFFFF; border: 2px solid #C4D2C9; border-radius: 10px; font-family: inherit; font-size: 11px;
    font-weight: 800; color: #16201E; cursor: pointer; white-space: nowrap;
}
.cnc-btn-resend:hover:not(:disabled) { border-color: #9C4B30; color: #9C4B30; }
.cnc-btn-resend:disabled { opacity: .5; cursor: not-allowed; }
.cnc-otp-timer { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; color: #9C4B30; }
.cnc-msg { font-size: 12px; font-weight: 700; border-radius: 10px; padding: 8px 12px; display: none; line-height: 1.35; }
.cnc-msg.show { display: block; }
.cnc-msg.err { background: #FBEDEA; color: #A32817; border: 1.5px solid #EFC7BF; }
.cnc-msg.ok { background: #E4F2EB; color: #1E6B47; border: 1.5px solid #B8E3C3; }
.cnc-notice {
    background: #F0F5F2; border: 1.5px solid #C4D2C9; border-radius: 10px; padding: 9px 12px; display: flex; align-items: flex-start;
    gap: 8px; font-size: 11px; color: #2D413A; line-height: 1.4;
}
.cnc-notice.test { background: #FFFBEC; border-color: #E6D8A8; color: #5A4A1A; }
.cnc-notice svg { flex-shrink: 0; margin-top: 1px; }
.cnc-notice code { font-family: var(--font-mono, monospace); font-weight: 700; color: #101716; }

/* quota cards (trial) */
.cnc-quota-card { background: #FFFFFF; border: 2px solid #C4D2C9; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.cnc-quota-card.highres { border-color: #9C4B30; background: #FFFDFB; }
.cnc-quota-card.used { opacity: .55; }
.cnc-card-badge { font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: #9C4B30; }
.cnc-card-title { font-size: 14px; font-weight: 800; color: #101716; }
.cnc-card-desc { font-size: 11.5px; color: #556761; margin: 0; }

/* plans grid */
.cnc-plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cnc-plan-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cnc-plan-grid, .cnc-plan-grid.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cnc-plan-grid, .cnc-plan-grid.three { grid-template-columns: 1fr; } }
.cnc-plan-card {
    background: #FFFFFF; border: 2px solid #C4D2C9; border-radius: 14px; padding: 16px 14px 14px; display: flex; flex-direction: column;
    justify-content: space-between; gap: 12px; position: relative;
}
.cnc-plan-card.featured { border-color: #9C4B30; box-shadow: 0 8px 24px rgba(156, 75, 48, 0.15); background: #FFFDFB; }
.cnc-plan-card.current { border-color: #1E6B47; }
.cnc-plan-tag {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #9C4B30; color: #FFFFFF;
    font-family: var(--font-mono, monospace); font-size: 8.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
    letter-spacing: .06em; white-space: nowrap;
}
.cnc-plan-card.current .cnc-plan-tag { background: #1E6B47; }
.cnc-plan-name { font-size: 15px; font-weight: 800; color: #101716; display: flex; align-items: center; gap: 6px; }
.cnc-plan-price { font-size: 22px; font-weight: 800; color: #101716; margin: 6px 0 2px; }
.cnc-plan-price span { font-size: 11px; font-weight: 600; color: #6E7A77; }
.cnc-plan-price s { font-size: 12px; color: #A3ACA8; font-weight: 600; margin-right: 4px; }
.cnc-plan-pts { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 800; color: #1E6B47; background: #E4F2EB; padding: 2px 6px; border-radius: 6px; display: inline-block; }
.cnc-plan-features { list-style: none; padding: 0; margin: 10px 0 0; font-size: 11.5px; color: #2E3A37; display: flex; flex-direction: column; gap: 5px; }
.cnc-plan-features li { display: flex; gap: 6px; align-items: flex-start; line-height: 1.3; }
.cnc-plan-features li::before { content: '\2713'; color: #1E6B47; font-weight: 800; }
.cnc-plan-features li.off { color: #A3ACA8; text-decoration: line-through; }
.cnc-plan-features li.off::before { content: '\2715'; color: #C9A9A0; }
.cnc-plan-features li.soon::after { content: 'SOON'; font-family: var(--font-mono, monospace); font-size: 8px; font-weight: 800; color: #7A5A00; background: #FFF6DB; border: 1px solid #E6D18A; border-radius: 999px; padding: 0 5px; margin-left: 2px; align-self: center; }
.cnc-btn-plan {
    width: 100%; padding: 9px 12px; background: #16201E; color: #FFFFFF; border: none; border-radius: 10px; font-family: inherit;
    font-size: 12px; font-weight: 800; cursor: pointer; transition: all .2s;
}
.cnc-btn-plan:hover:not(:disabled) { background: #9C4B30; }
.cnc-btn-plan.featured { background: linear-gradient(135deg, #A85236 0%, #883921 100%); }
.cnc-btn-plan:disabled { background: #D9DFDB; color: #6E7A77; cursor: default; }
.cnc-cycle { display: inline-flex; background: #EFEBE2; border-radius: 999px; padding: 3px; gap: 3px; align-self: center; }
.cnc-cycle button { border: none; background: transparent; padding: 6px 14px; border-radius: 999px; font-family: inherit; font-size: 11.5px; font-weight: 800; color: #556761; cursor: pointer; }
.cnc-cycle button.active { background: #FFFFFF; color: #101716; box-shadow: 0 2px 6px rgba(22, 32, 30, 0.08); }
.cnc-cycle em { font-style: normal; color: #1E6B47; font-size: 10px; }
.cnc-confirm { background: #FFFFFF; border: 2px solid #9C4B30; border-radius: 12px; padding: 14px; display: none; flex-direction: column; gap: 10px; }
.cnc-confirm.show { display: flex; }
.cnc-confirm-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.cnc-footer-note { text-align: center; font-size: 10.5px; color: #556761; line-height: 1.5; }
.cnc-footer-note code { font-family: var(--font-mono, monospace); font-weight: 700; color: #101716; }

/* comparison (RLF lock) */
.cnc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #FFFFFF; border: 2px solid #C4D2C9; border-radius: 12px; padding: 12px; }
.cnc-compare-col { display: flex; flex-direction: column; gap: 6px; }
.cnc-compare-col.upgrade { border-left: 1.5px solid #E2ECE5; padding-left: 10px; }
.cnc-compare-col strong.t { font-size: 11px; font-weight: 800; color: #101716; font-family: var(--font-mono, monospace); }
.cnc-compare-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #2E3A37; }
.cnc-compare-col li.yes::before { content: '\2713  '; color: #1E6B47; font-weight: 800; }
.cnc-compare-col li.no::before { content: '\2715  '; color: #A32817; font-weight: 800; }
.cnc-compare-col li.up::before { content: '\2605  '; color: #9C4B30; }
.cnc-kv { background: #FFFFFF; border: 2px solid #C4D2C9; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #2E3A37; }
.cnc-kv .row { display: flex; justify-content: space-between; gap: 10px; }
.cnc-kv .row strong { color: #101716; font-family: var(--font-mono, monospace); }
.cnc-kv .sep { border-top: 1.5px dashed #DDD6CA; margin: 2px 0; }
.cnc-kv .total strong { color: #1E6B47; }

/* studio widgets */
.cnc-cost-line { margin-top: 8px; font-size: 11px; color: var(--dim, #6E7A77); text-align: center; line-height: 1.4; }
.cnc-cost-line strong { color: var(--ink, #101716); }
.cnc-cost-line a { color: #9C4B30; font-weight: 800; cursor: pointer; text-decoration: underline; }
.cnc-backup-alert {
    background: #FFFDF5; border: 2px solid #E6D8A8; border-radius: 12px; padding: 10px 14px; display: flex; align-items: center;
    gap: 10px; margin-top: 10px; box-shadow: 0 2px 8px rgba(180, 140, 20, 0.06); font-size: 11.5px; color: #5A4A1A; line-height: 1.35;
}
.cnc-backup-alert strong { color: #382C08; }
.cnc-backup-alert svg { flex-shrink: 0; color: #9C7A10; }
.cnc-lock-badge {
    display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono, monospace); font-size: 8.5px; font-weight: 800;
    letter-spacing: .05em; background: #FAF0EC; color: #883921; border: 1px solid #E6C6B9; border-radius: 999px; padding: 1px 6px;
    white-space: nowrap;
}
.cnc-locked { position: relative; }
.cnc-locked .cnc-lock-badge.corner { position: absolute; top: -9px; right: 10px; z-index: 2; box-shadow: 0 2px 6px rgba(136, 57, 33, 0.18); }
.cnc-locked .cnc-lock-badge.corner.bottom { top: auto; bottom: -9px; right: 50%; transform: translateX(50%); }
.cnc-hist-pill {
    display: inline-block; font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 800; border-radius: 999px;
    padding: 1px 7px; margin-top: 4px; background: #E4F2EB; color: #1E6B47; border: 1px solid #B8E3C3;
}
.cnc-hist-pill.session { background: #EEF4F0; color: #2F5C45; border-color: #C4D2C9; }   /* 2026-10-02 (user): green like the History, no yellow */
.cnc-hist-pill.expired { background: #F2EFEA; color: #8A8F8C; border-color: #DDD6CA; }
.cnc-toast {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 10100; background: #16201E; color: #FFFFFF;
    padding: 10px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif); max-width: calc(100vw - 32px);
}

/* 2026-09-27: referral code (register form) + Refer a Friend dialog */
.cnc-input.ref { font-family: var(--font-mono, monospace); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cnc-input.ref-link { font-family: var(--font-mono, monospace); font-size: 11.5px; }
.cnc-ref-code {
    display: flex; flex-direction: column; align-items: center; gap: 4px; background: #FFFFFF; border: 2px dashed #C4D2C9;
    border-radius: 12px; padding: 12px;
}
.cnc-ref-code span { font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: #6E7A77; }
.cnc-ref-code strong { font-family: var(--font-mono, monospace); font-size: 26px; font-weight: 800; letter-spacing: .18em; color: #883921; }
a.cnc-btn-whatsapp { text-decoration: none; box-sizing: border-box; }
.cnc-ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cnc-ref-stats > div { background: #FFFFFF; border: 2px solid #C4D2C9; border-radius: 12px; padding: 10px 8px; text-align: center; }
.cnc-ref-stats strong { display: block; font-family: var(--font-mono, monospace); font-size: 20px; font-weight: 800; color: #101716; }
.cnc-ref-stats span { font-size: 10.5px; font-weight: 700; color: #6E7A77; }
.cnc-ref-stats .earn { border-color: #B8E3C3; background: #F3FAF5; }
.cnc-ref-stats .earn strong { color: #1E6B47; }
.cnc-ref-hist { background: #FFFFFF; border: 2px solid #C4D2C9; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow-y: auto; }
.cnc-ref-hist .row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: #2E3A37; }
.cnc-ref-hist .row strong { color: #1E6B47; font-family: var(--font-mono, monospace); white-space: nowrap; }

/* 2026-09-27: code by WhatsApp (India) or Email (all countries) + Google log in + Europe device-check consent */
.cnc-method { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #EFEBE2; border-radius: 12px; padding: 4px; }
.cnc-method button {
    border: none; background: transparent; border-radius: 9px; padding: 7px 8px; font-family: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 1px; color: #556761;
}
.cnc-method button strong { font-size: 12.5px; font-weight: 800; }
.cnc-method button span { font-size: 10px; font-weight: 600; color: #6E7A77; }
.cnc-method button.on { background: #FFFFFF; color: #101716; box-shadow: 0 2px 6px rgba(22, 32, 30, 0.08); }
.cnc-method button:disabled { cursor: default; }
.cnc-method button:disabled:not(.on) { opacity: .5; }
.cnc-google-slot { display: flex; justify-content: center; min-height: 44px; }
.cnc-google-gis { display: flex; justify-content: center; width: 100%; }
.cnc-consent {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 10050; max-width: 760px; margin: 0 auto; box-sizing: border-box;
    background: #FFFFFF; border: 2px solid #C4D2C9; border-radius: 14px; padding: 12px 14px; display: flex; align-items: center;
    gap: 14px; box-shadow: 0 12px 34px rgba(22, 32, 30, 0.18); font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
}
.cnc-consent-text { font-size: 12.5px; line-height: 1.45; color: #2E3A37; flex: 1; }
.cnc-consent-text a { color: #883921; font-weight: 700; }
.cnc-consent-actions { display: flex; gap: 8px; flex: none; }
.cnc-consent .cnc-btn-sm { padding: 8px 14px; border-radius: 10px; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
@media (max-width: 560px) { .cnc-consent { flex-direction: column; align-items: stretch; } .cnc-consent-actions { justify-content: flex-end; } }
.cnc-consent.inline { position: relative; left: auto; right: auto; bottom: auto; margin: 10px; max-width: none; box-shadow: none; flex-direction: column; align-items: stretch; }
.cnc-consent.inline .cnc-consent-actions { justify-content: flex-end; }
.cnc-legal { margin: 0; font-size: 11.5px; line-height: 1.45; color: #556761; }
.cnc-legal a { color: #883921; font-weight: 700; }

/* 2026-09-27 (user): phones -> "Please use a desktop or laptop computer" */
.cnc-phone-note {
    display: flex; gap: 10px; align-items: flex-start; margin: 10px; padding: 12px 14px; border-radius: 12px; background: #FFFBEC;
    border: 1.5px solid #E6D8A8; color: #4A3B0B; font-size: 13px; line-height: 1.45; font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
}
.cnc-phone-note svg { flex: none; margin-top: 2px; }
html.cnc-phone-block body > *:not(#cncPhone):not(#cncConsent) { display: none !important; }
html.cnc-phone-block body { display: block !important; overflow-x: hidden; height: auto !important; min-height: 0 !important; }
.cnc-phone-full { display: flex; justify-content: center; align-items: flex-start; padding: 28px 16px; font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif); }
.cnc-phone-card {
    max-width: 420px; width: 100%; background: #FFFFFF; border: 2px solid #C4D2C9; border-radius: 16px; padding: 24px 20px;
    text-align: center; color: #2E3A37; box-shadow: 0 12px 34px rgba(22, 32, 30, 0.10);
}
.cnc-phone-icon { width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 12px; background: #FFFBEC; color: #9C4B30; display: grid; place-items: center; }
.cnc-phone-card h2 { font-size: 20px; line-height: 1.25; color: #101716; margin: 0 0 10px; }
.cnc-phone-card p { font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.cnc-consent-pay { margin: 10px 0 4px; } .cnc-consent-pay a { color: #883921; font-weight: 700; }

/* 2026-09-28: Plans dialog -- third tab "Pay Manually / Need Help" (Victoria CNC Models team, call / WhatsApp) */
.cnc-tabs.three { grid-template-columns: 1fr 1fr 1.35fr; }
.cnc-support { display: flex; flex-direction: column; gap: 16px; }
.cnc-support-hero { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, #16201E 0%, #243330 100%); color: #FFFFFF; }
.cnc-support-mark { flex: none; width: 52px; height: 52px; border-radius: 14px; background: #9C4B30; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; letter-spacing: .04em; }
.cnc-support-kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #E6C6B9; }
.cnc-support-title { margin: 3px 0 2px; font-size: 20px; font-weight: 800; color: #FFFFFF; }
.cnc-support-sub { font-size: 13px; color: #C9D3CF; }
.cnc-support-about { background: #FBF8F3; border: 1px solid #E6DFD3; border-radius: 14px; padding: 14px 16px; }
.cnc-support-about p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: #2A3431; }
.cnc-support-about p:last-child { margin-bottom: 0; }
.cnc-support-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cnc-support-steps div { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; background: #F2F6F3; border: 1px solid #DCE6E0; font-size: 13px; line-height: 1.45; color: #22302C; }
.cnc-support-steps b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #1E6B47; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.cnc-support-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; }
.cnc-support-member { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid #E1DACD; background: #FFFFFF; flex-wrap: wrap; }
.cnc-support-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #E6C6B9; color: #7A3622; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.cnc-support-who { flex: 1 1 120px; display: flex; flex-direction: column; min-width: 0; }
.cnc-support-who strong { font-size: 15px; color: #101716; }
.cnc-support-who span { font-size: 12.5px; color: #5B6663; }
.cnc-support-who .cnc-support-phone { font-family: var(--font-mono, monospace); font-size: 13px; color: #22302C; margin-top: 2px; }
.cnc-support-actions { display: flex; gap: 8px; }
a.cnc-support-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: 13px; text-decoration: none; width: auto; }
.cnc-support-hours { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: #5B6663; }
@media (max-width: 720px) { .cnc-support-steps { grid-template-columns: 1fr; } .cnc-tabs.three { grid-template-columns: 1fr; } }

/* 2026-09-28 (user): Launch Offer -- regular price struck, SAVE chip, countdown banner (account.js offerBanner) */
.cnc-plan-price .cnc-save { display: inline-block; vertical-align: 3px; margin-left: 6px; font-style: normal; font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: #FFFFFF; background: #1E6B47; padding: 2px 6px; border-radius: 6px; }
.cnc-offer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-radius: 14px; background: #16201E; color: #FBF8F2; box-shadow: 0 8px 22px rgba(22, 32, 30, 0.18); }
.cnc-offer-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cnc-offer-kicker { font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #E6C6B9; }
.cnc-offer-l strong { font-size: 17px; font-weight: 800; color: #FFFFFF; }
.cnc-offer-sub { font-size: 11.5px; color: #C9D1CD; }
.cnc-offer-cd { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.cnc-offer-cd span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #C9D1CD; }
.cnc-offer-cd strong { font-family: var(--font-mono, monospace); font-size: 16px; font-weight: 800; color: #FFFFFF; background: #9C4B30; padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
.cnc-offer.ended { opacity: .6; }
@media (max-width: 560px) { .cnc-offer { flex-direction: column; align-items: flex-start; } .cnc-offer-cd { align-items: flex-start; } }

/* ==========================================================================
   2026-09-28 night (user point 10): Design Basket button in the page header (every page)
   ========================================================================== */
.cnc-basket-slot { display:inline-flex; align-items:center; }
.cnc-basket-btn { font-family:var(--font-sans, 'DM Sans', sans-serif); font-size:13px; font-weight:800; color:#16201E; background:#FFFFFF;
    cursor:pointer; border:2px solid #C4D2C9; border-radius:999px; padding:6px 8px 6px 12px; display:inline-flex; align-items:center;
    gap:7px; line-height:1; white-space:nowrap; transition:all .15s; }
.cnc-basket-btn b { min-width:22px; height:22px; border-radius:999px; background:#E2ECE5; color:#556761; display:inline-flex;
    align-items:center; justify-content:center; font-size:11.5px; padding:0 6px; }
.cnc-basket-btn:hover, .cnc-basket-btn.has { border-color:#9C4B30; color:#9C4B30; }
.cnc-basket-btn.has b { background:#9C4B30; color:#FFFFFF; }

/* 2026-09-28 night (user point 7): opened from a referral link -> no referral box, only this line */
.cnc-field.ref-from-link { display:none !important; }
.cnc-ref-applied { display:flex; align-items:center; gap:8px; background:#E4F2EB; border:1.5px solid #B8E3C3; color:#1E6B47;
    border-radius:10px; padding:9px 12px; font-size:13.5px; font-weight:700; }
.cnc-ref-applied[hidden] { display:none !important; }

/* 2026-09-28 night (user point 11): Log In / Register dialog -- bigger, clearer text, a little wider */
#cncAuthModal .cnc-modal-card { max-width:560px; }
#cncAuthModal .cnc-modal-title { font-size:19px; }
#cncAuthModal .cnc-modal-title span { font-size:14.5px; }
#cncAuthModal .cnc-pill-green { font-size:10.5px; }
#cncAuthModal .cnc-sub-note { font-size:12px; }
#cncAuthModal .cnc-modal-body { padding:22px 26px; gap:15px; }
#cncAuthModal .cnc-form { gap:14px; }
#cncAuthModal .cnc-label { font-family:var(--font-sans, 'DM Sans', system-ui, sans-serif); font-size:13.5px; font-weight:800; letter-spacing:.02em;
    color:#101716; text-transform:none; }
#cncAuthModal .cnc-label em { font-size:12px; font-weight:600; color:#4D5E58; }
#cncAuthModal .cnc-input { font-size:16px; padding:12px 14px; border-color:#A9BCAF; color:#101716; }
#cncAuthModal .cnc-input::placeholder { color:#7F8B87; font-weight:500; opacity:1; }
#cncAuthModal .cnc-input.phone { font-family:var(--font-sans, 'DM Sans', system-ui, sans-serif); font-weight:700; letter-spacing:.02em; }
#cncAuthModal .cnc-input.ref { font-size:15px; }
#cncAuthModal .cnc-input.otp { font-size:22px; }
#cncAuthModal .cnc-method button { padding:10px 8px; }
#cncAuthModal .cnc-method button strong { font-size:15px; }
#cncAuthModal .cnc-method button span { font-size:12px; color:#4D5E58; }
#cncAuthModal .cnc-divider span { font-size:11.5px; color:#4D5E58; }
#cncAuthModal .cnc-btn-google strong { font-size:15px; }
#cncAuthModal .cnc-btn-google span { font-size:12px; }
#cncAuthModal .cnc-check { font-size:14px; }
#cncAuthModal .cnc-check em { font-size:12.5px; }
#cncAuthModal .cnc-legal { font-size:13px; }
#cncAuthModal .cnc-btn-primary { font-size:15.5px; padding:14px 18px; }
#cncAuthModal .cnc-notice { font-size:12.5px; }
#cncAuthModal .cnc-msg { font-size:13.5px; }
#cncAuthModal .cnc-otp-timer { font-size:12px; }
#cncAuthModal .cnc-btn-resend { font-size:13px; }

/* 2026-09-28 night (user point 25): notification bell in the page header (every page) -> /notifications */
.cnc-bell-slot { display:inline-flex; align-items:center; }
.cnc-bell { position:relative; width:40px; height:40px; border-radius:999px; border:2px solid #C4D2C9; background:#FFFFFF; color:#16201E;
    display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:all .15s; }
.cnc-bell:hover { border-color:#9C4B30; color:#9C4B30; }
.cnc-bell.has { border-color:#E0A43A; color:#9C4B30; animation:cncBellRing 2.4s ease-in-out 1; }
.cnc-bell-n { position:absolute; top:-6px; right:-7px; min-width:20px; height:20px; border-radius:999px; background:#C8331F; color:#FFFFFF;
    font-family:var(--font-sans, 'DM Sans', sans-serif); font-size:11px; font-weight:800; display:inline-flex; align-items:center;
    justify-content:center; padding:0 5px; border:2px solid #FBF8F2; }
.cnc-bell-n[hidden] { display:none; }
@keyframes cncBellRing { 0%, 100% { transform:rotate(0); } 10% { transform:rotate(14deg); } 20% { transform:rotate(-12deg); } 30% { transform:rotate(8deg); } 40% { transform:rotate(-4deg); } 50% { transform:rotate(0); } }

/* 2026-09-28 night (user point 24): My Profile at the top of the account menu */
a.cnc-menu-profile { display:block; text-decoration:none; }
a.cnc-menu-profile:hover .cnc-menu-name { color:#9C4B30; text-decoration:underline; }
.cnc-menu-actions a.cnc-menu-top { display:block; padding:11px 14px; background:#16201E; color:#FBF8F2; text-decoration:none; font-size:13.5px; font-weight:800; }
.cnc-menu-actions a.cnc-menu-top span { display:block; font-size:11px; font-weight:600; color:#C9D3CE; margin-top:2px; }
.cnc-menu-actions a.cnc-menu-top:hover { background:#9C4B30; }
.cnc-menu-actions a.cnc-menu-link { display:block; padding:10px 14px; font-size:12.5px; font-weight:700; color:#16201E; text-decoration:none; border-bottom:1.5px solid #E2ECE5; }
.cnc-menu-actions a.cnc-menu-link:hover { background:#F0F5F2; color:#9C4B30; }

/* 2026-09-29 23:06 (user): header plan badge -- Points left + a VIP symbol per plan (Starter / Pro / Premium) */
.cnc-chip.vip { gap: 8px; padding: 3px 5px 3px 4px; }
.vip-mark { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), 0 2px 6px rgba(0, 0, 0, .12); }
.vip-txt { display: inline-flex; flex-direction: column; line-height: 1.05; }
.vip-plan { font-weight: 800; font-size: 12px; color: #16201E; white-space: nowrap; }
.vip-tag { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.vip-pts { font-size: 12.5px; }
.vip-pts small { font-size: 9.5px; font-weight: 800; opacity: .8; }
.vip-starter { border-color: #9FCDB4; background: linear-gradient(180deg, #FFFFFF, #EEF8F2); }
.vip-starter .vip-mark { background: linear-gradient(145deg, #3FA578, #1E6B47); }
.vip-starter .vip-tag { color: #1E6B47; }
.vip-starter .vip-pts { background: #E4F2EB; color: #1E6B47; }
.vip-pro { border-color: #D9A48F; background: linear-gradient(180deg, #FFFFFF, #FBEFE9); }
.vip-pro .vip-mark { background: linear-gradient(145deg, #D9774F, #9C4B30 60%, #7E3B25); }
.vip-pro .vip-tag { color: #9C4B30; }
.vip-pro .vip-pts { background: #FAF0EC; color: #9C4B30; border: 1px solid #E6C6B9; }
.vip-premium { border: 1.5px solid #D4A73A; background: linear-gradient(180deg, #FFFDF5, #FBF1D6); position: relative; overflow: hidden;
    box-shadow: 0 0 0 3px rgba(212, 167, 58, .14), 0 4px 14px rgba(160, 118, 22, .18); }
.vip-premium .vip-mark { background: linear-gradient(145deg, #FFE59A, #E3B13F 55%, #B8860B); }
.vip-premium .vip-tag { color: #8A6508; }
.vip-premium .vip-pts { background: linear-gradient(180deg, #FFF6D8, #F6E3A8); color: #6B4E05; border: 1px solid #E3C46A; }
.vip-premium::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); animation: vipShine 5s ease-in-out infinite; }
@keyframes vipShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .vip-premium::after { animation: none; display: none; } }
@media (max-width: 720px) { .vip-tag { display: none; } .vip-mark { width: 22px; height: 22px; } }

/* 2026-09-29 23:11 (user): password log in; a code only for Register and Forgot password */
.cnc-pw-row { display: flex; gap: 8px; align-items: stretch; }
.cnc-pw-row .cnc-input { flex: 1; min-width: 0; }
.cnc-pw-eye { flex: none; font: inherit; font-size: 12px; font-weight: 800; border: 2px solid #C4D2C9; background: #FFFFFF; color: #2B2E2C;
    border-radius: 10px; padding: 0 12px; cursor: pointer; }
.cnc-pw-eye:hover { border-color: #9C4B30; color: #9C4B30; }
.cnc-forgot { display: flex; justify-content: flex-end; margin-top: -4px; }
.cnc-forgot .cnc-btn-link { font-size: 12.5px; }
form .cnc-forgot[data-only="reset"] { justify-content: center; margin-top: 2px; }
.cnc-reset-head { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: #FBF3EF;
    border: 1.5px solid #E6C6B9; }
.cnc-reset-head strong { color: #7E3B25; font-size: 14.5px; }
.cnc-reset-head span { color: #5B4A43; font-size: 12.5px; line-height: 1.45; }

/* 2026-09-30 02:13 (user): manual payment -- dynamic UPI QR + the instructions from the desktop app */
.cnc-manual-alt { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: #556761; }
.cnc-manual-alt .cnc-btn-link:disabled { opacity: .45; cursor: not-allowed; }
.cnc-manual { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cnc-manual-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cnc-manual-amt { font-family: var(--font-serif, 'Newsreader', Georgia, serif); font-size: 32px; font-weight: 700; color: #101716; line-height: 1.1; }
.cnc-manual-qr { background: #FFFFFF; border: 2px solid #DDD6CA; border-radius: 16px; padding: 10px; }
.cnc-manual-qr img { display: block; width: 240px; max-width: 70vw; height: auto; image-rendering: pixelated; }
.cnc-manual-vpa { font-size: 13.5px; color: #2E3A37; word-break: break-all; }
.cnc-manual-app { width: 100%; justify-content: center; text-decoration: none; }
.cnc-manual-text { width: 100%; box-sizing: border-box; text-align: left; white-space: pre-wrap; background: #F6F1E8; border: 1.5px solid #E6DCCB;
  border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: #16201E; }
.cnc-manual-foot { margin: 0; }
/* 2026-10-02 02:12: tip for computers before the Razorpay UPI QR (make it bigger, scan inside the UPI app) */
.cnc-upi-tip { background: #EEF4F0; border: 1.5px solid #C4D2C9; border-radius: 12px; padding: 10px 14px; color: #2F5C45; font-size: 13px; line-height: 1.5; }
/* 2026-10-02 02:27 (user): our own big QR (Razorpay payment link) -- click = full screen */
.cnc-bigqr-go { margin-bottom: 8px; }
.cnc-bigqr { gap: 10px; }
.cnc-bigqr-img { background: #FFFFFF; border: 2px solid #C4D2C9; border-radius: 16px; padding: 10px; cursor: zoom-in; transition: transform .15s, box-shadow .15s; }
.cnc-bigqr-img:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(30, 107, 71, 0.18); }
.cnc-bigqr-img img { display: block; width: 300px; max-width: 72vw; height: auto; image-rendering: pixelated; }
.cnc-bigqr-hint { font-size: 12.5px; color: #2F5C45; font-weight: 700; }
.cnc-bigqr-steps { text-align: left; margin: 0; padding: 12px 14px 12px 32px; background: #F6F1E8; border: 1.5px solid #E6DCCB; border-radius: 12px;
  font-size: 13.5px; line-height: 1.55; color: #16201E; width: 100%; box-sizing: border-box; }
.cnc-bigqr-wait { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #556761; }
.cnc-bigqr-dot { width: 9px; height: 9px; border-radius: 50%; background: #1E6B47; animation: cncBigQrPulse 1.2s ease-in-out infinite; }
@keyframes cncBigQrPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.cnc-qr-zoom { position: fixed; inset: 0; z-index: 100000; background: rgba(255, 255, 255, 0.98); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; cursor: zoom-out; }
.cnc-qr-zoom img { width: min(82vmin, 760px); height: auto; image-rendering: pixelated; }
.cnc-qr-zoom-hint { font-size: 15px; color: #2E3A37; font-weight: 800; }
.cnc-qr-zoom-close { font-size: 12.5px; color: #556761; }


/* ================================================================
   Language switcher (lang.js) -- har page ke header me, flag icons
   Theme: Warm Editorial Luxury (#C4D2C9 border, terracotta, paper)
   ================================================================ */
.lang-switch { position: relative; display: inline-flex; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #FFFFFF; color: #16201E; cursor: pointer;
  border: 2px solid #C4D2C9; border-radius: 999px; padding: 5px 12px 5px 8px;
  font: 700 12.5px/1 'DM Sans', 'Manrope', sans-serif;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.lang-btn:hover { border-color: #9C4B30; box-shadow: 0 3px 10px rgba(156, 75, 48, 0.15); }
.lang-flag { display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(22, 32, 30, 0.15); }
.lang-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 10000;
  width: 230px; max-height: 340px; overflow-y: auto;
  background: #FBF8F2; border: 2.5px solid #C4D2C9; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(22, 32, 30, 0.22); padding: 6px; display: none;
}
.lang-switch.open .lang-list { display: block; }
.lang-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; border: none; border-radius: 9px;
  padding: 7px 10px; cursor: pointer; text-align: left;
  font: 600 13px/1.2 'DM Sans', sans-serif; color: #16201E;
}
.lang-item:hover { background: #F0F5F2; }
.lang-item.on { background: #E4F2EB; color: #1E6B47; font-weight: 800; }
.lang-item .lang-flag { flex-shrink: 0; }
[dir="rtl"] .lang-list { right: auto; left: 0; }

/* 2026-10-01 19:07 (user): Pay Manually / Need Help -> Send Message (call-back request) */
.cnc-support-msg { margin-top: 4px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid #E1DACD; background: #FFFFFF; display: flex; flex-direction: column; gap: 9px; }
.cnc-support-msg-head strong { display: block; font-size: 15px; color: #16201E; }
.cnc-support-msg-head span { font-size: 12.5px; color: #5B6663; }
.cnc-support-msg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cnc-support-msg textarea { resize: vertical; min-height: 54px; font-family: inherit; }
.cnc-support-msg-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cnc-support-msg-foot .cnc-btn-primary { width: auto; padding-left: 22px; padding-right: 22px; }
.cnc-support-msg-done { display: flex; align-items: center; gap: 12px; color: #1E6B47; }
.cnc-support-msg-done strong { display: block; font-size: 15px; }
.cnc-support-msg-done span { font-size: 13px; color: #385949; }
@media (max-width: 560px) { .cnc-support-msg-row { grid-template-columns: 1fr; } }

/* 2026-10-05 (user): "aise hi combined chart banao, old wala hatao, trial alag se" + "simple karo, easy to understand" --
   the studio's Plans popup: one table (Starter / Pro / Premium side by side) + the Trial on its own strip above it.
   Rows and values: desktop app -> Catalog & prices -> Plans chart (account.js planChart / trialStrip). */
.cnc-trial-strip { display: flex; align-items: center; gap: 12px; background: #FBF4EE; border: 1.5px dashed #D9A88F; border-radius: 12px; padding: 10px 14px; }
.cnc-ts-icon { width: 34px; height: 34px; border-radius: 10px; background: #FFFFFF; display: grid; place-items: center; flex: none; }
.cnc-ts-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cnc-ts-txt strong { font-size: 13px; font-weight: 800; color: #101716; }
.cnc-ts-txt span { font-size: 11.5px; color: #556761; line-height: 1.35; }
.cnc-trial-strip .cnc-btn-plan { width: auto; flex: none; padding: 9px 16px; }
.cnc-ts-left { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 800; color: #1E6B47; background: #E4F2EB; padding: 4px 8px; border-radius: 8px; flex: none; }
.cnc-pc-wrap { border: 1.5px solid #D8E0DB; border-radius: 14px; background: #FFFFFF; overflow: hidden; }
.cnc-pc { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; color: #2E3A37; }
.cnc-pc th, .cnc-pc td { padding: 9px 10px; text-align: center; vertical-align: middle; border-bottom: 1px solid #EEF1EE; line-height: 1.3; overflow-wrap: anywhere; }
.cnc-pc .cnc-pc-corner, .cnc-pc tbody th, .cnc-pc tfoot th { width: 31%; }
.cnc-pc tbody th { text-align: left; font-weight: 600; color: #3A4744; }
.cnc-pc tbody tr:nth-child(even) th, .cnc-pc tbody tr:nth-child(even) td { background: #FAFBF9; }
.cnc-pc td.featured, .cnc-pc th.featured, .cnc-pc tbody tr:nth-child(even) td.featured { background: #FFF7F1; }
.cnc-pc thead th { position: relative; padding-top: 22px; vertical-align: bottom; border-bottom: 1.5px solid #D8E0DB; }
.cnc-pc thead th.featured { box-shadow: inset 0 3px 0 #9C4B30; }
.cnc-pc thead th.current { box-shadow: inset 0 3px 0 #1E6B47; }
.cnc-pc-tag { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono, monospace); font-size: 8.5px; font-weight: 800; letter-spacing: .05em; color: #FFFFFF; background: #9C4B30; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.cnc-pc-tag.cur { background: #1E6B47; }
.cnc-pc-name { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13.5px; font-weight: 800; color: #101716; }
.cnc-pc-name svg { flex: none; }
.cnc-pc-price { margin-top: 4px; font-size: 11px; font-weight: 600; color: #6E7A77; }
.cnc-pc-price b { font-size: 19px; font-weight: 800; color: #101716; }
.cnc-pc-price s { font-size: 11.5px; color: #A3ACA8; margin-right: 4px; }
.cnc-pc .cnc-save { display: inline-block; margin-top: 4px; font-style: normal; font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: #FFFFFF; background: #1E6B47; padding: 2px 6px; border-radius: 6px; }
.cnc-pc td.yes { color: #1E6B47; }
.cnc-pc td.no { color: #C9A9A0; }
.cnc-pc td svg { display: inline-block; vertical-align: middle; }
.cnc-pc tfoot td, .cnc-pc tfoot th { border-bottom: none; padding: 12px 8px; }
.cnc-pc tfoot .cnc-btn-plan { padding: 9px 6px; }
@media (max-width: 600px) {
    .cnc-pc { font-size: 11px; }
    .cnc-pc th, .cnc-pc td { padding: 7px 4px; }
    .cnc-pc .cnc-pc-corner, .cnc-pc tbody th, .cnc-pc tfoot th { width: 29%; }
    .cnc-pc tbody th { padding-left: 8px; }
    .cnc-pc-name { flex-direction: column; gap: 2px; font-size: 11.5px; }
    .cnc-pc-price b { font-size: 14px; }
    .cnc-pc-price span { display: block; }
    .cnc-pc tfoot .cnc-btn-plan { font-size: 10.5px; padding: 8px 3px; }
    .cnc-trial-strip { flex-wrap: wrap; }
    .cnc-trial-strip .cnc-btn-plan { width: 100%; }
}

/* 2026-10-05 16:44 (user): the same plans chart on the home page (/home #homePlans) -- a little bigger there */
.home-plans { display: flex; flex-direction: column; gap: 14px; }
.home-plans .cnc-pc { font-size: 14px; }
.home-plans .cnc-pc th, .home-plans .cnc-pc td { padding: 11px 12px; }
.home-plans .cnc-pc thead th { padding-top: 26px; }
.home-plans .cnc-pc-name { font-size: 15.5px; }
.home-plans .cnc-pc-price b { font-size: 24px; }
.home-plans .cnc-ts-txt strong { font-size: 14.5px; }
.home-plans .cnc-ts-txt span { font-size: 13px; }
.home-plans-wait { text-align: center; color: #6E7A77; font-size: 13px; padding: 30px 0; }
@media (max-width: 600px) {
    .home-plans .cnc-pc { font-size: 11px; }
    .home-plans .cnc-pc th, .home-plans .cnc-pc td { padding: 7px 4px; }
    .home-plans .cnc-pc thead th { padding-top: 22px; }
    .home-plans .cnc-pc-name { font-size: 11.5px; }
    .home-plans .cnc-pc-price b { font-size: 15px; }
}

/* 2026-10-06 (owner): account-only pages -- the page stays visible (blurred, nothing to click) behind the Register / Log In box */
html.cnc-gated body > *:not(.cnc-modal-backdrop):not(.cnc-consent) { filter: blur(3px); pointer-events: none; user-select: none; }
.cnc-modal-backdrop.locked .cnc-modal-close { display: none; }
.cnc-gate-note { display: flex; gap: 10px; align-items: flex-start; background: #FFF6EC; border: 1.5px solid #E7C9A6; color: #5B3A1E;
    border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; }
.cnc-gate-note svg { flex-shrink: 0; color: #9C4B30; margin-top: 1px; }
.cnc-gate-note a { color: #9C4B30; font-weight: 700; white-space: nowrap; }

/* 2026-10-06 15:37 (owner): Trial Pack (one-time, CNC Trial accounts) -- under the trial strip / in Trial Completed */
.cnc-trialpack { display: flex; align-items: center; gap: 14px; background: #EEF4F0; border: 1.5px solid #385949; border-radius: 12px; padding: 12px 14px; }
.cnc-trialpack .cnc-tp-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; color: #000; font-size: 13px; line-height: 1.45; }
.cnc-trialpack .cnc-tp-txt strong { font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.cnc-trialpack .cnc-tp-txt em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #fff; background: #385949; border-radius: 999px; padding: 2px 8px; }
.cnc-trialpack .cnc-tp-price { font-size: 22px; font-weight: 800; color: #000; white-space: nowrap; }
.cnc-trialpack .cnc-btn-plan { width: auto; flex: none; padding: 10px 18px; }
@media (max-width: 640px) {
    .cnc-trialpack { flex-wrap: wrap; }
    .cnc-trialpack .cnc-btn-plan { width: 100%; }
}

/* 2026-10-06 16:14 (owner): CNC Trial = its own column in the plans chart (1 free design, then the Trial Pack) */
.cnc-pc.with-trial .cnc-pc-corner, .cnc-pc.with-trial tbody th, .cnc-pc.with-trial tfoot th { width: 24%; }
.cnc-pc td.pc-trial, .cnc-pc th.pc-trial, .cnc-pc tbody tr:nth-child(even) td.pc-trial { background: #F2F7F3; }
.cnc-pc thead th.pc-trial { box-shadow: inset 0 3px 0 #385949; }
.cnc-pc-tag.free { background: #385949; }
.cnc-pc-tp { margin-top: 5px; font-size: 11px; font-weight: 600; color: #000; background: #FFFFFF; border: 1px dashed #385949; border-radius: 8px; padding: 3px 6px; display: inline-block; }
.cnc-pc-tp b { color: #9C4B30; }
.cnc-pc-left { font-size: 10.5px; font-weight: 700; color: #1E6B47; margin-bottom: 4px; }
.cnc-btn-plan.trial { background: #385949; }
.cnc-btn-plan.trial:hover { background: #2C473A; }
@media (max-width: 640px) {
    .cnc-pc.with-trial .cnc-pc-corner, .cnc-pc.with-trial tbody th, .cnc-pc.with-trial tfoot th { width: 22%; }
    .cnc-pc-tp { font-size: 9.5px; padding: 2px 4px; }
}